Implemented: support to reorder, change route status, display and change archived route status and improved UI

src/components/ArchivedRoutingModal.vue

@@ -0,0 +1,66 @@
+<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 routings" :key="routing.orderRoutingId">
+        <ion-label>{{ routing.routingName }}</ion-label>
+        <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="!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,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from "@ionic/vue";
+import { closeOutline } from "ionicons/icons";
+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>

src/services/RoutingService.ts

@@ -1,6 +1,6 @@
 import api from "@/api"
 import logger from "@/logger";
 import store from "@/store";
 import { hasError, showToast } from "@/utils";
 
 const fetchRoutingGroups = async (payload: any): Promise<any> => {
@@ -35,6 +35,14 @@
   });
 }
 
+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 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 @@
   fetchRoutingRules,
   fetchRuleActions,
   fetchRuleConditions,
+  updateOrderRouting,
   updateRoutingGroup
 }

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,73 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
   },
 
+  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
+        })
+        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)
+    }
+
+    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,
+      [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) {
+        orderRoutingId = resp.data.orderRoutingId
+        orderRoutings.map((routing: Route) => {
+          if(routing.orderRoutingId === orderRoutingId) {
+            routing[field] = payload.value
+          }
+        })
+        showToast("Order routing information updated")
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      showToast("Failed to update order routing")
+      logger.error(err);
+    }
+
+    if(orderRoutings.length) {
+      orderRoutings = sortSequence(orderRoutings)
+    }
+
+    commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
+    return orderRoutingId;
+  },
+
   async fetchRoutingRules({ commit }, orderRoutingId) {
     let routingRules = [] as any;
     // filter groups on the basis of productStoreId
@@ -144,33 +238,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

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);

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 = {