Build detail view for issued credentials

web/src/admin/CredentialDetails.vue → web/src/admin/credentials/CredentialDetails.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
     <h1>Verifiable Credential</h1>
-    <p v-if="fetchError" class="m-4">Error: {{ fetchError }}</p>
-    <div v-if="credential">
       <section>
         <div>
           <label>ID</label>
@@ -36,17 +34,11 @@
       </section>
     </div>
 
-  </div>
 </template>
-
 <script>
-
 export default {
-  data() {
-    return {
-      fetchError: undefined,
-      credential: undefined
-    }
+  props: {
+    credential: Object
   },
   computed: {
     credentialType() {
@@ -66,15 +58,6 @@ export default {
       }
       return flatten(this.credential.credentialSubject)
     }
-  },
-  mounted() {
-    this.$api.get('api/id/' + encodeURIComponent(this.$route.params.subjectID))
-        .then(data => {
-          this.credential = data.wallet_credentials.filter(c => c.id === this.$route.params.credentialID)[0]
-        })
-        .catch(response => {
-          this.fetchError = response
-        })
-  },
+  }
 }
 </script>

web/src/admin/IssueCredential.vue → web/src/admin/credentials/IssueCredential.vue

@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import templates from "./credentials";
+import templates from "./templates";
 
 export default {
   data() {

web/src/admin/credentials/IssuedCredentialDetails.vue

@@ -0,0 +1,28 @@
+<template>
+  <p v-if="fetchError" class="m-4">Error: {{ fetchError }}</p>
+  <CredentialDetails :credential="credential" v-if="credential" />
+</template>
+
+<script>
+import CredentialDetails from './CredentialDetails.vue'
+export default {
+  components: {
+    CredentialDetails
+  },
+  data() {
+    return {
+      fetchError: '',
+      credential: undefined,
+    }
+  },
+  mounted() {
+    this.$api.get('api/issuer/vc?id=' + encodeURIComponent(this.$route.params.credentialID))
+        .then(data => {
+          this.credentials = data
+        })
+        .catch(response => {
+          this.fetchError = response
+        })
+  }
+}
+</script>

web/src/admin/IssuedCredentials.vue → web/src/admin/credentials/IssuedCredentials.vue

@@ -5,9 +5,7 @@
     <section>
       <label for="credentialTypes" class="inline">Credential types (comma-separated): </label>
       <input type="text" id="credentialTypes" v-model="credentialTypes" v-on:change="fetchData" class="inline" style="width: 50%">
-    </section>
-    <section v-if="credentials.length > 0">
-      <table class="table w-full">
+      <table class="table w-full divide-y divide-gray-200 mt-4" v-if="credentials.length > 0">
         <thead>
         <tr>
           <th class="thead">Issuer</th>
@@ -17,36 +15,42 @@
         </tr>
         </thead>
         <tbody>
-        <tr v-for="credential in credentials" :key="credential.id">
+        <tr v-for="credential in credentials" :key="credential.id"
+          @click="chosenCredential = credential" style="cursor: pointer">
           <td>{{ credential.issuer.split(':').slice(-1)[0] }}</td>
           <td>{{ credential.type.filter(t => t !== 'VerifiableCredential').join(', ') }}</td>
           <td>{{ credential.credentialSubject.id }}</td>
           <td>{{ new Date(credential.issuanceDate).toLocaleString() }}</td>
         </tr>
         </tbody>
       </table>
+      <p v-else>
+        No credentials found.
+      </p>
     </section>
-    <p v-else>
-      No credentials found.
-    </p>
   </div>
+  <CredentialDetails :credential="chosenCredential" v-if="chosenCredential" style="margin-top: 20px;" />
 </template>
 
 <script>
+import CredentialDetails from "./CredentialDetails.vue";
 
 export default {
+  components: {CredentialDetails},
   data() {
     return {
       fetchError: '',
       credentials: [],
-      credentialTypes: 'NutsOrganizationCredential',
+      credentialTypes: '*',
+      chosenCredential: undefined,
     }
   },
   mounted() {
     this.fetchData()
   },
   methods: {
     fetchData() {
+      this.chosenCredential = undefined
       this.$api.get('api/issuer/vc?credentialTypes=' + encodeURIComponent(this.credentialTypes))
           .then(data => {
             this.credentials = data

web/src/admin/credentials/WalletCredentialDetails.vue

@@ -0,0 +1,28 @@
+<template>
+  <p v-if="fetchError" class="m-4">Error: {{ fetchError }}</p>
+  <CredentialDetails :credential="credential" v-if="credential" />
+</template>
+
+<script>
+import CredentialDetails from './CredentialDetails.vue'
+export default {
+  components: {
+    CredentialDetails
+  },
+  data() {
+    return {
+      fetchError: undefined,
+      credential: undefined
+    }
+  },
+  mounted() {
+    this.$api.get('api/id/' + encodeURIComponent(this.$route.params.subjectID))
+        .then(data => {
+          this.credential = data.wallet_credentials.filter(c => c.id === this.$route.params.credentialID)[0]
+        })
+        .catch(response => {
+          this.fetchError = response
+        })
+  },
+}
+</script>

web/src/index.js

@@ -8,12 +8,12 @@ import NotFound from './NotFound.vue'
 import Identities from './admin/Identities.vue'
 import NewIdentity from './admin/NewIdentity.vue'
 import DiscoveryServices from './admin/DiscoveryServices.vue'
-import IssuedCredentials from './admin/IssuedCredentials.vue'
+import IssuedCredentials from './admin/credentials/IssuedCredentials.vue'
+import WalletCredentialDetails from "./admin/Credentials/WalletCredentialDetails.vue";
 import Api from './plugins/api'
 import IdentityDetails from "./admin/IdentityDetails.vue";
-import IssueCredential from "./admin/IssueCredential.vue";
+import IssueCredential from "./admin/credentials/IssueCredential.vue";
 import ActivateDiscoveryService from "./admin/ActivateDiscoveryService.vue";
-import CredentialDetails from "./admin/CredentialDetails.vue";
 
 const routes = [
   {
@@ -44,7 +44,7 @@ const routes = [
       {
         path: 'id/:subjectID/credential/:credentialID',
         name: 'admin.credentialDetails',
-        component: CredentialDetails,
+        component: WalletCredentialDetails,
       },
       {
         path: 'id/:subjectID',