Add flexible order of metadata items

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

examples/ahiqar-arabic-karshuni-local.html

@@ -72,6 +72,26 @@
                         all: true,
                       },
                       citationKey: "Citation",
+                      orderDocuments: ["manifest", "collection", "item"],
+                      orderCollectionMetadata: [
+                        "title",
+                        "collector",
+                        "description",
+                      ],
+                      orderManifestMetadata: [
+                        "Label",
+                        "License",
+                        "Date of creation",
+                        "Place of origin",
+                        "Current location",
+                        "TEI document",
+                      ],
+                      orderItemMetadata: [
+                        "label",
+                        "language",
+                        "image_license",
+                        "image_notes",
+                      ],
                     },
                   },
                 },

src/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

src/components/metadata/CollectionMetadata.vue

@@ -1,52 +1,58 @@
 <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 { computed } from 'vue';
-import { useContentsStore } from '@/stores/contents';
-import MetadataItem from '@/components/metadata/MetadataItem.vue';
+import { getMetadataView } from '@/utils/metadata'
 
-const contentStore = useContentsStore();
+const contentStore = useContentsStore()
 
-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;
+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
 
   return collection.collector.map((collector) => collector.name).join(', ')
 }
 
-const collection = computed<Collection>(() => contentStore.collection);
+const collection = computed<Collection>(() => contentStore.collection)
 
 const metadata = computed(() => {
-  if (!collection.value) return [];
+  let collectionOrderMetadata = getMetadataView(useConfigStore().config.panels)
+    .connector.options.orderCollectionMetadata
+
+  let collectionOrderMetadataLower
+  if (collectionOrderMetadata?.length > 0) {
+    collectionOrderMetadataLower = collectionOrderMetadata.map((word) =>
+      word.toLowerCase()
+    )
+  }
+
+  if (!collection.value) return []
 
   const mappings = {
     main: 'title',
     sub: 'subtitle',
-  };
+  }
 
-  const collectorsName: string | null = getCollectorsName(collection.value);
-  const { description } = collection.value;
-  const collectionTitle: Title[] = collection.value.title;
+  const collectorsName: string | null = getCollectorsName(collection.value)
+  const { description } = collection.value
+  const collectionTitle: Title[] = collection.value.title
 
-  return [
+  const defaultMetadata = [
     ...collectionTitle
       .filter((c) => c)
       .map((title) => ({
@@ -55,6 +61,17 @@ const metadata = computed(() => {
       })),
     ...(collectorsName ? [{ key: 'collector', value: collectorsName }] : []),
     ...(description ? [{ key: 'description', value: description }] : []),
-  ];
-});
+  ]
+
+  let orderedMetadata = []
+  if (collectionOrderMetadataLower?.length > 0) {
+    orderedMetadata = orderMetadataItems(
+      collectionOrderMetadataLower,
+      defaultMetadata
+    )
+    return orderedMetadata
+  }
+
+  return defaultMetadata
+})
 </script>

src/components/metadata/ItemMetadata.vue

@@ -3,40 +3,52 @@
     <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 { computed } from 'vue';
-import { useConfigStore } from '@/stores/config';
-import { useContentsStore } from '@/stores/contents';
+import MetadataItem from '@/components/metadata/MetadataItem.vue'
+import { getMetadataView } from '@/utils/metadata'
 
-import MetadataItem from '@/components/metadata/MetadataItem.vue';
+const configStore = useConfigStore()
+const contentStore = useContentsStore()
 
-const configStore = useConfigStore();
-const contentStore = useContentsStore();
+const item = computed<Item>(() => contentStore.item)
+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 total = computed<number>(() => itemsCount.value ?? 1)
 
-const item = computed<Item>(() => contentStore.item);
-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 total = computed<number>(() => itemsCount.value ?? 1);
-const metadata = computed(() => (
-  [
+const metadata = computed(() => {
+  let itemOrderMetadata = getMetadataView(useConfigStore().config.panels)
+    .connector.options.orderItemMetadata
+
+  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 (itemOrderMetadata?.length > 0) {
+    orderedMetadata = orderMetadataItems(itemOrderMetadata, defaultMetadata)
+    return orderedMetadata
+  }
+  return defaultMetadata
+})
 </script>

src/components/metadata/ManifestMetadata.vue

@@ -1,49 +1,68 @@
 <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" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useConfigStore } from '@/stores/config';
-import { useContentsStore } from '@/stores/contents';
-
-import MetadataItem from '@/components/metadata/MetadataItem.vue';
-import Actor from '@/components/metadata/Actor.vue';
-
-const configStore = useConfigStore();
-const contentStore = useContentsStore();
-
-const manifest = computed<Manifest>(() => contentStore.manifest);
-const manifests = computed<Manifest[]>(() => contentStore.manifests);
-const manifestHasItems = computed<boolean>(() => manifest.value?.sequence.length > 0);
-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);
+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'
+
+const configStore = useConfigStore()
+const contentStore = useContentsStore()
+
+const manifest = computed<Manifest>(() => contentStore.manifest)
+const manifests = computed<Manifest[]>(() => contentStore.manifests)
+const manifestHasItems = computed<boolean>(
+  () => manifest.value?.sequence.length > 0
+)
+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 },
+  if (!manifest.value) return []
+
+  let manifestOrderMetadata = getMetadataView(useConfigStore().config.panels)
+    .connector.options.orderManifestMetadata
+
+  let defaultMetadata = [
+    { key: 'Label', value: manifest.value.label },
     ...(manifest.value.license || []).map((license) => ({
       key: 'License',
       value: license.id,
     })),
-    ...(manifest.value.metadata || []),
-  ];
-});
-const actor = computed<Actor[] | undefined>(() => manifest.value?.actor);
+    ...(manifest.value.metadata || []).map((metaItem) => ({
+      key: metaItem.key,
+      value: metaItem.value,
+    })),
+  ]
+
+  let orderedMetadata = []
+  if (manifestOrderMetadata?.length > 0) {
+    orderedMetadata = orderMetadataItems(manifestOrderMetadata, defaultMetadata)
+    return orderedMetadata
+  }
+
+  return defaultMetadata
+})
+const actor = computed<Actor[] | undefined>(() => manifest.value?.actor)
 </script>