Improved: updated code according to the needs for ionic 7 (hotwax#162)

amansinghbais · Mar 28, 2024 · 4914c39 · 4914c39
1 parent 9d6e457
commit 4914c39
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 29 deletions.
diff --git a/src/components/AddFacilityToGroupModal.vue b/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>

diff --git a/src/components/AddProductStoreToGroupModal.vue b/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">

diff --git a/src/components/CustomMappingModal.vue b/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>
 

diff --git a/src/components/FacilityAddressModal.vue b/src/components/FacilityAddressModal.vue
@@ -16,8 +16,7 @@
         <ion-label>{{ translate("Address") }}</ion-label>
       </ion-item-divider>
       <ion-item>
-        <ion-label position="floating">{{ translate("Shipping name") }}</ion-label>
-        <ion-input v-model="address.toName" />
+        <ion-input :label="translate('Shipping name')" label-placement="floating" v-model="address.toName" />
       </ion-item>
       <ion-item>
         <ion-input label-placement="floating" v-model="address.address1">
@@ -51,9 +50,8 @@
         <ion-label>{{ translate("Contact details") }}</ion-label>
       </ion-item-divider>
       <ion-item>
-        <ion-label :position="telecomNumberValue?.countryCode ? 'stacked' : 'floating'">{{ translate("Contact number") }}</ion-label>
-        <ion-input v-model="telecomNumberValue.contactNumber">
-          <ion-text>{{ `${telecomNumberValue?.countryCode}-` }}</ion-text>
+        <ion-input :label="translate('Contact number')" :label-placement="telecomNumberValue?.countryCode ? 'stacked' : 'floating'" v-model="telecomNumberValue.contactNumber">
+          <ion-text slot="start">{{ telecomNumberValue?.countryCode }}</ion-text>
         </ion-input>
       </ion-item>
     </form>

diff --git a/src/components/GroupTypeModal.vue b/src/components/GroupTypeModal.vue
@@ -20,11 +20,12 @@
       <div v-else>
         <ion-radio-group v-model="facilityGroupValue.facilityGroupTypeId">
           <ion-item :key="groupType.facilityGroupTypeId" v-for="groupType in facilityGroupTypes">
-            <ion-label>
-              {{ groupType.description ? groupType.description : groupType.facilityGroupTypeId }}
-              <p>{{ groupType.facilityGroupTypeId }}</p>
-            </ion-label>
-            <ion-radio :value="groupType.facilityGroupTypeId" slot="end" />
+            <ion-radio :value="groupType.facilityGroupTypeId">
+              <ion-label>
+                {{ groupType.description ? groupType.description : groupType.facilityGroupTypeId }}
+                <p>{{ groupType.facilityGroupTypeId }}</p>
+              </ion-label>
+            </ion-radio>
           </ion-item>
         </ion-radio-group>
       </div>

diff --git a/src/views/AddFacilityAddress.vue b/src/views/AddFacilityAddress.vue
@@ -51,9 +51,8 @@
               </ion-select>
             </ion-item>
             <ion-item lines="none">
-              <ion-label :position="countryCode ? 'stacked' : 'floating'">{{ translate("Contact number") }}</ion-label>
-              <ion-input v-model="contactNumber">
-                <ion-text>{{ `${countryCode}-` }}</ion-text>
+              <ion-input :label="translate('Contact number')" :label-placement="countryCode ? 'stacked' : 'floating'" v-model="contactNumber">
+                <ion-text slot="start">{{ countryCode }}</ion-text>
               </ion-input>
             </ion-item>
           </ion-list>