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

package.json

@@ -18,8 +18,8 @@
     "@casl/ability": "^6.0.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": "^1.16.0",
+    "@hotwax/oms-api": "^1.16.0",
     "@ionic/core": "~7.6.0",
     "@ionic/vue": "~7.6.0",
     "@ionic/vue-router": "~7.6.0",

src/adapter/index.ts

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

src/authorization/Actions.ts

@@ -1,3 +1,4 @@
 export default {
-  "PICKING_APP_VIEW": "PICKING_APP_VIEW"
+  "PICKING_APP_VIEW": "PICKING_APP_VIEW",
+  "APP_COMMERCE_VIEW": "APP_COMMERCE_VIEW"
 } as any

src/authorization/Rules.ts

@@ -1,3 +1,4 @@
 export default {
-  "PICKING_APP_VIEW": "PICKING_APP_VIEW"
+  "PICKING_APP_VIEW": "PICKING_APP_VIEW",
+  "APP_COMMERCE_VIEW": "COMMERCEUSER_VIEW"
 } as any

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,10 +53,12 @@
   "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",
   "Select time zone": "Select time zone",
+  "Select Facility": "Select Facility",
   "Select facility": "Select facility",
   "Settings": "Settings",
   "Size": "Size",

src/main.ts

@@ -29,8 +29,8 @@ 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 permissionPlugin from '@/authorization';
+import { getConfig, getProductIdentificationPref, getUserFacilities, getUserPreference, initialise, setProductIdentificationPref, fetchGoodIdentificationTypes, setUserPreference } from '@/adapter'
+import permissionPlugin, { Actions, hasPermission } from '@/authorization';
 import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
 import localeMessages from './locales';
@@ -48,16 +48,22 @@ const app = createApp(App)
     actions: permissionActions
   })
   .use(dxpComponents, {
+    Actions,
     defaultImgUrl: require("@/assets/images/defaultImage.png"),
     login,
     logout,
     loader,
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
     getConfig,
     getProductIdentificationPref,
+    fetchGoodIdentificationTypes,
     initialise,
     setProductIdentificationPref,
-    localeMessages
+    localeMessages,
+    getUserFacilities,
+    setUserPreference,
+    getUserPreference,
+    hasPermission
   });
 
 // 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,17 +6,20 @@
 import { showToast } from '@/utils'
 import { hasError } from '@/adapter'
 import { translate } from '@/i18n'
+import { useUserStore } from '@hotwax/dxp-components'
 
 const actions: ActionTree<PicklistState, RootState> = {
   /**
    * Find picklist
    */
   async findPickList({ commit, state, dispatch }, payload) {
     let resp;
+    const currentFacility: any = useUserStore().getCurrentFacility;
+
     const params = {
       "inputFields": {
         "statusId": "PICKLIST_PRINTED",
-        "facilityId": this.state.user.currentFacility.facilityId,
+        "facilityId": currentFacility?.facilityId,
       },
       "orderBy": "picklistDate DESC",
       "viewSize": payload.viewSize,
@@ -53,11 +56,13 @@
    */
   async findCompletedPickLists({ commit, dispatch, state }) {
     let resp;
+    const currentFacility: any = useUserStore().getCurrentFacility;
+
     const params = {
       "inputFields": {
         "statusId": ["PICKLIST_COMPLETED", "PICKLIST_PICKED"],
         "statusId_op": "in",
-        "facilityId": this.state.user.currentFacility.facilityId,
+        "facilityId": currentFacility?.facilityId
       },
       "orderBy": "picklistDate DESC",
       "viewSize": 10,
@@ -153,7 +158,7 @@
   /**
    * Complete Picklist
    */
   async completePicklist ({ commit }, payload) {
     let resp;
 
     try {

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 { getServerPermissionsFromRules, prepareAppPermissions, resetPermissions, setPermissions } from '@/authorization'
 import emitter from '@/event-bus'
 import router from '@/router';
@@ -128,10 +128,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);
@@ -156,12 +156,9 @@ const actions: ActionTree<UserState, RootState> = {
       }
     },
 
-  // update current facility information
-  async setFacility ({ commit, state }, payload) {
-    commit(types.USER_CURRENT_FACILITY_UPDATED, payload.facility);
-
+    async setFacility ({ 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="updateFacility(facility)"/>
       </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 updateFacility(facility: any) {
+      await this.store.dispatch('user/setFacility', facility?.facilityId);
     },
     goToLaunchpad() {
       window.location.href = `${process.env.VUE_APP_LOGIN_URL}`