Commit 20da708a authored by dindigala's avatar dindigala
Browse files

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

feat: Implementing loading feature to annotation panel.

See merge request !200
parents d2e86af9 58dd2d85
Pipeline #214401 failed with stages
in 51 seconds
......@@ -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;
}
},
/**
......
<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);
......
......@@ -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() {
......
<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>
......@@ -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": [
......
......@@ -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: () => {},
......
Markdown is supported
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