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,