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

src/components/FacilitySwitcher.vue

@@ -0,0 +1,49 @@
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        {{ "Facility" }}
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      {{ '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>{{ "Select facility" }}</ion-label>
+      <ion-select interface="popover" :value="appUserState.currentFacility.facilityId" @ionChange="setFacility($event)">
+        <ion-select-option v-for="facility in (appUserState.userProfile ? appUserState.userProfile.facilities : [])" :key="facility.facilityId" :value="facility.facilityId" >{{ 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(['facility-change-alert', 'get-facility-details' ,'update-facility-id'])
+  const store = appContext.config.globalProperties.$store;
+  const appUserState = computed(() => {
+  return {
+    currentFacility: store.getters['user/getCurrentFacility'],
+    userProfile: store.getters['user/getUserProfile'],
+    uploadProducts: store.getters['product/getUploadProducts']
+    }
+  });
+
+  const setFacility = async (facility: any) => {
+    const currentAppUserState = appUserState.value
+    const selectedFacility = facility['detail'].value
+    if ( currentAppUserState.currentFacility.facilityId && currentAppUserState.currentFacility.facilityId != selectedFacility && currentAppUserState.userProfile?.facilities) {
+      if (store.uploadProducts && Object.keys(store.uploadProducts).length > 0 ) {
+        emit('facility-change-alert', selectedFacility)
+      } else {        
+        await store.dispatch('user/setFacility', {
+          'facility': currentAppUserState.userProfile.facilities.find((fac: any) => fac.facilityId == selectedFacility)
+        });
+        Promise.all([emit('update-facility-id', currentAppUserState.currentFacility.facilityId), emit('get-facility-details')])
+      }
+    }
+  }
+</script>

src/components/Login.ts

@@ -27,7 +27,7 @@ export default defineComponent({
       window.location.href = context.appLoginUrl
       return
     }
-
+    
     const { token, oms, expirationTime } = this.route.query
     this.handleUserFlow(token, oms, expirationTime)
   },

src/components/index.ts

@@ -14,3 +14,4 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
+export { default as FacilitySwitcher } from './FacilitySwitcher.vue';

src/index.ts

@@ -2,6 +2,7 @@ import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
 import Login from "./components/Login";
+import { FacilitySwitcher } from "./components";
 import ShopifyImg from "./components/ShopifyImg";
 import { goToOms } from "./utils";
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
@@ -25,6 +26,7 @@ export let dxpComponents = {
     app.use(pinia);
 
     app.component('Login', Login)
+    app.component('FacilitySwitcher', FacilitySwitcher)
     app.component('ShopifyImg', ShopifyImg)
 
     loginContext.login = options.login
@@ -39,13 +41,14 @@ export let dxpComponents = {
 }
 
 export {
-  useProductIdentificationStore,
-  useAuthStore,
+  appContext,
+  FacilitySwitcher,
+  goToOms,
   Login,
   loginContext,
+  productIdentificationContext,
   shopifyImgContext,
   ShopifyImg,
-  goToOms,
-  appContext,
-  productIdentificationContext
+  useProductIdentificationStore,
+  useAuthStore,
 }