From f324456ae641ede11419a3bf6f88a4a2c24bafa3 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Tue, 13 May 2025 11:52:58 +0330
Subject: [PATCH] fix : details btn in details modals

---
 src/components/modal/cycle/Show.vue      |  26 ++-
 src/components/modal/item/show.vue       |  20 +-
 src/components/modal/label/Show.vue      |  39 +++-
 src/components/modal/package/Show.vue    |   2 +-
 src/components/modal/testresult/Show.vue | 271 ++++++++++++-----------
 5 files changed, 198 insertions(+), 160 deletions(-)

diff --git a/src/components/modal/cycle/Show.vue b/src/components/modal/cycle/Show.vue
index 4ca7b1d..c8d6fda 100644
--- a/src/components/modal/cycle/Show.vue
+++ b/src/components/modal/cycle/Show.vue
@@ -82,12 +82,28 @@
                                     <v-layout row class="CSSD-font">
                                         <span class="item-counter">{{ key + 1 }}</span>
                                         <v-layout row class="pl-2">
-                                            <v-flex xs12 sm6 md4>
+                                            <v-flex xs12 sm6 md6>
                                                 <span class="sub-text">Label ID:</span> {{ label.id }}
                                             </v-flex>
-                                            <v-flex xs12 sm6 md4 v-if="label.pivot">
-                                                <span class="sub-text">Label Pivot counter:</span>
-                                                {{ label.pivot.count }}
+                                            <v-flex xs12 sm6 md6 class="d-flex">
+                                                <div v-if="label.pivot">
+                                                    <span class="sub-text">Label Pivot counter:</span>
+                                                    {{ label.pivot.count }}
+                                                </div>
+                                                <v-spacer/>
+                                                <a :href="'https://www.cssd-doc.com/Show/Label/' + label.id + ''"
+                                                   target="_blank" style="max-width: fit-content;">
+                                                    <v-tooltip bottom open-on-hover>
+                                                        <template v-slot:activator="{ on, attrs }">
+                                                            <v-btn v-bind="attrs" v-on="on" @click.stop.native=""
+                                                                   color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2">
+                                                                <v-icon class="black--text caption">fas fa-search
+                                                                </v-icon>
+                                                            </v-btn>
+                                                        </template>
+                                                        <span>Filter</span>
+                                                    </v-tooltip>
+                                                </a>
                                             </v-flex>
                                         </v-layout>
                                     </v-layout>
@@ -117,7 +133,7 @@
                                                                             </v-flex>
                                                                             <v-flex xs12 sm6 md4>
                                                                                 <span class="sub-text">Item Name:</span>
-                                                                                {{item.name}}
+                                                                                {{ item.name }}
                                                                             </v-flex>
                                                                             <v-flex xs12 sm6 md4 v-if="item.pivot">
                                                                                 <span class="sub-text">
diff --git a/src/components/modal/item/show.vue b/src/components/modal/item/show.vue
index 4df92a7..e91b073 100644
--- a/src/components/modal/item/show.vue
+++ b/src/components/modal/item/show.vue
@@ -7,7 +7,7 @@
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="">
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 sm6 md4>
                         <div class>
                             <span class="title CSSD-font">Item ID :</span>
                             <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
@@ -15,7 +15,7 @@
                             </span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 sm6 md4>
                         <div class>
                             <span class="title CSSD-font">Name :</span>
                             <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
@@ -23,7 +23,7 @@
                             </span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 sm6 md4>
                         <div class>
                             <span class="title CSSD-font">Size :</span>
                             <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
@@ -31,7 +31,7 @@
                             </span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 sm6 md4>
                         <div class>
                             <span class="title CSSD-font">UDI :</span>
                             <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
@@ -39,14 +39,14 @@
                             </span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 sm6 md4>
                         <div class>
                             <span class="title CSSD-font">Specific :</span>
                             <span class="headline ml-1 CSSD-font"
                                   style="letter-spacing:0 !important">{{ data.specific }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 sm6 md4>
                         <div class>
                             <span class="title CSSD-font">Register User :</span>
                             <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">
@@ -54,7 +54,7 @@
                             </span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 sm6 md4>
                         <div class>
                             <span class="title CSSD-font">Date Register:</span>
                             <span class="headline ml-2 CSSD-font"
@@ -63,12 +63,12 @@
                     </v-flex>
 
                 </v-layout>
-                <v-layout align-left justify-left wrap class="my-3" v-if="data.files.length">
+                <v-layout align-left justify-left wrap class="my-1" v-if="data.files.length">
                     <h3 class="CSSD-font">Image</h3>
                     <v-flex xs12>
                         <hr class="v-divider theme--light"/>
                     </v-flex>
-                    <v-layout row wrap class="align-center">
+                    <v-layout row wrap class="align-center mt-2">
                         <v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
                             <template v-if="file.file_type == 'document'">
                                 <a target="_blank" :href="'/'+file.thumbnail">
@@ -82,7 +82,7 @@
                         </v-flex>
                     </v-layout>
                 </v-layout>
-                <v-layout align-left justify-left wrap class="my-3">
+                <v-layout align-left justify-left wrap class="my-1">
                     <h3 class="CSSD-font">Barcode And QRCode Image</h3>
                     <v-flex xs12>
                         <hr class="v-divider theme--light">
diff --git a/src/components/modal/label/Show.vue b/src/components/modal/label/Show.vue
index 7abfdbe..96db4af 100644
--- a/src/components/modal/label/Show.vue
+++ b/src/components/modal/label/Show.vue
@@ -16,7 +16,7 @@
                                     <v-flex xs12 md12 sm12>
                                         <div class="WM-d-flex">
                                             <span class="headline ml-1 mb-1" style="letter-spacing:0 !important">
-                                                {{(data.user && data.user.medical_center) ? data.user.medical_center.name : ""}}
+                                                {{ (data.user && data.user.medical_center) ? data.user.medical_center.name : "" }}
                                             </span>
                                         </div>
                                     </v-flex>
@@ -45,7 +45,7 @@
                                         <div class="WM-d-flex">
                                             <v-icon class="WMi-user"/>
                                             <span class="headline ml-2 mb-1" style="letter-spacing:0 !important">
-                                                {{data.user ? data.user.name : ''}}
+                                                {{ data.user ? data.user.name : '' }}
                                             </span>
                                         </div>
                                     </v-flex>
@@ -111,18 +111,35 @@
                                 <template v-slot:header>
                                     <v-layout row class="CSSD-font">
                                         <v-layout row class="pl-2">
-                                            <v-flex xs12 sm6 md6>
+                                            <v-flex xs12 sm6 md4>
                                                 <span class="sub-text">Package ID:</span> {{ data.package.id }}
                                             </v-flex>
-                                            <v-flex xs12 sm6 md6>
-                                                <span class="sub-text">Package Name:</span> {{ data.package.name }}
+                                            <v-flex xs12 sm6 md8 class="d-flex">
+                                                <div>
+                                                      <span class="sub-text">Package Name:</span> {{ data.package.name }}
+                                                </div>
+                                                <v-spacer/>
+                                                <a :href="'https://www.cssd-doc.com/Show/Package/' + data.package.id + ''"
+                                                   target="_blank" style="max-width: fit-content;">
+                                                    <v-tooltip bottom open-on-hover>
+                                                        <template v-slot:activator="{ on, attrs }">
+                                                            <v-btn v-bind="attrs" v-on="on" @click.stop.native=""
+                                                                   color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2">
+                                                                <v-icon class="black--text caption">fas fa-search
+                                                                </v-icon>
+                                                            </v-btn>
+                                                        </template>
+                                                        <span>Filter</span>
+                                                    </v-tooltip>
+                                                </a>
                                             </v-flex>
                                         </v-layout>
                                     </v-layout>
                                 </template>
                                 <v-card>
                                     <v-card-text>note : {{ data.package.note }}</v-card-text>
-                                    <v-card-text> Items :
+                                    <v-card-text v-if="data.package.items && data.package.items.length">
+                                        Items :
                                         <v-expansion-panel class="WM-Panel" v-for="(item, key) in data.package.items"
                                                            :key="key">
                                             <v-expansion-panel-content>
@@ -130,19 +147,19 @@
                                                     <v-layout row class="CSSD-font">
                                                         <span class="item-counter">{{ key + 1 }}</span>
                                                         <v-layout row class="pl-2">
-                                                            <v-flex xs12 sm6 md4>
+                                                            <v-flex xs12 sm6 md3>
                                                                 <span class="sub-text">Item ID:</span> {{ item.id }}
                                                             </v-flex>
-                                                            <v-flex xs12 sm6 md4>
+                                                            <v-flex xs12 sm6 md5>
                                                                 <span class="sub-text">Item Name:</span> {{ item.name }}
                                                             </v-flex>
                                                             <v-flex xs12 sm6 md4 v-if="item.pivot">
-                                                                <span class="sub-text">Item Pivot counter:</span>
-                                                                {{ item.pivot.count }}
+                                                                 <span class="sub-text">Item Pivot counter:</span>
+                                                                 {{ item.pivot.count }}
                                                             </v-flex>
                                                         </v-layout>
                                                     </v-layout>
-<!--                                                    <div>{{ item.name }} ({{ item.pivot.count }})</div>-->
+                                                    <!--                                                    <div>{{ item.name }} ({{ item.pivot.count }})</div>-->
                                                 </template>
                                                 <v-card>
                                                     <v-card-text>note : {{ item.note }}</v-card-text>
diff --git a/src/components/modal/package/Show.vue b/src/components/modal/package/Show.vue
index e6a2616..4c67479 100644
--- a/src/components/modal/package/Show.vue
+++ b/src/components/modal/package/Show.vue
@@ -66,7 +66,7 @@
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
-                <v-layout row wrap class="ml-4 WM-Relative">
+                <v-layout row wrap class="WM-Relative">
                     <template v-if="data.items.length">
                         <v-expansion-panel class="WM-Panel">
                             <v-expansion-panel-content v-for="(item, key) in data.items" :key="key">
diff --git a/src/components/modal/testresult/Show.vue b/src/components/modal/testresult/Show.vue
index b6f6c95..948cb42 100644
--- a/src/components/modal/testresult/Show.vue
+++ b/src/components/modal/testresult/Show.vue
@@ -1,156 +1,160 @@
 <template>
     <v-container grid-list-xs>
-        <material-card color="black" title="Show Test Result" id="printMe">
-            <v-layout align-left justify-left wrap class="my-3 ShowTestResult">
-                <h4 class="ml-4 headline font-weight-bold">Test Type : {{ data.test_type.name }}</h4>
-                <v-flex xs12>
-                    <hr class="v-divider theme--light"/>
-                </v-flex>
-                <v-layout row wrap class="ml-4">
-                    <!-- <v-flex xs6 md6 sm6>
-                     <span class="subtitle-1">{{ data.device_label || 'AutoclaveID' }} :</span>
-                            <span
-                                class="title font-weight-bold ml-2"
-                                style="letter-spacing:0 !important">
-                                {{ data.device_id }}
-                                </span>
-                    </v-flex> -->
-                    <v-flex xs12 sm12 md6 lg4 class="py-1">
-                        <span class="subtitle-1">ID :</span>
-                        <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
+        <material-card color="black" title="Show Test Result">
+            <v-flex xs12 id="printMe">
+                <v-layout align-left justify-left wrap class="my-3 ShowTestResult">
+                    <h4 class="ml-4 headline font-weight-bold">Test Type : {{ data.test_type.name }}</h4>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light"/>
+                    </v-flex>
+                    <v-layout row wrap class="ml-4">
+                        <!-- <v-flex xs6 md6 sm6>
+                         <span class="subtitle-1">{{ data.device_label || 'AutoclaveID' }} :</span>
+                                <span
+                                    class="title font-weight-bold ml-2"
+                                    style="letter-spacing:0 !important">
+                                    {{ data.device_id }}
+                                    </span>
+                        </v-flex> -->
+                        <v-flex xs12 sm12 md6 lg4 class="py-1">
+                            <span class="subtitle-1">ID :</span>
+                            <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
                             {{ data.id }}
                         </span>
-                    </v-flex>
-                    <v-flex xs12 sm12 md6 lg4 class="py-1">
-                        <span class="subtitle-1">Result :</span>
-                        <v-icon size="20"
-                                :class="['caption fa ml-2', data.result == 'Reject'?'NotVerified':( data.result == 'Accept'?'Verified':'')]">
-                            {{ data.result == 'Reject' ? 'fa-times' : (data.result == 'Accept' ? 'fa-check':'') }}
-                        </v-icon>
-                        <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
+                        </v-flex>
+                        <v-flex xs12 sm12 md6 lg4 class="py-1">
+                            <span class="subtitle-1">Result :</span>
+                            <v-icon size="20"
+                                    :class="['caption fa ml-2', data.result == 'Reject'?'NotVerified':( data.result == 'Accept'?'Verified':'')]">
+                                {{ data.result == 'Reject' ? 'fa-times' : (data.result == 'Accept' ? 'fa-check' : '') }}
+                            </v-icon>
+                            <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
                             {{ data.result }}
                         </span>
-                    </v-flex>
-                    <v-flex xs12 sm12 md6 lg4 class="py-1">
-                        <span class="subtitle-1">verify :</span>
-                        <v-icon size="20"
-                                :class="['caption fa ml-2', data.verified == 'NotVerified'?'NotVerified':(data.verified == 'Verified'? 'Verified' : '')]">
-                            {{ data.verified == 'NotVerified' ? 'fa-times' :(data.verified == 'Verified' ? 'fa-check':'') }}
-                        </v-icon>
-                        <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
+                        </v-flex>
+                        <v-flex xs12 sm12 md6 lg4 class="py-1">
+                            <span class="subtitle-1">verify :</span>
+                            <v-icon size="20"
+                                    :class="['caption fa ml-2', data.verified == 'NotVerified'?'NotVerified':(data.verified == 'Verified'? 'Verified' : '')]">
+                                {{
+                                    data.verified == 'NotVerified' ? 'fa-times' : (data.verified == 'Verified' ? 'fa-check' : '')
+                                }}
+                            </v-icon>
+                            <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
                             {{ data.verified }}
                         </span>
-                    </v-flex>
-                    <v-flex xs12 sm12 md6 lg4 class="py-1">
-                        <span class="subtitle-1">Register User :</span>
-                        <span class="title font-weight-bold ml-2"
-                              style="letter-spacing:0 !important">
+                        </v-flex>
+                        <v-flex xs12 sm12 md6 lg4 class="py-1">
+                            <span class="subtitle-1">Register User :</span>
+                            <span class="title font-weight-bold ml-2"
+                                  style="letter-spacing:0 !important">
                                 {{ data.user.name }}
                             </span>
-                    </v-flex>
-                    <v-flex xs12 sm12 md6 lg4 class="py-1">
-                        <span class="subtitle-1">Date :</span>
-                        <span class="title font-weight-bold ml-2" style="letter-spacing:0 !important">
+                        </v-flex>
+                        <v-flex xs12 sm12 md6 lg4 class="py-1">
+                            <span class="subtitle-1">Date :</span>
+                            <span class="title font-weight-bold ml-2" style="letter-spacing:0 !important">
                                 {{ $d(new Date(data.created_at), 'long') }}
                             </span>
-                    </v-flex>
-                    <v-flex xs12 sm12 md6 lg4 class="py-1">
-                        <span class="subtitle-1">Medical Center :</span>
-                        <span class="title font-weight-bold ml-2" style="letter-spacing:0 !important">
+                        </v-flex>
+                        <v-flex xs12 sm12 md6 lg4 class="py-1">
+                            <span class="subtitle-1">Medical Center :</span>
+                            <span class="title font-weight-bold ml-2" style="letter-spacing:0 !important">
                                 {{ data.user.medical_center.name }}
                             </span>
-                    </v-flex>
+                        </v-flex>
+                    </v-layout>
                 </v-layout>
-            </v-layout>
-            <v-layout align-left justify-left wrap class="my-3">
-                <h4 class="ml-4 headline CSSD-font font-weight-bold">Special Info</h4>
-                <v-flex xs12>
-                    <hr class="v-divider theme--light"/>
-                </v-flex>
-                <v-layout row wrap class="ml-4">
-                    <template v-if="data.inputs">
-                        <v-flex xs12 sm12 md6 lg4 class="py-1" v-for="(inputData, keyInputs) in data.inputs" :key="keyInputs">
-                            <span class="subtitle-1">{{ keyInputs }} :</span>
-                            <span class="title font-weight-bold ml-2"
-                                  style="letter-spacing:0 !important">{{ inputData }}</span>
-                        </v-flex>
-                    </template>
-                    <template v-if="data.options">
-                        <v-flex xs12 sm12 md6 lg4 class="py-1" v-for="(optionData, keyOptions) in data.options" :key="keyOptions">
-                            <span class="subtitle-1">{{ keyOptions }} :</span>
-                            <span
-                                    style="letter-spacing:0 !important"
-                                    class="title font-weight-bold ml-2"
-                                    v-for="(data, dataKey) in optionData"
-                                    :key="dataKey">{{ data }},</span>
-                        </v-flex>
-                    </template>
-                    <template v-if="data.children">
-                        <v-layout row wrap class="WM-Width-Full">
-                            <v-flex class="mt-4 pb-4" style="border-left:3px solid #32c5d2;border-bottom:1px solid #ddd"
-                                    xs12 md12 sm12 v-for="(formData, keyForm) in data.children" :key="keyForm">
-                                <h4 class="ml-4 headline CSSD-font font-weight-bold">{{ keyForm }}</h4>
-                                <v-layout row wrap>
-                                    <v-layout row wrap v-for="(childData, keyChild) in formData" :key="keyChild">
-                                        <v-flex xs12 md12 sm12 class="ml-4">
-                                            <span class="subtitle-1">{{ keyChild }} :</span>
-                                            <template v-if="Array.isArray(childData)">
+                <v-layout align-left justify-left wrap class="my-3">
+                    <h4 class="ml-4 headline CSSD-font font-weight-bold">Special Info</h4>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light"/>
+                    </v-flex>
+                    <v-layout row wrap class="ml-4">
+                        <template v-if="data.inputs">
+                            <v-flex xs12 sm12 md6 lg4 class="py-1" v-for="(inputData, keyInputs) in data.inputs"
+                                    :key="keyInputs">
+                                <span class="subtitle-1">{{ keyInputs }} :</span>
+                                <span class="title font-weight-bold ml-2"
+                                      style="letter-spacing:0 !important">{{ inputData }}</span>
+                            </v-flex>
+                        </template>
+                        <template v-if="data.options">
+                            <v-flex xs12 sm12 md6 lg4 class="py-1" v-for="(optionData, keyOptions) in data.options"
+                                    :key="keyOptions">
+                                <span class="subtitle-1">{{ keyOptions }} :</span>
+                                <span
+                                        style="letter-spacing:0 !important"
+                                        class="title font-weight-bold ml-2"
+                                        v-for="(data, dataKey) in optionData"
+                                        :key="dataKey">{{ data }},</span>
+                            </v-flex>
+                        </template>
+                        <template v-if="data.children">
+                            <v-layout row wrap class="WM-Width-Full">
+                                <v-flex class="mt-4 pb-4"
+                                        style="border-left:3px solid #32c5d2;border-bottom:1px solid #ddd"
+                                        xs12 md12 sm12 v-for="(formData, keyForm) in data.children" :key="keyForm">
+                                    <h4 class="ml-4 headline CSSD-font font-weight-bold">{{ keyForm }}</h4>
+                                    <v-layout row wrap>
+                                        <v-layout row wrap v-for="(childData, keyChild) in formData" :key="keyChild">
+                                            <v-flex xs12 md12 sm12 class="ml-4">
+                                                <span class="subtitle-1">{{ keyChild }} :</span>
+                                                <template v-if="Array.isArray(childData)">
                                         <span
                                                 style="letter-spacing:0 !important"
                                                 class="title font-weight-bold ml-2"
                                                 v-for="(data, dataKey) in childData"
                                                 :key="dataKey">{{ data }},</span>
-                                            </template>
-                                            <template v-else>
-                                                <span class="headline ml-2">{{ childData }}</span>
-                                            </template>
-                                        </v-flex>
+                                                </template>
+                                                <template v-else>
+                                                    <span class="headline ml-2">{{ childData }}</span>
+                                                </template>
+                                            </v-flex>
+                                        </v-layout>
                                     </v-layout>
-                                </v-layout>
-                            </v-flex>
-                        </v-layout>
-                    </template>
-                </v-layout>
-            </v-layout>
-            <v-layout align-left justify-left wrap class="my-3" v-if="data.files.length">
-                <h4 class="ml-4 headline CSSD-font font-weight-bold">Image</h4>
-                <v-flex xs12>
-                    <hr class="v-divider theme--light"/>
-                </v-flex>
-                <v-layout row wrap class="ml-4 align-center">
-                    <v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
-                        <template v-if="file.file_type == 'document'">
-                            <a target="_blank" :href="'/'+file.thumbnail">
-                                <v-icon class="mr-2 caption">fas fa-check</v-icon>
-                                {{ file.file_name }}</a>
+                                </v-flex>
+                            </v-layout>
                         </template>
-
-                        <template v-else>
-                            <img :src="file.thumbnail" style="width: 100%" @click="openLightbox(key)"/>
-                        </template>
-                    </v-flex>
+                    </v-layout>
                 </v-layout>
-            </v-layout>
+                <v-layout align-left justify-left wrap class="my-3" v-if="data.files.length">
+                    <h4 class="ml-4 headline CSSD-font font-weight-bold">Image</h4>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light"/>
+                    </v-flex>
+                    <v-layout row wrap class="ml-4 align-center">
+                        <v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
+                            <template v-if="file.file_type == 'document'">
+                                <a target="_blank" :href="'/'+file.thumbnail">
+                                    <v-icon class="mr-2 caption">fas fa-check</v-icon>
+                                    {{ file.file_name }}</a>
+                            </template>
 
-            <v-layout align-left justify-left wrap class="my-3">
-                <h3 class="CSSD-font">Barcode And QRCode Image</h3>
-                <v-flex xs12>
-                    <hr class="v-divider theme--light">
-                </v-flex>
-                <v-layout row wrap class="align-center mt-3">
-                    <v-flex xs12 md6 sm6 v-if="barcodeimg">
-                        <img :src="barcodeimg" class="WM-Width-350"><br/>
-                        <span class="CSSD-font">Test Result ID : {{ data.id }}</span>
-                    </v-flex>
-                    <v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-R">
-                        <a :href="'https://www.cssd-doc.com/Show/TestResult/' + data.id + ''" target="_blank">
-                            <img :src="QRCodeimg" class="WM-Width-150">
-                        </a>
-                    </v-flex>
+                            <template v-else>
+                                <img :src="file.thumbnail" style="width: 100%" @click="openLightbox(key)"/>
+                            </template>
+                        </v-flex>
+                    </v-layout>
                 </v-layout>
-            </v-layout>
-            <!-- </material-card>
-            <material-card> -->
+                <v-layout align-left justify-left wrap class="my-3">
+                    <h3 class="CSSD-font">Barcode And QRCode Image</h3>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light">
+                    </v-flex>
+                    <v-layout row wrap class="align-center mt-3">
+                        <v-flex xs12 md6 sm6 v-if="barcodeimg">
+                            <img :src="barcodeimg" class="WM-Width-350"><br/>
+                            <span class="CSSD-font">Test Result ID : {{ data.id }}</span>
+                        </v-flex>
+                        <v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-R">
+                            <a :href="'https://www.cssd-doc.com/Show/TestResult/' + data.id + ''" target="_blank">
+                                <img :src="QRCodeimg" class="WM-Width-150">
+                            </a>
+                        </v-flex>
+                    </v-layout>
+                </v-layout>
+            </v-flex>
             <v-layout row wrap align-center justify-center class="my-3" v-if="$hasRole('Admin|Supervisor')">
                 <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" style="padding:10px 60px"
                        @click="closeModal">
@@ -193,6 +197,7 @@ import {ApiService} from "@/services";
 import {urls} from "@/config/urls";
 import VueImageLightbox from 'vue-image-lightbox'
 import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
+
 export default {
     data: () => ({
         data: {},
@@ -215,11 +220,11 @@ export default {
             }
         },
         async generateBarcode(item) {
-                const result = await ApiService.post(urls.Barcode(item.id, 'TestResult'));
-                if (result && result.status == 200) {
-                    this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null;
-                    this.barcodeimg = result.data.data.Barcode ? result.data.data.Barcode : null;
-                }
+            const result = await ApiService.post(urls.Barcode(item.id, 'TestResult'));
+            if (result && result.status == 200) {
+                this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null;
+                this.barcodeimg = result.data.data.Barcode ? result.data.data.Barcode : null;
+            }
         },
         print() {
             const prtHtml = document.getElementById("printMe").innerHTML;