add context info to product passport view

european-epc-competence-center · Feb 22, 2023 · a2b2c29 · a2b2c29
1 parent 2c31460
commit a2b2c29
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,12 @@ VC Verifier Changelog
 WIP
 ---
 
-- show ld context in credential details
+
+1.2.0 (2023-02-22)
+---
+
+- show JSON-LD context in credential details
+- show JSON-LD context in product passport
 
 
 1.1.2 (2023-02-17)

diff --git a/frontend/src/components/MergedProps.vue b/frontend/src/components/MergedProps.vue
@@ -8,11 +8,18 @@
                 <li v-for="(value, key) in properties" :key="key" class="list-group-item">
                     <div class="row">
                         <div class="col-md-6">
-                            <strong>{{key}}</strong>
+                            <strong>{{ key }}</strong> <a v-if="context.get(key)" :href="context.get(key)['@id']"
+                                tabindex="0" style="display: inline-block;" type="button" target="_blank"
+                                data-bs-container="body" data-bs-toggle="tooltip" :data-bs-title="context.get(key)['@id']">
+                                <small>
+                                    <i class="bi bi-info-circle text-primary"></i>
+                                </small>
+                            </a>
                         </div>
                         <div class="col-md-6">
-                            <a v-if="$isURL($getCredentialValue(value))" :href="$getCredentialValue(value)">{{$getCredentialValue(value)}}</a>
-                            <p v-else class="m-0">{{$getCredentialValue(value)}}</p>
+                            <a v-if="$isURL($getCredentialValue(value))" :href="$getCredentialValue(value)">{{
+                                $getCredentialValue(value) }}</a>
+                            <p v-else class="m-0">{{ $getCredentialValue(value) }}</p>
                         </div>
                     </div>
                 </li>
@@ -26,10 +33,11 @@ export default {
     name: 'MergedProps',
     props: {
         properties: Object,
+        context: Map
     },
     data() {
         return {
-            
+
         }
     },
 }

diff --git a/frontend/src/components/Passport.vue b/frontend/src/components/Passport.vue
@@ -1,8 +1,10 @@
 <template>
     <Transition name="slide-fade">
         <div v-if="Object.keys(verifiedProperties).length > 0">
-            <ProductPassport v-if="isProductPassport()" :properties="verifiedProperties" :credentials="credentials" />
-            <MergedProps v-else-if="(Object.keys(credentials).length > 1)" :properties="verifiedProperties" />
+            <ProductPassport v-if="isProductPassport()" :properties="verifiedProperties" :credentials="credentials"
+                :context="getContext()" />
+            <MergedProps v-else-if="(Object.keys(credentials).length > 1)" :properties="verifiedProperties"
+                :context="getContext()" />
         </div>
     </Transition>
 </template>
@@ -43,6 +45,13 @@ export default {
         },
     },
     methods: {
+        getContext() {
+            var context = new Map();
+            this.credentials.forEach((credential) => {
+                if (credential.context) context = new Map([...context, ...credential.context])
+            })
+            return context
+        },
         isProductPassport() {
             if (this.credentials.length < 1) return false;
             return this.credentials.filter(function (credential) {

diff --git a/frontend/src/components/ProductPassport.vue b/frontend/src/components/ProductPassport.vue
@@ -6,9 +6,8 @@
                     <h5 class="mb-0">Verified Product Passport</h5>
                 </div>
                 <div class="col-3 text-end">
-                    <button @mouseover="hoverdownload = true" @mouseleave="hoverdownload = false"
-                        :disabled="renderingPDF" @click="downloadProductPassportPDF"
-                        class="btn btn-sm btn-outline-success">
+                    <button @mouseover="hoverdownload = true" @mouseleave="hoverdownload = false" :disabled="renderingPDF"
+                        @click="downloadProductPassportPDF" class="btn btn-sm btn-outline-success">
                         <div v-if="renderingPDF" class="spinner-border text-secondary" role="status"
                             style="width: 1rem; height: 1rem;">
                             <span class="visually-hidden">Verifying...</span>
@@ -27,7 +26,7 @@
                         <li v-for="(value, key) in getMainProps" :key="key" class="list-group-item">
                             <div class="row">
                                 <div class="col-md-6">
-                                    <strong>{{ mainProps[key]}}</strong>
+                                    <strong>{{ mainProps[key] }}</strong>
                                 </div>
                                 <div class="col-md-6">
                                     <a v-if="$isURL($getCredentialValue(value))" :href="$getCredentialValue(value)">{{
@@ -62,7 +61,15 @@
                                 <table class="table table-striped mb-1">
                                     <TransitionGroup name="list" tag="tbody">
                                         <tr v-for="(value, key) in properties" :key="key">
-                                            <td><strong>{{ key }}</strong></td>
+                                            <td><strong>{{ key }}</strong> <a v-if="context.get(key)"
+                                                    :href="context.get(key)['@id']" tabindex="0"
+                                                    style="display: inline-block;" type="button" target="_blank"
+                                                    data-bs-container="body" data-bs-toggle="tooltip"
+                                                    :data-bs-title="context.get(key)['@id']">
+                                                    <small>
+                                                        <i class="bi bi-info-circle text-primary"></i>
+                                                    </small>
+                                                </a></td>
                                             <td>
                                                 <a v-if="$isURL($getCredentialValue(value))"
                                                     :href="$getCredentialValue(value)">{{
@@ -92,7 +99,8 @@ export default {
     name: 'ProductPassport',
     props: {
         properties: Object,
-        credentials: [Object]
+        credentials: [Object],
+        context: Map
     },
     data() {
         return {

diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
@@ -3,7 +3,7 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    version: '1.1.2',
+    version: '1.2.0',
     verifiables: [],
     VC_REGISTRY: process.env.VC_REGISTRY || 'https://ssi.eecc.de/api/registry/vcs/',
     showQRModal: false