From 7e7dc63f2933d5ba66fc6352fc14c93ba072465a Mon Sep 17 00:00:00 2001
From: Orlin Malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Mon, 22 Apr 2024 09:45:37 +0000
Subject: [PATCH] fix: show nested metadata & improve its styling

---
 src/components/metadata/MetadataItem.vue  | 13 +++++++++----
 src/components/metadata/MetadataValue.vue |  4 ++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/metadata/MetadataItem.vue b/src/components/metadata/MetadataItem.vue
index 4de125a4..9dec217b 100644
--- a/src/components/metadata/MetadataItem.vue
+++ b/src/components/metadata/MetadataItem.vue
@@ -5,16 +5,15 @@
     </q-item-label>
     <MetadataLink v-if="isLink()" :url="item.key" :text="item.value"/>
     <MetadataValue v-else :value="item.value" />
-    <MetadataItem v-for="(childItem, idx) in childItems" :key="idx" :item="childItem"/>
+    <MetadataItem v-for="(childItem, idx) in childItems" :key="idx" :item="childItem" class="nested-metadata"/>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue';
 import MetadataLink from '@/components/metadata/MetadataLink.vue';
 import MetadataValue from '@/components/metadata/MetadataValue.vue';
 
-import { computed } from 'vue';
-
 const props = defineProps({
   item: Object,
 });
@@ -24,12 +23,18 @@ const childItems = computed(() => props.item?.metadata || []);
 
 function isLink() {
   const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
-  const matches = props.item?.key?.match(regex) || null;
+  const matches = (typeof props.item?.key === 'string') ? props.item?.key?.match(regex) : null;
 
   return matches !== null;
 }
+
 </script>
 
 <style scoped>
 
+.nested-metadata {
+  margin-left: 8px;
+  margin-top: 2.5px;
+}
+
 </style>
diff --git a/src/components/metadata/MetadataValue.vue b/src/components/metadata/MetadataValue.vue
index 5b0bedea..56e63a83 100644
--- a/src/components/metadata/MetadataValue.vue
+++ b/src/components/metadata/MetadataValue.vue
@@ -43,4 +43,8 @@ const props = defineProps({
   display: flex;
   padding-right: 4px;
 }
+
+.metadata-value {
+  margin-left:10px;
+}
 </style>