Merge pull request #177 from ymaheshwari1/#155

Improved: UI for the promise date order filter(#155)
hotwax · Apr 10, 2024 · 783bf37 · 783bf37
2 parents 2c1c0ba + ede2e91
commit 783bf37
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/src/components/PromiseFilterPopover.vue b/src/components/PromiseFilterPopover.vue
@@ -4,13 +4,13 @@
       <ion-list-header>
         <ion-label>{{ translate("Promise date") }}</ion-label>
       </ion-list-header>
-      <ion-item button @click="updatePromiseDate()">
+      <ion-item :color="value == 0 ? 'light' : ''" button @click="updatePromiseDate()">
         <ion-label>{{ translate("Already passed") }}</ion-label>
       </ion-item>
-      <ion-item button @click="updatePromiseDate('Upcoming duration')">
+      <ion-item :color="value > 0 ? 'light' : ''" button @click="updatePromiseDate('Upcoming duration')">
         <ion-label>{{ translate("Upcoming duration") }}</ion-label>
       </ion-item>
-      <ion-item button lines="none" @click="updatePromiseDate('Passed duration', true)">
+      <ion-item :color="value < 0 ? 'light' : ''" button lines="none" @click="updatePromiseDate('Passed duration', true)">
         <ion-label>{{ translate("Passed duration") }}</ion-label>
       </ion-item>
     </ion-list>
@@ -19,10 +19,14 @@
 
 <script setup lang="ts">
 import { translate } from "@/i18n";
+import { showToast } from "@/utils";
 import { IonContent, IonItem, IonLabel, IonList, IonListHeader, alertController, popoverController } from "@ionic/vue";
+import { defineProps } from "vue";
+
+const props = defineProps([ "value" ])
 
 async function updatePromiseDate(header = '', isPastDuration = false) {
-  let duration = 0
+  let duration = "0"
 
   if(!header) {
     popoverController.dismiss({ duration })
@@ -35,11 +39,21 @@ async function updatePromiseDate(header = '', isPastDuration = false) {
       text: translate("Cancel"),
       role: "cancel"
     }, {
-      text: translate("Save")
+      text: translate("Save"),
+      handler: (data: any) => {
+        const duration = data?.duration;
+        if(!duration) {
+          showToast(translate("Enter a valid value"))
+          return false;
+        }
+      }
     }],
     inputs: [{
       name: "duration",
-      placeholder: translate("duration")
+      placeholder: translate("duration"),
+      min: 0,
+      type: "number",
+      value: props.value?.replace("-", "")
     }]
   })
 
@@ -49,9 +63,12 @@ async function updatePromiseDate(header = '', isPastDuration = false) {
       return;
     }
 
-    // TODO: add checks for duration value
     const duration = result.data?.values?.duration;
-    popoverController.dismiss({ duration, isPastDuration })
+
+    // Remove all the characters except numbers
+    const value = duration.replace(/[^0-9 ]/g, "");
+
+    popoverController.dismiss({ duration: value, isPastDuration })
   })
 
   return durationAlert.present();

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -13,6 +13,7 @@
   "Are you sure you want to save these changes?": "Are you sure you want to save these changes?",
   "Auto cancel days": "Auto cancel days",
   "action": "action",
+  "already passed": "already passed",
   "auto cancel days": "auto cancel days",
   "Brokering": "Brokering",
   "Brokering Runs": "Brokering Runs",
@@ -34,6 +35,7 @@
   "Do you want to save your changes before leaving this page?": "Do you want to save your changes before leaving this page?",
   "duration": "duration",
   "Edit": "Edit",
+  "Enter a valid value": "Enter a valid value",
   "Error getting user profile": "Error getting user profile",
   "Failed to clone the rule": "Failed to clone the rule",
   "Failed to create brokering run": "Failed to create brokering run",

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
@@ -55,8 +55,7 @@
             <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PROMISE_DATE')">
               <ion-label>{{ translate("Promise date") }}</ion-label>
               <ion-chip outline @click="selectPromiseFilterValue($event)">
-                <!-- TODO: need to display a string in place of just the value -->
-                {{ getFilterValue(orderRoutingFilterOptions, ruleEnums, "PROMISE_DATE").fieldValue || getFilterValue(orderRoutingFilterOptions, ruleEnums, "PROMISE_DATE").fieldValue == 0 ? getFilterValue(orderRoutingFilterOptions, ruleEnums, "PROMISE_DATE").fieldValue : translate("select range") }}
+                {{ getPromiseDateValue() }}
               </ion-chip>
             </ion-item>
             <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SALES_CHANNEL')">
@@ -633,6 +632,14 @@ function isPromiseDateFilterApplied() {
   return filter?.fieldValue || filter?.fieldValue == 0
 }
 
+function getPromiseDateValue() {
+  const value = orderRoutingFilterOptions.value?.[ruleEnums["PROMISE_DATE"].code]?.fieldValue
+  if(value || value == 0) {
+    return value == 0 ? translate("already passed") : value.startsWith("-") ? `${value.replace("-", "")} days passed` : `upcoming in ${value} days`
+  }
+  return translate("select range")
+}
+
 function getFilterValue(options: any, enums: any, parameter: string) {
   return options?.[enums[parameter].code]
 }
@@ -666,6 +673,9 @@ async function selectPromiseFilterValue(ev: CustomEvent) {
   const popover = await popoverController
     .create({
       component: PromiseFilterPopover,
+      componentProps: {
+        value: getFilterValue(orderRoutingFilterOptions.value, ruleEnums, "PROMISE_DATE").fieldValue
+      },
       event: ev,
       translucent: true,
       showBackdrop: true