Merge pull request #32 from amansinghbais/facilities/floatingInput

Improved: code to add floating input labels in modals
hotwax · Nov 28, 2023 · 2b173ab · 2b173ab
2 parents 61fb996 + 39d2f6a
commit 2b173ab
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 28 deletions.
diff --git a/src/components/AddLocationModal.vue b/src/components/AddLocationModal.vue
@@ -15,30 +15,30 @@
       <!-- 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>{{ translate("Type") }}</ion-label>
+        <ion-label position="floating">{{ translate("Type") }}</ion-label>
         <ion-select 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>{{ translate("Area") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input :placeholder="translate('area')" v-model="locationInfo.areaId"/>
+        <ion-label position="floating">{{ translate("Area") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="locationInfo.areaId"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input :placeholder="translate('aisle')" v-model="locationInfo.aisleId"/>
+        <ion-label position="floating">{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="locationInfo.aisleId"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Section") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input :placeholder="translate('section')" v-model="locationInfo.sectionId"/>
+        <ion-label position="floating">{{ translate("Section") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="locationInfo.sectionId"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Level") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input :placeholder="translate('level')" v-model="locationInfo.levelId"/>
+        <ion-label position="floating">{{ translate("Level") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="locationInfo.levelId"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Sequence") }}</ion-label>
-        <ion-input :placeholder="translate('sequence')" v-model="locationInfo.positionId"/>
+        <ion-label position="floating">{{ translate("Sequence") }}</ion-label>
+        <ion-input v-model="locationInfo.positionId"/>
       </ion-item>
 
       <ion-fab vertical="bottom" horizontal="end" slot="fixed">
@@ -103,7 +103,7 @@ export default defineComponent({
       locationInfo: {} as any
     }
   },
-  mounted() {
+  beforeMount() {
     this.locationInfo = this.location ? JSON.parse(JSON.stringify(this.location)) : {}
   },
   computed: {

diff --git a/src/components/FacilityAddressModal.vue b/src/components/FacilityAddressModal.vue
@@ -13,32 +13,32 @@
   <ion-content>
     <form @keyup.enter="saveAddress">
       <ion-item>
-        <ion-label>{{ translate("Address line 1") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="address.address1" slot="end" />
+        <ion-label position="floating">{{ translate("Address line 1") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="address.address1" />
       </ion-item>
       <ion-item class="ion-margin-bottom">
-        <ion-label>{{ translate("Address line 2") }}</ion-label>
-        <ion-input v-model="address.address2" slot="end" />
+        <ion-label position="floating">{{ translate("Address line 2") }}</ion-label>
+        <ion-input v-model="address.address2" />
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("City") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="address.city" slot="end" />
+        <ion-label position="floating">{{ translate("City") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="address.city" />
       </ion-item>
       <ion-item @keyup.enter.stop>
-        <ion-label>{{ translate("Country") }}</ion-label>
+        <ion-label position="floating">{{ translate("Country") }}</ion-label>
         <ion-select interface="popover" :placeholder="translate('Select')" @ionChange="updateState($event)" v-model="address.countryGeoId">
           <ion-select-option v-for="country in countries" :key="country.geoId" :value="country.geoId">{{ country.geoName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item @keyup.enter.stop>
-        <ion-label>{{ translate("State") }}</ion-label>
+        <ion-label position="floating">{{ translate("State") }}</ion-label>
         <ion-select interface="popover" :placeholder="translate('Select')" v-model="address.stateProvinceGeoId">
           <ion-select-option v-for="state in states[address.countryGeoId]" :key="state.geoId" :value="state.geoId">{{ state.geoName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Zipcode") }}</ion-label>
-        <ion-input v-model="address.postalCode" slot="end" />
+        <ion-label position="floating">{{ translate("Zipcode") }}</ion-label>
+        <ion-input v-model="address.postalCode" />
       </ion-item>
     </form>
   </ion-content>
@@ -110,8 +110,10 @@ export default defineComponent({
     }
   },
   props: ['facilityId'],
-  async mounted() {
+  beforeMount() {
     this.address = JSON.parse(JSON.stringify(this.postalAddress))
+  },
+  async mounted() {
     await this.store.dispatch('util/fetchCountries', { countryGeoId: this.address?.countryGeoId })
   },
   methods: {

diff --git a/src/components/FacilityGeoPointModal.vue b/src/components/FacilityGeoPointModal.vue
@@ -20,12 +20,12 @@
         </ion-button>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Latitude") }}</ion-label>
-        <ion-input v-model="geoPoint.latitude" slot="end"/>
+        <ion-label position="floating">{{ translate("Latitude") }}</ion-label>
+        <ion-input v-model="geoPoint.latitude" />
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Longitude") }}</ion-label>
-        <ion-input v-model="geoPoint.longitude" slot="end" />
+        <ion-label position="floating">{{ translate("Longitude") }}</ion-label>
+        <ion-input v-model="geoPoint.longitude" />
       </ion-item>
     </form>
   </ion-content>
@@ -90,7 +90,7 @@ export default defineComponent({
       geoPoint: {} as any
     }
   },
-  mounted() {
+  beforeMount() {
     this.geoPoint = JSON.parse(JSON.stringify(this.postalAddress))
   },
   methods: {