Skip to content

Commit

Permalink
Improved: empty state message for inventory filter and sort options a…
Browse files Browse the repository at this point in the history 
…nd also made improvement in the order filter and sort option empty state(#165)
  • Loading branch information
@ymaheshwari1
ymaheshwari1 committed Aug 14, 2024
1 parent 6ba6972 commit a3a0f92
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 10 deletions.
9 changes: 7 additions & 2 deletions src/locales/en.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
39 changes: 31 additions & 8 deletions src/views/BrokeringQuery.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -1405,5 +1427,6 @@ ion-chip > ion-select {
.empty-state {
text-align: center;
margin: 0;
}
</style>

0 comments on commit a3a0f92

Please sign in to comment.