Improved: upgraded ionic to v7.6.0 (#162)

package.json

@@ -15,12 +15,12 @@
     "@capacitor/core": "^2.4.7",
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
-    "@hotwax/apps-theme": "^1.2.4",
+    "@hotwax/apps-theme": "^1.2.6",
     "@hotwax/dxp-components": "^1.12.2",
     "@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",
     "@types/file-saver": "^2.0.4",
     "@types/papaparse": "^5.3.1",
     "boon-js": "^2.0.3",

src/components/AddFacilityGroupModal.vue

@@ -18,8 +18,7 @@
         <ion-item-group v-for="(groups, typeId) in filteredFacilityGroupsByType" :key="typeId">
           <ion-item-divider color="medium">{{ getFacilityGroupTypeDesc(typeId) }}</ion-item-divider>
           <ion-item v-for="group in groups" :key="group.facilityGroupId">
-            <ion-label>{{ group.facilityGroupName }}</ion-label>
-            <ion-checkbox :checked="isFacilityGroupLinked(group.facilityGroupId)" @ion-change="updateGroupsForFacility(group.facilityGroupId)"/>
+            <ion-checkbox :checked="isFacilityGroupLinked(group.facilityGroupId)" @ion-change="updateGroupsForFacility(group.facilityGroupId)">{{ group.facilityGroupName }}</ion-checkbox>
           </ion-item>
         </ion-item-group>
       </ion-list>
@@ -45,7 +44,6 @@ import {
   IonItem,
   IonItemDivider,
   IonItemGroup,
-  IonLabel,
   IonList,
   IonSearchbar,
   IonTitle,
@@ -77,7 +75,6 @@ export default defineComponent({
     IonItem,
     IonItemDivider,
     IonItemGroup,
-    IonLabel,
     IonList,
     IonSearchbar,
     IonTitle,

src/components/AddFacilityToGroupModal.vue

@@ -22,11 +22,12 @@
       </div>
       <div v-else>
         <ion-item v-for="(facility, index) in facilities" :key="index" @click="updateSelectedFacilities(facility.facilityId)" lines="none">
-          <ion-label>
-            {{ facility.facilityName }}
-            <p>{{ facility.facilityId }}</p>
-          </ion-label>
-          <ion-checkbox :checked="isFacilitySelected(facility.facilityId)" />
+          <ion-checkbox :checked="isFacilitySelected(facility.facilityId)">
+            <ion-label>
+              {{ facility.facilityName }}
+              <p>{{ facility.facilityId }}</p>
+            </ion-label>
+          </ion-checkbox>
         </ion-item>
       </div>
     </ion-list>

src/components/AddLocationModal.vue

@@ -15,30 +15,32 @@
       <!-- Using stop for enter key as when using keyboard for opening the select we need to use enter and the same key submits the form
       so to prevent form submission on using enter key on select used stop -->
       <ion-item @keyup.enter.stop>
-        <ion-label position="floating">{{ translate("Type") }}</ion-label>
-        <ion-select interface="popover" :placeholder="translate('Select')" v-model="locationInfo.locationTypeEnumId">
+        <ion-select label-placement="floating" :label="translate('Type')" interface="popover" :placeholder="translate('Select')" v-model="locationInfo.locationTypeEnumId">
           <ion-select-option v-for="(description, type) in locationTypes" :key="type" :value="type">{{ description }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Area") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="locationInfo.areaId"/>
+        <ion-input label-placement="floating" v-model="locationInfo.areaId">
+          <div slot="label">{{ translate("Area") }} <ion-text color="danger">*</ion-text></div>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="locationInfo.aisleId"/>
+        <ion-input label-placement="floating" v-model="locationInfo.aisleId">
+          <div slot="label">{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></div>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Section") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="locationInfo.sectionId"/>
+        <ion-input label-placement="floating" v-model="locationInfo.sectionId">
+          <div slot="label">{{ translate("Section") }} <ion-text color="danger">*</ion-text></div>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Level") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="locationInfo.levelId"/>
+        <ion-input label-placement="floating" v-model="locationInfo.levelId">
+          <div slot="label">{{ translate("Level") }} <ion-text color="danger">*</ion-text></div>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Sequence") }}</ion-label>
-        <ion-input v-model="locationInfo.positionId"/>
+        <ion-input :label="translate('Sequence')" label-placement="floating" v-model="locationInfo.positionId" />
       </ion-item>
 
       <ion-fab vertical="bottom" horizontal="end" slot="fixed">
@@ -61,7 +63,6 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonSelect,
   IonSelectOption,
   IonText,
@@ -91,7 +92,6 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonSelect,
     IonSelectOption,
     IonText,

src/components/AddOperatingHoursModal.vue

@@ -14,10 +14,11 @@
       <ion-radio-group v-model="selectedCalendarId">
         <ion-accordion v-for="calendar in calendars" :key="calendar.calendarId" :value="calendar.calendarId">
           <ion-item slot="header">
-            <ion-radio :value="calendar.calendarId" slot="start" />
-            <ion-label class="ion-text-wrap">
-              {{ calendar.description ? calendar.description : calendar.calendarId }}
-            </ion-label>
+            <ion-radio label-placement="end" justify="start" :value="calendar.calendarId">
+              <ion-label class="ion-text-wrap">
+                {{ calendar.description ? calendar.description : calendar.calendarId }}
+              </ion-label>
+            </ion-radio>
           </ion-item>
           <div class="ion-padding" slot="content">
             <ion-list lines="none">

src/components/AddProductStoreToGroupModal.vue

@@ -13,11 +13,12 @@
   <ion-content>
     <ion-list>
       <ion-item v-for="productStore in productStores" :key="productStore.productStoreId" @click="toggleProductStoreSelection(productStore)" >
-        <ion-label>
-          {{ productStore.storeName }}
-          <p>{{ productStore.productStoreId }}</p>
-        </ion-label>
-        <ion-checkbox :checked="isSelected(productStore.productStoreId)" slot="end" />
+        <ion-checkbox :checked="isSelected(productStore.productStoreId)">
+          <ion-label>
+            {{ productStore.storeName }}
+            <p>{{ productStore.productStoreId }}</p>
+          </ion-label>
+        </ion-checkbox>
       </ion-item>
     </ion-list>
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">

src/components/AddStaffMemberModal.vue

@@ -19,11 +19,11 @@
     <ion-list v-else>
       <ion-list-header>{{ translate("Staff") }}</ion-list-header>
       <ion-item v-for="(party, index) in parties" :key="index">
-        <ion-label>
-          {{ party.fullName }}
-          <p>{{ party.partyId }}</p>
-        </ion-label>
         <ion-select interface="popover" :placeholder="translate('Select')" :value="getPartyRoleTypeId(party.partyId)" @ion-change="updateSelectedParties($event, party.partyId)" required>
+          <ion-label slot="label">
+            {{ party.fullName }}
+            <p>{{ party.partyId }}</p>
+          </ion-label>
           <ion-select-option v-for="(description, roleTypeId) in partyRoles" :key='roleTypeId' :value="roleTypeId">{{ description }}</ion-select-option>
         </ion-select>
       </ion-item>

src/components/CreateFacilityGroupModal.vue

@@ -14,33 +14,22 @@
     <form @keyup.enter="createFacilityGroup">
       <ion-list>
         <ion-item>
-          <ion-label position="floating">
-            {{ translate("Name") }} <ion-text color="danger">*</ion-text>
-          </ion-label>
-          <ion-input @ionBlur="setFacilityGroupId($event)" v-model="formData.facilityGroupName"/>
+          <ion-input label-placement="floating" @ionBlur="setFacilityGroupId($event)" v-model="formData.facilityGroupName">
+            <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
+          </ion-input>
         </ion-item>
-        <ion-item ref="facilityGroupId">
-          <ion-label position="floating">
-            {{ translate("Internal ID") }}
-          </ion-label>
-          <ion-input v-model="formData.facilityGroupId" @ionChange="validateFacilityGroupId" @ionBlur="markFacilityGroupIdTouched" />
-          <ion-note slot="error">
-            {{ translate('Internal ID cannot be more than 20 characters.') }}
-          </ion-note>
+        <ion-item lines="none">
+          <ion-input label-placement="floating" :label="translate('Internal ID')" ref="facilityGroupId" v-model="formData.facilityGroupId" @ionInput="validateFacilityGroupId" @ionBlur="markFacilityGroupIdTouched" :error-text="translate('Internal ID cannot be more than 20 characters.')" />
         </ion-item>
         <ion-item lines="none">
-          <ion-label>{{ translate("System group type") }}</ion-label>
-          <ion-select :disabled="isFacilityGroupTypeDisabled" interface="popover" v-model="formData.facilityGroupTypeId">
+          <ion-select :label="translate('System group type')" :disabled="isFacilityGroupTypeDisabled" interface="popover" v-model="formData.facilityGroupTypeId">
             <ion-select-option :value="facilityGroupType.facilityGroupTypeId" :key="facilityGroupType.facilityGroupTypeId" v-for="facilityGroupType in facilityGroupTypes">
               {{  facilityGroupType.description ?  facilityGroupType.description : facilityGroupType.facilityGroupTypeId }}
             </ion-select-option>
           </ion-select>
         </ion-item>
         <ion-item>
-          <ion-label position="floating">
-            {{ translate("Description") }}
-          </ion-label>
-          <ion-input v-model="formData.description"/>
+          <ion-input :label="translate('Description')" label-placement="floating" v-model="formData.description"/>
         </ion-item>
       </ion-list>
 
@@ -64,9 +53,7 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonList,
-  IonNote,
   IonSelect,
   IonSelectOption,
   IonText,
@@ -95,9 +82,7 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonList,
-    IonNote,
     IonSelect,
     IonSelectOption,
     IonText,

src/components/CreateFacilityLoginModal.vue

@@ -13,24 +13,19 @@
   <ion-content>
     <ion-list>
       <ion-item>
-        <ion-label class="ion-text-wrap" position="floating">
-          {{ translate('Username') }} <ion-text color="danger">*</ion-text>
-        </ion-label>
-        <ion-input v-model="username" />
+        <ion-input label-placement="floating" v-model="username">
+          <div class="ion-text-wrap" slot="label">{{ translate('Username') }} <ion-text color="danger">*</ion-text></div>
+        </ion-input>
       </ion-item>
-      <ion-item ref="password">
-        <ion-label class="ion-text-wrap" position="floating">
-          {{ translate('Password') }} <ion-text color="danger">*</ion-text>
-        </ion-label>
-        <ion-input v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password" />
-        <ion-note slot="helper">
-          {{ translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.') }}
-        </ion-note>
+      <ion-item ref="password" lines="none">
+        <ion-input label-placement="floating" v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password" :helperText="translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.')">
+          <div slot="label">{{ translate('Password') }} <ion-text color="danger">*</ion-text></div>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate('Reset password email') }} <ion-text
-            color="danger">*</ion-text></ion-label>
-        <ion-input v-model="emailAddress"></ion-input>
+        <ion-input label-placement="floating" v-model="emailAddress">
+          <div slot="label">{{ translate('Reset password email') }} <ion-text color="danger">*</ion-text></div>
+        </ion-input>
       </ion-item>
     </ion-list>
 
@@ -53,9 +48,7 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonList,
-  IonNote,
   IonText,
   IonTitle,
   IonToolbar,
@@ -88,9 +81,7 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonList,
-    IonNote,
     IonText,
     IonTitle,
     IonToolbar,

src/components/CreateVirtualFacilityModal.vue

@@ -14,25 +14,15 @@
     <form @keyup.enter="createVirtualFacility">
       <ion-list>
         <ion-item>
-          <ion-label position="floating">
-            {{ translate("Name") }} <ion-text color="danger">*</ion-text>
-          </ion-label>
-          <ion-input @ionBlur="setFacilityId($event)" v-model="formData.facilityName"/>
+          <ion-input label-placement="floating" @ionBlur="setFacilityId($event)" v-model="formData.facilityName">
+            <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
+          </ion-input>
         </ion-item>
-        <ion-item ref="facilityId">
-          <ion-label position="floating">
-            {{ translate("Internal ID") }}
-          </ion-label>
-          <ion-input v-model="formData.facilityId" @ionChange="validateFacilityId" @ionBlur="markFacilityIdTouched" />
-          <ion-note slot="error">
-            {{ translate('Internal ID cannot be more than 20 characters.') }}
-          </ion-note>
+        <ion-item lines="none">
+          <ion-input :label="translate('Internal ID')" label-placement="floating" ref="facilityId" v-model="formData.facilityId" @ionInput="validateFacilityId" @ionBlur="markFacilityIdTouched" :error-text="translate('Internal ID cannot be more than 20 characters.')"/>
         </ion-item>
         <ion-item>
-          <ion-label position="floating">
-            {{ translate("Description") }}
-          </ion-label>
-          <ion-input v-model="formData.description"/>
+          <ion-input label-placement="floating" :label="translate('Description')" v-model="formData.description"/>
         </ion-item>
       </ion-list>
 
@@ -56,9 +46,7 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonList,
-  IonNote,
   IonText,
   IonTitle,
   IonToolbar,
@@ -85,9 +73,7 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonList,
-    IonNote,
     IonText,
     IonTitle,
     IonToolbar

src/components/CustomMappingModal.vue

@@ -26,16 +26,13 @@
       <ion-list>
         <ion-list-header>{{ translate("Custom mapping") }}</ion-list-header>
         <ion-item>
-          <ion-label>{{ translate("Mapping ID") }}</ion-label>
-          <ion-input v-model="mappingId" placeholder="Mapping ID" />
+          <ion-input :label="translate('Mapping ID')" v-model="mappingId" placeholder="Mapping ID" />
         </ion-item>
         <ion-item>
-          <ion-label>{{ translate("Mapping Name") }}</ion-label>
-          <ion-input v-model="mappingName" placeholder="Mapping name" />
+          <ion-input :label="translate('Mapping Name')" v-model="mappingName" placeholder="Mapping name" />
         </ion-item>
         <ion-item>
-          <ion-label>{{ translate("Identification") }}</ion-label>
-          <ion-input v-model="mappingValue" placeholder="Mapping Value" />
+          <ion-input :label="translate('Identification')" v-model="mappingValue" placeholder="Mapping Value" />
         </ion-item>
       </ion-list>
 

src/components/CustomScheduleModal.vue

@@ -12,14 +12,12 @@
 
   <ion-content>
     <ion-item>
-      <ion-label>
-        {{ translate("Name") }} <ion-text color="danger">*</ion-text>
-      </ion-label>
-      <ion-input v-model="selectedTimesForWeek.description" />
+      <ion-input v-model="selectedTimesForWeek.description">
+        <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
+      </ion-input>
     </ion-item>
     <ion-item lines="full" class="ion-margin-top">
-      <ion-label>{{ translate("Daily timings") }}</ion-label>
-      <ion-toggle :checked="isDailyTimingsChecked" @ionChange="updateDailyTimings" slot="end" />
+      <ion-toggle :checked="isDailyTimingsChecked" @ionChange="updateDailyTimings">{{ translate("Daily timings") }}</ion-toggle>
     </ion-item>
 
     <ion-list lines="none" v-if="isDailyTimingsChecked">
@@ -62,7 +60,7 @@
       show-default-buttons
       hour-cycle="h12"
       presentation="time"
-      :value="selectedTimesForWeek[selectedDayTime] ? selectedTimesForWeek[selectedDayTime] : ''"
+      :value="selectedTimesForWeek[selectedDayTime] ? selectedTimesForWeek[selectedDayTime] : DateTime.now().toUTC().toISO()"
       @ionChange="updateTime($event)"
     />
   </ion-modal>
@@ -268,6 +266,7 @@ export default defineComponent({
     return {
       closeCircle,
       closeOutline,
+      DateTime,
       saveOutline,
       store,
       translate