Better storage:schemes rendering

Author: m-mohr

src/components/metadata/MetadataEntry.vue

@@ -7,7 +7,9 @@
       <MetadataTable v-bind="$props" />
     </b-col>
     <b-col v-else md="9" class="value">
-      <div v-html="formatted" />
+      <Histogram v-if="field === 'histogram' && isObject" :data="value" />
+      <StorageSchemes v-else-if="field === 'storage:schemes' && isObject" :data="value" />
+      <div v-else v-html="formatted" />
     </b-col>
   </b-row>
 </template>
@@ -26,14 +28,19 @@ const FORCE_TABLE = [
 export default {
   name: "MetadataEntry",
   components: {
-    MetadataTable: () => import('./MetadataTable.vue')
+    Histogram: () => import('./Histogram.vue'),
+    MetadataTable: () => import('./MetadataTable.vue'),
+    StorageSchemes: () => import('./StorageSchemes.vue')
   },
   mixins: [
     EntryMixin
   ],
   computed: {
     showTable() {
       return FORCE_TABLE.includes(this.field) || this.itemOrder.length > 0 && Utils.size(this.value) >= 3;
+    },
+    isObject() {
+      return Utils.isObject(this.value);
     }
   }
 };

src/components/metadata/StorageSchemes.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="storage-schemes mb-4">
+    <ul>
+      <li v-for="(scheme, id) in data" :key="id">
+        <p><strong>{{ scheme.title || id }}</strong> (<code>{{ id }}</code>)</p>
+        <Description v-if="scheme.description" :description="scheme.description" />
+        <dl>
+          <template v-for="(entry, key) in formatted[id]">
+            <dt :key="key">{{ entry.label }}</dt>
+            <dd :key="key" v-html="entry.value" />
+          </template>
+        </dl>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { Registry, format, formatKey } from '@radiantearth/stac-fields';
+
+export default {
+  name: "StorageSchemes",
+  components: {
+    Description: () => import('../Description.vue')
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    spec() {
+      return Registry.getSpecification('storage:schemes');
+    },
+    formatted() {
+      const obj = {};
+      for (const id in this.data) {
+        obj[id] = {};
+        for (const key in this.data[id]) {
+          if (key == 'title' || key == 'description') {
+            continue;
+          }
+          obj[id][key] = {
+            label: formatKey(key),
+            value: format(this.data[id][key], key, null, null, null, this.spec?.items[key])
+          };
+        }
+      }
+      return obj;
+    }
+  }
+};
+</script>