add trimmed batches and move components

CHANGELOG.md

@@ -4,7 +4,13 @@ VC Verifier Changelog
 WIP
 ---
 
+
+1.1.2 (2023-02-17)
+---
+
+- trim batch values + tooltips and make them click to copy
 - UI improvements
+- fix pdf not displaying pure VCs
 
 1.1.1 (2023-02-10)
 ---

frontend/src/components/TrimmedBatch.vue

@@ -0,0 +1,41 @@
+<template>
+    <span class="badge text-white" :class="['text-bg-' + color]" tabindex="0" style="display: inline-block;"
+        type="button" data-bs-container="body" :data-bs-toggle="value.length > MAX_STRING_LENGTH ? 'tooltip' : ''"
+        :data-bs-title="value" @click="copyToClipboard">{{
+    trimString(value)
+        }}</span>
+</template>
+
+<script>
+import { useToast } from "vue-toastification";
+
+export default {
+    name: 'TrimmedBatch',
+    props: {
+        value: String,
+        MAX_STRING_LENGTH: {
+            default: 32,
+            type: Number
+        },
+        color: {
+            default: 'primary',
+            type: String
+        },
+    },
+    data() {
+        return {
+            toast: useToast(),
+        }
+    },
+    methods: {
+        trimString(string) {
+            if (string.length < this.MAX_STRING_LENGTH) return string;
+            return string.substring(0, this.MAX_STRING_LENGTH / 2 - 2) + "..." + string.substr(length - this.MAX_STRING_LENGTH / 2 + 2);
+        },
+        copyToClipboard() {
+            navigator.clipboard.writeText(this.value);
+            this.toast.info(`Copied "${this.value}" to clipboard!`);
+        },
+    }
+}
+</script>

frontend/src/pdf.js

@@ -166,7 +166,7 @@ async function getCredentialContent(credential, append = false) {
 
         // using a { text: '...' } object lets you set styling properties
 
-        { text: credential.type[1], fontSize: 24, bold: true, color: '#6795d0', pageBreak: append ? 'before' : undefined },
+        { text: credential.type[1] || credential.type[0], fontSize: 24, bold: true, color: '#6795d0', pageBreak: append ? 'before' : undefined },
         {
             columns: [
                 { text: credential.id, fontSize: 8, link: credential.id, color: '#848484', width: '*', margin: [0, 2, 4, 10] },

frontend/src/views/Entry.vue

@@ -63,7 +63,7 @@
 </template>
 <script>
 import { useToast } from "vue-toastification";
-import ScanModal from "./ScanModal.vue"
+import ScanModal from "@/components/ScanModal.vue"
 
 import 'bootstrap/js/dist/modal'
 

frontend/src/views/Verify.vue

@@ -77,17 +77,15 @@
                                 </div>
                                 <div class="col-sm-8 my-1 my-md-0 text-sm-end text-start">
                                     <span v-if="!credential.presentation.holder">-</span>
-                                    <span v-else-if="typeof credential.presentation.holder == 'string'"
-                                        class="badge text-bg-secondary text-white">{{
-                                            credential.presentation.holder
-                                        }}</span>
+                                    <div v-else-if="typeof credential.presentation.holder == 'string'">
+                                        <TrimmedBatch :value="credential.presentation.holder" :color="'secondary'" />
+                                    </div>
                                     <div v-else><span class="me-1"><img style="height: 1.8rem;"
                                                 :src="credential.presentation.holder.image" /></span><span
                                             class="me-3">{{
                                                 credential.presentation.holder.name
-                                            }}</span><span class="badge text-bg-secondary text-white">{{
-    credential.presentation.holder.id
-}}</span>
+                                            }}</span>
+                                        <TrimmedBatch :value="credential.presentation.holder.id" :color="'secondary'" />
                                     </div>
                                 </div>
                             </div>
@@ -99,9 +97,9 @@
                                     {{ credential.presentation.challenge ? 'Challange' : 'Domain' }}:
                                 </div>
                                 <div class="col-sm-8 my-1 my-md-0 text-sm-end text-start">
-                                    <span class="badge text-bg-secondary text-white">{{
-                                        credential.presentation.challenge || credential.presentation.domain
-                                    }}</span>
+                                    <TrimmedBatch
+                                        :value="credential.presentation.challenge || credential.presentation.domain"
+                                        :color="'secondary'" />
                                 </div>
                             </div>
                         </div>
@@ -113,14 +111,14 @@
                                     Issuer:
                                 </div>
                                 <div class="col-sm-8 my-1 my-md-0 text-sm-end text-start">
-                                    <span v-if="typeof credential.issuer == 'string'"
-                                        class="badge text-bg-primary text-white">{{ credential.issuer }}</span>
+                                    <div v-if="typeof credential.issuer == 'string'">
+                                        <TrimmedBatch :value="credential.issuer" />
+                                    </div>
                                     <div v-else><span class="me-1"><img style="height: 1.8rem;"
                                                 :src="credential.issuer.image" /></span><span class="me-3">{{
                                                     credential.issuer.name
-                                                }}</span><span class="badge text-bg-primary text-white">{{
-    credential.issuer.id
-}}</span>
+                                                }}</span>
+                                        <TrimmedBatch :value="credential.issuer.id" />
                                     </div>
                                 </div>
                             </div>
@@ -198,14 +196,16 @@ import { credentialPDF } from '../pdf.js';
 import { getPlainCredential, getVerifiableType, VerifiableType } from '../utils.js';
 pdfMake.vfs = pdfFonts.pdfMake.vfs;
 
-import QRModal from "./QRModal.vue";
-import Passport from "./Passport.vue";
+import QRModal from "@/components/QRModal.vue";
+import Passport from "@/components/Passport.vue";
+import TrimmedBatch from "@/components/TrimmedBatch.vue";
 
 export default {
     name: 'Verify',
     components: {
         QRModal,
-        Passport
+        Passport,
+        TrimmedBatch
     },
     data() {
         return {