Implemented: centralized facility switcher to be used in all app (#138)

src/components/DxpFacilitySwitcher.vue

@@ -0,0 +1,58 @@
+<template>
+ <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-label>{{ $t('Select facility') }}</ion-label>
+ <ion-select interface="popover" :value="userAppState.currentFacility.facilityId" @ionChange="setFacility($event)">
+ <ion-select-option v-for="facility in (userAppState.userProfile ? userAppState.userProfile.facilities : [])" :key="facility.facilityId" :value="facility.facilityId" >{{ facility.facilityName ? facility.facilityName : facility.name }}</ion-select-option>
+ </ion-select>
+ </ion-item>
+ </ion-card>
+</template>
+
+<script setup lang="ts">
+import { 
+ IonCard,
+ IonCardContent,
+ IonCardHeader,
+ IonCardTitle,
+ IonItem,
+ IonLabel,
+ IonSelect,
+ IonSelectOption
+} from '@ionic/vue';
+import { appContext } from '../index';
+import { computed } from 'vue';
+
+const emit = defineEmits(['before-set-facility', 'after-set-facility']);
+const appState = appContext.config.globalProperties.$store;
+
+const userAppState = computed(() => ({
+ currentFacility: appState.getters['user/getCurrentFacility'],
+ userProfile: appState.getters['user/getUserProfile']
+}));
+
+const setFacility = async (event: CustomEvent) => {
+ const currentUserAppState = JSON.parse(JSON.stringify(userAppState.value))
+ const facilityId = event.detail.value
+
+ if(currentUserAppState.currentFacility.facilityId !== facilityId && currentUserAppState.userProfile?.facilities) {
+ // before-set-facility is emitted before setFacility action.
+ emit('before-set-facility', facilityId)
+
+ await appState.dispatch('user/setFacility', {
+ 'facility': currentUserAppState.userProfile.facilities.find((facility: any) => facility.facilityId === facilityId)
+ });
+
+ // after-set-facility is emitted after setFacility action.
+ emit('after-set-facility', facilityId)
+ }
+}
+</script>

src/components/LanguageSwitcher.vue

@@ -18,7 +18,16 @@
 </template>
 
 <script setup lang="ts">
-import { IonCard, IonCardContent, IonCardHeader, IonItem, IonLabel, IonSelect, IonSelectOption, IonCardTitle } from '@ionic/vue';
+import {
+ IonCard,
+ IonCardContent,
+ IonCardHeader,
+ IonItem,
+ IonLabel,
+ IonSelect,
+ IonSelectOption,
+ IonCardTitle
+} from '@ionic/vue';
 import { computed } from "vue";
 import { useUserStore } from '../store/user'
 

src/components/index.ts

@@ -17,6 +17,7 @@ import '@ionic/vue/css/display.css';
 export { default as DxpImage } from './DxpImage.vue';
 export { default as DxpUserProfile } from './DxpUserProfile.vue'
 export { default as AppVersionInfo } from './AppVersionInfo.vue';
+export { default as DxpFacilitySwitcher } from './DxpFacilitySwitcher.vue';
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
 export { default as MenuFooterNavigation } from './MenuFooterNavigation.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'

src/index.ts

@@ -3,7 +3,7 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { AppVersionInfo, DxpImage, DxpUserProfile, LanguageSwitcher, MenuFooterNavigation, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
+import { AppVersionInfo, DxpFacilitySwitcher, DxpImage, DxpUserProfile, LanguageSwitcher, MenuFooterNavigation, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
 import Login from "./components/Login";
 import { goToOms, getProductIdentificationValue } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -44,6 +44,7 @@ export let dxpComponents = {
  app.use(i18n);
 
  app.component('AppVersionInfo', AppVersionInfo)
+ app.component('DxpFacilitySwitcher', DxpFacilitySwitcher)
  app.component('DxpImage', DxpImage)
  app.component('DxpUserProfile', DxpUserProfile)
  app.component('LanguageSwitcher', LanguageSwitcher)
@@ -85,6 +86,7 @@ export let dxpComponents = {
 
 export {
  appContext,
+ DxpFacilitySwitcher,
  DxpImage,
  DxpUserProfile,
  getProductIdentificationValue,