Implemented: Added the support for using facility selector from dxp-component(#dxp/228)

package.json

@@ -17,8 +17,8 @@
     "@capacitor/ios": "^2.5.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.12.2",
-    "@hotwax/oms-api": "^1.13.0",
+    "@hotwax/dxp-components": "file:../dxp-components",
+    "@hotwax/oms-api": "file:../oms-api",
     "@ionic/core": "~7.6.0",
     "@ionic/vue": "~7.6.0",
     "@ionic/vue-router": "~7.6.0",

src/adapter/index.ts

@@ -1,15 +1,18 @@
-import { api, client, getConfig, getProductIdentificationPref, hasError, initialise, logout, resetConfig, setProductIdentificationPref, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
+import { api, client, getConfig, getUserFacilities, getUserPreference, getProductIdentificationPref, hasError, initialise, logout, resetConfig, setProductIdentificationPref, setUserPreference, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
 
 export {
   api,
   client,
   getConfig,
   getProductIdentificationPref,
+  getUserFacilities,
+  getUserPreference,
   hasError,
   initialise,
   logout,
   resetConfig,
   setProductIdentificationPref,
+  setUserPreference,
   updateInstanceUrl,
   updateToken
 }

src/locales/en.json

@@ -20,6 +20,7 @@
   "Error getting user profile.": "Error getting user profile.",
   "Facility": "Facility",
   "Fetching time zones": "Fetching time zones",
+  "Fetching facilities": "Fetching facilities",
   "Filters": "Filters",
   "Go to OMS": "Go to OMS",
   "Go to Launchpad": "Go to Launchpad",
@@ -32,6 +33,7 @@
   "Logging in": "Logging in",
   "Logging out": "Logging out",
   "Logout": "Logout",
+  "No facilities found": "No facilities found",
   "No item has been picked": "No item has been picked",
   "No permission": "No permission",
   "No picklist found": "No picklist found",
@@ -51,6 +53,7 @@
   "Product not found in remaining items": "Product not found in remaining items",
   "Reason:": "Reason:",
   "Scan": "Scan",
+  "Search facilities": "Search facilities",
   "Search time zones": "Search time zones",
   "Secondary": "Secondary",
   "Select all" : "Select all",

src/main.ts

@@ -29,7 +29,7 @@ import i18n from './i18n'
 import store from './store'
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
-import { getConfig, getProductIdentificationPref, initialise, setProductIdentificationPref } from '@/adapter'
+import { getConfig, getProductIdentificationPref, getUserFacilities, getUserPreference, initialise, setProductIdentificationPref, setUserPreference } from '@/adapter'
 import localeMessages from './locales';
 
 const app = createApp(App)
@@ -50,7 +50,10 @@ const app = createApp(App)
     getProductIdentificationPref,
     initialise,
     setProductIdentificationPref,
-    localeMessages
+    localeMessages,
+    getUserFacilities,
+    setUserPreference,
+    getUserPreference
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/store/modules/picklist/actions.ts

@@ -6,6 +6,12 @@ import { PicklistService } from '@/services/PicklistService'
 import { showToast } from '@/utils'
 import { hasError } from '@/adapter'
 import { translate } from '@/i18n'
+import { useUserStore } from '@hotwax/dxp-components'
+
+const getCurrentFacilityId = () => {
+  const currentFacility: any = useUserStore().getCurrentFacility;
+  return currentFacility?.facilityId
+}
 
 const actions: ActionTree<PicklistState, RootState> = {
   /**
@@ -16,7 +22,7 @@ const actions: ActionTree<PicklistState, RootState> = {
     const params = {
       "inputFields": {
         "statusId": "PICKLIST_PRINTED",
-        "facilityId": this.state.user.currentFacility.facilityId,
+        "facilityId": getCurrentFacilityId(),
       },
       "orderBy": "picklistDate DESC",
       "viewSize": payload.viewSize,
@@ -57,7 +63,7 @@ const actions: ActionTree<PicklistState, RootState> = {
       "inputFields": {
         "statusId": ["PICKLIST_COMPLETED", "PICKLIST_PICKED"],
         "statusId_op": "in",
-        "facilityId": this.state.user.currentFacility.facilityId,
+        "facilityId": getCurrentFacilityId(),
       },
       "orderBy": "picklistDate DESC",
       "viewSize": 10,

src/store/modules/user/UserState.ts

@@ -1,7 +1,6 @@
 export default interface UserState {
     token: string;
     current: object | null;
-    currentFacility: object;
     instanceUrl: string;
     picklistItemSortBy: string;
     pwaState: any;

src/store/modules/user/actions.ts

@@ -7,7 +7,7 @@ import { showToast } from '@/utils'
 import { translate } from '@/i18n'
 import { Settings } from 'luxon';
 import { hasError, logout, updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
-import { useAuthStore, useProductIdentificationStore } from '@hotwax/dxp-components'
+import { useAuthStore, useProductIdentificationStore, useUserStore } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
 import router from '@/router';
 
@@ -123,10 +123,10 @@ const actions: ActionTree<UserState, RootState> = {
       }
       commit(types.USER_INFO_UPDATED, resp.data);
 
-      const currentFacility = resp.data.facilities.length > 0 ? resp.data.facilities[0] : {};
-
-      commit(types.USER_CURRENT_FACILITY_UPDATED, currentFacility);
+      await useUserStore().getUserFacilities(resp.data.partyId, "", false)
+      await useUserStore().getFacilityPreference('SELECTED_FACILITY')
 
+      const currentFacility: any = useUserStore().getCurrentFacility
       // get and set current ecom store in state
       const currentEComStore = await UserService.getCurrentEComStore(token, currentFacility?.facilityId);
       commit(types.USER_CURRENT_ECOM_STORE_UPDATED, currentEComStore);
@@ -151,12 +151,9 @@ const actions: ActionTree<UserState, RootState> = {
       }
     },
 
-  // update current facility information
-  async setFacility ({ commit, state }, payload) {
-    commit(types.USER_CURRENT_FACILITY_UPDATED, payload.facility);
-
+    async setFacilityUpdates ({ commit, state }, payload) {
     // get and set current ecom store in state
-    const currentEComStore = await UserService.getCurrentEComStore(state.token, payload.facility.facilityId);
+    const currentEComStore = await UserService.getCurrentEComStore(state.token, payload);
     commit(types.USER_CURRENT_ECOM_STORE_UPDATED, currentEComStore);
 
     await useProductIdentificationStore().getIdentificationPref(currentEComStore?.productStoreId)

src/store/modules/user/getters.ts

@@ -18,9 +18,6 @@ const getters: GetterTree <UserState, RootState> = {
     getCurrentEComStore(state) {
         return state.currentEComStore;
     },
-    getCurrentFacility (state) {
-        return state.currentFacility;
-    },
     getInstanceUrl (state) {
         const baseUrl = process.env.VUE_APP_BASE_URL;
         return baseUrl ? baseUrl : state.instanceUrl;

src/store/modules/user/index.ts

@@ -11,7 +11,6 @@ const userModule: Module<UserState, RootState> = {
       token: '',
       current: null,
       currentEComStore: {},
-      currentFacility: {},
       instanceUrl: '',
       picklistItemSortBy: 'productName',
       pwaState: {

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

@@ -2,7 +2,6 @@ export const SN_USER = 'user'
 export const USER_TOKEN_CHANGED = SN_USER + '/TOKEN_CHANGED'
 export const USER_END_SESSION = SN_USER + '/END_SESSION'
 export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
-export const USER_CURRENT_FACILITY_UPDATED = SN_USER + '/CURRENT_FACILITY_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED' 
 export const USER_SORTBY_UPDATED = SN_USER + '/SORTBY_UPDATED'
 export const USER_PWA_STATE_UPDATED = SN_USER + '/PWA_STATE_UPDATED'

src/store/modules/user/mutations.ts

@@ -9,14 +9,10 @@ const mutations: MutationTree <UserState> = {
     [types.USER_END_SESSION] (state) {
       state.token = ''
       state.current = null
-      state.currentFacility = {}
     },
     [types.USER_INFO_UPDATED] (state, payload) {
         state.current = payload
     },
-    [types.USER_CURRENT_FACILITY_UPDATED] (state, payload) {
-        state.currentFacility = payload;
-    },
     [types.USER_INSTANCE_URL_UPDATED] (state, payload) {
         state.instanceUrl = payload;
     },

src/views/Settings.vue

@@ -34,22 +34,7 @@
       </div>
       <section>
         <DxpOmsInstanceNavigator />
-
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>
-              {{ $t("Facility") }}
-            </ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            {{ $t('Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.') }}
-          </ion-card-content>
-          <ion-item lines="none">
-            <ion-select :label="$t('Select facility')" interface="popover" :value="currentFacility.facilityId" @ionChange="setFacility($event)">
-              <ion-select-option v-for="facility in (userProfile ? userProfile.facilities : [])" :key="facility.facilityId" :value="facility.facilityId" >{{ facility.name }}</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-card>
+        <DxpFacilitySwitcher @updateFacility="handleFacilityUpdate($event)"/>
       </section>
       <hr />
 
@@ -132,7 +117,6 @@ export default defineComponent({
   computed: {
     ...mapGetters({
       userProfile: 'user/getUserProfile',
-      currentFacility: 'user/getCurrentFacility',
       uploadProducts: 'product/getUploadProducts',
       picklistItemSortBy: 'user/getPicklistItemSortBy'
     })
@@ -156,14 +140,8 @@ export default defineComponent({
         }
       })
     },
-    setFacility (facility: any) {
-      if (this.userProfile){
-        this.userProfile.facilities.map((fac: any) => {
-          if (fac.facilityId == facility['detail'].value) {
-            this.store.dispatch('user/setFacility', {'facility': fac});
-          }
-        })
-      }
+    async handleFacilityUpdate(selectedFacility: any) {
+      await this.store.dispatch('user/setFacilityUpdates', selectedFacility?.facilityId);
     },
     goToLaunchpad() {
       window.location.href = `${process.env.VUE_APP_LOGIN_URL}`