Merge pull request #188 from ymaheshwari1/#187

Improved: app to upgrade to ionic v7.6.0(#187)
hotwax · Feb 22, 2024 · e4fabf2 · e4fabf2
2 parents 9379b07 + 5413011
commit e4fabf2
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,12 +16,12 @@
     "@capacitor/core": "^2.4.7",
     "@capacitor/ios": "^2.5.0",
     "@hotwax/app-version-info": "^1.0.0",
-    "@hotwax/apps-theme": "^1.1.0",
+    "@hotwax/apps-theme": "^1.2.6",
     "@hotwax/dxp-components": "^1.11.0",
     "@hotwax/oms-api": "^1.10.0",
-    "@ionic/core": "6.7.5",
-    "@ionic/vue": "6.7.5",
-    "@ionic/vue-router": "6.7.5",
+    "@ionic/core": "~7.6.0",
+    "@ionic/vue": "~7.6.0",
+    "@ionic/vue-router": "~7.6.0",
     "core-js": "^3.6.5",
     "luxon": "^3.2.0",
     "mitt": "^2.1.0",

diff --git a/src/components/Picklist-detail-item.vue b/src/components/Picklist-detail-item.vue
@@ -3,14 +3,15 @@
     <ion-thumbnail slot="start">
       <ShopifyImg :src="getProduct(picklistItem.productId).mainImageUrl" size="small" />
     </ion-thumbnail>  
-    <ion-label>
-      <p class="caption">{{ getProduct(picklistItem.productId).parentProductName}}</p>
-      <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(picklistItem.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(picklistItem.productId)) : getProduct(picklistItem.productId).productName }}</h2>
-      <h2>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(picklistItem.productId)) }}</h2>
-      <p>{{ $t("Color") }} : {{ $filters.getFeatures(getProduct(picklistItem.productId).featureHierarchy, '1/COLOR/') }}</p>
-      <p>{{ $t("Size") }} : {{ $filters.getFeatures(getProduct(picklistItem.productId).featureHierarchy, '1/SIZE/') }}</p>
-    </ion-label>
-    <ion-checkbox v-if="picklistItem.statusId !== 'PICKLIST_COMPLETED' && picklistItem.statusId !== 'PICKLIST_PICKED'" :modelValue="picklistItem.isChecked" slot="end" />
+    <ion-checkbox v-if="picklistItem.statusId !== 'PICKLIST_COMPLETED' && picklistItem.statusId !== 'PICKLIST_PICKED'" :modelValue="picklistItem.isChecked">
+      <ion-label>
+        <p class="caption">{{ getProduct(picklistItem.productId).parentProductName}}</p>
+        <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(picklistItem.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(picklistItem.productId)) : getProduct(picklistItem.productId).productName }}</h2>
+        <h2>{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(picklistItem.productId)) }}</h2>
+        <p>{{ $t("Color") }} : {{ $filters.getFeatures(getProduct(picklistItem.productId).featureHierarchy, '1/COLOR/') }}</p>
+        <p>{{ $t("Size") }} : {{ $filters.getFeatures(getProduct(picklistItem.productId).featureHierarchy, '1/SIZE/') }}</p>
+      </ion-label>
+    </ion-checkbox>
   </ion-item>
 </template>
 

diff --git a/src/components/Picklist-filters.vue b/src/components/Picklist-filters.vue
@@ -8,12 +8,10 @@
     <ion-content>
       <ion-list>
         <ion-item lines="none">
-          <ion-label>{{ $t("Only show my picklists") }}</ion-label>
-          <ion-toggle :checked="showMine" @ionChange="showMyPicklists($event)" slot="end" />
+          <ion-toggle :checked="showMine" @ionChange="showMyPicklists($event)">{{ $t("Only show my picklists") }}</ion-toggle>
         </ion-item>
         <ion-item lines="none">
-          <ion-label>{{ $t("Hide completed picklists") }}</ion-label>
-          <ion-toggle :checked="hideCompleted" @ionChange="hideCompletedPicklists($event)" slot="end" />
+          <ion-toggle :checked="hideCompleted" @ionChange="hideCompletedPicklists($event)">{{ $t("Hide completed picklists") }}</ion-toggle>
         </ion-item>
       </ion-list>
     </ion-content>
@@ -25,7 +23,6 @@ import {
   IonContent,
   IonHeader,
   IonItem,
-  IonLabel,
   IonList,
   IonMenu,
   IonTitle,
@@ -41,7 +38,6 @@ export default defineComponent({
     IonContent,
     IonHeader,
     IonItem,
-    IonLabel,
     IonList,
     IonMenu,
     IonTitle,
@@ -57,8 +53,6 @@ export default defineComponent({
   },
   methods: {
     async showMyPicklists(event: any) {
-      //Handled case for programmatic change of value
-      if (this.showMine == event.detail.checked) return;
       this.store.dispatch('picklist/setFilters', { showMyPicklists: event.detail.checked });
       await this.store.dispatch('picklist/findPickList', { viewSize: process.env.VUE_APP_VIEW_SIZE, viewIndex: 0 });
       await this.store.dispatch('picklist/findCompletedPickLists');

diff --git a/src/views/Picklist-Detail.vue b/src/views/Picklist-Detail.vue
@@ -11,8 +11,7 @@
         <ion-list>
           <ion-radio-group :value="picklistItemSortBy" @ionChange="updateSortBy($event)">
             <ion-item v-for="option in sortOptions" :key="option.value">
-              <ion-radio slot="start" :value="option.value"/>
-              <ion-label>{{ $t(option.name) }}</ion-label>
+              <ion-radio label-placement="end" justify="start" :value="option.value">{{ $t(option.name) }}</ion-radio>
             </ion-item>
           </ion-radio-group>
         </ion-list>
@@ -33,8 +32,7 @@
     </ion-header>
     <ion-content id="main-content">
       <ion-item class="scanner">
-        <ion-label>{{ $t("Scan") }}</ion-label>  
-        <ion-input @ionFocus="selectSearchBarText($event)" :placeholder="$t('product barcode')" @keyup.enter="$event.target.value && selectProduct($event.target.value.trim()); $event.target.value = ''"/>
+        <ion-input :label="$t('Scan')" @ionFocus="selectSearchBarText($event)" :placeholder="$t('product barcode')" @keyup.enter="$event.target.value && selectProduct($event.target.value.trim()); $event.target.value = ''"/>
       </ion-item>
       <ion-list>
         <ion-item-group v-for="picklist in picklistGroup" :key="picklist.sortBy" >
@@ -242,7 +240,8 @@ export default defineComponent({
     const router = useRouter();
     
     onBeforeRouteLeave(() => {
-      modalController.dismiss({dismissed: true});
+      // Checking if the modal is present then only close the modal
+      modalController.getTop().then(modal => modal ? modalController.dismiss({dismissed: true}) : null)
     })
       
     return {

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -45,8 +45,7 @@
             {{ $t('Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.') }}
           </ion-card-content>
           <ion-item lines="none">
-            <ion-label>{{ $t("Select facility") }}</ion-label>
-            <ion-select interface="popover" :value="currentFacility.facilityId" @ionChange="setFacility($event)">
+            <ion-select :label="$t('Select facility')" interface="popover" :value="currentFacility.facilityId" @ionChange="setFacility($event)">
               <ion-select-option v-for="facility in (userProfile ? userProfile.facilities : [])" :key="facility.facilityId" :value="facility.facilityId" >{{ facility.name }}</ion-select-option>
             </ion-select>
           </ion-item>
@@ -87,8 +86,7 @@
             {{ $t('Sorting reorders items in a picklist based on inventory location or custom preferences.') }}
           </ion-card-content>
           <ion-item lines="none">
-            <ion-label>{{ $t("Sort by") }}</ion-label>
-            <ion-select interface="popover" :value="picklistItemSortBy" @ionChange="updateSortBy($event)">
+            <ion-select :label="$t('Sort by')" interface="popover" :value="picklistItemSortBy" @ionChange="updateSortBy($event)">
               <ion-select-option v-for="option in sortOptions" :key="option.value" :value="option.value" >{{ option.name }}</ion-select-option>
             </ion-select>
           </ion-item>

diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue
@@ -30,8 +30,7 @@
       <ion-list>
         <ion-radio-group value="rd" v-model="timeZoneId">
           <ion-item :key="timeZone.id" v-for="timeZone in filteredTimeZones">
-            <ion-label>{{ timeZone.label }} ({{ timeZone.id }})</ion-label>
-            <ion-radio :value="timeZone.id" slot="start" />
+            <ion-radio label-placement="end" justify="start" :value="timeZone.id">{{ timeZone.label }} ({{ timeZone.id }})</ion-radio>
           </ion-item>
         </ion-radio-group>
       </ion-list>
@@ -55,7 +54,6 @@ import {
   IonHeader,
   IonItem,
   IonIcon,
-  IonLabel,
   IonList,
   IonRadioGroup,
   IonRadio,
@@ -83,7 +81,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonRadioGroup,
     IonRadio,