From aca5732c397b7bb37f7f7ef1c339aa1a6aa24969 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Jan 2024 12:17:29 +0530
Subject: [PATCH 1/9] Implemented: support to reorder route at UI level, and
 created action for updatingRoute and creating a new route

---
 src/services/RoutingService.ts            |  31 +++---
 src/store/modules/orderRouting/actions.ts | 114 ++++++++++++++++------
 src/types/index.ts                        |   3 +-
 src/views/BrokeringRoute.vue              |  82 ++++++++++++----
 4 files changed, 165 insertions(+), 65 deletions(-)

diff --git a/src/services/RoutingService.ts b/src/services/RoutingService.ts
index 27631ba..e0ec91a 100644
--- a/src/services/RoutingService.ts
+++ b/src/services/RoutingService.ts
@@ -35,6 +35,14 @@ const fetchOrderRoutings = async (payload: any): Promise<any> => {
   });
 }
 
+const updateOrderRouting = async (payload: any): Promise<any> => {
+  return api({
+    url: `routings/${payload.orderRoutingId}`,
+    method: "POST",
+    data: payload
+  })
+}
+
 const createRoutingRule = async (payload: any): Promise<any> => {
   let routingRuleId = '';
   try {
@@ -56,23 +64,11 @@ const createRoutingRule = async (payload: any): Promise<any> => {
 }
 
 const createOrderRouting = async (payload: any): Promise<any> => {
-  let orderRoutingId = '';
-  try {
-    const resp = await api({
-      url: "routings",
-      method: "POST",
-      data: payload
-    })
-
-    if(!hasError(resp) && resp?.data.orderRoutingId) {
-      orderRoutingId = resp.data.orderRoutingId
-    }
-  } catch(err) {
-    showToast("Failed to create new route")
-    logger.error(err)
-  }
-
-  return orderRoutingId
+  return await api({
+    url: "routings",
+    method: "POST",
+    data: payload
+  })
 }
 
 const fetchRoutingRules = async (payload: any): Promise<any> => {
@@ -117,5 +113,6 @@ export const OrderRoutingService = {
   fetchRoutingRules,
   fetchRuleActions,
   fetchRuleConditions,
+  updateOrderRouting,
   updateRoutingGroup
 }
\ No newline at end of file
diff --git a/src/store/modules/orderRouting/actions.ts b/src/store/modules/orderRouting/actions.ts
index 82443cc..0ed1e32 100644
--- a/src/store/modules/orderRouting/actions.ts
+++ b/src/store/modules/orderRouting/actions.ts
@@ -5,7 +5,7 @@ import { OrderRoutingService } from "@/services/RoutingService"
 import { hasError, showToast, sortSequence } from "@/utils"
 import * as types from './mutation-types'
 import logger from "@/logger"
-import { Group, RouteFilter } from "@/types"
+import { Group, Route, RouteFilter } from "@/types"
 
 const actions: ActionTree<OrderRoutingState, RootState> = {
   async fetchOrderRoutingGroups({ commit }) {
@@ -50,6 +50,33 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     }
   },
 
+  async updateRoutingGroup({ commit, state }, payload) {
+    let routingGroups = JSON.parse(JSON.stringify(state.groups))
+
+    try {
+      const resp = await OrderRoutingService.updateRoutingGroup(payload);
+
+      if(!hasError(resp) && resp.data.routingGroupId) {
+        routingGroups.map((group: Group) => {
+          if(group.routingGroupId === resp.data.routingGroupId) {
+            group.description = payload.description
+          }
+        })
+        showToast("Rounting group information updated")
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      logger.error(err);
+    }
+
+    if(routingGroups.length) {
+      routingGroups = sortSequence(routingGroups)
+    }
+
+    commit(types.ORDER_ROUTING_GROUPS_UPDATED, routingGroups)
+  },
+
   async setCurrentRoutingGroupId({ commit }, payload) {
     commit(types.ORDER_ROUTING_CURRENT_GROUP_UPDATED, payload)
   },
@@ -80,6 +107,64 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
   },
 
+  async createOrderRouting({ commit, state }, payload) {
+    let orderRoutings = JSON.parse(JSON.stringify(state.routes))
+
+    try {
+      const resp = await OrderRoutingService.createOrderRouting(payload)
+
+      if(!hasError(resp) && resp?.data.orderRoutingId) {
+        orderRoutings.push({
+          ...payload,
+          orderRoutingId: resp.data.orderRoutingId
+        })
+        showToast('New Order Routing Created')
+      }
+    } catch(err) {
+      showToast("Failed to create order routing")
+      logger.error('err', err)
+    }
+
+    if(orderRoutings.length) {
+      orderRoutings = sortSequence(orderRoutings)
+    }
+
+    commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
+  },
+
+  async updateOrderRouting({ commit, state }, payload) {
+    let orderRoutings = JSON.parse(JSON.stringify(state.routes))
+    const field: Route[keyof Route] = payload.fieldToUpdate
+
+    const params = {
+      orderRoutingId: payload.orderRoutingId,
+      [field]: payload.value  // only one field can be updated once for orderRouting
+    }
+
+    try {
+      const resp = await OrderRoutingService.updateOrderRouting(params);
+
+      if(!hasError(resp) && resp.data.orderRoutingId) {
+        orderRoutings.map((routing: Route) => {
+          if(routing.orderRoutingId === resp.data.orderRoutingId) {
+            routing[field] = payload.value
+          }
+        })
+        showToast("Order routing information updated")
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      logger.error(err);
+    }
+
+    if(orderRoutings.length) {
+      orderRoutings = sortSequence(orderRoutings)
+    }
+
+    commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
+  },
+
   async fetchRoutingRules({ commit }, orderRoutingId) {
     let routingRules = [] as any;
     // filter groups on the basis of productStoreId
@@ -144,33 +229,6 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     commit(types.ORDER_ROUTING_FILTERS_UPDATED, routingFilters)
   },
 
-  async updateRoutingGroup({ commit, state }, payload) {
-    let routingGroups = JSON.parse(JSON.stringify(state.groups))
-
-    try {
-      const resp = await OrderRoutingService.updateRoutingGroup(payload);
-
-      if(!hasError(resp) && resp.data.routingGroupId) {
-        routingGroups.map((group: Group) => {
-          if(group.routingGroupId === resp.data.routingGroupId) {
-            group.description = payload.description
-          }
-        })
-        showToast("Rounting group information updated")
-      } else {
-        throw resp.data
-      }
-    } catch(err) {
-      logger.error(err);
-    }
-
-    if(routingGroups.length) {
-      routingGroups = sortSequence(routingGroups)
-    }
-
-    commit(types.ORDER_ROUTING_GROUPS_UPDATED, routingGroups)
-  },
-
   async fetchRuleConditions({ commit }, routingRuleId) {
     let ruleConditions = [] as any;
     // filter groups on the basis of productStoreId
diff --git a/src/types/index.ts b/src/types/index.ts
index a216dee..cd12740 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -34,7 +34,8 @@ type Route = {
   description: string,
   createdByUser: string,
   createdDate: string,
-  lastUpdatedStamp: string
+  lastUpdatedStamp: string,
+  [key: string]: string | number
 }
 
 type Rule = {
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 7dae7e3..d5782ad 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -19,21 +19,26 @@
                 <ion-icon :icon="addCircleOutline" />
               </ion-button>
             </ion-list-header>
-            <ion-card v-for="routing in getActiveAndDraftOrderRoutings()" :key="routing.orderRoutingId" @click="redirect(routing.orderRoutingId)">
-              <ion-item lines="full">
-                <ion-label>
-                  <h1>{{ routing.routingName }}</h1>
-                </ion-label>
-                <ion-chip>{{ `${routing.sequenceNum}/4` }}</ion-chip>
-              </ion-item>
-              <ion-item>
-                <ion-badge :color="routingStatus[routing.statusId]?.color">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
-                <ion-button fill="clear" color="medium" slot="end">
-                  {{ "Archive" }}
-                  <ion-icon :icon="archiveOutline" />
-                </ion-button>
-              </ion-item>
-            </ion-card>
+            <ion-reorder-group @ionItemReorder="doReorder($event)" :disabled="false">
+              <ion-card v-for="routing in routingsForReorder" :key="routing.orderRoutingId" @click="redirect(routing.orderRoutingId)">
+                <ion-item lines="full">
+                  <ion-label>
+                    <h1>{{ routing.routingName }}</h1>
+                  </ion-label>
+                  <ion-chip outline>
+                    <ion-label>{{ `${routing.sequenceNum}/4` }}</ion-label>
+                    <ion-reorder></ion-reorder>
+                  </ion-chip>
+                </ion-item>
+                <ion-item>
+                  <ion-badge :color="routingStatus[routing.statusId]?.color">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
+                  <ion-button fill="clear" color="medium" slot="end">
+                    {{ "Archive" }}
+                    <ion-icon :icon="archiveOutline" />
+                  </ion-button>
+                </ion-item>
+              </ion-card>
+            </ion-reorder-group>
           </ion-list>
           <div>
             <ion-item lines="none">
@@ -89,13 +94,12 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter, alertController } from "@ionic/vue";
+import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, onIonViewWillEnter, alertController } from "@ionic/vue";
 import { addCircleOutline, archiveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
-import { computed, defineProps } from "vue";
+import { computed, defineProps, ref } from "vue";
 import { Group, Route } from "@/types";
-import { OrderRoutingService } from "@/services/RoutingService";
 
 const router = useRouter();
 const store = useStore();
@@ -107,12 +111,17 @@ const props = defineProps({
 })
 
 const routingStatus = JSON.parse(process.env?.VUE_APP_ROUTE_STATUS_ENUMS as string)
+let routingsToUpdate = ref([])
+let initialRoutingsOrder = ref([])
+let routingsForReorder = ref([])
 
 const currentRoutingGroup = computed((): Group => store.getters["orderRouting/getCurrentRoutingGroup"])
 const orderRoutings = computed(() => store.getters["orderRouting/getOrderRoutings"])
 
 onIonViewWillEnter(async () => {
   await store.dispatch("orderRouting/fetchOrderRoutings", props.routingGroupId)
+  initialRoutingsOrder.value = JSON.parse(JSON.stringify(getActiveAndDraftOrderRoutings()))
+  routingsForReorder.value = JSON.parse(JSON.stringify(getActiveAndDraftOrderRoutings()))
 
   // On refresh, the groups list is removed thus resulting is not fetching the current group information
   if(!currentRoutingGroup.value.routingGroupId) {
@@ -141,6 +150,11 @@ async function createOrderRoute() {
   })
 
   newRouteAlert.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;
+    }
+
     const routingName = result.data?.values?.routingName;
     if(routingName && props.routingGroupId) {
       // TODO: check for the default value of params
@@ -153,7 +167,7 @@ async function createOrderRoute() {
         description: ""
       }
 
-      await OrderRoutingService.createOrderRouting(payload)
+      await store.dispatch("orderRouting/createOrderRouting", payload)
     }
   })
 
@@ -199,6 +213,36 @@ async function updateGroupDescription() {
 
   return newRouteAlert.present();
 }
+
+function findRoutingsDiff(previousSeq: any, updatedSeq: any) {
+  const diffSeq: any = Object.keys(previousSeq).reduce((diff, key) => {
+    if (updatedSeq[key].orderRoutingId === previousSeq[key].orderRoutingId) return diff
+    return {
+      ...diff,
+      [key]: updatedSeq[key]
+    }
+  }, {})
+  return diffSeq;
+}
+
+function doReorder(event: CustomEvent) {
+  const previousSeq = JSON.parse(JSON.stringify(initialRoutingsOrder.value))
+
+  // returns the updated sequence after reordering
+  const updatedSeq = event.detail.complete(JSON.parse(JSON.stringify(routingsForReorder.value)));
+
+  let diffSeq = findRoutingsDiff(previousSeq, updatedSeq)
+
+  const updatedSeqenceNum = previousSeq.map((routing: Route) => routing.sequenceNum)
+  Object.keys(diffSeq).map((key: any) => {
+    diffSeq[key].sequenceNum = updatedSeqenceNum[key]
+  })
+
+  diffSeq = Object.keys(diffSeq).map((key) => diffSeq[key])
+
+  routingsForReorder.value = updatedSeq
+  routingsToUpdate.value = diffSeq
+}
 </script>
 
 <style scoped>

From baa8658179a04480a49b3ee26203b876ffd2150b Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Jan 2024 12:23:45 +0530
Subject: [PATCH 2/9] Improved: route number on UI

---
 src/views/BrokeringRoute.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index d5782ad..6f467b8 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -20,13 +20,13 @@
               </ion-button>
             </ion-list-header>
             <ion-reorder-group @ionItemReorder="doReorder($event)" :disabled="false">
-              <ion-card v-for="routing in routingsForReorder" :key="routing.orderRoutingId" @click="redirect(routing.orderRoutingId)">
+              <ion-card v-for="(routing, index) in routingsForReorder" :key="routing.orderRoutingId" @click="redirect(routing.orderRoutingId)">
                 <ion-item lines="full">
                   <ion-label>
                     <h1>{{ routing.routingName }}</h1>
                   </ion-label>
                   <ion-chip outline>
-                    <ion-label>{{ `${routing.sequenceNum}/4` }}</ion-label>
+                    <ion-label>{{ `${index}/4` }}</ion-label>
                     <ion-reorder></ion-reorder>
                   </ion-chip>
                 </ion-item>

From ed773e2fba6a00ab631ea11e1536088606aa42b3 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Jan 2024 14:22:32 +0530
Subject: [PATCH 3/9] Implemented: support to display archived orderRoutings
 and added empty state for the same

---
 src/components/ArchivedRoutingModal.vue | 52 +++++++++++++++++++++++++
 src/theme/variables.css                 | 17 ++++++++
 src/views/BrokeringRoute.vue            | 13 ++++++-
 3 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ArchivedRoutingModal.vue

diff --git a/src/components/ArchivedRoutingModal.vue b/src/components/ArchivedRoutingModal.vue
new file mode 100644
index 0000000..f35efb1
--- /dev/null
+++ b/src/components/ArchivedRoutingModal.vue
@@ -0,0 +1,52 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ "Archived Routes" }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  
+  <ion-content>
+    <ion-list>
+      <ion-item v-for="routing in props.archivedRoutings" :key="routing.orderRoutingId">
+        <ion-label>{{ routing.routingName }}</ion-label>
+        <ion-button slot="end" fill="outline" color="medium">{{ "Unarchive" }}</ion-button>
+      </ion-item>
+    </ion-list>
+    <p class="empty-state" v-if="!(props as any).archivedRoutings.length">
+      {{ "No archived routings" }}
+    </p>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from "@ionic/vue";
+import { closeOutline } from "ionicons/icons";
+import { defineProps } from "vue";
+
+const props = defineProps({
+  archivedRoutings: {
+    required: true
+  }
+})
+
+function closeModal() {
+  modalController.dismiss({ dismissed: true });
+}
+</script>
diff --git a/src/theme/variables.css b/src/theme/variables.css
index bec267e..b41b219 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -254,6 +254,23 @@ http://ionicframework.com/docs/theming/ */
   }
 }
 
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.empty-state > img {
+  object-fit: contain;
+}
+
+.empty-state > p {
+  text-align: center;
+}
+
 @media (prefers-color-scheme: dark) {
   ion-chip > ion-icon {
     color: var(--ion-color-dark);
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 6f467b8..c2440ca 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -41,7 +41,7 @@
             </ion-reorder-group>
           </ion-list>
           <div>
-            <ion-item lines="none">
+            <ion-item button lines="none" @click="openArchivedRoutingModal()">
               <ion-icon slot="start" :icon="archiveOutline" />
               <ion-label>{{ "Archive" }}</ion-label>
               <ion-badge color="medium">{{ getArchivedOrderRoutings().length }}{{ " rules" }}</ion-badge>
@@ -94,12 +94,13 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, onIonViewWillEnter, alertController } from "@ionic/vue";
+import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter } from "@ionic/vue";
 import { addCircleOutline, archiveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps, ref } from "vue";
 import { Group, Route } from "@/types";
+import ArchivedRoutingModal from "@/components/ArchivedRoutingModal.vue"
 
 const router = useRouter();
 const store = useStore();
@@ -243,6 +244,14 @@ function doReorder(event: CustomEvent) {
   routingsForReorder.value = updatedSeq
   routingsToUpdate.value = diffSeq
 }
+
+async function openArchivedRoutingModal() {
+  const archivedRoutingModal = await modalController.create({
+    component: ArchivedRoutingModal,
+    componentProps: { archivedRoutings: getArchivedOrderRoutings() }
+  })
+  archivedRoutingModal.present();
+}
 </script>
 
 <style scoped>

From e35e12fb7eb279fcfb4fa299730e07a6b1d9cd78 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Jan 2024 15:16:35 +0530
Subject: [PATCH 4/9] Implemented: support to archive an route and fixed wrong
 number being displayed

---
 src/store/modules/orderRouting/actions.ts | 23 ++++++++++++-----
 src/views/BrokeringRoute.vue              | 31 ++++++++++++++++++-----
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/store/modules/orderRouting/actions.ts b/src/store/modules/orderRouting/actions.ts
index 0ed1e32..50f2dc5 100644
--- a/src/store/modules/orderRouting/actions.ts
+++ b/src/store/modules/orderRouting/actions.ts
@@ -109,32 +109,38 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
 
   async createOrderRouting({ commit, state }, payload) {
     let orderRoutings = JSON.parse(JSON.stringify(state.routes))
+    let orderRoutingId = ''
 
     try {
       const resp = await OrderRoutingService.createOrderRouting(payload)
 
       if(!hasError(resp) && resp?.data.orderRoutingId) {
+        orderRoutingId = resp.data.orderRoutingId
         orderRoutings.push({
           ...payload,
-          orderRoutingId: resp.data.orderRoutingId
+          orderRoutingId
         })
         showToast('New Order Routing Created')
       }
+
+      // Sort the routings and update the state only on success
+      if(orderRoutings.length) {
+        orderRoutings = sortSequence(orderRoutings)
+      }
+
+      commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
     } catch(err) {
       showToast("Failed to create order routing")
       logger.error('err', err)
     }
 
-    if(orderRoutings.length) {
-      orderRoutings = sortSequence(orderRoutings)
-    }
-
-    commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
+    return orderRoutingId;
   },
 
   async updateOrderRouting({ commit, state }, payload) {
     let orderRoutings = JSON.parse(JSON.stringify(state.routes))
     const field: Route[keyof Route] = payload.fieldToUpdate
+    let orderRoutingId = ''
 
     const params = {
       orderRoutingId: payload.orderRoutingId,
@@ -145,8 +151,9 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
       const resp = await OrderRoutingService.updateOrderRouting(params);
 
       if(!hasError(resp) && resp.data.orderRoutingId) {
+        orderRoutingId = resp.data.orderRoutingId
         orderRoutings.map((routing: Route) => {
-          if(routing.orderRoutingId === resp.data.orderRoutingId) {
+          if(routing.orderRoutingId === orderRoutingId) {
             routing[field] = payload.value
           }
         })
@@ -155,6 +162,7 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
         throw resp.data
       }
     } catch(err) {
+      showToast("Failed to update order routing")
       logger.error(err);
     }
 
@@ -163,6 +171,7 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     }
 
     commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
+    return orderRoutingId;
   },
 
   async fetchRoutingRules({ commit }, orderRoutingId) {
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index c2440ca..9291873 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -20,19 +20,19 @@
               </ion-button>
             </ion-list-header>
             <ion-reorder-group @ionItemReorder="doReorder($event)" :disabled="false">
-              <ion-card v-for="(routing, index) in routingsForReorder" :key="routing.orderRoutingId" @click="redirect(routing.orderRoutingId)">
+              <ion-card v-for="(routing, index) in routingsForReorder" :key="routing.orderRoutingId" @click.prevent="redirect(routing.orderRoutingId)">
                 <ion-item lines="full">
                   <ion-label>
                     <h1>{{ routing.routingName }}</h1>
                   </ion-label>
                   <ion-chip outline>
-                    <ion-label>{{ `${index}/4` }}</ion-label>
+                    <ion-label>{{ `${index + 1}/4` }}</ion-label>
                     <ion-reorder></ion-reorder>
                   </ion-chip>
                 </ion-item>
                 <ion-item>
                   <ion-badge :color="routingStatus[routing.statusId]?.color">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
-                  <ion-button fill="clear" color="medium" slot="end">
+                  <ion-button fill="clear" color="medium" slot="end" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ARCHIVED')">
                     {{ "Archive" }}
                     <ion-icon :icon="archiveOutline" />
                   </ion-button>
@@ -121,8 +121,8 @@ const orderRoutings = computed(() => store.getters["orderRouting/getOrderRouting
 
 onIonViewWillEnter(async () => {
   await store.dispatch("orderRouting/fetchOrderRoutings", props.routingGroupId)
-  initialRoutingsOrder.value = JSON.parse(JSON.stringify(getActiveAndDraftOrderRoutings()))
-  routingsForReorder.value = JSON.parse(JSON.stringify(getActiveAndDraftOrderRoutings()))
+
+  initializeOrderRoutings();
 
   // On refresh, the groups list is removed thus resulting is not fetching the current group information
   if(!currentRoutingGroup.value.routingGroupId) {
@@ -130,6 +130,11 @@ onIonViewWillEnter(async () => {
   }
 })
 
+function initializeOrderRoutings() {
+  initialRoutingsOrder.value = JSON.parse(JSON.stringify(getActiveAndDraftOrderRoutings()))
+  routingsForReorder.value = JSON.parse(JSON.stringify(getActiveAndDraftOrderRoutings()))
+}
+
 async function redirect(orderRoutingId: string) {
   await store.dispatch('orderRouting/setCurrentOrderRoutingId', orderRoutingId)
   router.push(`${orderRoutingId}/rules`)
@@ -164,11 +169,16 @@ async function createOrderRoute() {
         routingGroupId: props.routingGroupId,
         statusId: "ROUTING_DRAFT",
         routingName,
-        sequenceNum: 0,
+        sequenceNum: orderRoutings.value.length && orderRoutings.value[orderRoutings.value.length - 1].sequenceNum >= 0 ? orderRoutings.value[orderRoutings.value.length - 1].sequenceNum + 5 : 0,  // added check for `>= 0` as sequenceNum can be 0 which will result in again setting the new route seqNum to 0
         description: ""
       }
 
-      await store.dispatch("orderRouting/createOrderRouting", payload)
+      const orderRoutingId = await store.dispatch("orderRouting/createOrderRouting", payload)
+
+      // update the routing order for reordering
+      if(orderRoutingId) {
+        initializeOrderRoutings();
+      }
     }
   })
 
@@ -252,6 +262,13 @@ async function openArchivedRoutingModal() {
   })
   archivedRoutingModal.present();
 }
+
+async function updateOrderRouting(routing: Route, fieldToUpdate: string, value: string) {
+  const orderRoutingId = await store.dispatch("orderRouting/updateOrderRouting", { orderRoutingId: routing.orderRoutingId, fieldToUpdate, value })
+  if(orderRoutingId) {
+    initializeOrderRoutings()
+  }
+}
 </script>
 
 <style scoped>

From 1a8250d4387c12efd2e9e5e0cd74471d25934a61 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Jan 2024 16:01:33 +0530
Subject: [PATCH 5/9] Improved: support to unarchive route from modal

When moving route from unarchive status we move that route to draft status
Defined emitter to update all the routes after unarchiving a route
---
 src/components/ArchivedRoutingModal.vue | 22 ++++++++++++++++++----
 src/views/BrokeringRoute.vue            |  9 ++++++++-
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/ArchivedRoutingModal.vue b/src/components/ArchivedRoutingModal.vue
index f35efb1..a0f2508 100644
--- a/src/components/ArchivedRoutingModal.vue
+++ b/src/components/ArchivedRoutingModal.vue
@@ -12,18 +12,20 @@
   
   <ion-content>
     <ion-list>
-      <ion-item v-for="routing in props.archivedRoutings" :key="routing.orderRoutingId">
+      <ion-item v-for="routing in routings" :key="routing.orderRoutingId">
         <ion-label>{{ routing.routingName }}</ion-label>
-        <ion-button slot="end" fill="outline" color="medium">{{ "Unarchive" }}</ion-button>
+        <ion-button slot="end" fill="outline" color="medium" @click="updateOrderRouting(routing, 'statusId', 'ROUTING_DRAFT')">{{ "Unarchive" }}</ion-button>
       </ion-item>
     </ion-list>
-    <p class="empty-state" v-if="!(props as any).archivedRoutings.length">
+    <p class="empty-state" v-if="!routings.length">
       {{ "No archived routings" }}
     </p>
   </ion-content>
 </template>
 
 <script setup lang="ts">
+import emitter from "@/event-bus";
+import { Route } from "@/types";
 import {
   IonButton,
   IonButtons,
@@ -38,15 +40,27 @@ import {
   modalController,
 } from "@ionic/vue";
 import { closeOutline } from "ionicons/icons";
-import { defineProps } from "vue";
+import { defineProps, ref } from "vue";
+import { useStore } from "vuex";
 
+const store = useStore()
 const props = defineProps({
   archivedRoutings: {
     required: true
   }
 })
 
+let routings = ref(props.archivedRoutings)
+
 function closeModal() {
   modalController.dismiss({ dismissed: true });
 }
+
+async function updateOrderRouting(routing: Route, fieldToUpdate: string, value: string) {
+  const orderRoutingId = await store.dispatch("orderRouting/updateOrderRouting", { orderRoutingId: routing.orderRoutingId, fieldToUpdate, value })
+  if(orderRoutingId) {
+    routings.value = (routings.value as any).filter((routing: Route) => routing.orderRoutingId !== orderRoutingId)
+    emitter.emit("initializeOrderRoutings")
+  }
+}
 </script>
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 9291873..2935d2d 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -94,13 +94,14 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter } from "@ionic/vue";
+import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter, onIonViewWillLeave } from "@ionic/vue";
 import { addCircleOutline, archiveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps, ref } from "vue";
 import { Group, Route } from "@/types";
 import ArchivedRoutingModal from "@/components/ArchivedRoutingModal.vue"
+import emitter from "@/event-bus";
 
 const router = useRouter();
 const store = useStore();
@@ -128,6 +129,12 @@ onIonViewWillEnter(async () => {
   if(!currentRoutingGroup.value.routingGroupId) {
     await store.dispatch("orderRouting/fetchOrderRoutingGroups")
   }
+
+  emitter.on("initializeOrderRoutings", initializeOrderRoutings)
+})
+
+onIonViewWillLeave(() => {
+  emitter.off("initializeOrderRoutings", initializeOrderRoutings)
 })
 
 function initializeOrderRoutings() {

From 92fa17b77a4c5cbbdf786f47dd9f882fb31c5a79 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Jan 2024 16:17:28 +0530
Subject: [PATCH 6/9] Improved: UI to change the status from draft to active
 and make the whole chip of route used for reorder

---
 src/views/BrokeringRoute.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 2935d2d..53ac88d 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -25,13 +25,18 @@
                   <ion-label>
                     <h1>{{ routing.routingName }}</h1>
                   </ion-label>
-                  <ion-chip outline>
-                    <ion-label>{{ `${index + 1}/4` }}</ion-label>
-                    <ion-reorder></ion-reorder>
-                  </ion-chip>
+                  <ion-reorder>
+                    <ion-chip outline>
+                      <ion-label>{{ `${index + 1}/4` }}</ion-label>
+                      <ion-icon :icon="reorderTwoOutline"/>
+                    </ion-chip>
+                  </ion-reorder>
                 </ion-item>
                 <ion-item>
                   <ion-badge :color="routingStatus[routing.statusId]?.color">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
+                  <ion-button v-if="routing.statusId === 'ROUTING_DRAFT'" fill="clear" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ACTIVE')">
+                    <ion-icon :icon="arrowForwardOutline" slot="icon-only"/>
+                  </ion-button>
                   <ion-button fill="clear" color="medium" slot="end" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ARCHIVED')">
                     {{ "Archive" }}
                     <ion-icon :icon="archiveOutline" />
@@ -95,7 +100,7 @@
 
 <script setup lang="ts">
 import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter, onIonViewWillLeave } from "@ionic/vue";
-import { addCircleOutline, archiveOutline, timeOutline, timerOutline } from "ionicons/icons"
+import { addCircleOutline, archiveOutline, arrowForwardOutline, reorderTwoOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps, ref } from "vue";

From 71e670ab455334f264cd1001b900719ec8a84f36 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Jan 2024 18:46:50 +0530
Subject: [PATCH 7/9] Improved: support to change the routing rule status by
 clicking on badge instead of using a separate icon

---
 src/views/BrokeringRoute.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 53ac88d..2ca4ead 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -27,16 +27,14 @@
                   </ion-label>
                   <ion-reorder>
                     <ion-chip outline>
-                      <ion-label>{{ `${index + 1}/4` }}</ion-label>
+                      <ion-label>{{ `${index + 1}/${routingsForReorder.length}` }}</ion-label>
                       <ion-icon :icon="reorderTwoOutline"/>
                     </ion-chip>
                   </ion-reorder>
                 </ion-item>
                 <ion-item>
-                  <ion-badge :color="routingStatus[routing.statusId]?.color">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
-                  <ion-button v-if="routing.statusId === 'ROUTING_DRAFT'" fill="clear" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ACTIVE')">
-                    <ion-icon :icon="arrowForwardOutline" slot="icon-only"/>
-                  </ion-button>
+                  <ion-badge v-if="routing.statusId === 'ROUTING_DRAFT'" :color="routingStatus[routing.statusId]?.color" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ACTIVE')">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
+                  <ion-badge v-else :color="routingStatus[routing.statusId]?.color">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
                   <ion-button fill="clear" color="medium" slot="end" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ARCHIVED')">
                     {{ "Archive" }}
                     <ion-icon :icon="archiveOutline" />
@@ -100,7 +98,7 @@
 
 <script setup lang="ts">
 import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter, onIonViewWillLeave } from "@ionic/vue";
-import { addCircleOutline, archiveOutline, arrowForwardOutline, reorderTwoOutline, timeOutline, timerOutline } from "ionicons/icons"
+import { addCircleOutline, archiveOutline, reorderTwoOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps, ref } from "vue";

From 5a6293328c7c0e20550c6a0dd3ff736a92b345cc Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Jan 2024 19:07:12 +0530
Subject: [PATCH 8/9] Improved: UI to add a fab button to save the routing runs

---
 src/views/BrokeringRoute.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 2ca4ead..5942419 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -92,13 +92,18 @@
           </aside>
         </section>
       </div>
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button :disabled="!routingsToUpdate.length">
+          <ion-icon :icon="saveOutline" />
+        </ion-fab-button>
+      </ion-fab>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter, onIonViewWillLeave } from "@ionic/vue";
-import { addCircleOutline, archiveOutline, reorderTwoOutline, timeOutline, timerOutline } from "ionicons/icons"
+import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter, onIonViewWillLeave } from "@ionic/vue";
+import { addCircleOutline, archiveOutline, reorderTwoOutline, saveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps, ref } from "vue";

From 854de22f4b6bbf1f9717b65625dd369bdedc9a2a Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 19 Jan 2024 19:44:21 +0530
Subject: [PATCH 9/9] Improved: support to edit the group description inline

---
 src/views/BrokeringRoute.vue | 48 +++++++++++-------------------------
 1 file changed, 15 insertions(+), 33 deletions(-)

diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 5942419..8727dfd 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -55,14 +55,13 @@
           <main>
             <ion-item lines="none">
               {{ "Description" }}
-              <ion-button fill="clear" slot="end" @click="updateGroupDescription()">
-                {{ "Edit" }}
+              <ion-button fill="clear" slot="end" @click="isDescUpdating ? updateGroupDescription() : (isDescUpdating = !isDescUpdating)">
+                {{ isDescUpdating ? "Save" : "Edit" }}
               </ion-button>
             </ion-item>
             <ion-item lines="none">
-              <ion-label>
-                {{ currentRoutingGroup.description ? currentRoutingGroup.description : "No description available" }}
-              </ion-label>
+              <ion-textarea v-if="isDescUpdating" aria-label="description" v-model="description"></ion-textarea>
+              <ion-label v-else>{{ description }}</ion-label>
             </ion-item>
           </main>
           <aside>
@@ -102,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter, onIonViewWillLeave } from "@ionic/vue";
+import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTextarea, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter, onIonViewWillLeave } from "@ionic/vue";
 import { addCircleOutline, archiveOutline, reorderTwoOutline, saveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
@@ -124,6 +123,8 @@ const routingStatus = JSON.parse(process.env?.VUE_APP_ROUTE_STATUS_ENUMS as stri
 let routingsToUpdate = ref([])
 let initialRoutingsOrder = ref([])
 let routingsForReorder = ref([])
+let description = ref('')
+let isDescUpdating = ref(false)
 
 const currentRoutingGroup = computed((): Group => store.getters["orderRouting/getCurrentRoutingGroup"])
 const orderRoutings = computed(() => store.getters["orderRouting/getOrderRoutings"])
@@ -138,6 +139,7 @@ onIonViewWillEnter(async () => {
     await store.dispatch("orderRouting/fetchOrderRoutingGroups")
   }
 
+  description.value = currentRoutingGroup.value.description ? currentRoutingGroup.value.description : "No description available"
   emitter.on("initializeOrderRoutings", initializeOrderRoutings)
 })
 
@@ -209,35 +211,15 @@ function getArchivedOrderRoutings() {
 }
 
 async function updateGroupDescription() {
-  const newRouteAlert = await alertController.create({
-    header: "Add Group Description",
-    buttons: [{
-      text: "Cancel",
-      role: "cancel"
-    }, {
-      text: "Save"
-    }],
-    inputs: [{
-      type: "textarea",
-      name: "groupDescription",
-      placeholder: "description"
-    }]
-  })
-
-  newRouteAlert.onDidDismiss().then(async (result: any) => {
-    const groupDescription = result.data?.values?.groupDescription;
-    if(groupDescription && props.routingGroupId) {
-      // TODO: check for the default value of params
-      const payload = {
-        routingGroupId: props.routingGroupId,
-        description: groupDescription,
-      }
-
-      await store.dispatch("orderRouting/updateRoutingGroup", payload)
+  if(description.value && props.routingGroupId) {
+    const payload = {
+      routingGroupId: props.routingGroupId,
+      description: description.value,
     }
-  })
 
-  return newRouteAlert.present();
+    await store.dispatch("orderRouting/updateRoutingGroup", payload)
+    isDescUpdating.value = false
+  }
 }
 
 function findRoutingsDiff(previousSeq: any, updatedSeq: any) {