refactor: add VariantList component to manage variants

index.html

@@ -27,7 +27,152 @@
 <script type="module" src="/src/main.js"></script>
 <script>
   window.addEventListener('load', function () {
-    window.tido = new window.Tido();
+    window.tido = new window.Tido({
+      "collection": "http://localhost:8181/ahiqar/textapi/ahiqar/arabic-karshuni/collection.json",
+      "labels": {
+        "item": "Sheet",
+        "manifest": "Manuscript"
+      },
+      "colors": {
+        "forceMode": "light"
+      },
+      "panels": [
+        {
+          "label": "contents_and_metadata",
+          "views": [
+            {
+              "id": "tree",
+              "label": "contents",
+              "connector": {
+                "id": 1
+              }
+            },
+            {
+              "id": "metadata",
+              "label": "metadata",
+              "connector": {
+                "id": 2,
+                "options": {
+                  "collection": {
+                    "all": true
+                  },
+                  "manifest": {
+                    "all": true
+                  },
+                  "item": {
+                    "all": true
+                  }
+                }
+              }
+            }
+          ]
+        },
+        {
+          "label": "image",
+          "views": [
+            {
+              "id": "image",
+              "label": "Image",
+              "connector": {
+                "id": 3
+              }
+            }]
+        },
+        {
+          "label": "text",
+          "views": [
+            {
+              "id": "text1",
+              "label": "Transcription",
+              "default": true,
+              "connector": {
+                "id": 4,
+                "options": {
+                  "type": "transcription"
+                }
+              }
+            },
+            {
+              "id": "text2",
+              "label": "Transliteration",
+              "connector": {
+                "id": 4,
+                "options": {
+                  "type": "transliteration"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "label": "annotations",
+          "views": [
+            {
+              "id": "annotations1",
+              "label": "Editorial",
+              "connector": {
+                "id": 5,
+                "options": {
+                  "types": [
+                    {
+                      "name": "Person",
+                      "icon": "biPersonFill"
+                    },
+                    {
+                      "name": "Place",
+                      "icon": "biGeoAltFill"
+                    },
+                    {
+                      "name": "Editorial Comment",
+                      "icon": "biChatFill"
+                    },
+                    {
+                      "name": "Reference",
+                      "icon": "biBoxArrowUpRight"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "id": "annotations2",
+              "label": "Motif",
+              "connector": {
+                "id": 5,
+                "options": {
+                  "types": [
+                    {
+                      "name": "Motif",
+                      "icon": "biPenFill"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "id": "annotations3",
+              "label": "Variants",
+              "connector": {
+                "id": 5,
+                "options": {
+                  "types": [
+                    {
+                      "name": "Variant",
+                      "icon": "biPenFill"
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "translations": {
+        "en": {
+          "contents_and_metadata": "Contents & Metadata"
+        }
+      }
+    });
   });
   </script>
 </body>

src/components/annotations/AnnotationsList.vue

@@ -1,37 +1,24 @@
 <template>
   <div class="annotations-list t-overflow-auto">
     <div
-      v-for="annotation in configuredAnnotations"
+      v-for="annotation in annotations"
       :key="annotation.id"
     >
       <div
-        v-if="!isVariant(annotation)"
         class="t-flex t-items-center t-space-x-2 item"
         :class="[
           't-py-2 t-px-3 t-mb-1 t-rounded-md',
           { 'hover:t-bg-gray-200 dark:hover:t-bg-gray-600 t-cursor-pointer': !isText(annotation) && !isActive(annotation) },
           { 't-bg-gray-300 dark:t-bg-gray-600 active': isActive(annotation) }]"
         :data-annotation-id="annotation.id"
         @click="isText(annotation) ? ()=>{} : toggle(annotation)"
-      > 
+      >
         <AnnotationIcon
           v-if="!isText(annotation)"
           :name="getIconName(annotation.body['x-content-type'])"
         />
         <span v-html="annotation.body.value" />
       </div>
-
-      <div v-else>
-        <AnnotationVariantItem
-          :annotation="annotation"
-          :is-active="isActive"
-          :toggle="toggle"
-        />
-      </div>
-
-      <!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
-
-
     </div>
   </div>
 </template>
@@ -40,24 +27,24 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import AnnotationIcon from '@/components/annotations/AnnotationIcon.vue';
-import AnnotationVariantItem from '@/components/annotations/AnnotationVariantItem.vue'
+import {useAnnotationsStore} from "@/stores/annotations";
 
 interface AnnotationTypesMapping {
   [key: string]: string | 'annotation'
  }
 
 export interface Props {
-  activeAnnotation: ActiveAnnotation
-  configuredAnnotations: Annotation[],
-  toggle: (annotation: Annotation) => void,
+  annotations: Annotation[],
   types: {name: string, icon: string, annotationType: string}[]
 }
 
+const annotationStore = useAnnotationsStore();
+
 const props = withDefaults(defineProps<Props>(), {
-  activeAnnotation: () => <ActiveAnnotation>{},
-  configuredAnnotations: () => <Annotation[]> [],
-  toggle: () => null,
-})
+  annotations: () => <Annotation[]> [],
+});
+
+const activeAnnotations = computed<ActiveAnnotation>(() => annotationStore.activeAnnotations);
 
 const annotationTypesMapping = computed<AnnotationTypesMapping>(() => (
   // it returns an object with a varying number of 'key', 'value' pairs
@@ -68,7 +55,7 @@ const annotationTypesMapping = computed<AnnotationTypesMapping>(() => (
 ));
 
 function isActive(annotation: Annotation): boolean {
-  return !!props.activeAnnotation[annotation.id];
+  return !!activeAnnotations.value[annotation.id];
 }
 function isText(annotation: Annotation): boolean {
   return annotationTypesMapping.value[annotation.body['x-content-type']] === 'text';
@@ -78,20 +65,20 @@ function getIconName(typeName: string): string {
   return props.types.find(({ name }) => name === typeName)?.icon || 'pencil';
 }
 
-function isVariant(annotation) {
-  return annotation.body['x-content-type'] === 'Variant';
+function addAnnotation(id: string) {
+  annotationStore.addActiveAnnotation(id);
 }
 
-function isVariantsTabOpened() {
-  return props.configuredAnnotations[0].body['x-content-type'] === 'Variant';
+function removeAnnotation(id: string) {
+  annotationStore.removeActiveAnnotation(id);
+}
+function toggle({ id }) {
+  const exists = !!activeAnnotations.value[id];
+  if (exists) {
+    removeAnnotation(id);
+  } else {
+    addAnnotation(id);
+  }
 }
 
 </script>
-
-
-
-<style lang="scss" scoped>
-
-
-
-</style>

src/components/annotations/AnnotationsView.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="annotations-view t-px-4 t-pt-4">
-    <AnnotationsList
-      v-if="filteredAnnotations.length"
-      class="custom-font"
-      :active-annotation="activeAnnotations"
-      :config="config"
-      :configured-annotations="filteredAnnotations"
-      :toggle="toggle"
-      :types="types"
-    />
+    <template v-if="filteredAnnotations.length">
+      <VariantsList
+        v-if="hasVariants()"
+        class="custom-font"
+        :annotations="filteredAnnotations"
+        :types="types"
+      />
+      <AnnotationsList
+        v-else
+        class="custom-font"
+        :annotations="filteredAnnotations"
+        :types="types"
+      />
+    </template>
     <MessageBox
       v-else
       :message="$t(message)"
@@ -30,6 +35,7 @@ import * as AnnotationUtils from '@/utils/annotations';
 import { useConfigStore } from '@/stores/config';
 import { useAnnotationsStore } from '@/stores/annotations';
 import { useContentsStore } from '@/stores/contents';
+import VariantsList from "@/components/annotations/variants/VariantsList.vue";
 
 const configStore = useConfigStore();
 const annotationStore = useAnnotationsStore();
@@ -44,7 +50,6 @@ const message = ref('no_annotations_in_view');
 
 const config = computed(() => configStore.config);
 const annotations = computed<Annotation[]>(() => annotationStore.annotations);
-const activeAnnotations = computed<ActiveAnnotation>(() => annotationStore.activeAnnotations);
 const filteredAnnotations = computed<Annotation[]>(() => annotationStore.filteredAnnotations);
 const activeContentUrl = computed<string>(() => contentStore.activeContentUrl);
 const updateTextHighlighting = computed(() =>
@@ -65,23 +70,6 @@ watch(
   { immediate: true },
 );
 
-function addAnnotation(id: string) {
-  annotationStore.addActiveAnnotation(id);
-}
-
-function removeAnnotation(id: string) {
-  annotationStore.removeActiveAnnotation(id);
-}
-
-function toggle({ id }) {
-  const exists = !!activeAnnotations.value[id];
-  if (exists) {
-    removeAnnotation(id);
-  } else {
-    addAnnotation(id);
-  }
-}
-
 function highlightTargetsLevel0() {
   const mergedSelector = filteredAnnotations.value
     .reduce((acc, cur) => {
@@ -97,4 +85,9 @@ function highlightTargetsLevel0() {
     AnnotationUtils.highlightTargets(mergedSelector, { level: 0 });
   }
 }
+
+function hasVariants() {
+  return props.types.findIndex(type => type.name === 'Variant') > -1;
+}
+
 </script>