Improved: app to upgrade ionic to v7.5.8(#226)

package.json

@@ -21,9 +21,9 @@
     "@hotwax/apps-theme": "^1.2.6",
     "@hotwax/dxp-components": "1.12.1",
     "@hotwax/oms-api": "^1.13.0",
-    "@ionic/core": "6.7.5",
-    "@ionic/vue": "6.7.5",
-    "@ionic/vue-router": "6.7.5",
+    "@ionic/core": "^7.5.8",
+    "@ionic/vue": "^7.5.8",
+    "@ionic/vue-router": "^7.5.8",
     "boolean-parser": "0.0.2",
     "boon-js": "^2.0.3",
     "core-js": "^3.6.5",

src/components/JobConfiguration.vue

@@ -35,8 +35,7 @@
 
       <ion-item lines="inset">
         <ion-icon slot="start" :icon="timerOutline" />
-        <ion-label>{{ $t("Schedule") }}</ion-label>
-        <ion-select :interface-options="customPopoverOptions" interface="popover" :value="jobStatus" :placeholder="$t('Disabled')" @ionChange="($event) => jobStatus = $event['detail'].value">
+        <ion-select :label="$t('Schedule')" :interface-options="customPopoverOptions" interface="popover" :value="jobStatus" :placeholder="$t('Disabled')" @ionChange="($event) => jobStatus = $event['detail'].value">
           <ion-select-option v-for="freq in generateFrequencyOptions" :key="freq.value" :value="freq.value">{{ $t(freq.label) }}</ion-select-option>
         </ion-select>
       </ion-item>
@@ -54,8 +53,7 @@
       </ion-item> -->
       <ion-item v-if="job?.systemJobEnumId === 'JOB_EXP_PROD_THRSHLD'" lines="inset">
         <ion-icon slot="start" :icon="cogOutline" />
-        <ion-label>{{ $t("Name") }}</ion-label>
-        <ion-input class="ion-text-end" name="ruleName" v-model="ruleName" id="ruleName" />
+        <ion-input :label="$t('Name')" class="ion-text-end" name="ruleName" v-model="ruleName" id="ruleName" />
       </ion-item>
 
       <ion-item v-if="job?.runtimeData?.searchPreferenceId" button detail="true" @click="updateThresholdRule" lines="full">

src/components/ProductFilterModal.vue

@@ -18,8 +18,7 @@
 
     <ion-list>
       <ion-item v-for="option in facetOptions" :key="option.id"  @click="updateSelectedValues(option.id)">
-        <ion-label>{{ option.label }}</ion-label>
-        <ion-checkbox v-if="!isAlreadyApplied(option.id)" :checked="selectedValues.includes(option.id)" />
+        <ion-checkbox v-if="!isAlreadyApplied(option.id)" :checked="selectedValues.includes(option.id)">{{ option.label }}</ion-checkbox>
         <ion-note v-else slot="end" color="danger">{{ type === 'included' ? $t("excluded") : $t("included") }}</ion-note>
       </ion-item>
     </ion-list>
@@ -49,7 +48,6 @@ import {
   IonInfiniteScroll,
   IonInfiniteScrollContent,
   IonItem,
-  IonLabel,
   IonList,
   IonNote,
   IonSearchbar,
@@ -75,7 +73,6 @@ export default defineComponent({
     IonInfiniteScroll,
     IonInfiniteScrollContent,
     IonItem,
-    IonLabel,
     IonList,
     IonNote,
     IonSearchbar,

src/components/SafetyStockModal.vue

@@ -12,8 +12,7 @@
 
   <ion-content>
     <ion-item>
-      <ion-label>{{ $t("Safety stock") }}</ion-label>
-      <ion-input placeholder="new safety stock" />
+      <ion-input :label="$t('Safety stock')" placeholder="new safety stock" />
     </ion-item>
 
     <ion-list>

src/views/ScheduleThreshold.vue

@@ -21,8 +21,7 @@
               <ion-label>{{ threshold }} {{ $t('threshold') }}</ion-label>
             </ion-item>
             <ion-item>
-              <ion-label color="medium">{{ $t("Name") }}</ion-label>
-              <ion-input :placeholder="$t('rule name')" v-model="jobName"/>
+              <ion-input :label="$t('Name')" :placeholder="$t('rule name')" v-model="jobName"/>
             </ion-item>
 
             <ion-item>
@@ -47,8 +46,10 @@
               <ion-label>{{ $t('Channels') }}</ion-label>
             </ion-item-divider>
             <ion-item v-for="channel in channels" :key="channel.facilityGroupId">
-              <ion-label>{{ channel?.facilityGroupName }}</ion-label>
-              <ion-toggle :checked="isChannelChecked(channel.facilityGroupId)" :disabled="isChannelDisabled(channel.facilityGroupId)" slot="end" @ionChange="updateChannels($event, channel.facilityGroupId)"/>
+              <!-- <ion-label>{{ channel?.facilityGroupName }}</ion-label> -->
+              <ion-toggle :checked="isChannelChecked(channel.facilityGroupId)" :disabled="isChannelDisabled(channel.facilityGroupId)" @ionChange="updateChannels($event, channel.facilityGroupId)">
+                {{ channel?.facilityGroupName }}
+              </ion-toggle>
             </ion-item>
           </ion-list>
         </aside>
@@ -574,11 +575,7 @@ export default defineComponent({
 
       emitter.emit('dismissLoader');
     },
-    updateChannels(event: CustomEvent, facilityGroupId: string) {
-      if (event.detail.checked && this.selectedChannels?.some((channel: any) => channel === facilityGroupId)) {
-        return;
-      }
-
+    updateChannels(facilityGroupId: string) {
       if (this.selectedChannels?.some((channel:any) => channel === facilityGroupId)) {
         this.selectedChannels.splice(this.selectedChannels?.indexOf(facilityGroupId), 1);
       } else {
@@ -673,6 +670,9 @@ export default defineComponent({
 <style scoped>
 ion-card-header {
   display: flex;
+  /* From ionic v7.x.x the direction of flex has been changed to column, hence changing it to row as per our use case */
+  /* https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/card-header/card-header.scss#L13C26-L13C26 */
+  flex-direction: row;
   justify-content: space-between;
 }
 

src/views/SelectFacility.vue

@@ -26,14 +26,12 @@
           <ion-list>
             <ion-list-header>{{ $t("Filter stores") }}</ion-list-header>
             <ion-item>
-              <ion-label>{{ $t("State") }}</ion-label>
-              <ion-select value="all">
+              <ion-select :label="$t('State')" value="all">
                 <ion-select-option value="all">All</ion-select-option>
               </ion-select>
             </ion-item>
             <ion-item>
-              <ion-label>{{ $t("Type") }}</ion-label>
-              <ion-select value="any">
+              <ion-select :label="$t('Type')" value="any">
                 <ion-select-option value="any">Any</ion-select-option>
               </ion-select>
             </ion-item>

src/views/SelectFacilityCSVUpload.vue

@@ -10,25 +10,22 @@
     <ion-content>
       <div class="upload-csv">
         <ion-item>
-          <ion-label>{{ $t("Store list") }}</ion-label>
-          <ion-input :placeholder="$t('Select CSV')" />
+          <ion-input :label="$t('Store list')" :placeholder="$t('Select CSV')" />
           <ion-button fill="outline">{{ $t("Upload") }}</ion-button>
         </ion-item>
 
         <ion-item lines="none">
           <ion-label class="ion-text-wrap">{{ $t("Select the column index for the following information in the uploaded CSV") }}</ion-label>
         </ion-item>
         <ion-item>
-          <ion-label>{{ $t("Store ID column") }}</ion-label>
-          <ion-select :placeholder="$t('Select')">
+          <ion-select :label="$t('Store ID column')" :placeholder="$t('Select')">
             <ion-select-option>1234</ion-select-option>
             <ion-select-option>5678</ion-select-option>
             <ion-select-option>9012</ion-select-option>
           </ion-select>
         </ion-item>
          <ion-item lines="none">
-          <ion-label>{{ $t("Store group column (optional)") }}</ion-label>
-          <ion-select :placeholder="$t('Select')">
+          <ion-select :label="$t('Store group column (optional)')" :placeholder="$t('Select')">
             <ion-select-option>1234</ion-select-option>
             <ion-select-option>5678</ion-select-option>
             <ion-select-option>9012</ion-select-option>

src/views/SelectProduct.vue

@@ -25,8 +25,7 @@
         <aside class="filters desktop-only">
           <ion-list>
             <ion-item lines="inset">
-              <ion-label>{{ $t("Threshold") }}</ion-label>
-              <ion-input type="number" :placeholder="$t('global threshold')" v-model="threshold"/>
+              <ion-input :label="$t('Threshold')" type="number" :placeholder="$t('global threshold')" v-model="threshold"/>
             </ion-item>
             <ion-list-header>
               <div>
@@ -43,8 +42,7 @@
                 </ion-button>
               </ion-item>
               <ion-item lines="none">
-                <ion-label>{{ $t("Operator") }}</ion-label>
-                <ion-select interface="popover" @ionChange="applyOperator('included', 'tags', $event.detail.value)" :value="appliedFilters['included']['tags'].operator">
+                <ion-select :label="$t('Operator')" interface="popover" @ionChange="applyOperator('included', 'tags', $event.detail.value)" :value="appliedFilters['included']['tags'].operator">
                   <ion-select-option value="AND">AND</ion-select-option>
                   <ion-select-option value="OR">OR</ion-select-option>
                 </ion-select>
@@ -74,8 +72,7 @@
                 </ion-button>
               </ion-item>
               <ion-item lines="none">
-                <ion-label>{{ $t("Operator") }}</ion-label>
-                <ion-select @ionChange="applyOperator('excluded', 'tags', $event.detail.value)" interface="popover" :value="appliedFilters['excluded']['tags'].operator">
+                <ion-select :label="$t('Operator')" @ionChange="applyOperator('excluded', 'tags', $event.detail.value)" interface="popover" :value="appliedFilters['excluded']['tags'].operator">
                   <ion-select-option value="AND">AND</ion-select-option>
                   <ion-select-option value="OR">OR</ion-select-option>
                 </ion-select>
@@ -109,7 +106,7 @@
                 <ion-item lines="none">
                   <ion-label>
                     {{ product.productName }}
-                    <p>{{ product.variants.length}} {{ $t("variants") }}</p>
+                    <p>{{ product.variants.length }} {{ $t("variants") }}</p>
                   </ion-label>
                 </ion-item>
               </div>
@@ -488,11 +485,6 @@ export default defineComponent({
       this.isFilterChanged = true;
     },
     async applyOperator(type: string, id: string, value: string) {
-      // TODO Find a better way
-      // This is done as when applying the exisiting rule as the value of the select box changes
-      // query is sent multiple times
-      if (this.appliedFilters[type][id].operator === value) return;
-
       await this.store.dispatch('product/updateAppliedFilterOperator', {
         type,
         id,

src/views/SelectProductCSVUpload.vue

@@ -10,17 +10,15 @@
     <ion-content>
       <main>
         <ion-item>
-          <ion-label>{{ $t("Product list") }}</ion-label>
-          <ion-input :placeholder="$t('Select CSV')" />
+          <ion-input :label="$t('Product list')" :placeholder="$t('Select CSV')" />
           <ion-button fill="outline">{{ $t("Upload") }}</ion-button>
         </ion-item>
 
         <ion-item lines="none">
           <ion-label>{{ $t("Select the column index for the following information in the uploaded CSV") }}</ion-label>
         </ion-item>
         <ion-item>
-          <ion-label>{{ $t("Product SKU column") }}</ion-label>
-          <ion-select :placeholder="$t('Select')">
+          <ion-select :label="$t('Product SKU column')" :placeholder="$t('Select')">
             <ion-select-option>1234</ion-select-option>
             <ion-select-option>5678</ion-select-option>
             <ion-select-option>9012</ion-select-option>

src/views/Settings.vue

@@ -50,8 +50,7 @@
             {{ $t('A store repesents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores sellling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.') }}
           </ion-card-content>
           <ion-item lines="none">
-            <ion-label>{{ $t("Select store") }}</ion-label>
-            <ion-select interface="popover" :value="currentEComStore.productStoreId" @ionChange="setEComStore($event)">
+            <ion-select :label="$t('Select store')" interface="popover" :value="currentEComStore.productStoreId" @ionChange="setEComStore($event)">
               <ion-select-option v-for="store in (userProfile ? userProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId" >{{ store.storeName }}</ion-select-option>
             </ion-select>
           </ion-item>
@@ -126,12 +125,7 @@ export default defineComponent({
   },
   methods: {
     setEComStore(event: any) {
-      // If the value is same, no need to update
-      // Handled case for programmatical changes
-      // https://github.com/ionic-team/ionic-framework/discussions/25532
-      // https://github.com/ionic-team/ionic-framework/issues/20106
-      // https://github.com/ionic-team/ionic-framework/pull/25858
-      if(this.userProfile?.stores && this.currentEComStore?.productStoreId !== event.detail.value) {
+      if(this.userProfile?.stores) {
         this.store.dispatch('user/setEcomStore', {
           'productStoreId': event.detail.value
         })

src/views/ThresholdUpdates.vue

@@ -636,6 +636,9 @@ export default defineComponent({
 <style scoped>
 ion-card-header {
   display: flex;
+  /* From ionic v7.x.x the direction of flex has been changed to column, hence changing it to row as per our use case */
+  /* https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/card-header/card-header.scss#L13C26-L13C26 */
+  flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 0px;

src/views/TimezoneModal.vue

@@ -24,8 +24,7 @@
       <ion-list>
         <ion-radio-group value="rd" v-model="timeZoneId">
           <ion-item  v-bind: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>
+            <ion-radio :value="timeZone.id" label-placement="end" justify="start">{{ timeZone.label }} ({{ timeZone.id }})</ion-radio>
           </ion-item>
         </ion-radio-group>
       </ion-list>
@@ -49,7 +48,6 @@ import {
   IonHeader,
   IonItem,
   IonIcon,
-  IonLabel,
   IonList,
   IonRadioGroup,
   IonRadio,
@@ -76,7 +74,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonRadioGroup,
     IonRadio,
@@ -165,3 +162,14 @@ export default defineComponent({
   }
 });
 </script>
+
+<style>
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+</style>