Implemented: state & countries dropdown accessibility and lat-long up…

…dation (#20)

src/components/FacilityAddressModal.vue

@@ -25,11 +25,15 @@
     </ion-item>
     <ion-item>
       <ion-label>{{ translate("Country") }}</ion-label>
-      <ion-input v-model="postalAddress.country" slot="end" />
+      <ion-select interface="popover" :placeholder="translate('Select')" @ionChange="updateState($event)" v-model="postalAddress.countryGeoId">
+        <ion-select-option v-for="(country, index) in countries" :key="index" :value="country.geoId">{{ country.geoName }}</ion-select-option>
+      </ion-select>
     </ion-item>
     <ion-item>
       <ion-label>{{ translate("State") }}</ion-label>
-      <ion-input v-model="postalAddress.state" slot="end" />
+      <ion-select interface="popover" :placeholder="translate('Select')" v-model="postalAddress.stateGeoId">
+        <ion-select-option v-for="(state, index) in states" :key="index" :value="state.geoId">{{ state.geoName }}</ion-select-option>
+      </ion-select>
     </ion-item>
     <ion-item>
       <ion-label>{{ translate("Zipcode") }}</ion-label>
@@ -56,6 +60,8 @@ import {
   IonInput,
   IonItem,
   IonLabel,
+  IonSelect,
+  IonSelectOption,
   IonText,
   IonTitle,
   IonToolbar,
@@ -83,16 +89,23 @@ export default defineComponent({
     IonInput,
     IonItem,
     IonLabel,
+    IonSelect,
+    IonSelectOption,
     IonText,
     IonTitle,
     IonToolbar
   },
   computed: {
     ...mapGetters({
-      postalAddress: 'facility/getPostalAddress'
+      postalAddress: 'facility/getPostalAddress',
+      countries: 'util/getCountries',
+      states: 'util/getStates'
     })
   },
   props: ['facilityId'],
+  async mounted() {
+    await this.store.dispatch('util/fetchCountries', { countryGeoId: this.postalAddress?.countryGeoId })
+  },
   methods: {
     closeModal() {
       modalController.dismiss()
@@ -109,10 +122,12 @@ export default defineComponent({
         address1: this.postalAddress.address1,
         address2: this.postalAddress.address2,
         city: this.postalAddress.city,
-        country: this.postalAddress.country,
+        countryGeoId: this.postalAddress.countryGeoId,
+        countryGeoName: this.postalAddress.countryGeoName,
         facilityId: this.facilityId,
         postalCode: this.postalAddress.postalCode,
-        state: this.postalAddress.state
+        stateGeoName: this.postalAddress.stateGeoName,
+        stateProvinceGeoId: this.postalAddress.stateGeoId
       }
 
       try {
@@ -133,6 +148,9 @@ export default defineComponent({
         logger.error(err)
       }
       modalController.dismiss()
+    },
+    updateState(ev: CustomEvent) {
+      this.store.dispatch('util/fetchStates', { geoId: ev.detail.value })
     }
   },
   setup() {

src/components/FacilityGeoPointModal.vue

@@ -114,7 +114,7 @@ export default defineComponent({
           throw resp.data
         }
       } catch(err) {
-        showToast(translate("Invalid Zipcode, GeoPoints can't be generated."))
+        showToast(translate("Failed to generate latitude & Longitude."))
         logger.error(err)
       }
     },
@@ -124,25 +124,24 @@ export default defineComponent({
       const payload = {
         address1: this.geoPoint.address1,
         city: this.geoPoint.city,
+        contactMechId: this.geoPoint.contactMechId,
+        facilityId: this.facilityId,
         latitude: this.geoPoint.latitude,
-        longitude: this.geoPoint.latitude
+        longitude: this.geoPoint.longitude,
+        postalCode: this.geoPoint.postalCode
       }
 
       try {
-        if(this.postalAddress.latitude) {
-          resp = await FacilityService.updateFacilityPostalAddress({...payload, contactMechId: this.geoPoint.contactMechId})
-        } else {
-          resp = await FacilityService.createFacilityPostalAddress(payload)
-        }
+        resp = await FacilityService.updateFacilityPostalAddress({...payload})
 
         if(!hasError(resp)) {
-          showToast(translate("Facility geoPoint updated successfully."))
+          showToast(translate("Facility latitude & longitude updated successfully."))
           await this.store.dispatch('facility/fetchFacilityContactDetails', { facilityId: this.facilityId })
         } else {
           throw resp.data
         }
       } catch(err) {
-        showToast(translate("Failed to update facility geoPoint."))
+        showToast(translate("Failed to update facility latitude & longitude."))
         logger.error(err)
       }
       modalController.dismiss()

src/locales/en.json

@@ -39,7 +39,7 @@
   "Facility": "Facility",
   "Facility address updated successfully.": "Facility address updated successfully.",
   "Facility details": "Facility details",
-  "Facility geoPoint updated successfully.": "Facility geoPoint updated successfully.",
+  "Facility latitude & longitude updated successfully.": "Facility latitude & longitude updated successfully.",
   "Facility ID": "Facility ID",
   "Facility location created successfully": "Facility location created successfully",
   "Facility location updated successfully": "Facility location updated successfully",
@@ -50,7 +50,8 @@
   "Failed to find the facility locations": "Failed to find the facility locations",
   "Failed to remove facility location": "Failed to remove facility location",
   "Failed to update facility address.": "Failed to update facility address.",
-  "Failed to update facility geoPoint.": "Failed to update facility geoPoint.",
+  "Failed to generate latitude & Longitude.": "Failed to generate latitude & Longitude.",
+  "Failed to update facility latitude & longitude.": "Failed to update facility latitude & longitude.",
   "Failed to update facility location": "Failed to update facility location",
   "Fetching TimeZones": "Fetching TimeZones",
   "Find Facilities": "Find Facilities",
@@ -65,7 +66,6 @@
   "Groups": "Groups",
   "Identification": "Identification",
   "Instance Url": "Instance Url",
-  "Invalid Zipcode, GeoPoints can't be generated.": "Invalid Zipcode, GeoPoints can't be generated.",
   "Language": "Language",
   "Latitude": "Latitude",
   "Latitude & Longitude": "Latitude & Longitude",

src/services/UtilService.ts

@@ -36,10 +36,30 @@ const fetchLocationTypes = async (payload: any): Promise<any> => {
   })
 }
 
+const fetchCountries = async (payload: any): Promise<any> => {
+  return api({
+    url: "performFind",
+    method: "POST",
+    data: payload,
+    cache: true
+  })
+}
+
+const fetchStates = async (payload: any): Promise<any> => {
+  return api({
+    url: "performFind",
+    method: "POST",
+    data: payload,
+    cache: true
+  })
+}
+
 export const UtilService = {
+  fetchCountries,
   fetchFacilityTypes,
   fetchLocationTypes,
   fetchProductStores,
+  fetchStates,
   generateLatLong
 }
 

src/store/modules/facility/actions.ts

@@ -169,7 +169,7 @@ const actions: ActionTree<FacilityState, RootState> = {
       entityName: "FacilityContactDetailByPurpose",
       orderBy: 'fromDate DESC',
       filterByDate: 'Y',
-      fieldList: ['address1', 'address2', 'city', 'contactMechId', 'countryGeoName', 'latitude', 'longitude', 'postalCode', 'stateGeoName'],
+      fieldList: ['address1', 'address2', 'city', 'contactMechId', 'countryGeoId', 'countryGeoName', 'latitude', 'longitude', 'postalCode', 'stateGeoId', 'stateGeoName'],
       viewSize: 1
     }
 
@@ -183,11 +183,13 @@ const actions: ActionTree<FacilityState, RootState> = {
           address2: contactInfo.address2,
           city: contactInfo.city,
           contactMechId: contactInfo.contactMechId,
-          country: contactInfo.countryGeoName,
+          countryGeoId: contactInfo.countryGeoId,
+          countryGeoName: contactInfo.countryGeoName,
           latitude: contactInfo.latitude,
           longitude: contactInfo.longitude,
           postalCode: contactInfo.postalCode,
-          state: contactInfo.stateGeoName
+          stateGeoId: contactInfo.stateGeoId,
+          stateGeoName: contactInfo.stateGeoName
         }
       } else {
         throw resp.data

src/store/modules/util/UtilState.ts

@@ -2,4 +2,6 @@ export default interface UtilState {
   productStores: any[];
   facilityTypes: object;
   locationTypes: object;
+  countries: any[];
+  states: any[];
 }

src/store/modules/util/actions.ts

@@ -99,6 +99,60 @@ const actions: ActionTree<UtilState, RootState> = {
     commit(types.UTIL_LOCATION_TYPES_UPDATED, locationTypes)
   },
 
+  async fetchCountries({ commit, dispatch }, payload) {
+    let countries = [] as any
+
+    const params = {
+      inputFields: {
+        geoIdTo: "DBIC"
+      },
+      entityName: 'GeoAssocAndGeoFrom',
+      noConditionFind: 'Y',
+    } as any
+
+    try {
+      const resp = await UtilService.fetchCountries(params)
+
+      if(!hasError(resp)) {
+        countries = resp.data.docs
+        dispatch('fetchStates', { geoId:  payload.countryGeoId ? payload.countryGeoId : 'USA'})
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      logger.error(err)
+    }
+
+    commit(types.UTIL_COUNTRIES_UPDATED, countries)
+  },
+
+  async fetchStates({ commit, dispatch }, payload) {
+    let states = [] as any
+
+    const params = {
+      inputFields: {
+        geoIdFrom: payload.geoId
+      },
+      entityName: 'GeoAssocAndGeoTo',
+      noConditionFind: 'Y',
+      viewSize: 100
+    } as any
+
+    try {
+      const resp = await UtilService.fetchStates(params)
+
+      if(!hasError(resp)) {
+        states = resp.data.docs
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      logger.error(err)
+    }
+
+    commit(types.UTIL_STATES_UPDATED, states)
+  },
+
   clearUtilState({ commit }) {
     commit(types.UTIL_PRODUCT_STORES_UPDATED, [])
     commit(types.UTIL_FACILITY_TYPES_UPDATED, [])

src/store/modules/util/getters.ts

@@ -11,6 +11,12 @@ const getters: GetterTree<UtilState, RootState> = {
   },
   getLocationTypes(state) {
     return state.locationTypes
+  },
+  getCountries(state) {
+    return state.countries
+  },
+  getStates(state) {
+    return state.states
   }
 }
 export default getters;

src/store/modules/util/index.ts

@@ -10,7 +10,9 @@ const utilModule: Module<UtilState, RootState> = {
   state: {
     productStores: [],
     facilityTypes: {},
-    locationTypes: {}
+    locationTypes: {},
+    countries: [],
+    states: []
   },
   getters,
   actions,

src/store/modules/util/mutation-types.ts

@@ -1,4 +1,6 @@
 export const SN_UTIL = 'util'
 export const UTIL_PRODUCT_STORES_UPDATED = SN_UTIL + '/PRODUCT_STORES_UPDATED'
 export const UTIL_FACILITY_TYPES_UPDATED = SN_UTIL + '/FACILITY_TYPES_UPDATED'
-export const UTIL_LOCATION_TYPES_UPDATED = SN_UTIL + '/LOCATION_TYPES_UPDATED'
+export const UTIL_LOCATION_TYPES_UPDATED = SN_UTIL + '/LOCATION_TYPES_UPDATED'
+export const UTIL_COUNTRIES_UPDATED = SN_UTIL + '/COUNTRIES_UPDATED'
+export const UTIL_STATES_UPDATED = SN_UTIL + '/STATES_UPDATED'

src/store/modules/util/mutations.ts

@@ -11,6 +11,12 @@ const mutations: MutationTree<UtilState> = {
   },
   [types.UTIL_LOCATION_TYPES_UPDATED](state, payload) {
     state.locationTypes = payload
+  },
+  [types.UTIL_COUNTRIES_UPDATED](state, payload) {
+    state.countries = payload
+  },
+  [types.UTIL_STATES_UPDATED](state, payload) {
+    state.states = payload
   }
 }
 export default mutations;

src/views/FacilityDetails.vue

@@ -29,7 +29,7 @@
                     <h3>{{ postalAddress.address1 }}</h3>
                     <h3>{{ postalAddress.address2 }}</h3>
                     <p class="ion-text-wrap">{{ postalAddress.postalCode ? `${postalAddress.city}, ${postalAddress.postalCode}` : postalAddress.city }}</p>
-                    <p class="ion-text-wrap">{{ postalAddress.country ? `${postalAddress.state}, ${postalAddress.country}` : postalAddress.state }}</p>
+                    <p class="ion-text-wrap">{{ postalAddress.countryGeoName ? `${postalAddress.stateGeoName}, ${postalAddress.countryGeoName}` : postalAddress.stateGeoName }}</p>
                   </ion-label>
                 </ion-item>
                 <ion-button fill="clear" @click="openAddressModal">{{ translate("Edit") }}</ion-button>
@@ -507,7 +507,8 @@ export default defineComponent({
     },
     async openGeoPointModal() {
       const addGeoPointModal = await modalController.create({
-        component: FacilityGeoPointModal
+        component: FacilityGeoPointModal,
+        componentProps: { facilityId: this.facilityId }
       })
 
       addGeoPointModal.present()