From 027f2100fe3ab9c1a4a2c2ed27a911ffb0970b2a Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 8 Feb 2024 19:21:54 +0530
Subject: [PATCH 1/5] Implemented: support to edit the rule name and change the
 status for the rule(#65)

---
 src/views/BrokeringQuery.vue | 43 +++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 09187e1..90f4aad 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -83,12 +83,25 @@
           </ion-button>
         </div>
         <div v-if="selectedRoutingRule.routingRuleId">
-          <ion-item lines="none">
-            <!-- TODO: add support to archive a rule, add rule status Desc, and add color option -->
-            <ion-label>{{ translate("Rule Status") }}</ion-label>
-            <ion-badge class="pointer" v-if="selectedRoutingRule.statusId === 'RULE_DRAFT'" @click="updateRuleStatus(selectedRoutingRule.routingRuleId, 'RULE_ACTIVE')">{{ getStatusDesc(selectedRoutingRule.statusId) }}</ion-badge>
-            <ion-badge color="success" v-else>{{ getStatusDesc(selectedRoutingRule.statusId) }}</ion-badge>
-          </ion-item>
+          <ion-card class="rule-info">
+            <ion-item :color="isRuleNameUpdating ? 'light' : ''" lines="none">
+              <ion-label v-if="!isRuleNameUpdating">
+                <h1>{{ selectedRoutingRule.ruleName }}</h1>
+              </ion-label>
+              <ion-input v-else aria-label="rule name" v-model="selectedRoutingRule.ruleName"></ion-input>
+            </ion-item>
+            <div>
+              <ion-item lines="none">
+                <ion-icon slot="start" :icon="bookmarkOutline" />
+                <ion-select :label="translate('Status')" interface="popover" :value="selectedRoutingRule.statusId" @ionChange="updateRuleStatus($event, selectedRoutingRule.routingRuleId)">
+                  <ion-select-option value="RULE_DRAFT">{{ "Draft" }}</ion-select-option>
+                  <ion-select-option value="RULE_ACTIVE">{{ "Active" }}</ion-select-option>
+                  <ion-select-option value="RULE_ARCHIVED">{{ "Archived" }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+              <ion-button size="small" @click="isRuleNameUpdating = !isRuleNameUpdating; hasUnsavedChanges = true" fill="outline">{{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}</ion-button>
+            </div>
+          </ion-card>
           <section class="filters">
             <ion-card>
               <ion-item>
@@ -208,8 +221,8 @@
 </template>
 
 <script setup lang="ts">
-import { IonBadge, 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 { IonBadge, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
+import { addCircleOutline, bookmarkOutline, chevronUpOutline, filterOutline, golfOutline, optionsOutline, playForwardOutline, swapVerticalOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { computed, defineProps, ref } from "vue";
 import store from "@/store";
@@ -254,6 +267,7 @@ let inventoryRuleSortOptions = ref({}) as any
 let inventoryRuleActions = ref({}) as any
 let rulesInformation = ref({}) as any
 let hasUnsavedChanges = ref(false)
+let isRuleNameUpdating = ref(false)
 
 onIonViewWillEnter(async () => {
   emitter.emit("presentLoader", { message: "Fetching filters and inventory rules", backdropDismiss: false })
@@ -346,6 +360,9 @@ async function initializeInventoryRules(rule: any) {
 }
 
 async function fetchRuleInformation(routingRuleId: string) {
+  // Changing the value to false, as when fetching the information initially or after changing the rule we should stop the process of name updation
+  isRuleNameUpdating.value = false
+
   // When clicking the same enum again do not fetch its information
   // TODO: check behaviour when creating a new rule, when no rule exist and when already some rule exist and a rule is open
   if(selectedRoutingRule.value.routingRuleId === routingRuleId) {
@@ -651,10 +668,10 @@ function updateClearAutoCancelDays(checked: any) {
 }
 
 // Updating rule status
-function updateRuleStatus(routingRuleId: string, statusId: string) {
+function updateRuleStatus(event: CustomEvent, routingRuleId: string) {
   inventoryRules.value.map((inventoryRule: any) => {
     if(inventoryRule.routingRuleId === routingRuleId) {
-      inventoryRule.statusId = statusId
+      inventoryRule.statusId = event.detail.value
     }
   })
   hasUnsavedChanges.value = true
@@ -981,6 +998,12 @@ async function save() {
   max-width: 50%;
 }
 
+.rule-info {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  align-items: start;
+}
+
 ion-content > div {
   display: grid;
   grid-template-columns: 300px 300px 1fr;

From 2a2392951db0db3a26bbeec2d919cc9a74d10a32 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 9 Feb 2024 11:50:20 +0530
Subject: [PATCH 2/5] Implemented: support to check for changes in rule
 name(#65)

---
 src/views/BrokeringQuery.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 90f4aad..630760b 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -99,7 +99,7 @@
                   <ion-select-option value="RULE_ARCHIVED">{{ "Archived" }}</ion-select-option>
                 </ion-select>
               </ion-item>
-              <ion-button size="small" @click="isRuleNameUpdating = !isRuleNameUpdating; hasUnsavedChanges = true" fill="outline">{{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}</ion-button>
+              <ion-button size="small" @click="isRuleNameUpdating = !isRuleNameUpdating; updateRuleName(selectedRoutingRule.routingRuleId)" fill="outline">{{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}</ion-button>
             </div>
           </ion-card>
           <section class="filters">
@@ -677,6 +677,15 @@ function updateRuleStatus(event: CustomEvent, routingRuleId: string) {
   hasUnsavedChanges.value = true
 }
 
+function updateRuleName(routingRuleId: string) {
+  // Checking the updated name with the original object, as we have reference to inventoryRules that will also gets updated on updating selectedRoutingRule
+  currentRouting.value["rules"].map((inventoryRule: any) => {
+    if(inventoryRule.routingRuleId === routingRuleId && inventoryRule.ruleName.trim() !== selectedRoutingRule.value.ruleName.trim()) {
+      hasUnsavedChanges.value = true
+    }
+  })
+}
+
 function doRouteSortReorder(event: CustomEvent) {
   const previousSeq = JSON.parse(JSON.stringify(Object.values(orderRoutingSortOptions.value)))
 
@@ -718,7 +727,7 @@ function doConditionSortReorder(event: CustomEvent) {
 
 function findRoutingsDiff(previousSeq: any, updatedSeq: any) {
   const diffSeq: any = Object.keys(previousSeq).reduce((diff, key) => {
-    if (updatedSeq[key].routingRuleId === previousSeq[key].routingRuleId && updatedSeq[key].statusId === previousSeq[key].statusId && updatedSeq[key].assignmentEnumId === previousSeq[key].assignmentEnumId) return diff
+    if (updatedSeq[key].routingRuleId === previousSeq[key].routingRuleId && updatedSeq[key].statusId === previousSeq[key].statusId && updatedSeq[key].assignmentEnumId === previousSeq[key].assignmentEnumId && updatedSeq[key].ruleName === previousSeq[key].ruleName) return diff
     return {
       ...diff,
       [key]: updatedSeq[key]

From 43d4e80a12d507227e5834cde5dac93d522e65c1 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 9 Feb 2024 12:28:58 +0530
Subject: [PATCH 3/5] Implemented: support to display the rule index and
 updated the UI as per the design(#65)

---
 src/views/BrokeringQuery.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 630760b..937f874 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -86,20 +86,23 @@
           <ion-card class="rule-info">
             <ion-item :color="isRuleNameUpdating ? 'light' : ''" lines="none">
               <ion-label v-if="!isRuleNameUpdating">
+                <p>{{ getRuleIndex() }}</p>
                 <h1>{{ selectedRoutingRule.ruleName }}</h1>
               </ion-label>
               <ion-input v-else aria-label="rule name" v-model="selectedRoutingRule.ruleName"></ion-input>
             </ion-item>
             <div>
-              <ion-item lines="none">
+              <ion-item>
                 <ion-icon slot="start" :icon="bookmarkOutline" />
                 <ion-select :label="translate('Status')" interface="popover" :value="selectedRoutingRule.statusId" @ionChange="updateRuleStatus($event, selectedRoutingRule.routingRuleId)">
-                  <ion-select-option value="RULE_DRAFT">{{ "Draft" }}</ion-select-option>
-                  <ion-select-option value="RULE_ACTIVE">{{ "Active" }}</ion-select-option>
-                  <ion-select-option value="RULE_ARCHIVED">{{ "Archived" }}</ion-select-option>
+                  <ion-select-option value="RULE_DRAFT">{{ translate("Draft") }}</ion-select-option>
+                  <ion-select-option value="RULE_ACTIVE">{{ translate("Active") }}</ion-select-option>
+                  <ion-select-option value="RULE_ARCHIVED">{{ translate("Archived") }}</ion-select-option>
                 </ion-select>
               </ion-item>
-              <ion-button size="small" @click="isRuleNameUpdating = !isRuleNameUpdating; updateRuleName(selectedRoutingRule.routingRuleId)" fill="outline">{{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}</ion-button>
+              <ion-item>
+                <ion-button slot="end" size="small" @click="isRuleNameUpdating = !isRuleNameUpdating; updateRuleName(selectedRoutingRule.routingRuleId)" fill="outline">{{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}</ion-button>
+              </ion-item>
             </div>
           </ion-card>
           <section class="filters">
@@ -330,6 +333,14 @@ function getRouteIndex() {
   return `${+currentRouteIndex + 1}/${total}`
 }
 
+function getRuleIndex() {
+  const total = inventoryRules.value.length
+  const currentRuleIndex: any = Object.keys(inventoryRules.value).find((key: any) => inventoryRules.value[key].routingRuleId == selectedRoutingRule.value.routingRuleId)
+
+  // adding one (1) as currentRuleIndex will have the index based on array, and used + as currentRuleIndex is a string
+  return `${+currentRuleIndex + 1}/${total}`
+}
+
 function initializeOrderRoutingOptions() {
   const orderRouteFilters = sortSequence(JSON.parse(JSON.stringify(currentRouting.value["orderFilters"]))).reduce((filters: any, filter: any) => {
     if(filters[filter.conditionTypeEnumId]) {

From 8bd4b327ff3dad1b3c27498041673b48c38818a6 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 9 Feb 2024 15:46:59 +0530
Subject: [PATCH 4/5] Fixed: issue of index being removed when updating the
 rule name(#65)

---
 src/views/BrokeringQuery.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 937f874..ebca466 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -84,12 +84,13 @@
         </div>
         <div v-if="selectedRoutingRule.routingRuleId">
           <ion-card class="rule-info">
-            <ion-item :color="isRuleNameUpdating ? 'light' : ''" lines="none">
-              <ion-label v-if="!isRuleNameUpdating">
+            <ion-item lines="none">
+              <ion-label>
                 <p>{{ getRuleIndex() }}</p>
-                <h1>{{ selectedRoutingRule.ruleName }}</h1>
+                <h1 v-show="!isRuleNameUpdating">{{ selectedRoutingRule.ruleName }}</h1>
               </ion-label>
-              <ion-input v-else aria-label="rule name" v-model="selectedRoutingRule.ruleName"></ion-input>
+              <!-- Added class as we can't change the background of ion-input with css property, and we need to change the background to show the user that now this value is editable -->
+              <ion-input :class="isRuleNameUpdating ? 'ruleName' : ''" v-show="isRuleNameUpdating" aria-label="rule name" v-model="selectedRoutingRule.ruleName"></ion-input>
             </ion-item>
             <div>
               <ion-item>
@@ -1039,4 +1040,8 @@ ion-chip > ion-select {
   /* Adding min-height as auto-styling is getting appLied when not using legacy select option */
   min-height: unset;
 }
+
+ion-input.ruleName {
+  --background: var(--ion-color-light)
+}
 </style>

From 363f2158786db45fdf6dadb56833cab478a64ca1 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 9 Feb 2024 16:05:31 +0530
Subject: [PATCH 5/5] Added: static text in en.json file and removed imports
 those are not used(#65)

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

diff --git a/src/locales/en.json b/src/locales/en.json
index 6e1314e..8ab5282 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,6 +1,7 @@
 {
   "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",
   "Add inventory rule": "Add inventory rule",
   "Allocated Items": "Allocated Items",
   "Allow partial allocation": "Allow partial allocation",
@@ -8,6 +9,7 @@
   "Any edits made on this page will be lost.": "Any edits made on this page will be lost.",
   "App": "App",
   "Archive": "Archive",
+  "Archived": "Archived",
   "Archived Routes": "Archived Routes",
   "Are you sure you want to save these changes?": "Are you sure you want to save these changes?",
   "Auto cancel days": "Auto cancel days",
@@ -30,6 +32,7 @@
   "Disable": "Disable",
   "Disabling this schedule will cancel this occurrence and all following occurrences. This schedule will have to be re-enabled manually to run it again.": "Disabling this schedule will cancel this occurrence and all following occurrences. This schedule will have to be re-enabled manually to run it again.",
   "Don't cancel": "Don't cancel",
+  "Draft": "Draft",
   "duration": "duration",
   "Edit": "Edit",
   "Error getting user profile": "Error getting user profile",
@@ -97,6 +100,7 @@
   "priority": "priority",
   "Queue": "Queue",
   "queue": "queue",
+  "Rename": "Rename",
   "Routing group information updated": "Routing group information updated",
   "Rule Status": "Rule Status",
   "Rule name": "Rule name",
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index ebca466..22c1582 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -225,7 +225,7 @@
 </template>
 
 <script setup lang="ts">
-import { IonBadge, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
 import { addCircleOutline, bookmarkOutline, chevronUpOutline, filterOutline, golfOutline, optionsOutline, playForwardOutline, swapVerticalOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { computed, defineProps, ref } from "vue";
@@ -259,7 +259,6 @@ const facilities = computed(() => store.getters["util/getFacilities"])
 const enums = computed(() => store.getters["util/getEnums"])
 const shippingMethods = computed(() => store.getters["util/getShippingMethods"])
 const facilityGroups = computed(() => store.getters["util/getFacilityGroups"])
-const getStatusDesc = computed(() => (id: string) => store.getters["util/getStatusDesc"](id))
 
 let ruleActionType = ref("")
 let selectedRoutingRule = ref({}) as any