feat : lightbox

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>