From ca917e0e45d07e0ba2bf9ea642de3305afd5e64d Mon Sep 17 00:00:00 2001
From: shanmukhdutt <ksssaidutt@gmail.com>
Date: Tue, 5 Dec 2023 14:49:52 +0530
Subject: [PATCH 1/5] Implemented: Option to View Full-Size Image on Click
 (#283)

---
 src/components/ImageModal.vue | 69 +++++++++++++++++++++++++++++++++++
 src/views/Completed.vue       | 13 ++++++-
 src/views/InProgress.vue      | 13 ++++++-
 src/views/OpenOrders.vue      | 15 +++++++-
 src/views/OrderDetail.vue     | 17 +++++++--
 5 files changed, 120 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ImageModal.vue

diff --git a/src/components/ImageModal.vue b/src/components/ImageModal.vue
new file mode 100644
index 00000000..1e27d7ea
--- /dev/null
+++ b/src/components/ImageModal.vue
@@ -0,0 +1,69 @@
+<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,
+    ref
+} from 'vue';
+import {
+    closeOutline
+} from "ionicons/icons";
+import {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+    modalController
+} from '@ionic/vue';
+export default defineComponent({
+    name: 'DisplayImg',
+    components: {
+        IonButton,
+        IonButtons,
+        IonContent,
+        IonHeader,
+        IonIcon,
+        IonPage,
+        IonTitle,
+        IonToolbar
+    },
+    props: {
+        imageUrl: String,
+        virtualProductName:String
+    },
+    methods: {
+        closeModal() {
+            modalController.dismiss({
+                dismissed: true
+            })
+        }
+
+    },
+    setup() {
+        return {
+            closeOutline
+        }
+    }
+
+});
+</script>
diff --git a/src/views/Completed.vue b/src/views/Completed.vue
index 0e7e55fd..97d8ce81 100644
--- a/src/views/Completed.vue
+++ b/src/views/Completed.vue
@@ -71,7 +71,7 @@
             <div v-for="item in order.items" :key="item.orderItemSeqId" class="order-item">
               <div class="product-info">
                 <ion-item lines="none">
-                  <ion-thumbnail slot="start">
+                  <ion-thumbnail slot="start" @click="openImgModal(item)">
                     <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                   </ion-thumbnail>
                   <ion-label>
@@ -184,6 +184,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',
@@ -647,6 +648,16 @@ export default defineComponent({
       });
       return popover.present();
     },
+    async openImgModal(item: any){
+      const imgModal = await modalController.create({
+        component:ImageModal,
+        componentProps:{
+          imageUrl:this.getProduct(item.productId).mainImageUrl,
+          virtualProductName:item.virtualProductName
+        },
+      });
+      return imgModal.present();
+    },
   },
   setup() {
     const store = useStore();
diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue
index 3011e803..28db119d 100644
--- a/src/views/InProgress.vue
+++ b/src/views/InProgress.vue
@@ -88,7 +88,7 @@
             <div v-for="(item, index) in order.items" :key="index" class="order-item">
               <div class="product-info">
                 <ion-item lines="none">
-                  <ion-thumbnail slot="start">
+                  <ion-thumbnail slot="start" @click="openImgModal(item)">
                     <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                   </ion-thumbnail>
                   <ion-label>
@@ -278,6 +278,7 @@ import OrderActionsPopover from '@/components/OrderActionsPopover.vue'
 import ShippingLabelErrorModal from '@/components/ShippingLabelErrorModal.vue'
 import QRCodeModal from '@/components/QRCodeModal.vue'
 import { useAuthStore } from '@hotwax/dxp-components'
+import ImageModal from '@/components/ImageModal.vue';
 
 export default defineComponent({
   name: 'InProgress',
@@ -1038,6 +1039,16 @@ export default defineComponent({
       });
       return qrCodeModal.present();
     },
+    async openImgModal(item: any){
+      const imgModal = await modalController.create({
+        component:ImageModal,
+        componentProps:{
+          imageUrl:this.getProduct(item.productId).mainImageUrl,
+          virtualProductName:item.productName
+        },
+      });
+      return imgModal.present();
+    },
   },
   async mounted () {
     this.store.dispatch('util/fetchRejectReasons')
diff --git a/src/views/OpenOrders.vue b/src/views/OpenOrders.vue
index c74a4e03..3b423e1d 100644
--- a/src/views/OpenOrders.vue
+++ b/src/views/OpenOrders.vue
@@ -64,7 +64,7 @@
               <div class="order-item">
                 <div class="product-info">
                   <ion-item lines="none">
-                    <ion-thumbnail slot="start">
+                    <ion-thumbnail slot="start" @click="openImgModal(item)">
                       <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                     </ion-thumbnail>
                     <ion-label>
@@ -154,6 +154,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',
@@ -347,7 +348,17 @@ export default defineComponent({
     },
     fetchProductStock(productId: string) {
       this.store.dispatch('stock/fetchStock', { productId })
-    }
+    },
+    async openImgModal(item: any){
+      const imgModal = await modalController.create({
+        component:ImageModal,
+        componentProps:{
+          imageUrl:this.getProduct(item.productId).mainImageUrl,
+          virtualProductName:item.virtualProductName
+        },
+      });
+      return imgModal.present();
+    },
   },
   async mounted () {
     emitter.on('updateOrderQuery', this.updateOrderQuery)
diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue
index f0bcd85c..f65b678c 100644
--- a/src/views/OrderDetail.vue
+++ b/src/views/OrderDetail.vue
@@ -75,7 +75,7 @@
           <div v-for="item in order.items" :key="item" class="order-item">
             <div class="product-info">
               <ion-item lines="none">
-                <ion-thumbnail slot="start">
+                <ion-thumbnail slot="start" @click="openImgModal(item)">
                   <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                 </ion-thumbnail>
                 <ion-label>
@@ -191,7 +191,7 @@
             </ion-item>
     
             <ion-item lines="none" v-for="item in shipGroup.items" :key="item">
-              <ion-thumbnail slot="start">
+              <ion-thumbnail slot="start" @click="openImgModal(item)">
                 <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
               </ion-thumbnail>
               <ion-label>
@@ -278,6 +278,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",
@@ -1093,7 +1094,17 @@ export default defineComponent({
     },
     isTrackingRequiredForAnyShipmentPackage(order: any) {
       return order.shipmentPackages?.some((shipmentPackage: any) => shipmentPackage.isTrackingRequired === 'Y')
-    }
+    },
+    async openImgModal(item: any){
+      const imgModal = await modalController.create({
+        component:ImageModal,
+        componentProps:{
+          imageUrl:this.getProduct(item.productId).mainImageUrl,
+          virtualProductName:item.virtualProductName
+        },
+      });
+      return imgModal.present();
+    },
   },
   setup() {
     const store = useStore();

From 51fe0b6b862db26887aa2ff5d2341dcba2fa53ba Mon Sep 17 00:00:00 2001
From: shanmukhdutt <ksssaidutt@gmail.com>
Date: Tue, 5 Dec 2023 19:20:08 +0530
Subject: [PATCH 2/5] Fixed: Indentations

---
 src/components/ImageModal.vue | 109 ++++++++++++++++------------------
 src/views/Completed.vue       |   8 +--
 src/views/InProgress.vue      |   8 +--
 src/views/OpenOrders.vue      |   8 +--
 src/views/OrderDetail.vue     |   8 +--
 5 files changed, 67 insertions(+), 74 deletions(-)

diff --git a/src/components/ImageModal.vue b/src/components/ImageModal.vue
index 1e27d7ea..29488b51 100644
--- a/src/components/ImageModal.vue
+++ b/src/components/ImageModal.vue
@@ -1,69 +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-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 {
-    defineComponent,
-    ref
-} from 'vue';
-import {
-    closeOutline
-} from "ionicons/icons";
-import {
-    IonButton,
-    IonButtons,
-    IonContent,
-    IonHeader,
-    IonIcon,
-    IonPage,
-    IonTitle,
-    IonToolbar,
-    modalController
+	IonButton,
+	IonButtons,
+	IonContent,
+	IonHeader,
+	IonIcon,
+	IonPage,
+	IonTitle,
+	IonToolbar,
+	modalController
 } from '@ionic/vue';
 export default defineComponent({
-    name: 'DisplayImg',
-    components: {
-        IonButton,
-        IonButtons,
-        IonContent,
-        IonHeader,
-        IonIcon,
-        IonPage,
-        IonTitle,
-        IonToolbar
-    },
-    props: {
-        imageUrl: String,
-        virtualProductName:String
-    },
-    methods: {
-        closeModal() {
-            modalController.dismiss({
-                dismissed: true
-            })
-        }
-
-    },
-    setup() {
-        return {
-            closeOutline
-        }
-    }
-
+	name: 'DisplayImg',
+	components: {
+		IonButton,
+		IonButtons,
+		IonContent,
+		IonHeader,
+		IonIcon,
+		IonPage,
+		IonTitle,
+		IonToolbar
+	},
+	props: {
+		imageUrl: String,
+		virtualProductName: String
+	},
+	methods: {
+		closeModal() {
+			modalController.dismiss({
+				dismissed: true
+			})
+		}
+	},
+	setup() {
+		return {
+			closeOutline
+		}
+	}
 });
 </script>
diff --git a/src/views/Completed.vue b/src/views/Completed.vue
index 74550380..6b43cd7e 100644
--- a/src/views/Completed.vue
+++ b/src/views/Completed.vue
@@ -669,10 +669,10 @@ export default defineComponent({
     },
     async openImgModal(item: any){
       const imgModal = await modalController.create({
-        component:ImageModal,
-        componentProps:{
-          imageUrl:this.getProduct(item.productId).mainImageUrl,
-          virtualProductName:item.virtualProductName
+        component: ImageModal,
+        componentProps: {
+          imageUrl: this.getProduct(item.productId).mainImageUrl,
+          virtualProductName: item.virtualProductName
         },
       });
       return imgModal.present();
diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue
index 28db119d..9e36e256 100644
--- a/src/views/InProgress.vue
+++ b/src/views/InProgress.vue
@@ -1041,10 +1041,10 @@ export default defineComponent({
     },
     async openImgModal(item: any){
       const imgModal = await modalController.create({
-        component:ImageModal,
-        componentProps:{
-          imageUrl:this.getProduct(item.productId).mainImageUrl,
-          virtualProductName:item.productName
+        component: ImageModal,
+        componentProps: {
+          imageUrl: this.getProduct(item.productId).mainImageUrl,
+          virtualProductName: item.productName
         },
       });
       return imgModal.present();
diff --git a/src/views/OpenOrders.vue b/src/views/OpenOrders.vue
index 3b423e1d..b2ffe73c 100644
--- a/src/views/OpenOrders.vue
+++ b/src/views/OpenOrders.vue
@@ -351,10 +351,10 @@ export default defineComponent({
     },
     async openImgModal(item: any){
       const imgModal = await modalController.create({
-        component:ImageModal,
-        componentProps:{
-          imageUrl:this.getProduct(item.productId).mainImageUrl,
-          virtualProductName:item.virtualProductName
+        component: ImageModal,
+        componentProps: {
+          imageUrl: this.getProduct(item.productId).mainImageUrl,
+          virtualProductName: item.virtualProductName
         },
       });
       return imgModal.present();
diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue
index 1e675612..1c6631e3 100644
--- a/src/views/OrderDetail.vue
+++ b/src/views/OrderDetail.vue
@@ -1117,10 +1117,10 @@ export default defineComponent({
     },
     async openImgModal(item: any){
       const imgModal = await modalController.create({
-        component:ImageModal,
-        componentProps:{
-          imageUrl:this.getProduct(item.productId).mainImageUrl,
-          virtualProductName:item.virtualProductName
+        component: ImageModal,
+        componentProps: {
+          imageUrl: this.getProduct(item.productId).mainImageUrl,
+          virtualProductName: item.virtualProductName
         },
       });
       return imgModal.present();

From e4d2409bf716cda3b1c00e5b64351095ba5eae0d Mon Sep 17 00:00:00 2001
From: shanmukhdutt <ksssaidutt@gmail.com>
Date: Tue, 12 Dec 2023 15:50:13 +0530
Subject: [PATCH 3/5] Improved: ImageModal

---
 src/views/Completed.vue   |  8 ++++----
 src/views/InProgress.vue  |  8 ++++----
 src/views/OpenOrders.vue  |  8 ++++----
 src/views/OrderDetail.vue | 10 +++++-----
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/views/Completed.vue b/src/views/Completed.vue
index 6b43cd7e..2c107764 100644
--- a/src/views/Completed.vue
+++ b/src/views/Completed.vue
@@ -71,7 +71,7 @@
             <div v-for="item in order.items" :key="item.orderItemSeqId" class="order-item">
               <div class="product-info">
                 <ion-item lines="none">
-                  <ion-thumbnail slot="start" @click="openImgModal(item)">
+                  <ion-thumbnail slot="start" @click="openImageModal(item)">
                     <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                   </ion-thumbnail>
                   <ion-label>
@@ -667,15 +667,15 @@ export default defineComponent({
       });
       return popover.present();
     },
-    async openImgModal(item: any){
-      const imgModal = await modalController.create({
+    async openImageModal(item: any){
+      const imageModal = await modalController.create({
         component: ImageModal,
         componentProps: {
           imageUrl: this.getProduct(item.productId).mainImageUrl,
           virtualProductName: item.virtualProductName
         },
       });
-      return imgModal.present();
+      return imageModal.present();
     },
   },
   setup() {
diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue
index 9e36e256..9ee0848e 100644
--- a/src/views/InProgress.vue
+++ b/src/views/InProgress.vue
@@ -88,7 +88,7 @@
             <div v-for="(item, index) in order.items" :key="index" class="order-item">
               <div class="product-info">
                 <ion-item lines="none">
-                  <ion-thumbnail slot="start" @click="openImgModal(item)">
+                  <ion-thumbnail slot="start" @click="openImageModal(item)">
                     <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                   </ion-thumbnail>
                   <ion-label>
@@ -1039,15 +1039,15 @@ export default defineComponent({
       });
       return qrCodeModal.present();
     },
-    async openImgModal(item: any){
-      const imgModal = await modalController.create({
+    async openImageModal(item: any){
+      const imageModal = await modalController.create({
         component: ImageModal,
         componentProps: {
           imageUrl: this.getProduct(item.productId).mainImageUrl,
           virtualProductName: item.productName
         },
       });
-      return imgModal.present();
+      return imageModal.present();
     },
   },
   async mounted () {
diff --git a/src/views/OpenOrders.vue b/src/views/OpenOrders.vue
index b2ffe73c..b29d1b88 100644
--- a/src/views/OpenOrders.vue
+++ b/src/views/OpenOrders.vue
@@ -64,7 +64,7 @@
               <div class="order-item">
                 <div class="product-info">
                   <ion-item lines="none">
-                    <ion-thumbnail slot="start" @click="openImgModal(item)">
+                    <ion-thumbnail slot="start" @click="openImageModal(item)">
                       <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                     </ion-thumbnail>
                     <ion-label>
@@ -349,15 +349,15 @@ export default defineComponent({
     fetchProductStock(productId: string) {
       this.store.dispatch('stock/fetchStock', { productId })
     },
-    async openImgModal(item: any){
-      const imgModal = await modalController.create({
+    async openImageModal(item: any){
+      const imageModal = await modalController.create({
         component: ImageModal,
         componentProps: {
           imageUrl: this.getProduct(item.productId).mainImageUrl,
           virtualProductName: item.virtualProductName
         },
       });
-      return imgModal.present();
+      return imageModal.present();
     },
   },
   async mounted () {
diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue
index 1c6631e3..1f477006 100644
--- a/src/views/OrderDetail.vue
+++ b/src/views/OrderDetail.vue
@@ -75,7 +75,7 @@
           <div v-for="item in order.items" :key="item" class="order-item">
             <div class="product-info">
               <ion-item lines="none">
-                <ion-thumbnail slot="start" @click="openImgModal(item)">
+                <ion-thumbnail slot="start" @click="openImageModal(item)">
                   <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                 </ion-thumbnail>
                 <ion-label>
@@ -191,7 +191,7 @@
             </ion-item>
     
             <ion-item lines="none" v-for="item in shipGroup.items" :key="item">
-              <ion-thumbnail slot="start" @click="openImgModal(item)">
+              <ion-thumbnail slot="start" @click="openImageModal(item)">
                 <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
               </ion-thumbnail>
               <ion-label>
@@ -1115,15 +1115,15 @@ export default defineComponent({
     isTrackingRequiredForAnyShipmentPackage(order: any) {
       return order.shipmentPackages?.some((shipmentPackage: any) => shipmentPackage.isTrackingRequired === 'Y')
     },
-    async openImgModal(item: any){
-      const imgModal = await modalController.create({
+    async openImageModal(item: any){
+      const imageModal = await modalController.create({
         component: ImageModal,
         componentProps: {
           imageUrl: this.getProduct(item.productId).mainImageUrl,
           virtualProductName: item.virtualProductName
         },
       });
-      return imgModal.present();
+      return imageModal.present();
     },
   },
   setup() {

From d383d9f3bd5ad9693972de21dc14ae4cf902dfa2 Mon Sep 17 00:00:00 2001
From: shanmukhdutt <ksssaidutt@gmail.com>
Date: Tue, 12 Dec 2023 16:17:42 +0530
Subject: [PATCH 4/5] Fixed: Indentation issue in ImageModal

---
 src/components/ImageModal.vue | 102 +++++++++++++++++-----------------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/src/components/ImageModal.vue b/src/components/ImageModal.vue
index 29488b51..91670e3d 100644
--- a/src/components/ImageModal.vue
+++ b/src/components/ImageModal.vue
@@ -1,62 +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>
+  <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
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  modalController
 } from '@ionic/vue';
 export default defineComponent({
-	name: 'DisplayImg',
-	components: {
-		IonButton,
-		IonButtons,
-		IonContent,
-		IonHeader,
-		IonIcon,
-		IonPage,
-		IonTitle,
-		IonToolbar
-	},
-	props: {
-		imageUrl: String,
-		virtualProductName: String
-	},
-	methods: {
-		closeModal() {
-			modalController.dismiss({
-				dismissed: true
-			})
-		}
-	},
-	setup() {
-		return {
-			closeOutline
-		}
-	}
+  name: 'DisplayImg',
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  },
+  props: {
+    imageUrl: String,
+    virtualProductName: String
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({
+        dismissed: true
+      })
+    }
+  },
+  setup() {
+    return {
+      closeOutline
+    }
+  }
 });
 </script>

From f16b82a577c31780837c67c2f0744b67f5ac57e0 Mon Sep 17 00:00:00 2001
From: shanmukhdutt <ksssaidutt@gmail.com>
Date: Wed, 13 Dec 2023 17:34:32 +0530
Subject: [PATCH 5/5] Updated the code with full size image support

---
 src/components/ImageModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ImageModal.vue b/src/components/ImageModal.vue
index 91670e3d..85ff3f45 100644
--- a/src/components/ImageModal.vue
+++ b/src/components/ImageModal.vue
@@ -31,7 +31,7 @@ import {
   modalController
 } from '@ionic/vue';
 export default defineComponent({
-  name: 'DisplayImg',
+  name: 'ImageModal',
   components: {
     IonButton,
     IonButtons,