feat: add flexible order of entries in metadata panel (#551)

* feat: add flexible order of metadata items * style: remove unnecessary Metadata ending and unnecessary files * style: restore semicolons for several files * style: restore the semicolons for some other files * refactor: remove 'components' registration --------- Co-authored-by: orlinmalkja <[email protected]>
subugoe · Jan 16, 2025 · 527c8d5 · 527c8d5
1 parent dea5ea6
commit 527c8d5
Show file tree

Hide file tree

Showing 8 changed files with 183 additions and 68 deletions.
diff --git a/examples/ahiqar-arabic-karshuni-local.html b/examples/ahiqar-arabic-karshuni-local.html
@@ -72,6 +72,26 @@
                         all: true,
                       },
                       citationKey: "Citation",
+                      documentsOrder: ["manifest", "collection", "item"],
+                      collectionOrder: [
+                        "title",
+                        "collector",
+                        "description",
+                      ],
+                      manifestOrder: [
+                        "Label",
+                        "License",
+                        "Date of creation",
+                        "Place of origin",
+                        "Current location",
+                        "TEI document",
+                      ],
+                      itemOrder: [
+                        "label",
+                        "language",
+                        "image_license",
+                        "image_notes",
+                      ],
                     },
                   },
                 },

diff --git a/src/components/metadata/CollectionMetadata.vue b/src/components/metadata/CollectionMetadata.vue
@@ -1,30 +1,26 @@
 <template>
-  <div
-    v-if="metadata.length > 0"
-    class="collection-metadata t-mb-7"
-  >
+  <div v-if="metadata.length > 0" class="collection-metadata t-mb-7">
     <h3 class="t-text-xl t-font-semibold t-mb-2">
       {{ $t('collection') }}
     </h3>
-    <div
-      v-for="(meta, idx) in metadata"
-      :key="idx"
-      class="t-mb-4"
-    >
+    <div v-for="(meta, idx) in metadata" :key="idx" class="t-mb-4">
       <MetadataItem :item="meta" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-
 import { computed } from 'vue';
 import { useContentsStore } from '@/stores/contents';
+import { useConfigStore } from '@/stores/config';
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
+import { orderMetadataItems } from '@/utils/metadata';
+
+import { getMetadataView } from '@/utils/metadata';
 
 const contentStore = useContentsStore();
 
-function getCollectorsName(collection: Collection) : string | null {
+function getCollectorsName(collection: Collection): string | null {
   if (!collection) return null;
   if (collection.collector.length === 0) return null;
   if (collection.collector.length === 1) return collection.collector[0].name;
@@ -46,15 +42,36 @@ const metadata = computed(() => {
   const { description } = collection.value;
   const collectionTitle: Title[] = collection.value.title;
 
-  return [
+  const defaultMetadata = [
     ...collectionTitle
       .filter((c) => c)
       .map((title) => ({
         key: mappings[title.type] || 'title',
         value: title.title,
       })),
     ...(collectorsName ? [{ key: 'collector', value: collectorsName }] : []),
-    ...(description ? [{ key: 'description', value: description }] : []),
+    ...(description ? [{ key: 'description', value: description }] : []), 
   ];
-});
+
+  let collectionOrder = getMetadataView(useConfigStore().config.panels)
+    .connector.options.collectionOrder
+
+  let collectionOrderLower
+  if (collectionOrder?.length > 0) {
+    collectionOrderLower = collectionOrder.map((word) =>
+      word.toLowerCase()
+    )
+  }
+
+  let orderedMetadata = []
+  if (collectionOrderLower?.length > 0) {
+    orderedMetadata = orderMetadataItems(
+      collectionOrderLower,
+      defaultMetadata
+    )
+    return orderedMetadata
+  }
+
+  return defaultMetadata
+})
 </script>
diff --git a/src/components/metadata/ItemMetadata.vue b/src/components/metadata/ItemMetadata.vue
@@ -3,23 +3,20 @@
     <h3 class="t-text-xl t-font-semibold t-mb-2">
       {{ $t(labels.item) }} {{ number }} / {{ total }}
     </h3>
-    <div
-      v-for="(meta, idx) in metadata"
-      :key="idx"
-      class="t-mb-4"
-    >
+    <div v-for="(meta, idx) in metadata" :key="idx" class="t-mb-4">
       <MetadataItem :item="meta" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-
 import { computed } from 'vue';
 import { useConfigStore } from '@/stores/config';
 import { useContentsStore } from '@/stores/contents';
+import { orderMetadataItems } from '@/utils/metadata';
 
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
+import { getMetadataView } from '@/utils/metadata';
 
 const configStore = useConfigStore();
 const contentStore = useContentsStore();
@@ -29,14 +26,29 @@ const itemUrl = computed<string>(() => contentStore.itemUrl);
 const manifest = computed<Manifest>(() => contentStore.manifest);
 const itemsCount = computed<number>(() => manifest.value?.sequence.length);
 const labels = computed<Labels>(() => configStore.config.labels);
-const number = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1 : 1));
+const number = computed<number>(() =>
+  manifest.value
+    ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1
+    : 1
+);
 const total = computed<number>(() => itemsCount.value ?? 1);
-const metadata = computed(() => (
-  [
+
+const metadata = computed(() => {
+  let itemOrder = getMetadataView(useConfigStore().config.panels)
+    .connector.options.itemOrder
+
+  let defaultMetadata = [
     { key: 'label', value: item.value.n },
     { key: 'language', value: item.value?.lang?.join(',') },
     { key: 'image_license', value: item.value?.image?.license?.id },
     { key: 'image_notes', value: item.value?.image?.license?.notes },
   ].filter((i) => i.value)
-));
+
+  let orderedMetadata = []
+  if (itemOrder?.length > 0) {
+    orderedMetadata = orderMetadataItems(itemOrder, defaultMetadata)
+    return orderedMetadata
+  }
+  return defaultMetadata
+});
 </script>
diff --git a/src/components/metadata/ManifestMetadata.vue b/src/components/metadata/ManifestMetadata.vue
@@ -1,16 +1,9 @@
 <template>
-  <div
-    v-if="manifestHasItems"
-    class="manifest-metadata t-mb-7"
-  >
+  <div v-if="manifestHasItems" class="manifest-metadata t-mb-7">
     <h3 class="t-text-xl t-font-semibold t-mb-2">
       {{ $t(labels.manifest) }} {{ number }} / {{ total }}
     </h3>
-    <div
-      v-for="(meta, idx) in metadata"
-      :key="idx"
-      class="t-mb-4"
-    >
+    <div v-for="(meta, idx) in metadata" :key="idx" class="t-mb-4">
       <MetadataItem :item="meta" />
     </div>
     <Actor :data="actor" />
@@ -21,6 +14,9 @@
 import { computed } from 'vue';
 import { useConfigStore } from '@/stores/config';
 import { useContentsStore } from '@/stores/contents';
+import { orderMetadataItems } from '@/utils/metadata';
+
+import { getMetadataView } from '@/utils/metadata';
 
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 import Actor from '@/components/metadata/Actor.vue';
@@ -34,16 +30,32 @@ const manifestHasItems = computed<boolean>(() => manifest.value?.sequence.length
 const number = computed<number>(() => (manifests.value !== null ? manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1 : 1));
 const total = computed<number>(() => (manifests.value !== null ? manifests.value.length : 1));
 const labels = computed<Labels>(() => configStore.config.labels);
+
 const metadata = computed(() => {
   if (!manifest.value) return [];
-  return [
-    { key: 'label', value: manifest.value.label },
+
+  let manifestOrder = getMetadataView(useConfigStore().config.panels)
+    .connector.options.manifestOrder;
+
+  let defaultMetadata = [
+    { key: 'Label', value: manifest.value.label },
     ...(manifest.value.license || []).map((license) => ({
       key: 'License',
       value: license.id,
     })),
-    ...(manifest.value.metadata || []),
+    ...(manifest.value.metadata || []).map((metaItem) => ({
+      key: metaItem.key,
+      value: metaItem.value,
+    })),
   ];
+
+  let orderedMetadata = []
+  if (manifestOrder?.length > 0) {
+    orderedMetadata = orderMetadataItems(manifestOrder, defaultMetadata)
+    return orderedMetadata;
+  }
+
+  return defaultMetadata;
 });
 const actor = computed<Actor[] | undefined>(() => manifest.value?.actor);
 </script>
diff --git a/src/components/metadata/MetadataItem.vue b/src/components/metadata/MetadataItem.vue
@@ -4,7 +4,7 @@
       v-if="!isLink()"
       class="t-font-semibold t-text-sm t-text-gray-400"
     >
-      {{ $t(label) }}
+     {{ $t(label) }}
     </h4>
     <MetadataLink
       v-if="isLink()"
@@ -29,15 +29,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import MetadataLink from "@/components/metadata/MetadataLink.vue";
-import MetadataValue from "@/components/metadata/MetadataValue.vue";
-import CopyCitation from "@/components/metadata/CopyCitation.vue";
-import { useConfigStore } from "@/stores/config";
+import { computed } from 'vue';
+import MetadataLink from '@/components/metadata/MetadataLink.vue';
+import MetadataValue from '@/components/metadata/MetadataValue.vue';
+import CopyCitation from '@/components/metadata/CopyCitation.vue';
+import { useConfigStore } from '@/stores/config';
 
+import { getMetadataView } from '@/utils/metadata';
 const props = defineProps<{
   item: Metadata;
-}>();
+}>()
 
 const label = computed<string>(() => props.item?.key || "other");
 const childItems = computed<Metadata>(() => props.item?.metadata || []);
@@ -47,27 +48,11 @@ function isLink(): boolean {
   const regex =
     /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
   const matches =
-    typeof props.item?.key === "string" ? props.item?.key?.match(regex) : null;
+    typeof props.item?.key === 'string' ? props.item?.key?.match(regex) : null;
 
   return matches !== null;
 }
 
-function getMetadataView(panels) {
-  let metadataView
-  for (let i = 0; i < panels.length; i++) {
-    const panel = panels[i]
-    const viewsPanel = panel.views
-
-    if (!viewsPanel || viewsPanel.length === 0) continue
-
-    metadataView = viewsPanel.filter((view) => view.connector.id === 2)
-
-    if (metadataView.length > 0) return metadataView[0]
-  }
-
-  return null
-}
-
 function showCopyCitation(key, config) {
   if (!config.panels || config.panels.length === false) return false
   const metadataView = getMetadataView(config.panels);

diff --git a/src/components/metadata/MetadataView.vue b/src/components/metadata/MetadataView.vue
@@ -1,19 +1,57 @@
 <template>
   <div class="metadata-view t-overflow-auto t-break-all t-px-4 t-pt-4">
-    <CollectionMetadata v-if="options.collection?.all" />
-    <ManifestMetadata v-if="options.manifest?.all" />
-    <ItemMetadata v-if="options.manifest?.all" />
+    <component
+      v-for="(documentType, i) in orderDocumentsMetadata"
+      :is="documentType"
+      :key="i"
+    >
+    </component>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue';
+import { useConfigStore } from '@/stores/config';
 
-import CollectionMetadata from '@/components/metadata/CollectionMetadata.vue';
-import ManifestMetadata from '@/components/metadata/ManifestMetadata.vue';
-import ItemMetadata from '@/components/metadata/ItemMetadata.vue';
+import { getMetadataView } from '@/utils/metadata';
+import  CollectionMetadata  from '@/components/metadata/CollectionMetadata.vue'
+import ManifestMetadata from '@/components/metadata/ManifestMetadata.vue'
+import ItemMetadata from '@/components/metadata/ItemMetadata.vue'
 
 defineProps({
   options: Object,
 });
 
+const configStore = useConfigStore()
+
+const config = computed(() => configStore.config)
+
+const metadataView = computed(() => getMetadataView(config.value.panels))
+
+const userDocumentsOrder = computed(
+  () => metadataView.value.connector.options.documentsOrder
+)
+
+let orderDocumentsMetadata = computed(() =>
+  getDocumentsOrder(userDocumentsOrder.value)
+)
+
+function getDocumentsOrder(userOrderDocuments) {
+  let orderDocumentsMetadata = []
+
+  if (!userOrderDocuments || userOrderDocuments.length === 0)
+    return [CollectionMetadata, ManifestMetadata, ItemMetadata]
+
+  for (let i = 0; i < userOrderDocuments.length; i++) {
+    const document = userOrderDocuments[i].toLowerCase()
+
+    if (document.includes('collection'))
+      orderDocumentsMetadata.push(CollectionMetadata)
+    if (document.includes('manifest'))
+      orderDocumentsMetadata.push(ManifestMetadata)
+    if (document.includes('item')) orderDocumentsMetadata.push(ItemMetadata)
+  }
+
+  return orderDocumentsMetadata
+}
 </script>
diff --git a/src/main.js b/src/main.js
@@ -12,7 +12,6 @@ import { getRGBColor } from '@/utils/color';
 import { useToggle } from '@vueuse/core/index';
 import { isDark } from '@/utils/is-dark';
 
-
 function generateId() {
   return Math.random().toString(36).slice(2, 16);
 }
@@ -26,7 +25,7 @@ window.Tido = function Tido(config = {}) {
     setup() {
       return () => h(App);
     },
-  });
+  })
 
   this.app.provide('config', this.config);
   this.app.use(PrimeVue);