Commit 0b35918b authored by dindigala's avatar dindigala
Browse files

fix: refactored the logic of updating the annotations according to text types

parent 4cdaefce
Pipeline #200015 passed with stages
in 4 minutes and 5 seconds
......@@ -20,6 +20,7 @@
<q-page-container class="root">
<router-view
:annotations="annotations"
:annotationloading="annotationloading"
:collection="collection"
:config="config"
:contenttypes="contentTypes"
......@@ -51,6 +52,7 @@ export default {
data() {
return {
annotations: [],
annotationloading: false,
collection: {},
collectiontitle: '',
config: {},
......@@ -132,6 +134,9 @@ export default {
* @param string url
*/
async getAnnotations(url) {
this.annotations = [];
this.annotationloading = false;
try {
const annotations = await this.request(url);
......@@ -150,6 +155,8 @@ export default {
} catch (err) {
this.annotations = [];
this.$q.notify({ message: 'No annotations available' });
} finally {
this.annotationloading = true;
}
},
/**
......
......@@ -5,7 +5,7 @@
>
<q-list>
<q-item
v-for="annotation in filterAnnotationTypes(annotations)"
v-for="annotation in types"
:id="'list' + stripAnnotationId(annotation.target.id)"
:key="stripAnnotationId(annotation.id)"
clickable
......@@ -52,6 +52,10 @@ export default {
type: Array,
default: () => [],
},
annotationloading: {
type: Boolean,
default: false,
},
config: {
type: Object,
default: () => {},
......@@ -63,26 +67,31 @@ export default {
none: 'noAnnotationMessage',
},
ids: [],
types: [],
};
},
computed: {
configuredTypes() {
const types = [];
this.config.annotations.types.forEach((type) => types.push(type.contenttype));
return types;
return this.config.annotations.types.map((type) => type.contenttype);
},
},
created() {
this.icons = Icons;
},
mounted() {
this.$root.$on('update-content', async () => {
await new Promise((resolve) => setTimeout(resolve, 1000));
this.$root.$on('update-annotations', (content) => {
const parser = new DOMParser();
const doc = parser.parseFromString(content, 'text/html');
const ids = [...document.querySelectorAll('.ab')].map((x) => x.id);
this.ids = [...doc.body.querySelectorAll('[id]')].map((el) => el.getAttribute('id'));
this.ids = ids;
const interval = setInterval(() => {
if (this.annotationloading) {
this.types = this.filterAnnotationTypes();
clearInterval(interval);
}
}, 500);
});
},
methods: {
......@@ -110,19 +119,17 @@ export default {
* @return array of annotations excluding unconfigured ones
*/
filterAnnotationTypes() {
const types = [];
this.annotations.forEach((annotation) => {
let id = annotation.target.id.split('/');
return this.annotations.filter((annotation) => {
const annotationIds = this.ids.includes(this.stripAnnotationId(annotation.target.id));
id = id[id.length - 1];
if (this.configuredTypes.filter((type) => type === annotation.body['x-content-type']).length > 0 && this.ids.some((x) => id.startsWith(x))) {
types.push(annotation);
// function is triggered on list rendering, so we use it as init call to set up the text
if (this.configuredTypes.find((type) => type === annotation.body['x-content-type']) && annotationIds) {
this.setText(annotation);
return true;
}
return false;
});
return types;
},
getIcon(contentType) {
......
......@@ -112,15 +112,16 @@ export default {
fontsize() {
this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
},
activeTab(url) {
this.request(url, 'text').then((data) => {
if (this.supportType) {
this.getSupport(this.manifests[0].support);
}
this.content = data;
this.$root.$emit('update-content');
});
async activeTab(url) {
const data = await this.request(url, 'text');
if (this.supportType) {
this.getSupport(this.manifests[0].support);
}
this.content = data;
this.$root.$emit('update-annotations', data);
},
},
async created() {
......@@ -175,20 +176,20 @@ export default {
</script>
<style lang="scss" scoped>
.rtl {
direction: rtl;
}
.default-cursor {
cursor: default !important;
}
.item-content {
display: flex;
flex: 1;
flex-direction: column;
height: 100vh;
overflow: auto;
padding: 8px;
}
.rtl {
direction: rtl;
}
.default-cursor {
cursor: default !important;
}
.item-content {
display: flex;
flex: 1;
flex-direction: column;
height: 100vh;
overflow: auto;
padding: 8px;
}
</style>
......@@ -31,7 +31,7 @@
-->
<script id="tido-config" type="application/json">
{
"entrypoint": "",
"entrypoint": "https://subugoe.pages.gwdg.de/emo/backend/sampledata/collection.json",
"annotations": {
"show": true,
"types": [
......
......@@ -85,6 +85,10 @@ export default {
type: Array,
default: () => [],
},
annotationloading: {
type: Boolean,
default: false,
},
collection: {
type: Object,
default: () => {},
......
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