From 52b337bce7ed4725a392db35802c61c2ac366069 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Apr 2024 11:45:07 +0530
Subject: [PATCH 1/5] Improved: UI to remove the block button to fab button for
 saving changes(#197)

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

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 6d10f1f..9e29084 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -10,7 +10,6 @@
               <ion-icon :icon="chevronUpOutline" />
             </ion-chip>
           </ion-item>
-          <ion-button class="ion-margin" expand="block" :disabled="!hasUnsavedChanges" @click="save">{{ translate("Save changes") }}</ion-button>
           <ion-item>
             <ion-icon slot="start" :icon="pulseOutline" />
             <ion-select :label="translate('Status')" interface="popover" :interface-options="{ subHeader: translate('Status') }" :value="routingStatus" @ionChange="updateOrderRouting($event.detail.value)">
@@ -259,13 +258,19 @@
           </ion-button>
         </section>
       </main>
+
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button :disabled="!hasUnsavedChanges" @click="save">
+          <ion-icon :icon="saveOutline" />
+        </ion-fab-button>
+      </ion-fab>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonNote, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
-import { addCircleOutline, bookmarkOutline, chevronUpOutline, copyOutline, filterOutline, golfOutline, optionsOutline, playForwardOutline, pulseOutline, swapVerticalOutline, timeOutline } from "ionicons/icons"
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonNote, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
+import { addCircleOutline, bookmarkOutline, chevronUpOutline, copyOutline, filterOutline, golfOutline, optionsOutline, playForwardOutline, pulseOutline, saveOutline, swapVerticalOutline, timeOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { computed, defineProps, ref } from "vue";
 import store from "@/store";

From a547bc67621ec639ae0b04230d251126288ddc30 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Apr 2024 12:57:20 +0530
Subject: [PATCH 2/5] Improved: UI for the rules page as per the figma(#197)

- Added support to rename the routing name
- Moved the style to change the input background to app level styling file
- Added icons to rename rules button
---
 src/theme/variables.css      |  4 ++
 src/views/BrokeringQuery.vue | 81 +++++++++++++++++++++++++++++++-----
 src/views/BrokeringRoute.vue |  6 +--
 3 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/src/theme/variables.css b/src/theme/variables.css
index fe2d458..c4dafed 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -262,6 +262,10 @@ http://ionicframework.com/docs/theming/ */
   text-align: center;
 }
 
+ion-input.name {
+  --background: var(--ion-color-light)
+}
+
 .pointer {
   cursor: pointer;
 }
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 9e29084..bb7a6d1 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -4,12 +4,24 @@
       <main>
         <section id="order-filters" class="menu">
           <ion-item lines="none">
-            <ion-label><h1>{{ currentRouting.routingName }}</h1></ion-label>
+            <ion-label>
+              <h1 v-show="!isRouteNameUpdating">{{ currentRouting.routingName }}</h1>
+              <!-- 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 ref="routeNameRef" :class="isRouteNameUpdating ? 'name' : ''" v-show="isRouteNameUpdating" aria-label="route name" v-model="routeName"></ion-input>
+            </ion-label>
             <ion-chip slot="end" outline @click="router.go(-1)">
               {{ getRouteIndex() }}
               <ion-icon :icon="chevronUpOutline" />
             </ion-chip>
           </ion-item>
+          <ion-button class="ion-margin-start" color="medium" fill="outline" size="small" @click="isRouteNameUpdating ? updateRouteName() : editRouteName()">
+            <ion-icon slot="start" :icon="isRouteNameUpdating ? saveOutline : pencilOutline" />
+            {{ isRouteNameUpdating ? translate("Save") : translate("Rename") }}
+          </ion-button>
+          <!-- <ion-button color="medium" fill="outline" size="small">
+            <ion-icon slot="start" :icon="copyOutline" />
+            {{ translate("Clone") }}
+          </ion-button> -->
           <ion-item>
             <ion-icon slot="start" :icon="pulseOutline" />
             <ion-select :label="translate('Status')" interface="popover" :interface-options="{ subHeader: translate('Status') }" :value="routingStatus" @ionChange="updateOrderRouting($event.detail.value)">
@@ -113,7 +125,7 @@
                   <h1 v-show="!isRuleNameUpdating">{{ selectedRoutingRule.ruleName }}</h1>
                 </ion-label>
                 <!-- 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-input :class="isRuleNameUpdating ? 'name' : ''" v-show="isRuleNameUpdating" aria-label="rule name" v-model="selectedRoutingRule.ruleName"></ion-input>
               </ion-item>
               <div>
                 <ion-item>
@@ -125,7 +137,10 @@
                   </ion-select>
                 </ion-item>
                 <ion-item>
-                  <ion-button slot="end" size="small" @click="isRuleNameUpdating = !isRuleNameUpdating; updateRuleName(selectedRoutingRule.routingRuleId)" fill="outline">{{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}</ion-button>
+                  <ion-button slot="end" size="small" @click="isRuleNameUpdating = !isRuleNameUpdating; updateRuleName(selectedRoutingRule.routingRuleId)" fill="outline">
+                    <ion-icon slot="start" :icon="isRuleNameUpdating ? saveOutline : pencilOutline" />
+                    {{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}
+                  </ion-button>
                   <ion-button slot="end" size="small" @click="cloneRule" fill="outline">
                     <ion-icon slot="start" :icon="copyOutline"/>
                     {{ translate("Clone") }}
@@ -270,12 +285,12 @@
 
 <script setup lang="ts">
 import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonNote, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
-import { addCircleOutline, bookmarkOutline, chevronUpOutline, copyOutline, filterOutline, golfOutline, optionsOutline, playForwardOutline, pulseOutline, saveOutline, swapVerticalOutline, timeOutline } from "ionicons/icons"
+import { addCircleOutline, bookmarkOutline, chevronUpOutline, copyOutline, filterOutline, golfOutline, optionsOutline, pencilOutline, playForwardOutline, pulseOutline, saveOutline, swapVerticalOutline, timeOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
-import { computed, defineProps, ref } from "vue";
+import { computed, defineProps, nextTick, ref } from "vue";
 import store from "@/store";
 import AddInventoryFilterOptionsModal from "@/components/AddInventoryFilterOptionsModal.vue";
-import { getDateAndTimeShort, showToast, sortSequence } from "@/utils";
+import { getDateAndTimeShort, hasError, showToast, sortSequence } from "@/utils";
 import { Rule } from "@/types";
 import AddOrderRouteFilterOptions from "@/components/AddOrderRouteFilterOptions.vue"
 import PromiseFilterPopover from "@/components/PromiseFilterPopover.vue"
@@ -284,6 +299,7 @@ import { DateTime } from "luxon";
 import emitter from "@/event-bus";
 import { translate } from "@/i18n";
 import RoutingHistoryModal from "@/components/RoutingHistoryModal.vue"
+import { OrderRoutingService } from "@/services/RoutingService";
 
 const router = useRouter();
 const props = defineProps({
@@ -319,7 +335,10 @@ let rulesInformation = ref({}) as any
 let hasUnsavedChanges = ref(false)
 let isRuleNameUpdating = ref(false)
 let routingStatus = ref("")
+let routeName = ref("")
+let isRouteNameUpdating = ref(false)
 
+const routeNameRef = ref()
 const operatorRef = ref()
 const measurementRef = ref()
 
@@ -343,6 +362,8 @@ onIonViewWillEnter(async () => {
     await fetchRuleInformation(currentRuleId.value || inventoryRules.value[0].routingRuleId);
   }
 
+  routeName.value = currentRouting.value["routingName"] ? currentRouting.value["routingName"] : ""
+
   routingStatus.value = currentRouting.value.statusId
   emitter.emit("dismissLoader")
 })
@@ -444,6 +465,50 @@ async function initializeInventoryRules(rule: any) {
   }) || ""
 }
 
+async function editRouteName() {
+  isRouteNameUpdating.value = !isRouteNameUpdating.value;
+  // Waiting for DOM updations before focus inside the text-area, as it is conditionally rendered in the DOM
+  await nextTick()
+  routeNameRef.value.$el.setFocus();
+}
+
+async function updateRouteName() {
+  if(routeName.value.trim() && routeName.value.trim() !== currentRouting.value.routingName.trim()) {
+
+    emitter.emit("presentLoader", { message: "Updating...", backdropDismiss: false })
+
+    const payload = {
+      orderRoutingId: props.orderRoutingId,
+      routingName: routeName.value
+    }
+
+    let orderRoutingId = ''
+    try {
+      const resp = await OrderRoutingService.updateRouting(payload);
+
+      if(!hasError(resp) && resp.data.orderRoutingId) {
+        orderRoutingId = resp.data.orderRoutingId
+        showToast(translate("Order routing information updated"))
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      showToast(translate("Failed to update routing information"))
+      logger.error(err);
+    }
+
+    if(orderRoutingId) {
+      await store.dispatch("orderRouting/setCurrentOrderRouting", { ...currentRouting.value, routingName: routeName.value })
+    } else {
+      routeName.value = currentRouting.value.routingName.trim()
+    }
+
+    emitter.emit("dismissLoader")
+  }
+
+  isRouteNameUpdating.value = false
+}
+
 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
@@ -1251,10 +1316,6 @@ ion-chip > ion-select {
   min-height: unset;
 }
 
-ion-input.ruleName {
-  --background: var(--ion-color-light)
-}
-
 .empty-state {
   text-align: center;
 }
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index ec99dea..8919835 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -17,7 +17,7 @@
                 <ion-label>
                   <h1 v-show="!isGroupNameUpdating">{{ groupName }}</h1>
                   <!-- 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 ref="groupNameRef" :class="isGroupNameUpdating ? 'groupName' : ''" v-show="isGroupNameUpdating" aria-label="group name" v-model="groupName"></ion-input>
+                  <ion-input ref="groupNameRef" :class="isGroupNameUpdating ? 'name' : ''" v-show="isGroupNameUpdating" aria-label="group name" v-model="groupName"></ion-input>
                   <p>{{ currentRoutingGroup.routingGroupId }}</p>
                 </ion-label>
                 <div>
@@ -913,8 +913,4 @@ ion-card > ion-button[expand="block"] {
   margin-inline: var(--spacer-sm);
   margin-bottom: var(--spacer-sm);
 }
-
-ion-input.groupName {
-  --background: var(--ion-color-light)
-}
 </style>

From 3041753eab35572049757003799bea225dfb2569 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Apr 2024 14:19:57 +0530
Subject: [PATCH 3/5] Improved: check for auto cancel days to not allow empty
 values(#197)

---
 src/views/BrokeringQuery.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index bb7a6d1..3bde815 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -698,7 +698,8 @@ async function updateAutoCancelDays() {
     {
       text: translate("Save"),
       handler: (data) => {
-        if(data?.autoCancelDays || data.autoCancelDays === 0) {
+        // Added check for `>= 0` as we not need to allow negative values for autoCancelDays value
+        if(data?.autoCancelDays && data.autoCancelDays >= 0) {
           if(inventoryRuleActions.value[actionEnums["AUTO_CANCEL_DAYS"].id]?.actionValue) {
             inventoryRuleActions.value[actionEnums["AUTO_CANCEL_DAYS"].id].actionValue = data.autoCancelDays
           } else {

From f0363a7ab3856eb80a72b89920e54665d3f20ee5 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Apr 2024 14:37:12 +0530
Subject: [PATCH 4/5] Implemented: functionality to clear the
 autoCancelDays(#197)

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

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 3bde815..3ed9340 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -253,11 +253,19 @@
                     </ion-select>
                   </ion-item>
                   <ion-item lines="none">
-                    <ion-toggle :checked="inventoryRuleActions[actionEnums['RM_AUTO_CANCEL_DATE'].id]?.actionValue" @ionChange="updateClearAutoCancelDays($event.detail.checked)">{{ translate("Clear auto cancel days") }}</ion-toggle>
+                    <ion-toggle :checked="inventoryRuleActions[actionEnums['RM_AUTO_CANCEL_DATE'].id]?.actionValue" @ionChange="clearAutoCancelDays($event.detail.checked)">{{ translate("Clear auto cancel days") }}</ion-toggle>
                   </ion-item>
                   <ion-item lines="none" v-show="!inventoryRuleActions[actionEnums['RM_AUTO_CANCEL_DATE'].id]?.actionValue">
                     <ion-label>{{ translate("Auto cancel days") }}</ion-label>
-                    <ion-chip outline @click="updateAutoCancelDays()">{{ inventoryRuleActions[actionEnums["AUTO_CANCEL_DAYS"].id]?.actionValue ? `${inventoryRuleActions[actionEnums["AUTO_CANCEL_DAYS"].id].actionValue} days` : translate("select days") }}</ion-chip>
+                    <ion-chip outline @click="updateAutoCancelDays()">
+                      <template v-if="inventoryRuleActions[actionEnums['AUTO_CANCEL_DAYS'].id]?.actionValue">
+                        <ion-icon :icon="closeCircleOutline" @click.stop="removeAutoCancelDays()"/>
+                        <ion-label>{{ `${inventoryRuleActions[actionEnums["AUTO_CANCEL_DAYS"].id].actionValue} days` }}</ion-label>
+                      </template>
+                      <template v-else>
+                        {{ translate("select days") }}
+                      </template>
+                    </ion-chip>
                   </ion-item>
                 </ion-card>
               </div>
@@ -285,7 +293,7 @@
 
 <script setup lang="ts">
 import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonNote, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
-import { addCircleOutline, bookmarkOutline, chevronUpOutline, copyOutline, filterOutline, golfOutline, optionsOutline, pencilOutline, playForwardOutline, pulseOutline, saveOutline, swapVerticalOutline, timeOutline } from "ionicons/icons"
+import { addCircleOutline, bookmarkOutline, chevronUpOutline, closeCircleOutline, copyOutline, filterOutline, golfOutline, optionsOutline, pencilOutline, playForwardOutline, pulseOutline, saveOutline, swapVerticalOutline, timeOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { computed, defineProps, nextTick, ref } from "vue";
 import store from "@/store";
@@ -681,6 +689,11 @@ function updateRuleActionValue(value: string) {
   updateRule()
 }
 
+async function removeAutoCancelDays() {
+  delete inventoryRuleActions.value[actionEnums["AUTO_CANCEL_DAYS"].id]
+  updateRule()
+}
+
 async function updateAutoCancelDays() {
   const alert = await alertController.create({
     header: translate("Auto cancel days"),
@@ -860,7 +873,7 @@ function updateRuleFilterValue(event: CustomEvent, id: string) {
   updateRule()
 }
 
-function updateClearAutoCancelDays(checked: any) {
+function clearAutoCancelDays(checked: any) {
   if(inventoryRuleActions.value[actionEnums["RM_AUTO_CANCEL_DATE"].id]) {
     inventoryRuleActions.value[actionEnums["RM_AUTO_CANCEL_DATE"].id].actionValue = checked
   } else {

From 48b6bd9339fd17788f83b818525da49342941889 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Apr 2024 15:02:50 +0530
Subject: [PATCH 5/5] Improved: the button positioning for inventory
 rules(#197)

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

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 3ed9340..60bda94 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -137,14 +137,16 @@
                   </ion-select>
                 </ion-item>
                 <ion-item>
-                  <ion-button slot="end" size="small" @click="isRuleNameUpdating = !isRuleNameUpdating; updateRuleName(selectedRoutingRule.routingRuleId)" fill="outline">
-                    <ion-icon slot="start" :icon="isRuleNameUpdating ? saveOutline : pencilOutline" />
-                    {{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}
-                  </ion-button>
-                  <ion-button slot="end" size="small" @click="cloneRule" fill="outline">
-                    <ion-icon slot="start" :icon="copyOutline"/>
-                    {{ translate("Clone") }}
-                  </ion-button>
+                  <div slot="end">
+                    <ion-button size="small" @click="isRuleNameUpdating = !isRuleNameUpdating; updateRuleName(selectedRoutingRule.routingRuleId)" fill="outline">
+                      <ion-icon slot="start" :icon="isRuleNameUpdating ? saveOutline : pencilOutline" />
+                      {{ isRuleNameUpdating ? translate("Save") : translate("Rename") }}
+                    </ion-button>
+                    <ion-button size="small" @click="cloneRule" fill="outline">
+                      <ion-icon slot="start" :icon="copyOutline"/>
+                      {{ translate("Clone") }}
+                    </ion-button>
+                  </div>
                 </ion-item>
               </div>
             </ion-card>