Display metadata with entities in the metadata panel

vue/Element/Metadata/MetadataPanel.vue

@@ -3,9 +3,10 @@
     <p class="panel-heading">
       {{ meta.length }} Metadata{{ meta.length > 1 ? 's' : '' }}
     </p>
+    <!-- TODO: Split into one component for each metadata -->
     <a v-for="data in sortedMeta" :key="data.id" class="panel-block has-actions">
-      <span class="panel-icon" :title="data.type">
-        <i :class="iconClass(data.type)"></i>
+      <span class="panel-icon" :title="iconTitle(data)">
+        <i :class="iconClass(data)"></i>
       </span>
       <span class="metadata-content">
         {{ data.name }} :
@@ -16,7 +17,17 @@
           />
         </strong>
         <strong v-else>
-          <a :href="data.value" target="_blank" v-if="data.type === 'url'">
+          <router-link
+            v-if="data.entity"
+            :to="{ name: 'entity-details', params: { id: data.entity.id } }"
+          >
+            {{ data.entity.name }}
+          </router-link>
+          <a
+            v-else-if="data.type === 'url'"
+            :href="data.value"
+            target="_blank"
+          >
             {{ data.value }}
           </a>
           <template v-else>{{ data.value }}</template>
@@ -25,6 +36,7 @@
       <MetadataActions
         class="is-actions is-hidden"
         :metadata="data"
+        v-if="data.entity === null"
         v-on="$listeners"
       />
       <WorkerVersionDetails v-if="data.worker_version" :worker-version-id="data.worker_version" has-dropdown-title />
@@ -34,7 +46,7 @@
 
 <script>
 import { isEmpty } from 'lodash'
-import { METADATA_TYPES } from '~/js/config'
+import { METADATA_TYPES, ENTITY_TYPES } from '~/js/config'
 import WorkerVersionDetails from '~/vue/Process/Workers/Versions/Details'
 import InterpretedDate from '~/vue/InterpretedDate'
 import MetadataActions from './MetadataActions'
@@ -57,11 +69,17 @@ export default {
     }
   },
   methods: {
-    containsDates (m) {
-      return !isEmpty(m.dates)
+    containsDates (metadata) {
+      return !metadata.entity && !isEmpty(metadata.dates)
     },
-    iconClass (type) {
-      return METADATA_TYPES[type].icon || 'icon-feather'
+    iconClass (metadata) {
+      if (metadata.entity) return ENTITY_TYPES[metadata.entity.type]?.icon ?? ENTITY_TYPES.misc.icon
+      return METADATA_TYPES[metadata.type]?.icon ?? 'icon-feather'
+    },
+    iconTitle (metadata) {
+      const typeDisplay = METADATA_TYPES[metadata.type]?.display ?? 'Metadata'
+      if (metadata.entity) return `${typeDisplay} - ${metadata.entity.type}`
+      return typeDisplay
     }
   }
 }