From e7d83d63188f649c965a2cc3e6e9ef210b6d5fca Mon Sep 17 00:00:00 2001
From: Disha Talreja <dishatalreja1202@gmail.com>
Date: Fri, 3 Mar 2023 12:07:15 +0530
Subject: [PATCH] fix: Use ion-list in modals(#85zrptxr9)

---
 src/components/BulkAdjustmentModal.vue        | 46 ++++++++++---------
 .../BulkInventoryAdjustmentModal.vue          | 24 ++++++----
 src/components/MissingFacilitiesModal.vue     | 23 ++++++----
 src/components/ProductPopover.vue             | 30 ++++++------
 4 files changed, 69 insertions(+), 54 deletions(-)

diff --git a/src/components/BulkAdjustmentModal.vue b/src/components/BulkAdjustmentModal.vue
index 10f3352f..824e7062 100644
--- a/src/components/BulkAdjustmentModal.vue
+++ b/src/components/BulkAdjustmentModal.vue
@@ -11,30 +11,32 @@
   </ion-header>
 
   <ion-content>
-    <ion-item lines="full">
-      <ion-label>{{ $t("Buffer days") }}</ion-label>
-      <ion-input v-model="bufferDays" type="number" :placeholder = "$t('Lead time')" min="1" /> 
-    </ion-item>
+    <ion-list>
+      <ion-item lines="full">
+        <ion-label>{{ $t("Buffer days") }}</ion-label>
+        <ion-input v-model="bufferDays" type="number" :placeholder = "$t('Lead time')" min="1" /> 
+      </ion-item>
 
-    <ion-item lines="full">
-      <ion-label>{{ $t("Order buffer") }}</ion-label>
-      <ion-input v-model="orderBuffer" type="number" :placeholder = "$t('Safety stock')" min="1" />
-    </ion-item>
+      <ion-item lines="full">
+        <ion-label>{{ $t("Order buffer") }}</ion-label>
+        <ion-input v-model="orderBuffer" type="number" :placeholder = "$t('Safety stock')" min="1" />
+      </ion-item>
 
-    <ion-item>
-      <ion-label>{{ $t("Catalog") }}</ion-label>
-      <ion-select interface="popover" v-model="isNewProduct">
-        <ion-select-option value="N">{{ $t("Backorder") }}</ion-select-option>
-        <ion-select-option value="Y">{{ $t("Preorder") }}</ion-select-option>
-      </ion-select>
-    </ion-item>
+      <ion-item>
+        <ion-label>{{ $t("Catalog") }}</ion-label>
+        <ion-select interface="popover" v-model="isNewProduct">
+          <ion-select-option value="N">{{ $t("Backorder") }}</ion-select-option>
+          <ion-select-option value="Y">{{ $t("Preorder") }}</ion-select-option>
+        </ion-select>
+      </ion-item>
 
-    <ion-item>
-      <ion-label>{{ $t("Facility") }}</ion-label>
-      <ion-select interface="popover" v-model="facilityId">
-        <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
-      </ion-select>
-    </ion-item>
+      <ion-item>
+        <ion-label>{{ $t("Facility") }}</ion-label>
+        <ion-select interface="popover" v-model="facilityId">
+          <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-list>
 
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button @click="save">
@@ -55,6 +57,7 @@ import {
   IonIcon,
   IonInput,
   IonLabel,
+  IonList,
   IonSelect,
   IonSelectOption,
   IonTitle,
@@ -81,6 +84,7 @@ export default defineComponent({
     IonItem,
     IonInput,
     IonLabel,
+    IonList,
     IonSelect,
     IonSelectOption,
     IonTitle,
diff --git a/src/components/BulkInventoryAdjustmentModal.vue b/src/components/BulkInventoryAdjustmentModal.vue
index 4a727496..685eebae 100644
--- a/src/components/BulkInventoryAdjustmentModal.vue
+++ b/src/components/BulkInventoryAdjustmentModal.vue
@@ -11,17 +11,19 @@
   </ion-header>
 
   <ion-content>
-    <ion-item lines="full">
-      <ion-label>{{ $t("Buffer quantity") }}</ion-label>
-      <ion-input v-model="quantityBuffer" type="number" min="0" :placeholder = "$t('Quantity')" />
-    </ion-item>
+    <ion-list>
+      <ion-item lines="full">
+        <ion-label>{{ $t("Buffer quantity") }}</ion-label>
+        <ion-input v-model="quantityBuffer" type="number" min="0" :placeholder = "$t('Quantity')" />
+      </ion-item>
 
-    <ion-item>
-      <ion-label>{{ $t("Facility") }}</ion-label>
-      <ion-select interface="popover" v-model="facilityId">
-        <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
-      </ion-select>
-    </ion-item>
+      <ion-item>
+        <ion-label>{{ $t("Facility") }}</ion-label>
+        <ion-select interface="popover" v-model="facilityId">
+          <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-list>
 
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button @click="save">
@@ -42,6 +44,7 @@ import {
   IonIcon,
   IonInput,
   IonLabel,
+  IonList,
   IonSelect,
   IonSelectOption,
   IonTitle,
@@ -67,6 +70,7 @@ export default defineComponent({
     IonItem,
     IonInput,
     IonLabel,
+    IonList,
     IonSelect,
     IonSelectOption,
     IonTitle,
diff --git a/src/components/MissingFacilitiesModal.vue b/src/components/MissingFacilitiesModal.vue
index 1d4c812d..1a36a596 100644
--- a/src/components/MissingFacilitiesModal.vue
+++ b/src/components/MissingFacilitiesModal.vue
@@ -11,16 +11,17 @@
   </ion-header>
 
   <ion-content>
-
-    <ion-item v-for="(items, facilityId) in itemsByFacilityId" :key="facilityId" lines="full">
-      <ion-label>
-        {{ facilityId }}
-        <p>{{ items?.length }} {{ $t("line items") }}</p>
-      </ion-label>
-      <ion-select interface="popover" slot="end" :placeholder="$t('Map facility')" @ionChange="updateFacility($event, facilityId)">
-        <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
-      </ion-select>
-    </ion-item>
+    <ion-list>
+      <ion-item v-for="(items, facilityId) in itemsByFacilityId" :key="facilityId" lines="full">
+        <ion-label>
+          {{ facilityId }}
+          <p>{{ items?.length }} {{ $t("line items") }}</p>
+        </ion-label>
+        <ion-select interface="popover" slot="end" :placeholder="$t('Map facility')" @ionChange="updateFacility($event, facilityId)">
+          <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-list>
 
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button @click="save">
@@ -41,6 +42,7 @@ import {
   IonItem,
   IonIcon,
   IonLabel,
+  IonList,
   IonSelect,
   IonSelectOption,
   IonTitle,
@@ -65,6 +67,7 @@ export default defineComponent({
     IonIcon,
     IonItem,
     IonLabel,
+    IonList,
     IonSelect,
     IonSelectOption,
     IonTitle,
diff --git a/src/components/ProductPopover.vue b/src/components/ProductPopover.vue
index 738f15da..ffae3325 100644
--- a/src/components/ProductPopover.vue
+++ b/src/components/ProductPopover.vue
@@ -1,21 +1,25 @@
 <template>
   <ion-content>
-    <ion-item lines="none">
-      <ion-label>{{ this.isVirtual ? item.parentProductName : item.pseudoId }}</ion-label>
-    </ion-item>
-    <ion-item button lines="none" @click="revert">
-      <ion-icon slot="start" :icon="arrowUndoOutline" />
-      <ion-label>{{ $t('Reset') }}</ion-label>
-    </ion-item>
-    <ion-item button lines="none" @click="onlySelect">
-      <ion-icon slot="start" :icon="checkboxOutline" />
-      <ion-label>{{ $t('Only select') }}</ion-label>
-    </ion-item>
+    <ion-list>
+      <ion-item lines="none">
+        <ion-label>{{ this.isVirtual ? item.parentProductName : item.pseudoId }}</ion-label>
+      </ion-item>
+
+      <ion-item button lines="none" @click="revert">
+        <ion-icon slot="start" :icon="arrowUndoOutline" />
+        <ion-label>{{ $t('Reset') }}</ion-label>
+      </ion-item>
+
+      <ion-item button lines="none" @click="onlySelect">
+        <ion-icon slot="start" :icon="checkboxOutline" />
+        <ion-label>{{ $t('Only select') }}</ion-label>
+      </ion-item>
+    </ion-list>
   </ion-content>
 </template>
 
 <script>
-import { IonContent, IonIcon, IonLabel, IonItem, popoverController } from '@ionic/vue';
+import { IonContent, IonIcon, IonLabel, IonList, IonItem, popoverController } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { mapGetters, useStore } from "vuex";
 import {
@@ -25,7 +29,7 @@ import {
 export default defineComponent({
   props: ['id', 'isVirtual', 'item', 'poId', 'type'],
   name: 'parentProductPopover',
-  components: { IonContent, IonIcon, IonLabel, IonItem },
+  components: { IonContent, IonIcon, IonLabel, IonList, IonItem },
   computed: {
     ...mapGetters({
       stockItems: 'stock/getStockItems',