feat: move annotation data handling to component

src/App.vue

@@ -125,50 +125,10 @@ export default {
 
       return data;
     },
-    /**
-    * filter the annotation IDs and the matching text part of the current item
-    *
-    * caller: *getAnnotations()*
-    *
-    * @param array annotations
-    *
-    * @return array identifiers
-    */
-    filterAnnotations(annotations) {
-      const identifiers = [];
-
-      annotations.forEach((annotation) => {
-        const id = this.getAnnotationId(annotation);
-
-        identifiers.push({
-          id,
-          contenttype: annotation.body['x-content-type'],
-          description: annotation.body.value,
-          selected: this.config.annotations.show,
-        });
-      });
-
-      return identifiers;
-    },
 
-    /**
-    * get the annotation id/s of the current item
-    *
-    * caller: *filterAnnotations()*
-    *
-    * @param object annotation
-    *
-    * @return string
-    */
-    getAnnotationId(annotation) {
-      const split = annotation.target.id.split('/');
-
-      return split[split.length - 1];
-    },
     /**
       * get annotations of the current item
       * caller: *getItemData()*
-      *
       * @param string url
       */
     getAnnotations(url) {
@@ -178,7 +138,7 @@ export default {
             this.request(annotations.annotationCollection.first)
               .then((current) => {
                 if (current.annotationPage.items.length) {
-                  this.annotations = this.filterAnnotations(current.annotationPage.items);
+                  this.annotations = current.annotationPage.items;
                 } else this.annotations = [];
               });
           }

src/components/annotations.vue

@@ -3,20 +3,18 @@
     v-if="annotations.length"
     class="q-ma-sm annotations"
   >
-    <q-list
-      class="full-width"
-    >
+    <q-list>
       <q-item
-        v-for="annotation in annotations"
+        v-for="annotation in filterAnnotations(annotations)"
         :key="annotation.id"
         v-ripple
         clickable
       >
         <q-item-section avatar>
-          <q-icon :name="getIcon(annotation.contenttype)" />
+          <q-icon :name="getIcon(annotation.body['x-content-type'])" />
         </q-item-section>
         <q-item-section>
-          {{ annotation.description }}
+          {{ annotation.body.value }}
         </q-item-section>
       </q-item>
     </q-list>
@@ -42,17 +40,50 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      test: [],
+    };
   },
   created() {
     this.icons = Icons;
   },
   mounted() {},
   methods: {
+    availableTypes() {
+      const array = [];
+      this.config.annotations.types.forEach((item) => array.push(item.contenttype));
+      return array;
+    },
     getIcon(contenttype) {
       const result = this.config.annotations.types.filter((item) => item.contenttype === contenttype);
       return Icons.[result[0].icon];
     },
+
+    /**
+    * filter the annotation for configured ones
+    * TODO: move to computed?
+    * @param array annotations
+    * @return array annotations without unconfigured ones.
+    */
+    filterAnnotations(annotations) {
+      const arr = [];
+      annotations.forEach((annotation) => {
+        if (this.availableTypes().filter((item) => item === annotation.body['x-content-type']).length > 0) {
+          arr.push(annotation);
+        }
+      });
+      return arr;
+    },
+
+    /**
+    * get the annotation id/s of the current item
+    * @param object annotation
+    * @return string
+    */
+    getAnnotationId(annotation) {
+      const split = annotation.target.id.split('/');
+      return split[split.length - 1];
+    },
   },
 };
 </script>