Merge pull request hotwax#285 from amansinghbais/269-ionic7

Improved: app to ionic version7.6.0 (hotwax#269)
R-Sourabh · Apr 9, 2024 · 3120632 · 3120632
2 parents b413d3c + 46f077c
commit 3120632
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 104 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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.6.0",
+    "@ionic/vue": "^7.6.0",
+    "@ionic/vue-router": "^7.6.0",
     "boon-js": "^2.0.3",
     "core-js": "^3.6.5",
     "luxon": "^3.2.0",

diff --git a/src/main.ts b/src/main.ts
@@ -37,7 +37,8 @@ import localeMessages from './i18n/locales';
 
 const app = createApp(App)
   .use(IonicVue, {
-    mode: 'md'
+    mode: 'md',
+    innerHTMLTemplatesEnabled: true
   })
   .use(router)
   .use(i18n)

diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts
@@ -290,6 +290,13 @@ const actions: ActionTree<OrderState, RootState> = {
     commit(types.ORDER_SELECTED_ITEMS_UPDATED, { selectedItems: state.selectedItems } );
   },
 
+  /**
+   * Clear selected items list
+   */
+   clearSelectedItems  ( { commit }) {
+    commit(types.ORDER_SELECTED_ITEMS_UPDATED, { selectedItems: [] } );
+  },
+
     /**
    * Remove items from selected items
    */

diff --git a/src/views/catalog-product-details.vue b/src/views/catalog-product-details.vue
@@ -255,12 +255,10 @@
               <ion-label slot="end">{{ (atpCalcDetails.excludedAtp || atpCalcDetails.excludedAtp === 0) ? atpCalcDetails.excludedAtp : '-' }}</ion-label>
             </ion-item>
             <ion-item>
-              <ion-label>{{ $t("Reserve inventory") }}</ion-label>
-              <ion-toggle slot="end" :disabled="!inventoryConfig.reserveInvStatus || !hasPermission(Actions.APP_INV_CNFG_UPDT)" :checked="inventoryConfig.reserveInvStatus === 'Y'" @click="updateReserveInvConfig($event)"/>
+              <ion-toggle :disabled="!inventoryConfig.reserveInvStatus || !hasPermission(Actions.APP_INV_CNFG_UPDT)" :checked="inventoryConfig.reserveInvStatus === 'Y'" @click="updateReserveInvConfig($event)">{{ $t("Reserve inventory") }}</ion-toggle>
             </ion-item>
             <ion-item>
-              <ion-label>{{ $t("Hold pre-order physical inventory") }}</ion-label>
-              <ion-toggle slot="end" :disabled="!inventoryConfig.preOrdPhyInvHoldStatus || !hasPermission(Actions.APP_INV_CNFG_UPDT)" :checked="inventoryConfig.preOrdPhyInvHoldStatus != 'false'" @click="updatePreOrdPhyInvHoldConfig($event)"/>
+              <ion-toggle :disabled="!inventoryConfig.preOrdPhyInvHoldStatus || !hasPermission(Actions.APP_INV_CNFG_UPDT)" :checked="inventoryConfig.preOrdPhyInvHoldStatus != 'false'" @click="updatePreOrdPhyInvHoldConfig($event)">{{ $t("Hold pre-order physical inventory") }}</ion-toggle>
             </ion-item>
           </div>
         </ion-card>

diff --git a/src/views/catalog.vue b/src/views/catalog.vue
@@ -301,6 +301,14 @@ export default defineComponent({
   border-bottom: 1px solid var(--ion-color-medium);
   cursor: pointer;
 }
+
+
+/* Added width property as after updating to ionic7 min-width is getting applied on ion-label inside ion-item
+  which results in distorted label text and thus reduced ion-item width */
+.list-item > ion-item {
+  width: 100%;
+}
+
 @media (max-width: 991px) {
   /* ==============
    3. Mobile Header

diff --git a/src/views/edit-shipping-modal.vue b/src/views/edit-shipping-modal.vue
@@ -13,20 +13,17 @@
   <ion-content>
     <ion-radio-group>
       <ion-item lines="none">
-        <ion-radio slot="start"></ion-radio>
-        <ion-label>{{ $t("Custom") }}</ion-label>
+        <ion-radio justify="start" label-placement="end">{{ $t("Custom") }}</ion-radio>
       </ion-item>
     </ion-radio-group>
 
     <ion-item>
-      <ion-label position="stacked">{{ $t("Ships from date") }}</ion-label>
-      <ion-input type="date"></ion-input>
+      <ion-input :label="$t('Ships from date')" label-placement="stacked" type="date"></ion-input>
     </ion-item>
 
     <ion-radio-group>
       <ion-item lines="none">
-        <ion-radio slot="start"></ion-radio>
-        <ion-label>{{ $t("Auto") }}</ion-label>
+        <ion-radio label-placement="end" justify="start">{{ $t("Auto") }}</ion-radio>
       </ion-item>
     </ion-radio-group>
 

diff --git a/src/views/orders.vue b/src/views/orders.vue
@@ -33,44 +33,43 @@
                 :value is a recommended way for vuex state but value is not working for date when resetting with close button used v-model instead of :value
                 https://vuex.vuejs.org/guide/forms.html#two-way-computed-property
                 -->
-              <ion-input v-model="query.orderedAfter" @ionChange="updateQuery()" type="date" />
+              <ion-input aria-label="ordered-after" v-model="query.orderedAfter" @ionChange="updateQuery()" type="date" />
               <ion-icon @click='query.orderedAfter = ""' v-if="query.orderedAfter" :icon="close"/>
             </ion-chip>
           </ion-item>
           <ion-item>
             <ion-label>{{ $t("Ordered before") }}</ion-label>
             <ion-chip slot="end">
-              <ion-input v-model="query.orderedBefore" @ionChange="query.orderedBefore = $event.target.value; updateQuery()" type="date" />
+              <ion-input aria-label="ordered-before" v-model="query.orderedBefore" @ionChange="query.orderedBefore = $event.target.value; updateQuery()" type="date" />
               <ion-icon @click='query.orderedBefore = ""' v-if="query.orderedBefore" :icon="close"/>
             </ion-chip>
           </ion-item>
           <ion-item>
             <ion-label>{{ $t("Promised after") }}</ion-label>
             <ion-chip slot="end">
-              <ion-input v-model="query.promisedAfter" @ionChange="query.promisedAfter = $event.target.value; updateQuery()" type="date" />
+              <ion-input aria-label="promised-after" v-model="query.promisedAfter" @ionChange="query.promisedAfter = $event.target.value; updateQuery()" type="date" />
               <ion-icon @click='query.promisedAfter = ""' v-if="query.promisedAfter" :icon="close"/>
             </ion-chip>
           </ion-item>
           <ion-item>
             <ion-label>{{ $t("Promised before") }}</ion-label>
             <ion-chip slot="end">
-              <ion-input v-model="query.promisedBefore" @ionChange="query.promisedBefore = $event.target.value; updateQuery()" type="date" />
+              <ion-input aria-label="promised-before" v-model="query.promisedBefore" @ionChange="query.promisedBefore = $event.target.value; updateQuery()" type="date" />
               <ion-icon @click='query.promisedBefore = ""' v-if="query.promisedBefore" :icon="close"/>
             </ion-chip>
           </ion-item>
           <ion-item>
             <ion-label>{{ $t("Loyalty status") }}</ion-label>
             <ion-chip slot="end">
               <ion-icon :icon="ribbon" />
-              <ion-select :placeholder="$t('select')" v-model="query.cusotmerLoyalty"  @ionChange="updateQuery()" interface="popover" interface-options="{showBackdrop:false}">
+              <ion-select aria-label="loyalty-status" :placeholder="$t('select')" v-model="query.cusotmerLoyalty"  @ionChange="updateQuery()" interface="popover" interface-options="{showBackdrop:false}">
                 <ion-select-option v-for=" (key, value) in cusotmerLoyaltyOptions" v-bind:key="key" :value="value">{{key}}</ion-select-option>
               </ion-select>
               <ion-icon @click='query.cusotmerLoyalty = ""' v-if="query.cusotmerLoyalty" :icon="close"/>
             </ion-chip>
           </ion-item>
           <ion-item lines="none">
-             <ion-label>{{ $t("Only orders without promise date") }}</ion-label>
-             <ion-toggle slot="end" @ionChange="query.hasPromisedDate = !query.hasPromisedDate; updateQuery()" :checked="!query.hasPromisedDate"></ion-toggle>
+             <ion-toggle @ionChange="query.hasPromisedDate = !query.hasPromisedDate; updateQuery()" :checked="!query.hasPromisedDate">{{ $t("Only orders without promise date") }}</ion-toggle>
           </ion-item>
         </div>
 
@@ -134,8 +133,7 @@
                 <p slot="end"> {{ item.promisedDatetime ? $filters.formatUtcDate(item.promisedDatetime, "yyyy-MM-dd'T'HH:mm:ss'Z'") : '-'  }}</p>
               </ion-item>
               <ion-item button @click="item.isChecked = !item.isChecked" lines="none">
-                <ion-checkbox :modelValue="item.isChecked" @ionChange="selectItem($event, item)" slot="start"></ion-checkbox>
-                <ion-label>{{$t("Select item")}}</ion-label>
+                <ion-checkbox :modelValue="item.isChecked" @ionChange="selectItem($event, item)" label-placement="end" justify="start">{{ $t("Select item") }}</ion-checkbox>
                 <ion-button fill="clear" color="medium" @click.stop="openPopover($event, item)">
                   <ion-icon slot="icon-only" :icon="ellipsisVertical" />
                 </ion-button>
@@ -447,6 +445,7 @@ export default defineComponent({
       this.selectedItems.forEach((item: any) => {
           item.isChecked = false;
       })
+      this.store.dispatch("order/clearSelectedItems");
     },
     async openPopover(ev: Event, item: any) {
       const popover = await popoverController.create({
@@ -550,7 +549,7 @@ export default defineComponent({
 
 .order-header {
   display: grid;
-  grid:"id tags metadata" / max-content 1fr minmax(min-content, max-content);
+  grid:"id tags metadata" / 1fr 1fr minmax(min-content, max-content);
   align-items: center;
 }
 
@@ -583,6 +582,11 @@ export default defineComponent({
   gap: 10px;
 }
 
+ion-chip > ion-input, ion-chip > ion-select {
+  /* In ionic 7, a min-height is getting set on the ion-chip hence removing it. */
+  min-height: unset !important;
+}
+
 @media (max-width: 991px) {
 
   /* ==============