From 221a7f7f406c9615d7b4b538d5bde83028a71bd0 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Sat, 26 Apr 2025 14:17:51 +0330
Subject: [PATCH] fix : light box

---
 src/components/modal/item/show.vue       | 52 ++++++++++++++++++------
 src/components/modal/testresult/Show.vue | 36 +++++++++++++---
 src/views/Item/List.vue                  |  2 +-
 src/views/MyItem/List.vue                | 10 ++---
 src/views/MyPackage/List.vue             | 10 ++---
 src/views/Package/List.vue               |  2 +-
 src/views/TestResult/AddEdit.vue         |  8 ++--
 7 files changed, 86 insertions(+), 34 deletions(-)

diff --git a/src/components/modal/item/show.vue b/src/components/modal/item/show.vue
index e1c208f..a4c2766 100644
--- a/src/components/modal/item/show.vue
+++ b/src/components/modal/item/show.vue
@@ -78,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>
@@ -113,19 +113,27 @@
                     <v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
                     <span class="white--text CSSD-font">Print</span>
                 </v-btn>
-                <v-btn class="WM-CyanBlueGradient-BG"
-                       @click="changeCurrentModal({modal: 'modal-user-list',  properties: { data }})"
-                       style="padding:10px 60px">
-                    <!-- <v-icon class="white--text mr-2 caption">fas fa-print</v-icon> -->
-                    <v-icon class="white--text mr-2 caption">fas fa-rocket</v-icon>
-                    <span class="white--text CSSD-font">Transfer</span>
-                </v-btn>
+                <!--                <v-btn class="WM-CyanBlueGradient-BG"
+                                       @click="changeCurrentModal({modal: 'modal-user-list',  properties: { data }})"
+                                       style="padding:10px 60px">
+                                    &lt;!&ndash; <v-icon class="white&#45;&#45;text mr-2 caption">fas fa-print</v-icon> &ndash;&gt;
+                                    <v-icon class="white&#45;&#45;text mr-2 caption">fas fa-rocket</v-icon>
+                                    <span class="white&#45;&#45;text CSSD-font">Transfer</span>
+                                </v-btn>-->
             </v-layout>
         </material-card>
+        <vue-image-lightbox
+                v-if="showLightbox"
+                :media="lightboxImages"
+                :index="lightboxIndex"
+                @close="showLightbox = false"
+        />
     </v-container>
 </template>
 
 <script>
+import VueImageLightbox from 'vue-image-lightbox'
+import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
 import {mapGetters, mapMutations} from "vuex";
 import {ApiService} from "@/services";
 import {urls} from "@/config/urls";
@@ -135,8 +143,14 @@ export default {
     data: () => ({
         data: {},
         QRCodeimg: '',
-        barcodeimg: ''
+        barcodeimg: '',
+        showLightbox: false,
+        lightboxIndex: 0,
+        lightboxImages: [],
     }),
+    components: {
+        VueImageLightbox,
+    },
     methods: {
         ...mapMutations("modal", ["closeModal", "setResultModal", "changeCurrentModal"]),
         async generateBarcode(item) {
@@ -183,16 +197,28 @@ export default {
             WinPrint.focus();
             WinPrint.print();
             WinPrint.close();
+        },
+        openLightbox(index) {
+            this.lightboxIndex = index;
+            this.showLightbox = false;
+            this.$nextTick(() => {
+                this.showLightbox = true;
+            });
         }
     },
     created() {
         this.data = this.getModalProperties.result.data.data;
+        this.lightboxImages = this.imagesOnly.length ? this.imagesOnly.map(file => ({
+            src: file.thumbnail,
+            thumb: file.thumbnail,
+        })) : [];
+        this.generateBarcode(this.data);
     },
     computed: {
-        ...mapGetters("modal", ["getModalProperties"])
+        ...mapGetters("modal", ["getModalProperties"]),
+        imagesOnly() {
+            return this.data.files.filter(file => file.file_type !== 'document');
+        },
     },
-    mounted() {
-        this.generateBarcode(this.data);
-    }
 };
 </script>
diff --git a/src/components/modal/testresult/Show.vue b/src/components/modal/testresult/Show.vue
index 7418e33..e11f09f 100644
--- a/src/components/modal/testresult/Show.vue
+++ b/src/components/modal/testresult/Show.vue
@@ -127,7 +127,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>
@@ -180,6 +180,12 @@
                 </a>
             </v-layout>
         </material-card>
+        <vue-image-lightbox
+                v-if="showLightbox"
+                :media="lightboxImages"
+                :index="lightboxIndex"
+                @close="showLightbox = false"
+        />
     </v-container>
 </template>
 <script>
@@ -187,14 +193,20 @@ 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'
+import VueImageLightbox from 'vue-image-lightbox'
+import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
 export default {
     data: () => ({
         data: {},
         QRCodeimg: '',
-        barcodeimg: ''
+        barcodeimg: '',
+        showLightbox: false,
+        lightboxIndex: 0,
+        lightboxImages: [],
     }),
+    components: {
+        VueImageLightbox,
+    },
     methods: {
         ...mapMutations("modal", ["closeModal", "setResultModal"]),
         async verify(id, value) {
@@ -243,13 +255,27 @@ export default {
             WinPrint.focus();
             WinPrint.print();
             WinPrint.close();
+        },
+        openLightbox(index) {
+            this.lightboxIndex = index;
+            this.showLightbox = false;
+            this.$nextTick(() => {
+                this.showLightbox = true;
+            });
         }
     },
     created() {
         this.data = this.getModalProperties.result.data.data;
+        this.lightboxImages = this.imagesOnly.length ? this.imagesOnly.map(file => ({
+            src: file.thumbnail,
+            thumb: file.thumbnail,
+        })) : [];
     },
     computed: {
-        ...mapGetters("modal", ["getModalProperties"])
+        ...mapGetters("modal", ["getModalProperties"]),
+        imagesOnly() {
+            return this.data.files.filter(file => file.file_type !== 'document');
+        },
     },
     mounted() {
         this.generateBarcode(this.data);
diff --git a/src/views/Item/List.vue b/src/views/Item/List.vue
index cba38a2..0b9074b 100644
--- a/src/views/Item/List.vue
+++ b/src/views/Item/List.vue
@@ -118,7 +118,7 @@
                                             <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>
+                                                <v-icon class="black--text mr-2 caption">fas fa-exchange-alt</v-icon>
                                                 <span class="CSSD-font">Transfer</span>
                                             </v-btn>
                                         </template>
diff --git a/src/views/MyItem/List.vue b/src/views/MyItem/List.vue
index 6fdbdd7..199edd8 100644
--- a/src/views/MyItem/List.vue
+++ b/src/views/MyItem/List.vue
@@ -38,10 +38,10 @@
                             <span>Filter</span>
                         </v-tooltip>
 
-                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
-                            <v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
-                            <span class="black--text">EXPORT</span>
-                        </v-btn>
+<!--                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
+                            <v-icon class="black&#45;&#45;text mr-2 caption">fas fa-share-square</v-icon>
+                            <span class="black&#45;&#45;text">EXPORT</span>
+                        </v-btn>-->
 
                         <router-link :to="{ name: 'AddItem' }">
                             <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
@@ -112,7 +112,7 @@
                                         <template v-slot:activator="{ on, attrs }">
                                             <v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
                                                    @click="transfer(item)">
-                                                <v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
+                                                <v-icon class="black--text mr-2 caption">fas fa-exchange-alt</v-icon>
                                                 <span class="CSSD-font">Transfer</span>
                                             </v-btn>
                                         </template>
diff --git a/src/views/MyPackage/List.vue b/src/views/MyPackage/List.vue
index 607256f..430d487 100644
--- a/src/views/MyPackage/List.vue
+++ b/src/views/MyPackage/List.vue
@@ -29,10 +29,10 @@
                             <span>Filter</span>
                         </v-tooltip>
 
-                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
-                            <v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
-                            <span class="black--text">EXPORT</span>
-                        </v-btn>
+<!--                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
+                            <v-icon class="black&#45;&#45;text mr-2 caption">fas fa-share-square</v-icon>
+                            <span class="black&#45;&#45;text">EXPORT</span>
+                        </v-btn>-->
 
                         <router-link :to="{ name: 'AddPackage' }">
                             <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
@@ -105,7 +105,7 @@
                                         <template v-slot:activator="{ on, attrs }">
                                             <v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
                                                    @click="transfer(item)">
-                                                <v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
+                                                <v-icon class="black--text mr-2 caption">fas fa-exchange-alt</v-icon>
                                                 <span class="CSSD-font">Transfer</span>
                                             </v-btn>
                                         </template>
diff --git a/src/views/Package/List.vue b/src/views/Package/List.vue
index 05b5fa8..3fe002d 100644
--- a/src/views/Package/List.vue
+++ b/src/views/Package/List.vue
@@ -109,7 +109,7 @@
                                             <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>
+                                                <v-icon class="black--text mr-2 caption">fas fa-exchange-alt</v-icon>
                                                 <span class="CSSD-font">Transfer</span>
                                             </v-btn>
                                         </template>
diff --git a/src/views/TestResult/AddEdit.vue b/src/views/TestResult/AddEdit.vue
index 44c88ab..6bb1d1c 100644
--- a/src/views/TestResult/AddEdit.vue
+++ b/src/views/TestResult/AddEdit.vue
@@ -148,7 +148,7 @@
                                 <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
                             </v-layout>
                             <v-layout row wrap>
-                                <v-app>
+<!--                                <v-app>
                                     <v-container>
                                         <v-select
                                                 multiple
@@ -159,9 +159,9 @@
                                                 item-value="id"
                                         />
                                     </v-container>
-                                </v-app>
+                                </v-app>-->
 
-<!--                                <v-container fluid class="WM-Padding-LR-0">
+                                <v-container fluid class="WM-Padding-LR-0">
                                     <v-flex xs12>
                                         <v-select
                                                 multiple
@@ -174,7 +174,7 @@
                                                 item-value="id"
                                         />
                                     </v-flex>
-                                </v-container>-->
+                                </v-container>
                             </v-layout>
                         </v-container>
                         <v-container row md-12 sm-12 xs-12 class="pa-0" v-if="item.type == 'Checkbox'">