From a3a0f92507fb485127b37ca71255db11e621a73b Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Wed, 14 Aug 2024 15:39:51 +0530
Subject: [PATCH] Improved: empty state message for inventory filter and sort
 options and also made improvement in the order filter and sort option empty
 state(#165)

---
 src/locales/en.json          |  9 +++++++--
 src/views/BrokeringQuery.vue | 39 ++++++++++++++++++++++++++++--------
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index ae180ed..abb0ac3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,12 +1,17 @@
 {
+  " about enabling a facility for online fulfillment.": " about enabling a facility for online fulfillment.",
   "A store repesents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores sellling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.": "A store repesents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores sellling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.",
   "Actions": "Actions",
   "Active": "Active",
   "Activate": "Activate",
   "Add": "Add",
+  "Add filters": "Add filters",
+  "Add inventory lookup filters.": "Add inventory lookup filters.",
   "Add inventory rule": "Add inventory rule",
   "Add order filters.": "Add order filters.",
+  "Add sorting": "Add sorting",
   "Add sorting rules.": "Add sorting rules.",
+  "All facilities enabled for online fulfillment will be attempted for brokering if no filter is applied.": "All facilities enabled for online fulfillment will be attempted for brokering if no filter is applied.",
   "All orders in all parkings will be attempted if no filter is applied.": "All orders in all parkings will be attempted if no filter is applied.",
   "Allow partial allocation": "Allow partial allocation",
   "Already passed": "Already passed",
@@ -47,6 +52,7 @@
   "Error getting user profile": "Error getting user profile",
   "Execution history": "Execution history",
   "Expression": "Expression",
+  "Facilities will be sorted based on creation date if no sorting preferences are applied.": "Facilities will be sorted based on creation date if no sorting preferences are applied.",
   "Failed to clone brokering run": "Failed to clone brokering run",
   "Failed to clone rule": "Failed to clone rule",
   "Failed to clone the rule": "Failed to clone the rule",
@@ -78,6 +84,7 @@
   "Job updated": "Job updated",
   "kms": "kms",
   "Last run": "Last run",
+  "Learn more": "Learn more",
   "Logging in...": "Logging in...",
   "Logging out": "Logging out",
   "Login": "Login",
@@ -151,9 +158,7 @@
   "Scheduler": "Scheduler",
   "Search time zones": "Search time zones",
   "Select": "Select",
-  "Select filter to apply": "Select filter to apply",
   "Select if partial allocation should be allowed in this inventory rule": "Select if partial allocation should be allowed in this inventory rule",
-  "Select sorting to apply": "Select sorting to apply",
   "Select store": "Select store",
   "Select time zone": "Select time zone",
   "Service has been scheduled": "Service has been scheduled",
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index d7448c4..050a8e3 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -47,13 +47,17 @@
           <ion-item-group>
             <ion-item-divider color="light">
               <ion-label>{{ translate("Filters") }}</ion-label>
-              <ion-button slot="end" fill="clear" @click="addOrderRouteFilterOptions('ORD_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
+              <ion-button v-if="orderRoutingFilterOptions && Object.keys(orderRoutingFilterOptions).length" slot="end" fill="clear" @click="addOrderRouteFilterOptions('ORD_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
                 <ion-icon slot="icon-only" :icon="optionsOutline"/>
               </ion-button>
             </ion-item-divider>
             <p class="empty-state" v-if="!orderRoutingFilterOptions || !Object.keys(orderRoutingFilterOptions).length">
-              {{ translate("Add order filters.") }} <br />
+              {{ translate("Add order filters.") }} <br /><br />
               {{ translate("All orders in all parkings will be attempted if no filter is applied.") }}
+              <ion-button fill="clear" @click="addOrderRouteFilterOptions('ORD_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
+                {{ translate("Add filters") }}
+                <ion-icon slot="end" :icon="optionsOutline"/>
+              </ion-button>
             </p>
             <!-- Using hardcoded options for filters, as in filters we have multiple ways of value selection for filters like select, chip -->
             <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE')">
@@ -93,14 +97,18 @@
           <ion-item-group>
             <ion-item-divider color="light">
               <ion-label>{{ translate("Sort") }}</ion-label>
-              <ion-button slot="end" fill="clear" @click="addOrderRouteFilterOptions('ORD_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
+              <ion-button v-if="orderRoutingSortOptions && Object.keys(orderRoutingSortOptions).length" slot="end" fill="clear" @click="addOrderRouteFilterOptions('ORD_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
                 <ion-icon slot="icon-only" :icon="optionsOutline"/>
               </ion-button>
             </ion-item-divider>
             <!-- Added check for undefined as well as empty object, as on initial load there might be a case in which route sorting options are not available thus it will be undefined but when updating the values from the modal this will always return an object -->
             <p class="empty-state" v-if="!orderRoutingSortOptions || !Object.keys(orderRoutingSortOptions).length">
-              {{ translate("Add sorting rules.") }} <br />
+              {{ translate("Add sorting rules.") }} <br /><br />
               {{ translate("Orders will be brokered based on order date if no sorting is specified.") }}
+              <ion-button fill="clear" @click="addOrderRouteFilterOptions('ORD_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
+                {{ translate("Add sorting") }}
+                <ion-icon slot="end" :icon="optionsOutline"/>
+              </ion-button>
             </p>
             <ion-reorder-group @ionItemReorder="doRouteSortReorder($event)" :disabled="false">
               <ion-item v-for="(sort, code) in orderRoutingSortOptions" :key="code">
@@ -171,11 +179,19 @@
                 <ion-item>
                   <ion-icon slot="start" :icon="filterOutline"/>
                   <h4>{{ translate("Filters") }}</h4>
-                  <ion-button slot="end" fill="clear" @click="addInventoryFilterOptions('INV_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
+                  <ion-button v-if="inventoryRuleFilterOptions && Object.keys(inventoryRuleFilterOptions).length" slot="end" fill="clear" @click="addInventoryFilterOptions('INV_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
                     <ion-icon slot="icon-only" :icon="optionsOutline"/>
                   </ion-button>
                 </ion-item>
-                <p class="empty-state" v-if="!inventoryRuleFilterOptions || !Object.keys(inventoryRuleFilterOptions).length">{{ translate("Select filter to apply") }}</p>
+                <p class="empty-state" v-if="!inventoryRuleFilterOptions || !Object.keys(inventoryRuleFilterOptions).length">
+                  {{ translate("Add inventory lookup filters.") }}<br /><br />
+                  {{ translate("All facilities enabled for online fulfillment will be attempted for brokering if no filter is applied.") }}<br /><br />
+                  <a target="_blank" rel="noopener noreferrer" href="https://docs.hotwax.co/documents/v/system-admins/administration/facilities/configure-fulfillment-capacity">{{ translate("Learn more") }}</a>{{ translate(" about enabling a facility for online fulfillment.") }}
+                  <ion-button fill="clear" @click="addInventoryFilterOptions('INV_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
+                    {{ translate("Add filters") }}
+                    <ion-icon slot="end" :icon="optionsOutline"/>
+                  </ion-button>
+                </p>
                 <ion-item v-if="getFilterValue(inventoryRuleFilterOptions, conditionFilterEnums, 'FACILITY_GROUP')">
                   <ion-select :placeholder="translate('facility group')" interface="popover" :label="translate('Group')" :value="getFilterValue(inventoryRuleFilterOptions, conditionFilterEnums, 'FACILITY_GROUP').fieldValue" @ionChange="updateRuleFilterValue($event, 'FACILITY_GROUP')">
                     <ion-select-option v-for="(facilityGroup, facilityGroupId) in getFacilityGroupsForBrokering()" :key="facilityGroupId" :value="facilityGroupId">{{ facilityGroup.facilityGroupName || facilityGroupId }}</ion-select-option>
@@ -212,11 +228,17 @@
                 <ion-item>
                   <ion-icon slot="start" :icon="swapVerticalOutline"/>
                   <h4>{{ translate("Sort") }}</h4>
-                  <ion-button slot="end" fill="clear" @click="addInventoryFilterOptions('INV_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
+                  <ion-button v-if="inventoryRuleSortOptions && Object.keys(inventoryRuleSortOptions).length" slot="end" fill="clear" @click="addInventoryFilterOptions('INV_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
                     <ion-icon slot="icon-only" :icon="optionsOutline"/>
                   </ion-button>
                 </ion-item>
-                <p class="empty-state" v-if="!inventoryRuleSortOptions || !Object.keys(inventoryRuleSortOptions).length">{{ translate("Select sorting to apply") }}</p>
+                <p class="empty-state" v-if="!inventoryRuleSortOptions || !Object.keys(inventoryRuleSortOptions).length">
+                  {{ translate("Facilities will be sorted based on creation date if no sorting preferences are applied.") }}
+                  <ion-button fill="clear" @click="addInventoryFilterOptions('INV_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
+                    {{ translate("Add sorting") }}
+                    <ion-icon slot="end" :icon="optionsOutline"/>
+                  </ion-button>
+                </p>
                 <ion-reorder-group @ionItemReorder="doConditionSortReorder($event)" :disabled="false">
                   <ion-item v-for="(sort, code) in inventoryRuleSortOptions" :key="code">
                     <ion-label>{{ getLabel("INV_SORT_PARAM_TYPE", code) || code }}</ion-label>
@@ -1405,5 +1427,6 @@ ion-chip > ion-select {
 
 .empty-state {
   text-align: center;
+  margin: 0;
 }
 </style>