Improved: ionic to v7(#72)

hotwax · Jun 7, 2024 · 1cdb21c · 1cdb21c
1 parent bd373ec
commit 1cdb21c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,9 +17,9 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/apps-theme": "^1.1.0",
     "@hotwax/oms-api": "^1.7.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",
     "mitt": "^2.1.0",

diff --git a/src/views/AddressModal.vue b/src/views/AddressModal.vue
@@ -12,30 +12,24 @@
   <ion-content>
     <ion-list>
       <ion-item>
-        <ion-label>{{ $t("First name") }}</ion-label>
-        <ion-input class="ion-text-right" name="firstName" slot="end" v-model="address.firstName" id="firstName" type="text"/>
+        <ion-input :label="$t('First name')" class="ion-text-right" name="firstName" v-model="address.firstName" id="firstName" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ $t("Last name") }}</ion-label>
-        <ion-input class="ion-text-right" name="lastName" slot="end" v-model="address.lastName" id="lastName" type="text"/>
+        <ion-input :label="$t('Last name')" class="ion-text-right" name="lastName" v-model="address.lastName" id="lastName" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ $t("Street") }}</ion-label>
-        <ion-input class="ion-text-right" name="street"  slot="end" v-model="address.address1" id="address1" type="text"/>
+        <ion-input :label="$t('Street')" class="ion-text-right" name="street" v-model="address.address1" id="address1" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ $t("City") }}</ion-label>
-        <ion-input class="ion-text-right" name="city" slot="end" v-model="address.city" id="city" type="text"/>
+        <ion-input :label="$t('City')" class="ion-text-right" name="city" v-model="address.city" id="city" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ $t("State") }}</ion-label>
-        <ion-select interface="popover" v-model="address.stateProvinceGeoId">
+        <ion-select :label="$t('State')" interface="popover" v-model="address.stateProvinceGeoId">
           <ion-select-option v-for="state in states" :key="state.geoId" :value="state.geoId" >{{ state.geoName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-label>{{ $t("Zipcode") }}</ion-label>
-        <ion-input class="ion-text-right" name="zipcode" slot="end" v-model="address.postalCode" id="postalCode"/>
+        <ion-input :label="$t('Zipcode')" class="ion-text-right" name="zipcode" v-model="address.postalCode" id="postalCode"/>
       </ion-item>
     </ion-list>
     <div class="ion-text-center">
@@ -52,8 +46,7 @@ import {
   IonHeader, 
   IonIcon, 
   IonItem, 
-  IonInput, 
-  IonLabel, 
+  IonInput,
   IonList, 
   IonSelect,
   IonSelectOption,
@@ -79,7 +72,6 @@ export default defineComponent({
     IonIcon,
     IonItem,
     IonInput,
-    IonLabel,
     IonList,
     IonSelect,
     IonSelectOption,

diff --git a/src/views/Order.vue b/src/views/Order.vue
@@ -35,8 +35,7 @@
               </ion-label>
             </ion-item> -->
             <ion-item>
-              <ion-label>{{ $t('Delivery method') }}</ion-label>
-              <ion-select :disabled="!hasPermission(Actions.APP_SHPGRP_DLVRMTHD_UPDATE)" interface="popover" :value="shipGroup.selectedShipmentMethodTypeId" @ionChange="updateDeliveryMethod($event, shipGroup)">
+              <ion-select :label="$t('Delivery method')" :disabled="!hasPermission(Actions.APP_SHPGRP_DLVRMTHD_UPDATE)" interface="popover" :value="shipGroup.selectedShipmentMethodTypeId" @ionChange="updateDeliveryMethod($event, shipGroup)">
                 <ion-select-option v-for="method in deliveryMethods" :key="method.value" :value="method.value">{{ method.name }}</ion-select-option>
               </ion-select>
             </ion-item>

diff --git a/src/views/PickupLocationModal.vue b/src/views/PickupLocationModal.vue
@@ -28,10 +28,11 @@
       </ion-list-header>
       <ion-radio-group v-model="selectedFacility">
         <ion-item v-for="store of nearbyStores" :key="store.facilityId">
-          <ion-label>{{ store.facilityName }}</ion-label>
-          <!-- Showing store distance in miles -->
-          <ion-label v-if="store.distance" slot="end">{{ store.distance }} {{ $t("mi") }}</ion-label>
-          <ion-radio :value="store" slot="end" />
+          <ion-radio :value="store">
+              <ion-label>{{ store.facilityName }}</ion-label>
+              <!-- Showing store distance in miles -->
+              <ion-label v-if="store.distance">{{ store.distance }} {{ $t("mi") }}</ion-label>
+          </ion-radio>
         </ion-item>
       </ion-radio-group>
     </ion-list>
@@ -224,4 +225,13 @@ export default defineComponent({
     return { closeOutline, router, store };
   }
 });
-</script>
+</script>
+
+<style scoped>
+/* Styling to add the facility name and its display side by side as ion-radio label */
+ion-radio::part(label) {
+  display: flex;
+  justify-content: space-between;
+  width: 100%
+}
+</style>