Implemented: logic to fetch the facility order count history and added support to change the fulfillment capacity(#8)

src/components/ViewFacilityOrderCountModal.vue

@@ -0,0 +1,93 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal()">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Consumed Order Limit") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-grid v-if="facilityOrderCounts.length && !isLoading">
+      <ion-row class="ion-justify-content-center">
+        <ion-col>{{ translate('Entry Date') }}</ion-col>
+        <ion-col>{{ translate('Consumed Order Limit') }}</ion-col>
+      </ion-row>
+      <ion-row class="ion-justify-content-center" v-for="facilityOrderCount in facilityOrderCounts" :key="facilityOrderCount.facilityId">
+        <ion-col>{{ facilityOrderCount.entryDate }}</ion-col>
+        <ion-col>{{ facilityOrderCount.lastOrderCount }}</ion-col>
+      </ion-row>
+    </ion-grid>
+    <div v-else-if="!isLoading" class="ion-text-center ion-padding-top">
+      {{ translate('No records found') }}
+    </div>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline, saveOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+import { FacilityService } from "@/services/FacilityService";
+
+export default defineComponent({
+  name: "ViewFacilityOrderCountModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonCol,
+    IonContent,
+    IonGrid,
+    IonHeader,
+    IonIcon,
+    IonRow,
+    IonTitle,
+    IonToolbar
+  },
+  props: ["facilityId"],
+  data() {
+    return {
+      facilityOrderCounts: [] as Array<any>,
+      isLoading: true
+    }
+  },
+  async mounted() {
+    this.facilityOrderCounts = await FacilityService.fetchFacilityOrderCounts(this.facilityId)
+    this.isLoading = false;
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss()
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
+
+<style>
+  ion-col {
+    text-align: center;
+  }
+</style>

src/locales/en.json

@@ -64,6 +64,7 @@
   "Location": "Location",
   "Location details": "Location details",
   "Locations": "Locations",
+  "Logging in": "Logging in",
   "Logging out": "Logging out",
   "Login": "Login",
   "Login failed": "Login failed",
@@ -87,6 +88,8 @@
   "Opening Time": "Opening Time",
   "Operating hours": "Operating hours",
   "Order fulfillment capacity": "Order fulfillment capacity",
+  "orders allocated today": "{orderCount} orders allocated today",
+  "orders in fulfillment queue": "{orderCount} orders in fulfillment queue",
   "Parking": "Parking",
   "party id": "party id",
   "Party Id": "Party Id",
@@ -140,6 +143,7 @@
   "Timezone": "Timezone",
   "Tuesday": "Tuesday",
   "Type": "Type",
+  "Unlimited": "Unlimited",
   "Unlimited Capacity": "Unlimited Capacity",
   "Unlimited capacity removes the fulfillment capacity limit entirely. To add a fulfillment capacity to this facility, use the custom option.": "Unlimited capacity removes the fulfillment capacity limit entirely. To add a fulfillment capacity to this facility, use the custom option.",
   "Unlimited fulfillment capacity": "Unlimited fulfillment capacity",

src/services/FacilityService.ts

@@ -66,10 +66,7 @@ const fetchFacilitiesOrderCount = async(facilityIds: Array<string>): Promise<any
       data: params
     })
 
-    if (!hasError(resp) && resp.data.count) {          
-      // using index 0 as we will only get a single record
-      // this.currentFacilityDetails.orderCount = resp.data.docs[0].lastOrderCount
-
+    if (!hasError(resp) && resp.data.count > 0) {
       facilitiesOrderCount = resp.data.docs.reduce((facilitiesCount: any, facilityCount: any) => {
         facilitiesCount[facilityCount.facilityId] = facilityCount.lastOrderCount
         return facilitiesCount
@@ -84,6 +81,40 @@ const fetchFacilitiesOrderCount = async(facilityIds: Array<string>): Promise<any
   return facilitiesOrderCount;
 }
 
+const fetchFacilityOrderCounts = async(facilityId: string): Promise<any> => {
+  let facilityOrderCounts = {}, resp: any;
+  try {
+    const params = {
+      entityName: "FacilityOrderCount",
+      inputFields: {
+        facilityId: facilityId
+      },
+      viewSize: 10, // only fetching last 10 order consumed information for facility
+      fieldList: ["entryDate", "facilityId", "lastOrderCount"],
+      orderBy: "entryDate DESC"
+    }
+
+    resp = await api({
+      url: "performFind",
+      method: "post",
+      data: params
+    })
+
+    if (!hasError(resp) && resp.data.count > 0) {
+      facilityOrderCounts = resp.data.docs.map((facilityOrderCount: any) => {
+        facilityOrderCount.entryDate = DateTime.fromMillis(facilityOrderCount.entryDate).toFormat('MMM dd yyyy')
+        return facilityOrderCount
+      })
+    } else {
+      throw resp.data
+    }
+  } catch(err) {
+    logger.error("Failed to fetch order consumed history for this facility", err);
+  }
+
+  return facilityOrderCounts;
+}
+
 const updateFacility = async (payload: any): Promise<any> => {
   return api({
     url: "service/updateFacility",
@@ -94,6 +125,7 @@ const updateFacility = async (payload: any): Promise<any> => {
 
 export const FacilityService = {
   fetchFacilityOnlineGroupInformation,
+  fetchFacilityOrderCounts,
   fetchFacilitiesOrderCount,
   fetchFacilities,
   updateFacility

src/store/modules/facility/actions.ts

@@ -112,13 +112,32 @@ const actions: ActionTree<FacilityState, RootState> = {
       viewSize: 1
     }
 
-    let facility = {};
+    let facility = {} as any;
 
     try {
       const resp = await FacilityService.fetchFacilities(params)
 
       if(!hasError(resp) && resp.data.count > 0) {
         facility = resp.data.docs[0]
+
+        const [facilityOnlineGroupInformation, facilityOrderCount] = await Promise.all([FacilityService.fetchFacilityOnlineGroupInformation(facility.facilityId), FacilityService.fetchFacilitiesOrderCount(facility.facilityId)])
+
+        const fulfillmentOrderLimit = facility.maximumOrderLimit
+        if (fulfillmentOrderLimit === 0) {
+          facility.orderLimitType = 'no-capacity'
+        } else if (fulfillmentOrderLimit) {
+          facility.orderLimitType = 'custom'
+        } else {
+          facility.orderLimitType = 'unlimited'
+        }
+
+        facility.orderCount = facilityOrderCount[facility.facilityId] ? facilityOrderCount[facility.facilityId] : 0;
+
+        if(facilityOnlineGroupInformation.includes(facility.facilityId)) {
+          facility.sellOnline = true
+        } else {
+          facility.sellOnline = false
+        }
       } else {
         throw resp.data
       }

src/views/FacilityDetails.vue

@@ -210,12 +210,20 @@
               <br/><br/>
               {{ translate("Setting fulfillment capacity to 0 disables new order from being allocated to this facility. Leave this empty if this facility's fulfillment capacity is unrestricted.") }}
             </ion-card-content>
-            <ion-item lines="none">
-              <ion-text>{{ 10 }}</ion-text>
-              <ion-progress-bar class="ion-margin" :value="10/20"></ion-progress-bar>
-              <ion-chip :outline="true">{{ 20 }}</ion-chip>
+            <ion-item lines="none" v-if="current.orderLimitType === 'custom'">
+              <ion-text>{{ current.orderCount }}</ion-text>
+              <ion-progress-bar class="ion-margin" :value="current.orderCount / current.maximumOrderLimit" />
+              <ion-chip outline @click="changeOrderLimitPopover">{{ current.maximumOrderLimit }}</ion-chip>
+            </ion-item>      
+            <ion-item lines="none" v-else-if="current.orderLimitType === 'unlimited'">
+              <ion-label>{{ translate("orders allocated today", { orderCount: current.orderCount }) }}</ion-label>
+              <ion-chip outline @click="changeOrderLimitPopover">{{ translate("Unlimited") }}</ion-chip>
+            </ion-item>      
+            <ion-item lines="none" v-else>
+              <ion-label>{{ translate("orders in fulfillment queue", { orderCount: current.orderCount }) }}</ion-label>
+              <ion-chip outline @click="changeOrderLimitPopover" color="danger" fill="outline">{{ current.maximumOrderLimit }}</ion-chip>
             </ion-item>
-            <ion-item lines="none" class="ion-margin-horizontal" detail button>
+            <ion-item lines="none" detail button @click="openFacilityOrderCountModal">
               <ion-label>{{ translate("View order count history") }}</ion-label>
             </ion-item>
           </ion-card>
@@ -418,6 +426,12 @@ import SelectOperatingTimeModal from '@/components/SelectOperatingTimeModal.vue'
 import AddLocationModal from '@/components/AddLocationModal.vue';
 import AddStaffMemberModal from '@/components/AddStaffMemberModal.vue';
 import { mapGetters, useStore } from 'vuex';
+import OrderLimitPopover from '@/components/OrderLimitPopover.vue'
+import { FacilityService } from '@/services/FacilityService';
+import { hasError } from '@/adapter';
+import { showToast } from '@/utils';
+import logger from '@/logger';
+import ViewFacilityOrderCountModal from '@/components/ViewFacilityOrderCountModal.vue'
 
 export default defineComponent({
   name: 'FacilityDetails',
@@ -530,6 +544,49 @@ export default defineComponent({
         showBackdrop: false
       });
       return externalMappingPopover.present()
+    },
+    async changeOrderLimitPopover(ev: Event) {
+      const popover = await popoverController.create({
+        component: OrderLimitPopover,
+        event: ev,
+        showBackdrop: false,
+        componentProps: { fulfillmentOrderLimit: this.current.maximumOrderLimit }
+      });
+      popover.present();
+
+      const result = await popover.onDidDismiss();
+      // Note: here result.data returns 0 in some cases that's why it is compared with 'undefined'.
+      if(result.data != undefined && result.data !== this.current.maximumOrderLimit) {
+        await this.updateFacility(result.data, this.current)
+      }
+    },
+    async updateFacility(maximumOrderLimit: number | string, facility: any) {
+      let resp;
+
+      try {
+        resp = await FacilityService.updateFacility({
+          "facilityId": facility.facilityId,
+          maximumOrderLimit
+        })
+
+        if(!hasError(resp)) {
+          facility.maximumOrderLimit = maximumOrderLimit === "" ? null : maximumOrderLimit
+          showToast(translate('Fulfillment capacity updated successfully for ', { facilityName: facility.facilityName }))
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        showToast(translate('Failed to update fulfillment capacity for ', { facilityName: facility.facilityName }))
+        logger.error('Failed to update facility', err)
+      }
+    },
+    async openFacilityOrderCountModal() {
+      const facilityOrderCountModal = await modalController.create({
+        component: ViewFacilityOrderCountModal,
+        componentProps: { facilityId: this.facilityId }
+      })
+
+      facilityOrderCountModal.present()
     }
   },
   setup() {