From 200888482fed37d865d4cb9dbf30833239a8fd08 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Sun, 27 Apr 2025 10:38:26 +0330
Subject: [PATCH] feat : lightbox

---
 resources/js/show/config/urls.js              |  1 -
 resources/js/show/router/index.js             |  1 -
 resources/js/show/views/Item/ShowItem.vue     | 45 ++++++++++---
 .../show/views/TestResult/ShowTestResult.vue  | 67 ++++++++++++++-----
 4 files changed, 83 insertions(+), 31 deletions(-)

diff --git a/resources/js/show/config/urls.js b/resources/js/show/config/urls.js
index af9cf290..e3e2b1e9 100644
--- a/resources/js/show/config/urls.js
+++ b/resources/js/show/config/urls.js
@@ -17,7 +17,6 @@ const urls = {
         return `/ShowCycle/${id}`;
     },
     Barcode: function(code, type) {
-        console.log(code, type,'aaa');
         return `/BarCode/${code}/${type}`;
     },
     packageBarcode: function(code) {
diff --git a/resources/js/show/router/index.js b/resources/js/show/router/index.js
index 2688ff76..5a8c3a0b 100644
--- a/resources/js/show/router/index.js
+++ b/resources/js/show/router/index.js
@@ -30,7 +30,6 @@ function route (options) {
 }
 
 Vue.use(Router)
-console.log(paths);
 // Create a new router
 const router = new Router({
   mode: 'history',
diff --git a/resources/js/show/views/Item/ShowItem.vue b/resources/js/show/views/Item/ShowItem.vue
index ca4a1519..01281454 100644
--- a/resources/js/show/views/Item/ShowItem.vue
+++ b/resources/js/show/views/Item/ShowItem.vue
@@ -6,7 +6,7 @@
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
-                <v-layout row wrap class="ml-4">
+                <v-layout row wrap class="ml-4 align-center">
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title CSSD-font">Item ID :</span>
@@ -64,13 +64,12 @@
                         </div>
                     </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-3" v-if="data.files && 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="">
-                        <!-- <LightBox :media="data.images.map(img => ({thumb: img.path, src: img.path}))" style="width: 20%"></LightBox> -->
                         <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">
@@ -79,7 +78,7 @@
                             </template>
 
                             <template v-else>
-                                <img :src="file.thumbnail" style="width: 100%"/>
+                                <img :src="file.thumbnail" style="width: 100%" @click="openLightbox(key)"/>
                             </template>
                         </v-flex>
                     </v-layout>
@@ -117,23 +116,40 @@
                 </v-flex>
             </v-layout>
         </material-card>
+        <vue-image-lightbox
+            v-if="showLightbox"
+            :media="lightboxImages"
+            :index="lightboxIndex"
+            @close="showLightbox = false"
+        />
     </v-container>
 </template>
 
 <script>
-
 import {urls} from "@show/config/urls";
 import axios from "axios";
 import toast from "@/services/global/toast.service";
-
+import VueImageLightbox from "vue-image-lightbox";
+import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
 
 export default {
     data: () => ({
         data: {},
         QRCodeimg: '',
         barcodeimg: '',
-        MedicalCenter: ''
+        MedicalCenter: '',
+        showLightbox: false,
+        lightboxIndex: 0,
+        lightboxImages: [],
     }),
+    components: {
+        VueImageLightbox,
+    },
+    computed: {
+        imagesOnly() {
+            return this.data.files && this.data.files.length? this.data.files.filter(file => file.file_type !== 'document') : [];
+        },
+    },
     methods: {
         async load(id) {
             try {
@@ -149,7 +165,6 @@ export default {
                 console.error("Error loading data:", error);
             }
         },
-
         async generateBarcode(item) {
             let code = item.udi;
             if (code) {
@@ -200,16 +215,24 @@ export default {
             WinPrint.focus();
             WinPrint.print();
             WinPrint.close();
+        },
+        openLightbox(index) {
+            this.lightboxIndex = index;
+            this.showLightbox = false;
+            this.$nextTick(() => {
+                this.showLightbox = true;
+            });
         }
     },
     created() {
         if (this.$route.params.item) {
             this.load(this.$route.params.item);
         }
+        this.lightboxImages = this.imagesOnly && this.imagesOnly.length ? this.imagesOnly.map(file => ({
+            src: file.thumbnail,
+            thumb: file.thumbnail,
+        })) : [];
     },
-    // mounted() {
-    //   this.generateBarcode(this.data.id);
-    // }
 };
 </script>
 
diff --git a/resources/js/show/views/TestResult/ShowTestResult.vue b/resources/js/show/views/TestResult/ShowTestResult.vue
index ccc5357d..d75eeb85 100644
--- a/resources/js/show/views/TestResult/ShowTestResult.vue
+++ b/resources/js/show/views/TestResult/ShowTestResult.vue
@@ -114,24 +114,26 @@
                     </template>
                 </v-layout>
             </v-layout>
-            <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"/>
-                </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.thumbnail">
-                                <v-icon class="mr-2 caption">fas fa-check</v-icon>
-                                {{ file.file_name }}
-                            </a>
-                        </template>
 
-                        <template v-else>
-                            <img :src="'/'+file.thumbnail" style="width: 100%"/>
-                        </template>
+            <v-layout align-left justify-left wrap class="my-3">
+                <v-layout align-left justify-left wrap class="my-3" v-if="data.files && 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-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>
+
+                            <template v-else>
+                                <img :src="file.thumbnail" style="width: 100%" @click="openLightbox(key)"/>
+                            </template>
+                        </v-flex>
+                    </v-layout>
                 </v-layout>
                 <v-layout align-left justify-left wrap class="my-3">
                     <h3 class="ml-3 CSSD-font">Barcode And QRCode Image</h3>
@@ -140,7 +142,7 @@
                     </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/>
+                            <img :src="barcodeimg" class="barcode-container" style="width: 100%;max-width: 300px;"><br/>
                             <span class="CSSD-font">Item ID : {{ data.id }}</span>
                         </v-flex>
                         <v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-C">
@@ -158,13 +160,20 @@
                 </v-flex>
             </v-layout>
         </material-card>
+        <vue-image-lightbox
+            v-if="showLightbox"
+            :media="lightboxImages"
+            :index="lightboxIndex"
+            @close="showLightbox = false"
+        />
     </v-container>
 </template>
 
 <script>
-import {mapGetters, mapMutations} from "vuex";
 import axios from "axios";
 import {urls} from "@show/config/urls";
+import VueImageLightbox from 'vue-image-lightbox'
+import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
 
 export default {
     data: () => ({
@@ -174,7 +183,18 @@ export default {
         User: '',
         QRCodeimg: '',
         barcodeimg: '',
+        showLightbox: false,
+        lightboxIndex: 0,
+        lightboxImages: [],
     }),
+    components: {
+        VueImageLightbox,
+    },
+    computed: {
+        imagesOnly() {
+            return this.data.files && this.data.files.length? this.data.files.filter(file => file.file_type !== 'document') : [];
+        },
+    },
     methods: {
         async load(id) {
             const result = await axios.get(urls.showTestResult(id));
@@ -228,12 +248,23 @@ export default {
             WinPrint.focus();
             WinPrint.print();
             WinPrint.close();
+        },
+        openLightbox(index) {
+            this.lightboxIndex = index;
+            this.showLightbox = false;
+            this.$nextTick(() => {
+                this.showLightbox = true;
+            });
         }
     },
     created() {
         if (this.$route.params.id) {
             this.load(this.$route.params.id);
         }
+        this.lightboxImages = this.imagesOnly && this.imagesOnly.length ? this.imagesOnly.map(file => ({
+            src: file.thumbnail,
+            thumb: file.thumbnail,
+        })) : [];
     },
 
 };