Implemented: option to view full-size image on click by creating image modal (#283)

src/components/ImageModal.vue

@@ -0,0 +1,62 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button @click="closeModal">
+            <ion-icon slot="icon-only" :icon="closeOutline" />
+          </ion-button>
+          <ion-title>{{ virtualProductName }}</ion-title>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <img :src="imageUrl" />
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { closeOutline } from "ionicons/icons";
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from '@ionic/vue';
+export default defineComponent({
+  name: 'ImageModal',
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  },
+  props: {
+    imageUrl: String,
+    virtualProductName: String
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({
+        dismissed: true
+      })
+    }
+  },
+  setup() {
+    return {
+      closeOutline
+    }
+  }
+});
+</script>

src/views/Completed.vue

@@ -71,7 +71,7 @@
             <div v-for="item in order.orderItems" :key="item.orderItemSeqId" class="order-item">
               <div class="product-info">
                 <ion-item lines="none">
-                  <ion-thumbnail slot="start">
+                  <ion-thumbnail slot="start" @click="openImageModal(item)">
                     <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                   </ion-thumbnail>
                   <ion-label>
@@ -218,6 +218,7 @@ import logger from '@/logger';
 import ShippingLabelErrorModal from '@/components/ShippingLabelErrorModal.vue';
 import { Actions, hasPermission } from '@/authorization'
 import OrderActionsPopover from '@/components/OrderActionsPopover.vue'
+import ImageModal from '@/components/ImageModal.vue'
 
 export default defineComponent({
   name: 'Completed',
@@ -701,6 +702,16 @@ export default defineComponent({
       });
       return popover.present();
     },
+    async openImageModal(item: any){
+      const imageModal = await modalController.create({
+        component: ImageModal,
+        componentProps: {
+          imageUrl: this.getProduct(item.productId).mainImageUrl,
+          virtualProductName: item.virtualProductName
+        },
+      });
+      return imageModal.present();
+    },
   },
   setup() {
     const store = useStore();

src/views/InProgress.vue

@@ -87,7 +87,7 @@
             <div v-for="item in order.orderItems" :key="item.orderItemSeqId" class="order-item">
               <div class="product-info">
                 <ion-item lines="none">
-                  <ion-thumbnail slot="start">
+                  <ion-thumbnail slot="start" @click="openImageModal(item)">
                     <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                   </ion-thumbnail>
                   <ion-label>
@@ -331,6 +331,7 @@ import ReportIssuePopover from '@/components/ReportIssuePopover.vue'
 import ShipmentBoxPopover from '@/components/ShipmentBoxPopover.vue'
 import QRCodeModal from '@/components/QRCodeModal.vue'
 import { useAuthStore } from '@hotwax/dxp-components'
+import ImageModal from '@/components/ImageModal.vue';
 
 export default defineComponent({
   name: 'InProgress',
@@ -1186,6 +1187,16 @@ export default defineComponent({
       });
       return qrCodeModal.present();
     },
+    async openImageModal(item: any){
+      const imageModal = await modalController.create({
+        component: ImageModal,
+        componentProps: {
+          imageUrl: this.getProduct(item.productId).mainImageUrl,
+          virtualProductName: item.productName
+        },
+      });
+      return imageModal.present();
+    },
   },
   async mounted () {
     this.store.dispatch('util/fetchRejectReasons')

src/views/OpenOrders.vue

@@ -94,7 +94,7 @@
               <div v-for="item in kitProduct" :key="item.orderItemSeqId" class="order-item">
                 <div class="product-info">
                   <ion-item lines="none">
-                    <ion-thumbnail slot="start">
+                    <ion-thumbnail slot="start" @click="openImageModal(item)">
                       <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                     </ion-thumbnail>
                     <ion-label>
@@ -183,6 +183,7 @@ import { translate } from '@hotwax/dxp-components';
 import { UserService } from '@/services/UserService';
 import { Actions, hasPermission } from '@/authorization'
 import OrderActionsPopover from '@/components/OrderActionsPopover.vue'
+import ImageModal from '@/components/ImageModal.vue';
 
 export default defineComponent({
   name: 'OpenOrders',
@@ -377,7 +378,17 @@ export default defineComponent({
     },
     fetchProductStock(productId: string) {
       this.store.dispatch('stock/fetchStock', { productId })
-    }
+    },
+    async openImageModal(item: any){
+      const imageModal = await modalController.create({
+        component: ImageModal,
+        componentProps: {
+          imageUrl: this.getProduct(item.productId).mainImageUrl,
+          virtualProductName: item.virtualProductName
+        },
+      });
+      return imageModal.present();
+    },
   },
   async mounted () {
     emitter.on('updateOrderQuery', this.updateOrderQuery)

src/views/OrderDetail.vue

@@ -75,7 +75,7 @@
           <div v-for="item in order.orderItems" :key="item" class="order-item">
             <div class="product-info">
               <ion-item lines="none">
-                <ion-thumbnail slot="start">
+                <ion-thumbnail slot="start" @click="openImageModal(item)">
                   <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                 </ion-thumbnail>
                 <ion-label>
@@ -242,7 +242,7 @@
             </ion-item>
 
             <ion-item lines="none" v-for="item in shipGroup.items" :key="item">
-              <ion-thumbnail slot="start">
+              <ion-thumbnail slot="start" @click="openImageModal(item)">
                 <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
               </ion-thumbnail>
               <ion-label>
@@ -330,6 +330,7 @@ import ShipmentBoxTypePopover from '@/components/ShipmentBoxTypePopover.vue'
 import ShipmentBoxPopover from '@/components/ShipmentBoxPopover.vue'
 import ReportIssuePopover from '@/components/ReportIssuePopover.vue'
 import ShippingDetails from '@/views/ShippingDetails.vue';
+import ImageModal from '@/components/ImageModal.vue';
 
 export default defineComponent({
   name: "OrderDetail",
@@ -1198,7 +1199,17 @@ export default defineComponent({
     },
     isTrackingRequiredForAnyShipmentPackage(order: any) {
       return order.shipmentPackages?.some((shipmentPackage: any) => shipmentPackage.isTrackingRequired === 'Y')
-    }
+    },
+    async openImageModal(item: any){
+      const imageModal = await modalController.create({
+        component: ImageModal,
+        componentProps: {
+          imageUrl: this.getProduct(item.productId).mainImageUrl,
+          virtualProductName: item.virtualProductName
+        },
+      });
+      return imageModal.present();
+    },
   },
   setup() {
     const store = useStore();