Commit a44038d4 authored by schneider210's avatar schneider210
Browse files

refactor: improvement: split the template into it's main parts (annotationlist)

introduce a new component "annotationlist" to keep the markup leaner and maintainable
parent cdf6950b
......@@ -3,41 +3,23 @@
v-if="annotations.length"
class="q-ma-sm annotations"
>
<q-list>
<q-item
v-for="annotation in hotAnnotations"
:id="'list' + annotation.strippedId"
:key="annotation.strippedId"
clickable
padding="xs"
class="q-pa-sm q-pl-xs q-mb-xs"
@click="toggle(annotation); statusCheck();"
>
<q-item-section
avatar
class="q-mr-none"
>
<q-icon
:name="getIcon(annotation.body['x-content-type'])"
size="16px"
/>
</q-item-section>
<q-item-section>
<AnnotationUrls :content="annotation.body.value" />
</q-item-section>
</q-item>
</q-list>
<AnnotationList
:hot-annotations="hotAnnotations"
:get-icon="getIcon"
:status-check="statusCheck"
:toggle="toggle"
/>
<q-page-sticky
position="bottom-right"
:offset="[18, 18]"
position="bottom-right"
>
<q-fab
color="primary"
direction="up"
vertical-actions-align="right"
:icon="icons.fasCog"
:active-icon="icons.fasChevronDown"
:icon="icons.fasCog"
>
<q-fab-action
color="primary"
......@@ -69,13 +51,13 @@
<script>
import * as Icons from '@quasar/extras/fontawesome-v5';
import AnnotationUrls from '@/components/urls.vue';
import AnnotationList from '@/components/annotationlist.vue';
import Notification from '@/components/notification.vue';
export default {
name: 'Annotations',
components: {
AnnotationUrls,
AnnotationList,
Notification,
},
props: {
......@@ -94,11 +76,11 @@ export default {
},
data() {
return {
hotAnnotations: [],
ids: [],
messages: {
none: 'noAnnotationMessage',
},
ids: [],
hotAnnotations: [],
selectedAll: undefined,
selectedNone: undefined,
};
......@@ -152,16 +134,16 @@ export default {
*/
filterAnnotationTypes() {
return this.annotations.filter((annotation) => {
annotation.strippedId = this.stripAnnotationId(annotation.target.id);
const targetId = annotation.strippedId;
const annotationIds = this.ids.includes(targetId);
this.$set(annotation, 'status', this.config.annotations.show);
annotation.strippedId = this.stripAnnotationId(annotation.target.id);
const annotationIds = this.ids.includes(annotation.strippedId);
if (this.configuredTypes.find((type) => type === annotation.body['x-content-type']) && annotationIds) {
this.setText(annotation);
return true;
}
return false;
});
},
......@@ -189,6 +171,7 @@ export default {
statusCheck() {
const num = this.hotAnnotations.length;
const active = this.hotAnnotations.filter((annotation) => annotation.status === true).length;
if (num === active) {
this.selectedAll = false;
this.selectedNone = true;
......@@ -212,8 +195,10 @@ export default {
},
toggle(annotation) {
const id = annotation.strippedId;
annotation.status = !annotation.status;
const id = annotation.strippedId;
document.getElementById(id).classList.toggle('annotation-disabled');
document.getElementById(`list${id}`).classList.toggle('bg-grey-2');
},
......
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