From 4062613505e58dad5c2894a64ed4ad7ff348838b Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Thu, 4 Apr 2024 11:06:08 +0530 Subject: [PATCH 1/5] Improved: app to use ionic version 7.6.0 (#269) --- package-lock.json | 81 +++++++++------------------ package.json | 6 +- src/views/catalog-product-details.vue | 6 +- src/views/edit-shipping-modal.vue | 9 +-- src/views/orders.vue | 16 +++--- src/views/product-details.vue | 16 +++--- src/views/promise-date-modal.vue | 5 +- src/views/settings.vue | 3 +- src/views/timezone-modal.vue | 5 +- src/views/warehouse-modal.vue | 5 +- 10 files changed, 52 insertions(+), 100 deletions(-) diff --git a/package-lock.json b/package-lock.json index 362e29ae2..01d0a59cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,9 +16,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", @@ -2833,35 +2833,6 @@ "tslib": "^2.1.0" } }, - "node_modules/@hotwax/dxp-components/node_modules/@ionic/vue": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.7.4.tgz", - "integrity": "sha512-THrMMoQHU2Ym+JaTj/dm/FV8FyB7ZXmc6kierZ/+BSvOncIekla8Afe6Qk2c2U1afOPos0MBINf9xXkwxnHfIw==", - "dependencies": { - "@ionic/core": "7.7.4", - "ionicons": "^7.0.0" - } - }, - "node_modules/@hotwax/dxp-components/node_modules/@stencil/core": { - "version": "4.12.5", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.5.tgz", - "integrity": "sha512-vSyFjY7XSEx0ufa9SebOd437CvnneaTXlCpuGDhjUDxAjGBlu6ie5qHyubobVGBth//aErc6wZPHc6W75Vp3iQ==", - "bin": { - "stencil": "bin/stencil" - }, - "engines": { - "node": ">=16.0.0", - "npm": ">=7.10.0" - } - }, - "node_modules/@hotwax/dxp-components/node_modules/ionicons": { - "version": "7.2.2", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz", - "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==", - "dependencies": { - "@stencil/core": "^4.0.3" - } - }, "node_modules/@hotwax/dxp-components/node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", @@ -3094,12 +3065,12 @@ } }, "node_modules/@ionic/core": { - "version": "6.7.5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.7.5.tgz", - "integrity": "sha512-zRkRn+h/Vs3xt/EVgBdShMKDyeGOM4RU31NPF2icfu3CUTH+VrMV569MUnNjYvd1Lu2xK90pYy4TaicSWmC1Pw==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.3.tgz", + "integrity": "sha512-5pFoE8gbhbCuyQlZ7BlRk4+S4PmmqgkALw4IAhtUK1TuzsKJ2KLFBlp0rdlWS+VcKEyrec/ptVki8oN5335vRA==", "dependencies": { - "@stencil/core": "^2.18.0", - "ionicons": "^6.1.3", + "@stencil/core": "^4.12.2", + "ionicons": "^7.2.2", "tslib": "^2.1.0" } }, @@ -3109,20 +3080,20 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/@ionic/vue": { - "version": "6.7.5", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.7.5.tgz", - "integrity": "sha512-6JBEaHCT2vVUzYqyfBiEUN8Wo7FezxY5Y3n+HGqI61J4qVay+8IxZRTYeX+O72QglbYOkzvfjE6SgS25oS+S9A==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.8.3.tgz", + "integrity": "sha512-GzHhSus8RT8TGOER6fgpcz29fbMgNn/R65waAPKvO3Kks9ZITtPOtTYM9xNGOHPTKAA5yfAoSch944lmAjMNLg==", "dependencies": { - "@ionic/core": "6.7.5", - "ionicons": "^6.1.3" + "@ionic/core": "7.8.3", + "ionicons": "^7.0.0" } }, "node_modules/@ionic/vue-router": { - "version": "6.7.5", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-6.7.5.tgz", - "integrity": "sha512-nupLaWFARdy5vOCNg2xw6YpecaR/hPEew+tWjUJE1INlwvB88o7Uct/R480vqFj3fB436W4O4ViJd4/g0ZBZ8A==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.8.3.tgz", + "integrity": "sha512-xcXW8Af0HmhHBcCY1+iPVQzQoq77m2SFEL1MpTHmfZvh/ouB/AOLtBbup2btY8lOJ+W66S/V8xA/gBgbW0S4Kw==", "dependencies": { - "@ionic/vue": "6.7.5" + "@ionic/vue": "7.8.3" } }, "node_modules/@isaacs/cliui": { @@ -3614,15 +3585,15 @@ "dev": true }, "node_modules/@stencil/core": { - "version": "2.22.3", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz", - "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz", + "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg==", "bin": { "stencil": "bin/stencil" }, "engines": { - "node": ">=12.10.0", - "npm": ">=6.0.0" + "node": ">=16.0.0", + "npm": ">=7.10.0" } }, "node_modules/@surma/rollup-plugin-off-main-thread": { @@ -10631,11 +10602,11 @@ } }, "node_modules/ionicons": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz", - "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz", + "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==", "dependencies": { - "@stencil/core": "^2.18.0" + "@stencil/core": "^4.0.3" } }, "node_modules/ipaddr.js": { diff --git a/package.json b/package.json index 69230ff93..78890c619 100644 --- 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/views/catalog-product-details.vue b/src/views/catalog-product-details.vue index 363b7ad55..2fe4f942c 100644 --- a/src/views/catalog-product-details.vue +++ b/src/views/catalog-product-details.vue @@ -255,12 +255,10 @@ {{ (atpCalcDetails.excludedAtp || atpCalcDetails.excludedAtp === 0) ? atpCalcDetails.excludedAtp : '-' }} - {{ $t("Reserve inventory") }} - + {{ $t("Reserve inventory") }} - {{ $t("Hold pre-order physical inventory") }} - + {{ $t("Hold pre-order physical inventory") }} diff --git a/src/views/edit-shipping-modal.vue b/src/views/edit-shipping-modal.vue index b8dc7f2ac..feca3be11 100644 --- a/src/views/edit-shipping-modal.vue +++ b/src/views/edit-shipping-modal.vue @@ -13,20 +13,17 @@ - - {{ $t("Custom") }} + {{ $t("Custom") }} - {{ $t("Ships from date") }} - + - - {{ $t("Auto") }} + {{ $t("Auto") }} diff --git a/src/views/orders.vue b/src/views/orders.vue index 1ddc6b307..22b625b79 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -33,28 +33,28 @@ :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 --> - + {{ $t("Ordered before") }} - + {{ $t("Promised after") }} - + {{ $t("Promised before") }} - + @@ -62,15 +62,14 @@ {{ $t("Loyalty status") }} - + {{key}} - {{ $t("Only orders without promise date") }} - + {{ $t("Only orders without promise date") }} @@ -134,8 +133,7 @@

{{ item.promisedDatetime ? $filters.formatUtcDate(item.promisedDatetime, "yyyy-MM-dd'T'HH:mm:ss'Z'") : '-' }}

- - {{$t("Select item")}} + {{ $t("Select item") }} diff --git a/src/views/product-details.vue b/src/views/product-details.vue index 471f13f67..75c41b7d3 100644 --- a/src/views/product-details.vue +++ b/src/views/product-details.vue @@ -52,28 +52,28 @@ {{ $t("Ordered after") }} - + {{ $t("Ordered before") }} - + {{ $t("Promised after") }} - + {{ $t("Promised before") }} - + @@ -89,15 +89,14 @@ {{ $t("Loyalty status") }} - + {{key}} - {{ $t("Only orders without promise date") }} - + {{ $t("Only orders without promise date") }} @@ -140,8 +139,7 @@
- {{ $t("Pieces") }} - +
diff --git a/src/views/promise-date-modal.vue b/src/views/promise-date-modal.vue index a51ed4b9d..7582adf0d 100644 --- a/src/views/promise-date-modal.vue +++ b/src/views/promise-date-modal.vue @@ -13,8 +13,7 @@ - {{ $t("Promised date") }} - + @@ -37,7 +36,6 @@ import { IonIcon, IonInput, IonItem, - IonLabel, IonTitle, IonToolbar, modalController, @@ -136,7 +134,6 @@ export default defineComponent({ IonIcon, IonInput, IonItem, - IonLabel, IonTitle, IonToolbar }, diff --git a/src/views/settings.vue b/src/views/settings.vue index 42e017740..dd590cfb5 100644 --- a/src/views/settings.vue +++ b/src/views/settings.vue @@ -53,8 +53,7 @@ {{ $t('A store represents 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.') }} - {{ $t("Select store") }} - + {{ store.storeName }} diff --git a/src/views/timezone-modal.vue b/src/views/timezone-modal.vue index 91fd3f414..9baec7ca3 100644 --- a/src/views/timezone-modal.vue +++ b/src/views/timezone-modal.vue @@ -30,8 +30,7 @@ - {{ timeZone.label }} ({{ timeZone.id }}) - + {{ timeZone.label }} ({{ timeZone.id }}) @@ -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, diff --git a/src/views/warehouse-modal.vue b/src/views/warehouse-modal.vue index 839272748..31492143d 100644 --- a/src/views/warehouse-modal.vue +++ b/src/views/warehouse-modal.vue @@ -24,8 +24,7 @@ - {{ facility.facilityName}} - + {{ facility.facilityName }} @@ -49,7 +48,6 @@ import { IonHeader, IonItem, IonIcon, - IonLabel, IonRadioGroup, IonRadio, IonList, @@ -227,7 +225,6 @@ export default defineComponent({ IonHeader, IonIcon, IonItem, - IonLabel, IonList, IonRadioGroup, IonRadio, From c1ab8e31caeb0c9fce72edfe1f89ece97c1a070e Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Thu, 4 Apr 2024 14:19:52 +0530 Subject: [PATCH 2/5] Improved: css to fix ui failures (#269) --- src/main.ts | 3 ++- src/views/orders.vue | 4 ++++ src/views/product-details.vue | 8 ++++++-- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/main.ts b/src/main.ts index 4565a85f3..ca854696e 100644 --- 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/views/orders.vue b/src/views/orders.vue index 22b625b79..1d7fe70df 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -581,6 +581,10 @@ export default defineComponent({ gap: 10px; } +ion-chip { + height: 0%; +} + @media (max-width: 991px) { /* ============== diff --git a/src/views/product-details.vue b/src/views/product-details.vue index 75c41b7d3..4374a9e33 100644 --- a/src/views/product-details.vue +++ b/src/views/product-details.vue @@ -627,7 +627,7 @@ export default defineComponent({ .product-info { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: start; } .product-info > h1 { @@ -660,7 +660,7 @@ hr { ion-card { display: grid; - grid-template-columns: max-content 1fr 200px; + grid-template-columns: repeat(3, minmax(200px, 1fr)); align-items: center; padding: 16px; } @@ -670,6 +670,10 @@ ion-card { justify-content: center; } +ion-chip { + height: 0%; +} + @media (max-width: 991px) { /* ============== From d8e8fdc7ab5084771955f1907e584322835bbeae Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Tue, 9 Apr 2024 10:44:03 +0530 Subject: [PATCH 3/5] Fixed: css for the ion-chip min height (#269) --- src/views/orders.vue | 5 +++-- src/views/product-details.vue | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/views/orders.vue b/src/views/orders.vue index 1d7fe70df..b0cb5eba6 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -581,8 +581,9 @@ export default defineComponent({ gap: 10px; } -ion-chip { - height: 0%; +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) { diff --git a/src/views/product-details.vue b/src/views/product-details.vue index 4374a9e33..5df0ab156 100644 --- a/src/views/product-details.vue +++ b/src/views/product-details.vue @@ -670,8 +670,9 @@ ion-card { justify-content: center; } -ion-chip { - height: 0%; +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) { From 8ecb0b197c72d072fba59aba6af9b6ce471f8436 Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Tue, 9 Apr 2024 11:00:44 +0530 Subject: [PATCH 4/5] Improved: css for list item and order header (#269-ionic7) --- src/views/catalog.vue | 8 ++++++++ src/views/orders.vue | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/views/catalog.vue b/src/views/catalog.vue index fa00d4538..efefca6ca 100644 --- 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/orders.vue b/src/views/orders.vue index b0cb5eba6..dd37342c5 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -548,7 +548,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; } From 46f077ca4a9e1676e42f8dfd3a2b59399ae9295a Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Tue, 9 Apr 2024 11:27:15 +0530 Subject: [PATCH 5/5] Improved: clearing selected items list on closing release item (#269) --- src/store/modules/order/actions.ts | 7 +++++++ src/views/orders.vue | 1 + 2 files changed, 8 insertions(+) diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts index 4475a0265..b3b8a6ccf 100644 --- a/src/store/modules/order/actions.ts +++ b/src/store/modules/order/actions.ts @@ -290,6 +290,13 @@ const actions: ActionTree = { 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/orders.vue b/src/views/orders.vue index dd37342c5..30bdaaf8b 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -445,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({