Commit 55d865b6 authored by dindigala's avatar dindigala
Browse files

refactor: addressing review comments

parent 3596ab87
Pipeline #201700 passed with stages
in 5 minutes and 29 seconds
...@@ -16,14 +16,15 @@ ...@@ -16,14 +16,15 @@
@click="activeTab(annotationTab.key)" @click="activeTab(annotationTab.key)"
/> />
</q-tabs> </q-tabs>
<div <div
v-if="currentAnnotation.length" v-if="currentAnnotations.length"
class="q-ma-sm" class="q-ma-sm"
> >
<AnnotationToggles /> <AnnotationToggles />
<AnnotationList <AnnotationList
:hot-annotations="currentAnnotation" :hot-annotations="currentAnnotations"
:get-icon="getIcon" :get-icon="getIcon"
:status-check="statusCheck" :status-check="statusCheck"
:toggle="toggle" :toggle="toggle"
...@@ -92,22 +93,22 @@ export default { ...@@ -92,22 +93,22 @@ export default {
configuredTypes() { configuredTypes() {
return this.config.annotations.types.map((type) => type.contenttype); return this.config.annotations.types.map((type) => type.contenttype);
}, },
currentAnnotation() { currentAnnotations() {
const tabFields = this.annotationTabs.find((collection) => collection.key === this.currentTab); const contentType = this.annotationTabs.find((collection) => collection.key === this.currentTab);
return this.hotAnnotations.filter((annotationCollection) => tabFields.field.includes(annotationCollection.body['x-content-type'])); return this.hotAnnotations.filter((annotationCollection) => contentType.type.includes(annotationCollection.body['x-content-type']));
}, },
annotationTabs() { annotationTabs() {
return [ return [
{ {
collectionTitle: 'Editorial', collectionTitle: 'Editorial',
key: 'editorial', key: 'editorial',
field: ['Place', 'Person', 'Editorial Comment'], type: ['Place', 'Person', 'Editorial Comment'],
}, },
{ {
collectionTitle: 'Motifs', collectionTitle: 'Motifs',
key: 'motifs', key: 'motifs',
field: ['Motif'], type: ['Motif'],
}, },
]; ];
}, },
...@@ -122,6 +123,7 @@ export default { ...@@ -122,6 +123,7 @@ export default {
const interval = setInterval(() => { const interval = setInterval(() => {
if (this.annotationLoading) { if (this.annotationLoading) {
this.hotAnnotations = this.filterAnnotationTypes(); this.hotAnnotations = this.filterAnnotationTypes();
this.highlightActiveTabContent('editorial');
clearInterval(interval); clearInterval(interval);
} }
}, 500); }, 500);
...@@ -130,8 +132,26 @@ export default { ...@@ -130,8 +132,26 @@ export default {
}); });
}, },
methods: { methods: {
highlightActiveTabContent(key) {
const contentTypes = this.annotationTabs.find((content) => content.key === key).type;
this.annotations.forEach((annotation) => {
const id = this.stripAnnotationId(annotation.target.id);
const textElement = document.getElementById(id);
if (contentTypes.includes(annotation.body['x-content-type'])) {
textElement.classList.add('annotation');
textElement.classList.add('annotation-disabled');
} else {
textElement.classList.remove('annotation');
textElement.classList.add('annotation-disabled');
}
});
},
activeTab(key) { activeTab(key) {
this.currentTab = key; this.currentTab = key;
this.highlightActiveTabContent(key);
}, },
createSVG(name) { createSVG(name) {
const [path, viewBox] = Icons[name].split('|'); const [path, viewBox] = Icons[name].split('|');
...@@ -188,6 +208,8 @@ export default { ...@@ -188,6 +208,8 @@ export default {
try { try {
svg = this.createSVG(this.getIconName(contentType)); svg = this.createSVG(this.getIconName(contentType));
svg.setAttribute('id', `annotation-icon-${id}`);
} catch (err) { } catch (err) {
svg = null; svg = null;
} }
...@@ -195,9 +217,6 @@ export default { ...@@ -195,9 +217,6 @@ export default {
if (svg) { if (svg) {
textElement.prepend(svg); textElement.prepend(svg);
} }
textElement.classList.toggle('annotation');
textElement.classList.toggle('annotation-disabled');
}, },
statusCheck() { statusCheck() {
...@@ -240,6 +259,13 @@ export default { ...@@ -240,6 +259,13 @@ export default {
this.selectedAll = bool; this.selectedAll = bool;
this.selectedNone = !bool; this.selectedNone = !bool;
}, },
toggleAnnotationList(id) {
try {
document.getElementById(`list${id}`).classList.toggle('bg-grey-2');
} catch (err) {
// Error display
}
},
}, },
}; };
</script> </script>
......
...@@ -52,6 +52,7 @@ ...@@ -52,6 +52,7 @@
}, },
{ {
"contenttype": "Motif", "contenttype": "Motif",
"icon": "fasHighlighter",
"label": "Motifs" "label": "Motifs"
} }
] ]
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment