Add details view

CHANGELOG.md

@@ -1,5 +1,10 @@
 # bedrock-vue-wallet ChangeLog
 
+## 30.0.0 - 2024-09-dd
+
+### Added
+- Added details view to credential details window.
+
 ## 29.4.1 - 2024-10-15
 
 ### Fixed

components/CredentialDetailsTree.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-tree
+      :nodes="allDetails"
+      node-key="id" />
+  </div>
+</template>
+
+<script>
+/*!
+ * Copyright (c) 2015-2024 Digital Bazaar, Inc. All rights reserved.
+ */
+import {computed, toRaw} from 'vue';
+
+export default {
+  name: 'CredentialDetailsTree',
+  components: {},
+  props: {
+    credential: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const allDetails = computed(() => {
+      const {credential} = props;
+      const allKeys = Object.keys(credential);
+      return allKeys.flatMap(key => createNodeList(key, credential));
+    });
+
+    // helper function
+    function createNodeList(key, obj, list = []) {
+      const value = toRaw(obj[key] || obj);
+      const node = {id: crypto.randomUUID(), label: key, children: []};
+      if(Array.isArray(value)) {
+        value.forEach(subValue => {
+          createNodeList(subValue, value[subValue] || {}, node.children);
+        });
+      } else if(typeof value === 'object') {
+        Object.keys(value).forEach(subKey => {
+          createNodeList(subKey, value[subKey] || {}, node.children);
+        });
+      } else if(value) {
+        node.children.push({id: crypto.randomUUID(), label: value});
+      }
+      list.push(node);
+      return list;
+    }
+
+    return {
+      allDetails
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

components/CredentialDetailsViews.vue

@@ -29,6 +29,7 @@
     <!-- Highlights -->
     <q-tab-panels
       v-model="tab"
+      class="bg-grey-2"
       animated>
       <q-tab-panel
         name="highlights"
@@ -123,7 +124,15 @@
         name="details"
         class="bg-grey-2">
         <div class="details-view">
-          Details view is not currently available.
+          <q-banner
+            dense
+            rounded
+            class="bg-orange text-white text-center">
+            <div class="text-bold text-italic">
+              Developer Only
+            </div>
+          </q-banner>
+          <credential-details-tree :credential="credential" />
         </div>
       </q-tab-panel>
     </q-tab-panels>
@@ -135,14 +144,15 @@
  * Copyright (c) 2015-2024 Digital Bazaar, Inc. All rights reserved.
  */
 import {onBeforeMount, onMounted, reactive, ref} from 'vue';
+import CredentialDetailsTree from './CredentialDetailsTree.vue';
 import {date} from 'quasar';
 import Mustache from 'mustache';
 
 const {formatDate} = date;
 
 export default {
   name: 'CredentialDetailsViews',
-  components: {},
+  components: {CredentialDetailsTree},
   props: {
     credential: {
       type: Object,
@@ -167,7 +177,7 @@ export default {
     const slideNumber = ref(1);
     const tab = ref('highlights');
     const fullscreen = ref(false);
-    const showDetails = ref(false);
+    const showDetails = ref(true);
     const showDisplays = ref(false);
     const showHighlights = ref(false);
     const credentialImages = reactive([]);