From d84a9a18c0261e11c0f0db3d831effc1218a49d3 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Wed, 23 Apr 2025 11:55:25 +0330
Subject: [PATCH] fix : test-result details image and barcode

---
 .../show/views/TestResult/ShowTestResult.vue  | 94 ++++++++++++-------
 resources/js/vue/views/Label/List.vue         | 16 ++--
 2 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/resources/js/show/views/TestResult/ShowTestResult.vue b/resources/js/show/views/TestResult/ShowTestResult.vue
index 55fbbf02..ccc5357d 100644
--- a/resources/js/show/views/TestResult/ShowTestResult.vue
+++ b/resources/js/show/views/TestResult/ShowTestResult.vue
@@ -1,11 +1,10 @@
-
 <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">
                 <h3 class="ml-3 CSSD-font">Test Type : {{ TestType }}</h3>
                 <v-flex xs12>
-                    <hr class="v-divider theme--light" />
+                    <hr class="v-divider theme--light"/>
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <v-flex xs12 md12 sm12>
@@ -73,39 +72,41 @@
             <v-layout align-left justify-left wrap class="my-3">
                 <h3 class="ml-3 CSSD-font">Special Info</h3>
                 <v-flex xs12>
-                    <hr class="v-divider theme--light" />
+                    <hr class="v-divider theme--light"/>
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <template v-if="data.inputs">
                         <v-flex xs12 md12 sm12 v-for="(inputData, keyInputs) in data.inputs" :key="keyInputs">
-                            <span class="title">{{keyInputs}} :</span>
+                            <span class="title">{{ keyInputs }} :</span>
                             <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">
-                                {{inputData}}
+                                {{ inputData }}
                             </span>
                         </v-flex>
                     </template>
                     <template v-if="data.options">
                         <v-flex xs12 md12 sm12 v-for="(optionData, keyOptions) in data.options" :key="keyOptions">
-                            <span class="title CSSD-font">{{keyOptions}} :</span>
-                            <span style="letter-spacing:0 !important" class="headline ml-2 CSSD-font" v-for="(data, dataKey) in optionData" :key="dataKey">
-                                {{data}},
+                            <span class="title CSSD-font">{{ keyOptions }} :</span>
+                            <span style="letter-spacing:0 !important" class="headline ml-2 CSSD-font"
+                                  v-for="(data, dataKey) in optionData" :key="dataKey">
+                                {{ data }},
                             </span>
                         </v-flex>
                     </template>
                     <template v-if="data.children">
-                        <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">
-                            <h3 class="ml-3 CSSD-font">{{keyForm}}</h3>
+                        <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">
+                            <h3 class="ml-3 CSSD-font">{{ keyForm }}</h3>
                             <div v-for="(childData, keyChild) in formData" :key="keyChild">
                                 <div class="ml-4">
-                                    <span class="title CSSD-font">{{keyChild}} :</span>
+                                    <span class="title CSSD-font">{{ keyChild }} :</span>
                                     <template v-if="Array.isArray(childData)">
                                         <span style="letter-spacing:0 !important" class="headline ml-2 CSSD-font"
                                               v-for="(data, dataKey) in childData" :key="dataKey">
-                                            {{data}},
+                                            {{ data }},
                                         </span>
                                     </template>
                                     <template v-else>
-                                        <span class="headline ml-2 CSSD-font">{{childData}}</span>
+                                        <span class="headline ml-2 CSSD-font">{{ childData }}</span>
                                     </template>
                                 </div>
                             </div>
@@ -116,22 +117,37 @@
             <v-layout align-left justify-left wrap class="my-3">
                 <h3 class="ml-3 CSSD-font">Image</h3>
                 <v-flex xs12>
-                    <hr class="v-divider theme--light" />
+                    <hr class="v-divider theme--light"/>
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <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.path">
-                              <v-icon class="mr-2 caption">fas fa-check</v-icon>
-                              {{ file.file_name }}
-                          </a>
+                            <a target="_blank" :href="'/'+file.thumbnail">
+                                <v-icon class="mr-2 caption">fas fa-check</v-icon>
+                                {{ file.file_name }}
+                            </a>
                         </template>
 
                         <template v-else>
-                          <img :src="'/'+file.path" style="width: 100%" />
+                            <img :src="'/'+file.thumbnail" style="width: 100%"/>
                         </template>
                     </v-flex>
                 </v-layout>
+                <v-layout align-left justify-left wrap class="my-3">
+                    <h3 class="ml-3 CSSD-font">Barcode And QRCode Image</h3>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light">
+                    </v-flex>
+                    <v-layout row wrap class="ml-4 align-center mt-2">
+                        <v-flex xs12 md6 sm6 v-if="barcodeimg">
+                            <img :src="barcodeimg" class="barcode-container"><br/>
+                            <span class="CSSD-font">Item ID : {{ data.id }}</span>
+                        </v-flex>
+                        <v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-C">
+                            <img :src="QRCodeimg" class="WM-Width-150">
+                        </v-flex>
+                    </v-layout>
+                </v-layout>
             </v-layout>
             <v-layout row wrap style="text-align:center">
                 <v-flex class xs12 md2 sm12>
@@ -146,28 +162,40 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from "vuex";
+import {mapGetters, mapMutations} from "vuex";
 import axios from "axios";
-import { urls } from "@show/config/urls";
+import {urls} from "@show/config/urls";
+
 export default {
     data: () => ({
-        data : {},
-        TestType : '',
-        MedicalCenter : '',
-        User : ''
+        data: {},
+        TestType: '',
+        MedicalCenter: '',
+        User: '',
+        QRCodeimg: '',
+        barcodeimg: '',
     }),
     methods: {
         async load(id) {
-			const result = await axios.get(urls.showTestResult(id));
+            const result = await axios.get(urls.showTestResult(id));
 
-			if (result.status == 200) {
-				this.data = result.data.data;
+            if (result.status == 200) {
+                this.data = result.data.data;
                 this.TestType = result.data.data.test_type.name;
                 this.MedicalCenter = result.data.data.user.medical_center.name;
                 this.User = this.data.user.name;
-			}
-		},
-
+                if (this.data) {
+                    this.generateBarcode(this.data);
+                }
+            }
+        },
+        async generateBarcode(item) {
+            const result = await axios.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;
 
@@ -204,8 +232,8 @@ export default {
     },
     created() {
         if (this.$route.params.id) {
-			this.load(this.$route.params.id);
-		}
+            this.load(this.$route.params.id);
+        }
     },
 
 };
diff --git a/resources/js/vue/views/Label/List.vue b/resources/js/vue/views/Label/List.vue
index f5775b8d..14d45d29 100644
--- a/resources/js/vue/views/Label/List.vue
+++ b/resources/js/vue/views/Label/List.vue
@@ -23,12 +23,12 @@
 						></v-autocomplete>
 					</v-flex>
 					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-						<v-text-field class="py-3" v-model="filter.sterilizer_id" label="Sterilizer ID" color="black"></v-text-field>
+						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+						<v-text-field class="py-3" v-model="filter.sterilizer_id" label="Sterilizer ID" color="black"/>
 					</v-flex>
 					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-						<v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number" color="black"></v-text-field>
+						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+						<v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number" color="black"/>
 					</v-flex>
 					<v-flex xs12 md2 sm3>
 						<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
@@ -78,8 +78,7 @@
 									<router-link
 										class="LinkBtn"
 										v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
-										:to="{name: 'EditLabel', params: {label: item.id}}"
-									>
+										:to="{name: 'EditLabel', params: {label: item.id}}">
 										<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
 											<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
 											<span>Edit</span>
@@ -95,8 +94,7 @@
 										color="pink"
 										class="WM-ActionButton mr-2"
 										@click="remove(item.id)"
-										v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
-									>
+										v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
 										<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
 										<span>Remove</span>
 									</v-btn>
@@ -119,7 +117,7 @@
 				</v-layout>
 				<v-divider></v-divider>
 				<div class="text-xs-center" v-if="lastPage > 1">
-					<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+					<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
 				</div>
 				<v-layout row wrap align-center justify-center class="mt-3">
 					<router-link to="/dashboard">