Merge branch 'feature/loading-progress' into 'develop'

feat: Implementing loading feature to annotation panel.

See merge request !200

src/App.vue

@@ -21,13 +21,13 @@
     <q-page-container class="root">
       <router-view
         :annotations="annotations"
-        :annotation-loading="annotationLoading"
         :collection="collection"
         :config="config"
         :contenttypes="contentTypes"
         :contenturls="contentUrls"
         :fontsize="fontsize"
         :imageurl="imageurl"
+        :isloading="isLoading"
         :item="item"
         :labels="config.labels"
         :manifests="manifests"
@@ -54,7 +54,6 @@ export default {
   data() {
     return {
       annotations: [],
-      annotationLoading: false,
       collection: {},
       collectiontitle: '',
       config: {},
@@ -63,6 +62,7 @@ export default {
       fontsize: 16,
       imageurl: '',
       isCollection: false,
+      isLoading: false,
       item: {},
       itemurl: '',
       itemurls: [],
@@ -143,7 +143,7 @@ export default {
       */
     async getAnnotations(url) {
       this.annotations = [];
-      this.annotationLoading = false;
+      this.isLoading = false;
 
       try {
         const annotations = await this.request(url);
@@ -163,7 +163,7 @@ export default {
       } catch (err) {
         this.annotations = [];
       } finally {
-        this.annotationLoading = true;
+        this.isLoading = true;
       }
     },
     /**

src/components/annotations/annotations.vue

 <template>
-  <div class="item">
+  <div class="item relative-position">
     <q-tabs
       v-model="currentTab"
       active-color="$q.dark.isActive ? 'white' : 'accent'"
@@ -19,8 +19,12 @@
 
     <AnnotationToggles />
 
+    <Loading
+      v-if="!isloading || isProcessing"
+    />
+
     <AnnotationList
-      v-if="currentAnnotations.length"
+      v-else-if="currentAnnotations.length && isloading && !isProcessing"
       class="custom-font"
       :configured-annotations="currentAnnotations"
       :get-icon="getIcon"
@@ -29,7 +33,7 @@
     />
 
     <div
-      v-else
+      v-else-if="!currentAnnotations.length && isloading && !isProcessing"
       class="q-pa-sm"
     >
       <Notification
@@ -57,6 +61,7 @@ import AnnotationToggles from '@/components/annotations/toggles.vue';
 import AnnotationList from '@/components/annotations/list.vue';
 import AnnotationOptions from '@/components/annotations/options.vue';
 
+import Loading from '@/components/loading.vue';
 import Notification from '@/components/notification.vue';
 
 export default {
@@ -65,6 +70,7 @@ export default {
     AnnotationToggles,
     AnnotationList,
     AnnotationOptions,
+    Loading,
     Notification,
   },
   mixins: [Annotation],
@@ -73,7 +79,7 @@ export default {
       type: Array,
       default: () => [],
     },
-    annotationLoading: {
+    isloading: {
       type: Boolean,
       default: false,
     },
@@ -85,13 +91,14 @@ export default {
   data() {
     return {
       configuredAnnotations: [],
+      currentTab: '',
       ids: [],
+      isProcessing: false,
       messages: {
         none: 'noAnnotationMessage',
       },
       selectedAll: false,
       selectedNone: true,
-      currentTab: '',
     };
   },
   computed: {
@@ -139,14 +146,17 @@ export default {
     },
   },
   mounted() {
-    this.$root.$on('update-annotations', (content) => {
+    this.$root.$on('update-annotations', (content, isProcessing) => {
+      this.isProcessing = !!isProcessing;
+
       const parser = new DOMParser();
       const doc = parser.parseFromString(content, 'text/html');
 
       this.ids = [...doc.body.querySelectorAll('[id]')].map((el) => el.getAttribute('id'));
+      this.configuredAnnotations = [];
 
       const interval = setInterval(() => {
-        if (this.annotationLoading) {
+        if (this.isloading) {
           this.configuredAnnotations = this.filterAnnotationTypes();
 
           const firstTab = this.annotationTabs.find((x) => x.type.length)?.key || '';
@@ -155,7 +165,7 @@ export default {
           this.currentTab = firstTab;
           clearInterval(interval);
         }
-      }, 500);
+      }, 50);
     });
     this.$root.$on('panels-position', (newPanels) => {
       const annotationPanelHidden = newPanels.find((x) => x.panel_label === 'Annotations' && !x.show);

src/components/content.vue

@@ -121,6 +121,8 @@ export default {
       this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
     },
     async activeTab(url) {
+      this.$root.$emit('update-annotations', [], true);
+
       const data = await this.request(url, 'text');
 
       if (this.supportType) {
@@ -129,7 +131,7 @@ export default {
 
       this.content = data;
 
-      this.$root.$emit('update-annotations', data);
+      this.$root.$emit('update-annotations', data, false);
     },
   },
   async created() {

src/components/loading.vue

+<template>
+  <q-inner-loading
+    :showing="loading"
+  >
+    <q-spinner
+      size="3em"
+      color="primary"
+    />
+  </q-inner-loading>
+</template>
+
+<script>
+
+export default {
+  name: 'Loading',
+  props: {
+
+  },
+  data: () => ({
+    loading: true,
+  }),
+};
+</script>

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-			"entrypoint": "",
+			"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
       "annotations": {
         "show": true,
         "types": [

src/views/mainview.vue

@@ -85,10 +85,6 @@ export default {
       type: Array,
       default: () => [],
     },
-    annotationLoading: {
-      type: Boolean,
-      default: false,
-    },
     collection: {
       type: Object,
       default: () => {},
@@ -113,6 +109,10 @@ export default {
       type: String,
       default: () => '',
     },
+    isloading: {
+      type: Boolean,
+      default: false,
+    },
     item: {
       type: Object,
       default: () => {},