Improved: facility group UI to redirect the user to find facilities page with the group filter applied when clicking on facilities item (#141).

src/locales/en.json

@@ -161,6 +161,7 @@
   "Generate shipping labels": "Generate shipping labels",
   "Go to Launchpad": "Go to Launchpad",
   "Go to OMS": "Go to OMS",
+  "Group": "Group",
   "Group associated to system group types.": "Group associated to system group types.",
   "Group unlinked from facility": "Group unlinked from facility",
   "Groups": "Groups",

src/store/modules/facility/FacilityState.ts

@@ -2,7 +2,8 @@ export default interface FacilityState {
   facilityQuery: {
     queryString: string,
     productStoreId: string,
-    facilityTypeId: string
+    facilityTypeId: string,
+    facilityGroupId: string
   },
   groupQuery: {
     queryString: string

src/store/modules/facility/actions.ts

@@ -79,16 +79,31 @@ const actions: ActionTree<FacilityState, RootState> = {
       filters['facilityName_value'] = state.facilityQuery.queryString
       filters['facilityName_op'] = 'contains'
       filters['facilityName_ic'] = 'Y'
-      filters['facilityName_grp'] = '2'
+      filters['facilityName_grp'] = '1'
+      filters['grp_op_1'] = 'OR'
+    }
+
+    if (state.facilityQuery.facilityGroupId) {
+      filters['facilityGroupId'] = state.facilityQuery.facilityGroupId
+      filters['facilityGroupId_op'] = 'equals'
+      filters['facilityGroupId_grp'] = '2'
+      filters['primaryFacilityGroupId'] = state.facilityQuery.facilityGroupId
+      filters['primaryFacilityGroupId_op'] = 'equals'
+      filters['primaryFacilityGroupId_grp'] = '2'
+      filters['grp_op_2'] = 'OR'
     }
 
     const params = {
       "inputFields": {
+        "grp_op": "AND",
         ...filters
       },
-      "entityName": "FacilityAndProductStore",
+      "entityName": "FacilityView",
       "noConditionFind": "Y",
       "distinct": "Y",
+      "fromDateName": "facilityGroupFromDate",
+      "thruDateName": "facilityGroupThruDate",
+      "filterByDate": "Y",
       "fieldList": ['facilityId', 'facilityName', 'facilityTypeId', 'maximumOrderLimit', 'defaultDaysToShip', 'externalId', 'primaryFacilityGroupId', 'parentFacilityTypeId'],
       ...payload
     }

src/store/modules/facility/index.ts

@@ -11,7 +11,8 @@ const facilityModule: Module<FacilityState, RootState> = {
     facilityQuery: {
       queryString: '',
       productStoreId: '',
-      facilityTypeId: ''
+      facilityTypeId: '',
+      facilityGroupId: ''
     },
     groupQuery: {
       queryString: ''

src/views/FindFacilities.vue

@@ -40,6 +40,16 @@
                 </ion-select-option>
               </ion-select>
             </ion-item>
+            <ion-item lines="none">
+              <ion-icon :icon="albumsOutline" slot="start" />
+              <ion-label>{{ translate("Group") }}</ion-label>
+              <ion-select interface="popover" v-model="query.facilityGroupId" @ionChange="updateQuery()">
+                <ion-select-option value="">{{ translate("All") }}</ion-select-option>
+                <ion-select-option :value="group.facilityGroupId" :key="group.facilityGroupId" v-for="group in facilityGroups">
+                  {{ group.facilityGroupName }}
+                </ion-select-option>
+              </ion-select>
+            </ion-item>
           </ion-list>
         </aside>
 
@@ -143,6 +153,7 @@ import {
 import { defineComponent } from 'vue';
 import {
   addOutline,
+  albumsOutline,
   businessOutline,
   filterOutline,
   globeOutline,
@@ -189,6 +200,11 @@ export default defineComponent({
     IonTitle,
     IonToolbar
   },
+  data() {
+    return {
+      facilityGroups: [] as any
+    }
+  },
   computed: {
     ...mapGetters({
       facilities: "facility/getFacilities",
@@ -201,6 +217,7 @@ export default defineComponent({
   async mounted() {
     // We only need to fetch those types whose parent is not virtual facility
     await Promise.all([this.store.dispatch('util/fetchFacilityTypes', { parentTypeId: 'VIRTUAL_FACILITY', parentTypeId_op: 'notEqual', facilityTypeId: 'VIRTUAL_FACILITY', facilityTypeId_op: 'notEqual' }), this.store.dispatch('util/fetchProductStores')])
+    await this.fetchFacilityGroups();
   },
   async ionViewWillEnter() {
     // fetching facilities information in the ionViewWillEnter hook as when updating facilityGroup or fulfillment limit
@@ -316,13 +333,35 @@ export default defineComponent({
         logger.error('Failed to update fulfillment setting', error)
       }
     },
+    async fetchFacilityGroups() {
+      const params = {
+        entityName: "FacilityGroup",
+        noConditionFind: 'Y',
+        orderBy: "facilityGroupTypeId ASC",
+        fieldList: ["facilityGroupId", "facilityGroupTypeId", "facilityGroupName", "description"],
+        viewSize: 50
+      }
+
+      try {
+        const resp = await FacilityService.fetchFacilityGroups(params);
+
+        if (!hasError(resp) && resp.data?.docs?.length > 0) {
+          this.facilityGroups = resp.data.docs;
+        } else {
+          throw resp.data
+        }
+      } catch (err) {
+        logger.error('Failed to find facility groups', err)
+      }
+    }
   },
   setup() {
     const router = useRouter();
     const store = useStore();
 
     return {
       addOutline,
+      albumsOutline,
       businessOutline,
       filterOutline,
       globeOutline,

src/views/FindGroups.vue

@@ -41,7 +41,7 @@
                 <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only"/>
               </ion-button>
             </ion-item>
-            <ion-item>
+            <ion-item @click="viewFacilities(group.facilityGroupId)" button>
               <ion-label>{{ translate('Facilities') }}</ion-label>
               <ion-note slot="end">{{ group.facilityCount }}</ion-note>
             </ion-item>
@@ -143,6 +143,7 @@ export default defineComponent({
       facilityGroupTypes: "util/getFacilityGroupTypes",
       isScrollable: "facility/isFacilityGroupsScrollable",
       query: "facility/getGroupQuery",
+      facilityQuery: "facility/getFacilityQuery",
     })
   },
   async mounted() {
@@ -154,6 +155,10 @@ export default defineComponent({
       await this.store.dispatch('facility/updateGroupQuery', this.query)
       this.fetchGroups();
     },
+    async viewFacilities(facilityGroupId: string) {
+      await this.store.dispatch('facility/updateFacilityQuery', {...this.facilityQuery, facilityGroupId })
+      this.$router.push({ path: `/find-facilities`})
+    },
     async fetchGroups(vSize?: any, vIndex?: any) {
       const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
       const viewIndex = vIndex ? vIndex : 0;