From cce481c23d886b3bccb83587b0032fee3a541e00 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Wed, 10 Apr 2024 14:55:13 +0530
Subject: [PATCH 1/2] Improved: UI for the promise date order filter(#155)

Added support to dispaly a string in place of just a number when value is available
Displayed already entered value in the alert input
Displayed the specific popover option highlighted if selected
---
 src/components/PromiseFilterPopover.vue | 33 +++++++++++++++++++------
 src/views/BrokeringQuery.vue            | 14 +++++++++--
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/components/PromiseFilterPopover.vue b/src/components/PromiseFilterPopover.vue
index f3c077c..21b391b 100644
--- 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/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 44ddd3c..e5e91d1 100644
--- 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 ? "already passed" : value.startsWith("-") ? `${value.replace("-", "")} days passed` : `upcoming in ${value} days`
+  }
+  return "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

From ede2e91e9edfc6568136b5b98554a6249d8facea Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Wed, 10 Apr 2024 15:12:58 +0530
Subject: [PATCH 2/2] Implemented: internationalization support(#155)

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

diff --git a/src/locales/en.json b/src/locales/en.json
index 3de25b0..fe87665 100644
--- 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
index e5e91d1..c66c655 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -635,9 +635,9 @@ function isPromiseDateFilterApplied() {
 function getPromiseDateValue() {
   const value = orderRoutingFilterOptions.value?.[ruleEnums["PROMISE_DATE"].code]?.fieldValue
   if(value || value == 0) {
-    return value == 0 ? "already passed" : value.startsWith("-") ? `${value.replace("-", "")} days passed` : `upcoming in ${value} days`
+    return value == 0 ? translate("already passed") : value.startsWith("-") ? `${value.replace("-", "")} days passed` : `upcoming in ${value} days`
   }
-  return "select range"
+  return translate("select range")
 }
 
 function getFilterValue(options: any, enums: any, parameter: string) {