Skip to content

Commit

Permalink
Improved: support for route filters(#24)
Browse files Browse the repository at this point in the history 
Handled case to create, update, and delete filter
Improved logic for reordering the sort options and updating the sequenceNum
Fixed cases to handle undefined values
  • Loading branch information
@ymaheshwari1
ymaheshwari1 committed Jan 23, 2024
1 parent bfa29a6 commit ef9935e
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 14 deletions.
2 changes: 1 addition & 1 deletion src/components/AddOrderRouteFilterOptions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ function addSortOption(sort: any) {
orderRoutingId: props.orderRoutingId,
conditionTypeEnumId: props.conditionTypeEnumId,
fieldName: sort.enumCode,
sequenceNum: routingFilters.value[props.conditionTypeEnumId].length && routingFilters.value[props.conditionTypeEnumId][routingFilters.value[props.conditionTypeEnumId].length - 1].sequenceNum >= 0 ? routingFilters.value[props.conditionTypeEnumId][routingFilters.value[props.conditionTypeEnumId].length - 1].sequenceNum + 5 : 0, // added check for `>= 0` as sequenceNum can be 0 which will result in again setting the new seqNum to 0
sequenceNum: Object.keys(routingFilters.value[props.conditionTypeEnumId]).length && routingFilters.value[props.conditionTypeEnumId][Object.keys(routingFilters.value[props.conditionTypeEnumId])[Object.keys(routingFilters.value[props.conditionTypeEnumId]).length - 1]]?.sequenceNum >= 0 ? routingFilters.value[props.conditionTypeEnumId][Object.keys(routingFilters.value[props.conditionTypeEnumId])[Object.keys(routingFilters.value[props.conditionTypeEnumId]).length - 1]].sequenceNum + 5 : 0, // added check for `>= 0` as sequenceNum can be 0 which will result in again setting the new seqNum to 0
} : routingFilters.value = {
...routingFilters.value,
[props.conditionTypeEnumId]: {
Expand Down
58 changes: 58 additions & 0 deletions src/components/PromiseFilterPopover.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<ion-content>
<ion-list>
<ion-list-header>
<ion-label>{{ $t("Promise date") }}</ion-label>
</ion-list-header>
<ion-item button @click="updatePromiseDate()">
<ion-label>{{ $t("Already passed") }}</ion-label>
</ion-item>
<ion-item button @click="updatePromiseDate('Upcoming duration')">
<ion-label>{{ $t("Upcoming duration") }}</ion-label>
</ion-item>
<ion-item button lines="none" @click="updatePromiseDate('Passed duration', true)">
<ion-label>{{ $t("Passed duration") }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
</template>

<script setup lang="ts">
import { IonContent, IonItem, IonLabel, IonList, IonListHeader, alertController, popoverController } from "@ionic/vue";
async function updatePromiseDate(header = '', isPastDuration = false) {
let duration = 0
if(!header) {
popoverController.dismiss({ duration })
return;
}
const durationAlert = await alertController.create({
header,
buttons: [{
text: "Cancel",
role: "cancel"
}, {
text: "Save"
}],
inputs: [{
name: "duration",
placeholder: "duration"
}]
})
durationAlert.onDidDismiss().then(async (result: any) => {
// considered that if a role is available on dismiss, it will be a negative role in which we don't need to perform any action
if(result.role) {
return;
}
// TODO: add checks for duration value
const duration = result.data?.values?.duration;
popoverController.dismiss({ duration, isPastDuration })
})
return durationAlert.present();
}
</script>
69 changes: 56 additions & 13 deletions src/views/BrokeringQuery.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<ion-item lines="none">
<ion-label>{{ currentRouting.routingName }}</ion-label>
<ion-chip slot="end" outline @click="router.go(-1)">
<!-- TODO: make route index and count dynamic -->
{{ "2/4" }}
<ion-icon :icon="chevronUpOutline" />
</ion-chip>
Expand All @@ -19,32 +20,33 @@
</ion-button>
</ion-item-divider>
<p class="empty-state" v-if="!orderRoutingFilters['ENTCT_FILTER'] || !Object.keys(orderRoutingFilters['ENTCT_FILTER']).length">{{ "Select filter to apply" }}</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="getRouteFilterValue('QUEUE')">
<ion-select label="Queue" interface="popover" :value="getRouteFilterValue('QUEUE').fieldValue" @ionChange="updateOrderFilterValue($event, 'ENTCT_FILTER', 'QUEUE')">
<ion-select-option v-for="(facility, facilityId) in facilities" :key="facilityId" :value="facilityId">{{ facility.facilityName || facilityId }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item v-if="getRouteFilterValue('SHIPPING_METHOD')">
<ion-select interface="popover" label="Shipping method" :value="getRouteFilterValue('SHIPPING_METHOD').fieldValue">
<ion-select interface="popover" label="Shipping method" :value="getRouteFilterValue('SHIPPING_METHOD').fieldValue" @ionChange="updateOrderFilterValue($event, 'ENTCT_FILTER', 'SHIPPING_METHOD')">
<ion-select-option value="Next Day">{{ "Next Day" }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item v-if="getRouteFilterValue('PRIORITY')">
<ion-select interface="popover" label="Order priority" :value="getRouteFilterValue('PRIORITY').fieldValue">
<ion-select interface="popover" label="Order priority" :value="getRouteFilterValue('PRIORITY').fieldValue" @ionChange="updateOrderFilterValue($event, 'ENTCT_FILTER', 'PRIORITY')">
<ion-select-option value="HIGH">{{ "High" }}</ion-select-option>
<ion-select-option value="MEDIUM">{{ "Medium" }}</ion-select-option>
<ion-select-option value="Low">{{ "Low" }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item v-if="getRouteFilterValue('PROMISE_DATE')">
<ion-label>{{ "Promise date" }}</ion-label>
<ion-chip>
{{ getRouteFilterValue('PROMISE_DATE').fieldValue }}
<ion-icon :icon="closeCircleOutline"/>
<ion-chip @click="selectPromiseFilterValue($event)">
<!-- TODO: need to display a string in place of just the value -->
{{ getRouteFilterValue('PROMISE_DATE').fieldValue || getRouteFilterValue('PROMISE_DATE').fieldValue == 0 ? getRouteFilterValue('PROMISE_DATE').fieldValue : '-' }}
</ion-chip>
</ion-item>
<ion-item v-if="getRouteFilterValue('SALES_CHANNEL')">
<ion-select label="Sales Channel" interface="popover" :value="getRouteFilterValue('SALES_CHANNEL').fieldValue">
<ion-select label="Sales Channel" interface="popover" :value="getRouteFilterValue('SALES_CHANNEL').fieldValue" @ionChange="updateOrderFilterValue($event, 'ENTCT_FILTER', 'SALES_CHANNEL')">
<ion-select-option v-for="(enumInfo, enumId) in enums['ORDER_SALES_CHANNEL']" :key="enumId" :value="enumId">{{ enumInfo.description || enumInfo.enumId }}</ion-select-option>
</ion-select>
</ion-item>
Expand All @@ -58,7 +60,7 @@
</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="!orderRoutingFilters['ENTCT_SORT_BY'] || !Object.keys(orderRoutingFilters['ENTCT_SORT_BY']).length">{{ "Select sorting to apply" }}</p>
<ion-reorder-group :disabled="false">
<ion-reorder-group @ionItemReorder="doRouteSortReorder($event)" :disabled="false">
<ion-item v-for="(sort, code) in orderRoutingFilters['ENTCT_SORT_BY']" :key="code">
<ion-label>{{ getLabel("ORD_SORT_PARAM_TYPE", code) }}</ion-label>
<ion-reorder />
Expand Down Expand Up @@ -198,17 +200,18 @@
</template>
<script setup lang="ts">
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter } from "@ionic/vue";
import { addCircleOutline, chevronUpOutline, closeCircleOutline, filterOutline, golfOutline, optionsOutline, playForwardOutline, swapVerticalOutline } from "ionicons/icons"
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
import { addCircleOutline, chevronUpOutline, filterOutline, golfOutline, optionsOutline, playForwardOutline, swapVerticalOutline } from "ionicons/icons"
import { useRouter } from "vue-router";
import { computed, defineProps, reactive, ref } from "vue";
import store from "@/store";
import AddInventoryFilterOptionsModal from "@/components/AddInventoryFilterOptionsModal.vue";
import AddInventorySortOptionsModal from "@/components/AddInventorySortOptionsModal.vue";
import { showToast } from "@/utils";
import { OrderRoutingService } from "@/services/RoutingService"
import { Enumeration, Rule } from "@/types";
import { Rule } from "@/types";
import AddOrderRouteFilterOptions from "@/components/AddOrderRouteFilterOptions.vue"
import PromiseFilterPopover from "@/components/PromiseFilterPopover.vue"
const router = useRouter();
const props = defineProps({
Expand Down Expand Up @@ -246,6 +249,7 @@ onIonViewWillEnter(async () => {
})
async function fetchRuleInformation(routingRuleId: string) {
// When clicking the same enum again do not fetch its information
if(selectedRoutingRule.routingRuleId === routingRuleId) {
return;
}
Expand Down Expand Up @@ -401,13 +405,47 @@ function getLabel(parentType: string, code: string) {
return enumInfo?.description
}
async function selectPromiseFilterValue(ev: CustomEvent) {
const popover = await popoverController
.create({
component: PromiseFilterPopover,
event: ev,
translucent: true,
showBackdrop: true
})
popover.onDidDismiss().then((result: any) => {
getRouteFilterValue("PROMISE_DATE").fieldValue = result.data?.isPastDuration ? `-${result.data?.duration}` : result.data?.duration
getRouteFilterValue("PROMISE_DATE").operator = "less-equals"
})
return popover.present();
}
function updateOrderFilterValue(event: CustomEvent, conditionTypeEnumId: string, id: string) {
orderRoutingFilters.value[conditionTypeEnumId][ruleEnums[id].code].fieldValue = event.detail.value
}
function doRouteSortReorder(event: CustomEvent) {
const previousSeq = JSON.parse(JSON.stringify(Object.values(orderRoutingFilters.value["ENTCT_SORT_BY"])))
// returns the updated sequence after reordering
const updatedSeq = event.detail.complete(JSON.parse(JSON.stringify(Object.values(orderRoutingFilters.value["ENTCT_SORT_BY"]))));
const updatedSeqenceNum = Object.keys(previousSeq).map((filter: any) => previousSeq[filter].sequenceNum)
Object.keys(updatedSeq).map((key: any, index: number) => {
updatedSeq[key].sequenceNum = updatedSeqenceNum[index]
})
orderRoutingFilters.value["ENTCT_SORT_BY"] = updatedSeq.reduce((filters: any, filter: any) => {
filters[filter.fieldName] = filter
return filters
}, {})
}
// checks whether values for all the properties of two objects are same
function isObjectUpdated(initialObj: any, finalObj: any) {
return !Object.keys(initialObj).every((key: string) => finalObj[key] === initialObj[key])
return !Object.keys(initialObj).every((key: string) => finalObj[key] === initialObj[key]) || Object.keys(initialObj).length !== Object.keys(finalObj).length
}
async function save() {
Expand All @@ -421,10 +459,15 @@ async function save() {
if(routingFilters.value[filterType]?.[key]) {
const isSeqChanged = isObjectUpdated(routingFilters.value[filterType][key], orderRoutingFilters.value[filterType]?.[key])
if(isSeqChanged) {
filtersToUpdate.push(routingFilters.value[filterType]?.[key])
// Expanding object, as when the filter which is updated needs to use the values from original object, but if there is some change in the latest object(like seqNum due to reordering) then needs to override it
filtersToUpdate.push({
...routingFilters.value[filterType][key],
...orderRoutingFilters.value[filterType][key]
})
}
} else {
if(filterType === valueRequiredForRouteFilter && orderRoutingFilters.value[filterType][key]?.["fieldValue"]) {
// Added check for 0, as when applying promiseDate filter the value can be zero
if(filterType === valueRequiredForRouteFilter && (orderRoutingFilters.value[filterType][key]?.["fieldValue"] || orderRoutingFilters.value[filterType][key]?.["fieldValue"] == 0)) {
filtersToCreate.push(orderRoutingFilters.value[filterType][key])
} else if(filterType !== valueRequiredForRouteFilter) {
filtersToCreate.push(orderRoutingFilters.value[filterType][key])
Expand Down

0 comments on commit ef9935e

Please sign in to comment.