frontend use Lightbox to enlarge mail attachments

web/src/components/Lightbox.vue

@@ -3,7 +3,7 @@
         <template #body>
             <AuthenticatedImage
                 class="img-fluid rounded mx-auto d-block mb-3 w-100"
-                :src="`/media/2/${file}/`"
+                :src="`/media/2/${hash}/`"
                 alt="Image not available."
                 id="lightbox-image"
             />
@@ -21,7 +21,7 @@ import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 export default {
     name: 'Lightbox',
     components: {Modal, AuthenticatedImage},
-    props: ['file']
+    props: ['hash']
 };
 </script>
 

web/src/components/TimelineMail.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="timeline-item-wrapper">
+        <Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
         <div class="timeline-item-description">
             <i class="avatar | small">
                 <font-awesome-icon icon="user"/>
@@ -22,7 +23,7 @@
             </div>
             <div class="card-footer" v-if="item.attachments.length">
                 <ul>
-                    <li v-for="attachment in item.attachments">
+                    <li v-for="attachment in item.attachments" @click="openLightboxModalWith(attachment)">
                         <AuthenticatedImage :src="`/media/2/256/${attachment.hash}/`" :alt="attachment.name"
                                             v-if="attachment.mime_type.startsWith('image/')"/>
                         <AuthenticatedDataLink :href="`/media/2/256/${attachment.hash}/`" :download="attachment.name"
@@ -58,10 +59,16 @@
 
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import AuthenticatedDataLink from "@/components/AuthenticatedDataLink.vue";
+import Lightbox from "@/components/Lightbox.vue";
 
 export default {
     name: 'TimelineMail',
-    components: {AuthenticatedImage, AuthenticatedDataLink},
+    components: {Lightbox, AuthenticatedImage, AuthenticatedDataLink},
+    data() {
+        return {
+            lightboxHash: null,
+        }
+    },
     props: {
         'item': {
             type: Object,
@@ -76,7 +83,16 @@ export default {
             return this.item.body.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
         }
 
-    }
+    },
+    methods: {
+        openLightboxModalWith(attachment) {
+            this.lightboxHash = attachment.hash;
+            console.log(this.lightboxHash);
+        },
+        closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
+            this.lightboxHash = null;
+        },
+    },
 };
 </script>
 

web/src/views/Items.vue

@@ -12,7 +12,7 @@
                 <button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes</button>
             </template>
         </Modal>
-        <Lightbox v-if="lightboxItem" :file="lightboxItem.file" @close="closeLightboxModal()"/>
+        <Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
         <div class="row" v-if="layout === 'table'">
             <div class="col-xl-8 offset-xl-2">
                 <Table
@@ -84,7 +84,7 @@ import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 export default {
     name: 'Items',
     data: () => ({
-        lightboxItem: null,
+        lightboxHash: null,
         editingItem: null,
     }),
     components: {AuthenticatedImage, Lightbox, Table, Cards, Modal, EditItem},
@@ -92,10 +92,10 @@ export default {
     methods: {
         ...mapActions(['deleteItem', 'markItemReturned']),
         openLightboxModalWith(item) {
-            this.lightboxItem = {...item};
+            this.lightboxHash = item.file;
         },
         closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
-            this.lightboxItem = null;
+            this.lightboxHash = null;
         },
         openEditingModalWith(item) { // Opens the editing modal with a copy of the selected item.
             this.editingItem = item;