DLP: Add "Protocols" card

Closes #2071
dandi · Dec 9, 2024 · f8123e5 · f8123e5
1 parent b31a6c6
commit f8123e5
Showing 1 changed file with 29 additions and 1 deletion.
diff --git a/web/src/components/DLP/OverviewTab.vue b/web/src/components/DLP/OverviewTab.vue
@@ -67,6 +67,30 @@
       </template>
     </MetadataCard>
 
+    <MetadataCard
+      :items="protocols"
+      v-if="protocols && protocols.length"
+      name="Protocols"
+      icon="mdi-protocol"
+    >
+      <template #content="slotProps">
+        <div class="text-caption grey--text text--darken-1">
+          <span class="pl-2">
+            - {{ slotProps.item }}
+               <v-btn
+                      v-if="isURL(slotProps.item)"
+                      icon
+                      :href="slotProps.item"
+                      target="_blank"
+                      rel="noopener"
+               >
+                   <v-icon>mdi-link</v-icon>
+               </v-btn>
+          </span>
+        </div>
+      </template>
+    </MetadataCard>
+
     <MetadataCard
       v-if="relatedResources && relatedResources.length"
       :items="relatedResources"
@@ -232,7 +256,7 @@ import MetadataCard from '@/components/DLP/MetadataCard.vue';
 import { useDandisetStore } from '@/stores/dandiset';
 
 import type { ComputedRef, PropType } from 'vue';
-import type { AssociatedProjects, DandisetMetadata, RelatedResource } from '@/types';
+import type { AssociatedProjects, DandisetMetadata, RelatedResource, Protocol } from '@/types';
 
 // Asset summary fields to hide
 const ASSET_SUMMARY_BLACKLIST = new Set([
@@ -288,6 +312,10 @@ const relatedResources: ComputedRef<RelatedResource|undefined> = computed(
   () => props.meta.relatedResource,
 );
 
+const protocols: ComputedRef<Protocol|undefined> = computed(
+  () => props.meta.protocol,
+);
+
 const associatedProjects: ComputedRef<AssociatedProjects|undefined> = computed(
   () => props.meta.wasGeneratedBy,
 );