Merge pull request #861 from R-Sourabh/#673-disable-filter-options

Improved: Show TO filters if the facet has orders; disable if none.(#673)
hotwax · Jan 3, 2025 · 98c264f · 98c264f
2 parents f191f3b + 684d2dd
commit 98c264f
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 70 deletions.
diff --git a/src/components/TransferOrderFilters.vue b/src/components/TransferOrderFilters.vue
@@ -49,10 +49,6 @@ import {
 import { defineComponent, computed } from "vue";
 import { albumsOutline, banOutline, barChartOutline, calendarNumberOutline, checkmarkDoneOutline, closeOutline, filterOutline, iceCreamOutline, libraryOutline, pulseOutline, settings, shirtOutline, ticketOutline } from "ionicons/icons";
 import { mapGetters, useStore } from 'vuex'
-import { escapeSolrSpecialChars, prepareOrderQuery } from '@/utils/solrHelper';
-import { UtilService } from '@/services/UtilService';
-import { hasError } from '@/adapter';
-import logger from '@/logger';
 import { translate, useUserStore } from '@hotwax/dxp-components';
 
 export default defineComponent({
@@ -68,23 +64,14 @@ export default defineComponent({
     IonTitle,
     IonToolbar
   },
-  props: ["queryString"],
-  data () {
-    return {
-      shipmentMethods: [] as Array<any>,
-      statuses: [] as Array<any>
-    }
-  },
+  props: ["queryString", "shipmentMethods", "statuses"],
   computed: {
     ...mapGetters({
       transferOrders: 'transferorder/getTransferOrders',
       getStatusDesc: 'util/getStatusDesc',
       getShipmentMethodDesc: 'util/getShipmentMethodDesc',
     })
   },
-  async mounted() {
-    await this.fetchFilters();
-  },
   unmounted() {
     this.store.dispatch('transferorder/clearTransferOrderFilters');
   },
@@ -115,58 +102,6 @@ export default defineComponent({
       transferOrdersQuery.viewIndex = 0;
       await this.store.dispatch('transferorder/updateTransferOrderQuery', { ...transferOrdersQuery })
     },
-    async fetchFilters() {
-      let resp: any;
-      const payload = prepareOrderQuery({
-        docType: "ORDER",
-        queryFields: 'orderId',
-        viewSize: '0',  // passed viewSize as 0 to not fetch any data
-        filters: {
-          '-orderStatusId': { value: 'ORDER_CREATED' },
-          orderTypeId: { value: 'TRANSFER_ORDER' },
-          facilityId: { value: escapeSolrSpecialChars(this.currentFacility?.facilityId) },
-          productStoreId: { value: this.currentEComStore.productStoreId }
-        },
-        facet: {
-          "shipmentMethodTypeIdFacet":{
-            "excludeTags":"shipmentMethodTypeIdFilter",
-            "field":"shipmentMethodTypeId",
-            "mincount":1,
-            "limit":-1,
-            "sort":"index",
-            "type":"terms",
-            "facet": {
-              "ordersCount": "unique(orderId)"
-            }
-          },
-          "orderStatusIdFacet":{
-            "excludeTags":"orderStatusIdFilter",
-            "field":"orderStatusId",
-            "mincount":1,
-            "limit":-1,
-            "sort":"index",
-            "type":"terms",
-            "facet": {
-              "ordersCount": "unique(orderId)"
-            }
-          }
-        }
-      })
-
-      try {
-        resp = await UtilService.fetchTransferOrderFacets(payload);
-        if (resp.status == 200 && !hasError(resp) && resp.data.facets?.count > 0) {
-          this.shipmentMethods = resp.data.facets.shipmentMethodTypeIdFacet.buckets
-          this.statuses = resp.data.facets.orderStatusIdFacet.buckets
-          this.store.dispatch('util/fetchShipmentMethodTypeDesc', this.shipmentMethods.map((shipmentMethod: any) => shipmentMethod.val))
-          this.store.dispatch('util/fetchStatusDesc', this.statuses.map((status: any) => status.val))
-        } else {
-          throw resp.data;
-        }
-      } catch(err) {
-        logger.error('Failed to fetch transfer order filters.', err)
-      }
-    },
   },
   setup() {
     const store = useStore();

diff --git a/src/views/TransferOrders.vue b/src/views/TransferOrders.vue
@@ -1,14 +1,14 @@
 <template>
   <ion-page>
-    <TransferOrderFilters menu-id="transfer-order-filters" content-id="transfer-order-filters" :queryString="transferOrders.query.queryString" />
+    <TransferOrderFilters menu-id="transfer-order-filters" content-id="transfer-order-filters" :queryString="transferOrders.query.queryString" :shipmentMethods="shipmentMethods" :statuses="statuses"/>
 
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button menu="start" slot="start" />
         <ion-title v-if="!transferOrders.total">{{ transferOrders.total }} {{ translate('orders') }}</ion-title>
         <ion-title v-else>{{ transferOrders.list.length }} {{ translate('of') }} {{ transferOrders.total }} {{ translate('orders') }}</ion-title>
         <ion-buttons slot="end">
-          <ion-menu-button menu="transfer-order-filters" :disabled="!transferOrders.total">
+          <ion-menu-button menu="transfer-order-filters" :disabled="!transferOrderCount">
             <ion-icon :icon="optionsOutline" />
           </ion-menu-button>
         </ion-buttons>
@@ -78,6 +78,10 @@ import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { translate, useUserStore } from '@hotwax/dxp-components';
 import { Actions } from '@/authorization'
+import { escapeSolrSpecialChars, prepareOrderQuery } from '@/utils/solrHelper';
+import { UtilService } from '@/services/UtilService';
+import { hasError } from '@/adapter';
+import logger from '@/logger';
 import TransferOrderFilters from '@/components/TransferOrderFilters.vue'
 
 export default defineComponent({
@@ -110,14 +114,19 @@ export default defineComponent({
   data () {
     return {
       shipmentMethods: [] as Array<any>,
+      statuses: [] as Array<any>,
       searchedQuery: '',
       isScrollingEnabled: false,
-      hasCompletedTransferOrders: true
+      hasCompletedTransferOrders: true,
+      transferOrderCount: 0
     }
   },
   async ionViewWillEnter() {
     this.isScrollingEnabled = false;
-    await this.initialiseTransferOrderQuery();
+    await this.fetchFilters(); 
+    if(this.transferOrderCount) { 
+      await this.initialiseTransferOrderQuery();
+    }
   },
   methods: {
     getErrorMessage() {
@@ -168,6 +177,61 @@ export default defineComponent({
       await this.store.dispatch('transferorder/updateTransferOrderQuery', { ...transferOrdersQuery })
       this.searchedQuery = queryString;
     },
+    async fetchFilters() {
+      let resp: any;
+      const payload = prepareOrderQuery({
+        docType: "ORDER",
+        queryFields: 'orderId',
+        viewSize: '0',  // passed viewSize as 0 to not fetch any data
+        filters: {
+          '-orderStatusId': { value: 'ORDER_CREATED' },
+          orderTypeId: { value: 'TRANSFER_ORDER' },
+          facilityId: { value: escapeSolrSpecialChars(this.currentFacility?.facilityId) },
+          productStoreId: { value: this.currentEComStore.productStoreId }
+        },
+        facet: {
+          "shipmentMethodTypeIdFacet":{
+            "excludeTags":"shipmentMethodTypeIdFilter",
+            "field":"shipmentMethodTypeId",
+            "mincount":1,
+            "limit":-1,
+            "sort":"index",
+            "type":"terms",
+            "facet": {
+              "ordersCount": "unique(orderId)"
+            }
+          },
+          "orderStatusIdFacet":{
+            "excludeTags":"orderStatusIdFilter",
+            "field":"orderStatusId",
+            "mincount":1,
+            "limit":-1,
+            "sort":"index",
+            "type":"terms",
+            "facet": {
+              "ordersCount": "unique(orderId)"
+            }
+          }
+        }
+      })
+
+      try {
+        resp = await UtilService.fetchTransferOrderFacets(payload);
+        if(resp.status == 200 && !hasError(resp)) {
+          this.transferOrderCount = resp.data.facets?.count
+          if(this.transferOrderCount) {
+            this.shipmentMethods = resp.data.facets.shipmentMethodTypeIdFacet.buckets;
+            this.statuses = resp.data.facets.orderStatusIdFacet.buckets;
+            this.store.dispatch('util/fetchShipmentMethodTypeDesc', this.shipmentMethods.map((shipmentMethod: any) => shipmentMethod.val));
+            this.store.dispatch('util/fetchStatusDesc', this.statuses.map((status: any) => status.val));
+          }
+        } else {
+          throw resp.data;
+        }
+      } catch(err) {
+        logger.error('Failed to fetch transfer order filters.', err)
+      }
+    },
     async initialiseTransferOrderQuery() {
       const transferOrdersQuery = JSON.parse(JSON.stringify(this.transferOrders.query))
       transferOrdersQuery.viewIndex = 0 // If the size changes, list index should be reintialised