From b5abe4d2c886abaac8e199f2beb3fbb00511bbc9 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Wed, 23 Apr 2025 11:53:24 +0330
Subject: [PATCH] fix : display data in details and style

---
 src/components/core/Toolbar.vue          |  8 +--
 src/components/modal/testresult/Show.vue | 45 +++++++++---
 src/views/Item/List.vue                  | 19 ++++-
 src/views/TestResult/List.vue            | 88 ++++++++----------------
 4 files changed, 82 insertions(+), 78 deletions(-)

diff --git a/src/components/core/Toolbar.vue b/src/components/core/Toolbar.vue
index 3e71866..75a5054 100644
--- a/src/components/core/Toolbar.vue
+++ b/src/components/core/Toolbar.vue
@@ -32,8 +32,8 @@
                                 </v-list-tile-avatar> -->
 
                                 <v-list-tile-content>
-                                    <v-list-tile-title>{{ name }}</v-list-tile-title>
-                                    <v-list-tile-sub-title>{{ cell_number }}</v-list-tile-sub-title>
+                                    <v-list-tile-title>{{ $store.state.user.name }}</v-list-tile-title>
+                                    <v-list-tile-sub-title>{{ $store.state.user.cell_number }}</v-list-tile-sub-title>
                                 </v-list-tile-content>
                             </v-list-tile>
                         </v-list>
@@ -90,8 +90,6 @@ export default {
         title: null,
         responsive: false,
         responsiveInput: false,
-        name: '',
-        cell_number: '',
     }),
 
     watch: {
@@ -104,8 +102,6 @@ export default {
     mounted() {
         this.onResponsiveInverted();
         window.addEventListener('resize', this.onResponsiveInverted);
-        this.cell_number = this.$store.state.user.cell_number;
-        this.name = this.$store.state.user.name;
     },
     beforeDestroy() {
         window.removeEventListener('resize', this.onResponsiveInverted)
diff --git a/src/components/modal/testresult/Show.vue b/src/components/modal/testresult/Show.vue
index da283ba..7418e33 100644
--- a/src/components/modal/testresult/Show.vue
+++ b/src/components/modal/testresult/Show.vue
@@ -112,7 +112,7 @@
                     </template>
                 </v-layout>
             </v-layout>
-            <v-layout align-left justify-left wrap class="my-3">
+            <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"/>
@@ -132,6 +132,24 @@
                     </v-flex>
                 </v-layout>
             </v-layout>
+
+            <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>
             <!-- </material-card>
             <material-card> -->
             <v-layout row wrap align-center justify-center class="my-3" v-if="$hasRole('Admin|Supervisor')">
@@ -165,20 +183,18 @@
     </v-container>
 </template>
 <script>
-export default {
-    data: () => ({
-        data: {}
-    })
-};
-</script>
-<script>
 import {mapGetters, mapMutations} from "vuex";
 import {ApiService} from "@/services";
 import {urls} from "@/config/urls";
+import toast from "@/services/global/toast.service";
 // import LightBox from 'vue-image-lightbox';
 // import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
 export default {
-    data: () => ({}),
+    data: () => ({
+        data: {},
+        QRCodeimg: '',
+        barcodeimg: ''
+    }),
     methods: {
         ...mapMutations("modal", ["closeModal", "setResultModal"]),
         async verify(id, value) {
@@ -188,6 +204,13 @@ export default {
                 this.closeModal();
             }
         },
+        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;
+                }
+        },
         print() {
             const prtHtml = document.getElementById("printMe").innerHTML;
 
@@ -224,10 +247,12 @@ export default {
     },
     created() {
         this.data = this.getModalProperties.result.data.data;
-
     },
     computed: {
         ...mapGetters("modal", ["getModalProperties"])
+    },
+    mounted() {
+        this.generateBarcode(this.data);
     }
 };
 </script>
diff --git a/src/views/Item/List.vue b/src/views/Item/List.vue
index bdb9210..cba38a2 100644
--- a/src/views/Item/List.vue
+++ b/src/views/Item/List.vue
@@ -113,6 +113,17 @@
                                         </template>
                                         <span>Generate Barcode</span>
                                     </v-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
+                                                   v-if="$hasRole('Admin|Supervisor') || item.user_id == $store.state.user.id"
+                                                   @click="transfer(item)">
+                                                <v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
+                                                <span class="CSSD-font">Transfer</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Transfer</span>
+                                    </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
                                             <router-link class="LinkBtn"
@@ -291,7 +302,13 @@ export default {
                 const target = this.items.find(i => i.id === item.id)
                 if (target) target.status = newStatus
             }
-        }
+        },
+        async transfer(data) {
+            this.changeCurrentModal({
+                modal: "modal-user-list",
+                properties: {data},
+            });
+        },
     },
     watch: {
         currentPage(page) {
diff --git a/src/views/TestResult/List.vue b/src/views/TestResult/List.vue
index 8f264de..200ffdb 100644
--- a/src/views/TestResult/List.vue
+++ b/src/views/TestResult/List.vue
@@ -32,7 +32,8 @@
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
                         <v-icon class="far fa-calendar-alt mr-2"/>
-                        <v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
+                        <v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
+                                offset-y
                                 v-model="fromMenu" style="width: 100%">
                             <v-text-field class="pt-3 pr-3" required slot="activator" label="FromDate"
                                           v-model="filter.fromPicker" color="black"/>
@@ -42,7 +43,8 @@
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" style="display: flex;align-items: center;">
                         <v-icon class="far fa-calendar-alt mr-2"/>
-                        <v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
+                        <v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
+                                offset-y
                                 v-model="upToMenu" style="width: 100%">
                             <v-text-field class="pt-3 pr-3" required slot="activator" label="UpToDate" color="black"
                                           v-model="filter.upToPicker"/>
@@ -54,7 +56,9 @@
                     <v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
                         <v-tooltip bottom open-on-hover>
                             <template v-slot:activator="{ on, attrs }">
-                                <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load(null, null)">
+                                <v-btn v-bind="attrs" v-on="on"
+                                       color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2"
+                                       @click="load(null, null)">
                                     <v-icon class="black--text caption">fas fa-search</v-icon>
                                 </v-btn>
                             </template>
@@ -108,9 +112,9 @@
                                 <td class="text-xs-right FlexBtn justify-self-end">
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
-                                            <v-btn color="cyan" class="mr-2" @click="show(item.id)" v-bind="attrs"
+                                            <v-btn color="light-gray" class="mr-2" @click="show(item.id)" v-bind="attrs"
                                                    v-on="on">
-                                                <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                                <v-icon class="black--text mr-1 caption">fas fa-eye</v-icon>
                                                 <span>Show</span>
                                             </v-btn>
                                         </template>
@@ -118,10 +122,10 @@
                                     </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
-                                            <v-btn color="orange" class="mr-2"
+                                            <v-btn color="light-gray" class="mr-2"
                                                    @click="generateBarcode(item.id, 'TestResult')" v-bind="attrs"
                                                    v-on="on">
-                                                <v-icon class="white--text mr-1 caption">fa fa-bars</v-icon>
+                                                <v-icon class="black--text mr-1 caption">fa fa-bars</v-icon>
                                                 <span>generate Barcode</span>
                                             </v-btn>
                                         </template>
@@ -133,7 +137,7 @@
                                             <router-link class="LinkBtn"
                                                          v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
                                                          :to="{ name: 'EditTestResult', params: { testResult: item.id } }">
-                                                <v-btn color="orange" class="mr-2" v-bind="attrs" v-on="on">
+                                                <v-btn color="black" class="mr-2" v-bind="attrs" v-on="on">
                                                     <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
                                                     <span>Edit</span>
                                                 </v-btn>
@@ -144,7 +148,7 @@
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
                                             <!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
-                                            <v-btn color="pink" class="WM-ActionButton" @click="removeModal(item.id)"
+                                            <v-btn color="red" class="WM-ActionButton" @click="removeModal(item.id)"
                                                    v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
                                                    v-bind="attrs" v-on="on">
                                                 <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -223,54 +227,19 @@ export default {
         lastPage: 1,
         testTypes: [],
         medicalCenters: [],
-        deviceLabels: [{
-            name: "Washer ID",
-            id: "Washer ID"
-        },
-            {
-                name: "Autoclave ID",
-                id: "Autoclave ID"
-            },
-            {
-                name: "Sterilizer ID",
-                id: "Sterilizer ID"
-            },
-            {
-                name: "Seal Machine ID",
-                id: "Seal Machine ID"
-            },
-            {
-                name: "Patiant ID",
-                id: "Patiant ID"
-            },
-            {
-                name: "Set/Pack ID",
-                id: "Set/Pack ID"
-            },
-            {
-                name: "Medical Device ID",
-                id: "Medical Device ID"
-            },
-            {
-                name: "OR ID",
-                id: "OR ID"
-            },
-            {
-                name: "Personal ID",
-                id: "Personal ID"
-            },
-            {
-                name: "Instrument ID",
-                id: "Instrument ID"
-            },
-            {
-                name: "Basket ID",
-                id: "Basket ID"
-            },
-            {
-                name: "Implant ID",
-                id: "Implant ID"
-            },
+        deviceLabels: [
+            {name: "Washer ID", id: "Washer ID"},
+            {name: "Autoclave ID", id: "Autoclave ID"},
+            {name: "Sterilizer ID", id: "Sterilizer ID"},
+            {name: "Seal Machine ID", id: "Seal Machine ID"},
+            {name: "Patiant ID", id: "Patiant ID"},
+            {name: "Set/Pack ID", id: "Set/Pack ID"},
+            {name: "Medical Device ID", id: "Medical Device ID"},
+            {name: "OR ID", id: "OR ID"},
+            {name: "Personal ID", id: "Personal ID"},
+            {name: "Instrument ID", id: "Instrument ID"},
+            {name: "Basket ID", id: "Basket ID"},
+            {name: "Implant ID", id: "Implant ID"},
         ]
     }),
     created() {
@@ -363,10 +332,7 @@ export default {
         },
         getModalResult(testResult) {
             for (const key in this.items) {
-                if (
-                        this.items.hasOwnProperty(key) &&
-                        this.items[key].id == testResult.id
-                ) {
+                if (this.items.hasOwnProperty(key) && this.items[key].id == testResult.id) {
                     this.items[key].verified = testResult.verified;
                 }
             }