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

src/components/DxpFacilitySwitcher.vue

@@ -0,0 +1,61 @@
+<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(['check-facility', 'update-facility'])
+const appState = appContext.config.globalProperties.$store;
+
+const userAppState = computed(() => {
+  return {
+    currentFacility: appState.getters['user/getCurrentFacility'],
+    userProfile: appState.getters['user/getUserProfile'],
+    uploadProducts: appState.getters['product/getUploadProducts']
+  }
+});
+
+const setFacility = async (event: any) => {
+  const currentUserAppState = JSON.parse(JSON.stringify(userAppState.value))
+  const selectedFacility = event['detail'].value
+
+  if(currentUserAppState.currentFacility.facilityId && currentUserAppState.currentFacility.facilityId != selectedFacility && currentUserAppState.userProfile?.facilities) {
+    // check-facility is emitted before setFacility action.
+    emit('check-facility', selectedFacility)
+
+    await appState.dispatch('user/setFacility', {
+      'facility': currentUserAppState.userProfile.facilities.find((facility: any) => facility.facilityId == selectedFacility)
+    });
+
+    // update-facility is emitted after setFacility action.
+    emit('update-facility', selectedFacility)
+  }
+}
+</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

@@ -15,6 +15,7 @@ import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
 export { default as AppVersionInfo } from './AppVersionInfo.vue';
+export { default as DxpFacilitySwitcher } from './DxpFacilitySwitcher.vue';
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'
 export { default as ProductIdentifier } from "./ProductIdentifier.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, LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
+import { AppVersionInfo, DxpFacilitySwitcher, LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
 import Login from "./components/Login";
 import { goToOms, getProductIdentificationValue } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -42,6 +42,7 @@ export let dxpComponents = {
     app.use(i18n);
 
     app.component('AppVersionInfo', AppVersionInfo)
+    app.component('DxpFacilitySwitcher', DxpFacilitySwitcher)
     app.component('LanguageSwitcher', LanguageSwitcher)
     app.component('Login', Login)
     app.component('OmsInstanceNavigator', OmsInstanceNavigator)
@@ -75,6 +76,7 @@ export let dxpComponents = {
 
 export {
   appContext,
+  DxpFacilitySwitcher,
   getProductIdentificationValue,
   goToOms,
   i18n,