Merge pull request #29 from ymaheshwari1/feat/route

Implemented support to create new route, display the archive section at the sidebar bottom, and edit group desc

.env.example

@@ -7,4 +7,5 @@ VUE_APP_DEFAULT_LOG_LEVEL="error"
 VUE_APP_RULE_ENUMS={"FILTER":"ENTCT_FILTER","SORT":"ENTCT_SORT_BY","QUEUE":{"id":"OIP_QUEUE","code":"facilityId"},"SHIPPING_METHOD":{"id":"OIP_SHIP_METH_TYPE","code":"shipmentMethodTypeId"},"PRIORITY":{"id":"OIP_PRIORITY","code":"priority"},"PROMISE_DATE":{"id":"OIP_PROMISE_DATE","code":"promiseDaysCutoff"},"SALES_CHANNEL":{"id":"OIP_SALES_CHANNEL","code":"salesChannelEnumId"},"SHIP_BY":{"id":"OSP_SHIP_BY","code":"shipBeforeDate"},"SHIP_AFTER":{"id":"OSP_SHIP_AFTER","code":"shipAfterDate"},"ORDER_DATE":{"id":"OSP_ORDER_DATE","code":"orderDate"},"SHIPPING_METHOD_SORT":{"id":"OSP_SHIP_METH","code":"deliveryDays"}}
 VUE_APP_RULE_FILTER_ENUMS={"FACILITY_GROUP":{"id":"IIP_FACILITY_GROUP","code":"facilityGroupId"},"PROXIMITY":{"id":"IIP_PROXIMITY","code":"distance"},"BRK_SAFETY_STOCK":{"id":"IIP_BRK_SFTY_STOCK","code":"brokeringSafetyStock"},"MEASUREMENT_SYSTEM":{"id":"IIP_MSMNT_SYSTEM","code":"measurementSystem"}}
 VUE_APP_RULE_SORT_ENUMS={"PROXIMITY":{"id":"ISP_PROXIMITY","code":"distance"},"INV_BALANCE":{"id":"ISP_INV_BAL","code":"inventoryForAllocation"},"CUSTOMER_SEQ":{"id":"ISP_CUST_SEQ","code":"facilitySequence"}}
-VUE_APP_RULE_ACTION_ENUMS={"AUTO_CANCEL_DAYS":{"id":"ORA_AUTO_CANCEL_DATE","code":"ADD_AUTO_CANCEL_DATE"},"NEXT_RULE":{"id":"ORA_NEXT_RULE","code":"NEXT_RULE"},"MOVE_TO_QUEUE":{"id":"ORA_MV_TO_QUEUE","code":"MOVE_TO_QUEUE"}}
+VUE_APP_RULE_ACTION_ENUMS={"AUTO_CANCEL_DAYS":{"id":"ORA_AUTO_CANCEL_DATE","code":"ADD_AUTO_CANCEL_DATE"},"NEXT_RULE":{"id":"ORA_NEXT_RULE","code":"NEXT_RULE"},"MOVE_TO_QUEUE":{"id":"ORA_MV_TO_QUEUE","code":"MOVE_TO_QUEUE"}}
+VUE_APP_ROUTE_STATUS_ENUMS={"ROUTING_DRAFT":{"id":"ROUTING_DRAFT","desc":"Draft","code":"DRAFT","color":"medium"},"ROUTING_ACTIVE":{"id":"ROUTING_ACTIVE","desc":"Active","code":"ACTIVE","color":"success"},"ROUTING_ARCHIVED":{"id":"ROUTING_ARCHIVED","desc":"Archived","code":"ARCHIVED","color":"warning"}}

src/services/RoutingService.ts

@@ -19,6 +19,14 @@ const createRoutingGroup = async (payload: any): Promise<any> => {
   })
 }
 
+const updateRoutingGroup = async (payload: any): Promise<any> => {
+  return api({
+    url: `groups/${payload.routingGroupId}`,
+    method: "POST",
+    data: payload
+  })
+}
+
 const fetchOrderRoutings = async (payload: any): Promise<any> => {
   return api({
     url: `groups/${payload.routingGroupId}/routings`,
@@ -47,6 +55,26 @@ const createRoutingRule = async (payload: any): Promise<any> => {
   return routingRuleId
 }
 
+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
+}
+
 const fetchRoutingRules = async (payload: any): Promise<any> => {
   return api({
     url: `routings/${payload.orderRoutingId}/rules`,
@@ -80,12 +108,14 @@ const fetchRuleActions = async (payload: any): Promise<any> => {
 }
 
 export const OrderRoutingService = {
+  createOrderRouting,
   createRoutingGroup,
   createRoutingRule,
   fetchOrderRoutings,
   fetchRoutingFilters,
   fetchRoutingGroups,
   fetchRoutingRules,
   fetchRuleActions,
-  fetchRuleConditions
+  fetchRuleConditions,
+  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 { RouteFilter } from "@/types"
+import { Group, RouteFilter } from "@/types"
 
 const actions: ActionTree<OrderRoutingState, RootState> = {
   async fetchOrderRoutingGroups({ commit }) {
@@ -144,6 +144,33 @@ 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/views/BrokeringRoute.vue

@@ -10,34 +10,44 @@
     </ion-header>
     <ion-content>
       <div>
-        <ion-list>
-          <ion-list-header ref="listHeader">
-            <ion-label>{{ "Order batches" }}</ion-label>
-            <ion-button color="primary" fill="clear">
-              {{ "New" }}
-              <ion-icon :icon="addCircleOutline" />
-            </ion-button>
-          </ion-list-header>
-          <ion-card v-for="routing in orderRoutings" :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>{{ routing.statusId }}</ion-badge>
-              <ion-button fill="clear" color="medium" slot="end">
-                {{ "Archive" }}
+        <div>
+          <ion-list>
+            <ion-list-header>
+              <ion-label>{{ "Order batches" }}</ion-label>
+              <ion-button color="primary" fill="clear" @click="createOrderRoute">
+                {{ "New" }}
+                <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-list>
+          <div>
+            <ion-item lines="none">
+              <ion-icon slot="start" :icon="archiveOutline" />
+              <ion-label>{{ "Archive" }}</ion-label>
+              <ion-badge color="medium">{{ getArchivedOrderRoutings().length }}{{ " rules" }}</ion-badge>
             </ion-item>
-          </ion-card>
-        </ion-list>
+          </div>
+        </div>
         <section class="ion-padding">
           <main>
             <ion-item lines="none">
               {{ "Description" }}
-              <ion-button fill="clear" slot="end">
+              <ion-button fill="clear" slot="end" @click="updateGroupDescription()">
                 {{ "Edit" }}
               </ion-button>
             </ion-item>
@@ -79,12 +89,13 @@
 </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 } from "@ionic/vue";
-import { addCircleOutline, timeOutline, timerOutline } from "ionicons/icons"
+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 { addCircleOutline, archiveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps } from "vue";
-import { Group } from "@/types";
+import { Group, Route } from "@/types";
+import { OrderRoutingService } from "@/services/RoutingService";
 
 const router = useRouter();
 const store = useStore();
@@ -95,6 +106,8 @@ const props = defineProps({
   }
 })
 
+const routingStatus = JSON.parse(process.env?.VUE_APP_ROUTE_STATUS_ENUMS as string)
+
 const currentRoutingGroup = computed((): Group => store.getters["orderRouting/getCurrentRoutingGroup"])
 const orderRoutings = computed(() => store.getters["orderRouting/getOrderRoutings"])
 
@@ -111,6 +124,81 @@ async function redirect(orderRoutingId: string) {
   await store.dispatch('orderRouting/setCurrentOrderRoutingId', orderRoutingId)
   router.push(`${orderRoutingId}/rules`)
 }
+
+async function createOrderRoute() {
+  const newRouteAlert = await alertController.create({
+    header: "New Order Route",
+    buttons: [{
+      text: "Cancel",
+      role: "cancel"
+    }, {
+      text: "Save"
+    }],
+    inputs: [{
+      name: "routingName",
+      placeholder: "Route name"
+    }]
+  })
+
+  newRouteAlert.onDidDismiss().then(async (result: any) => {
+    const routingName = result.data?.values?.routingName;
+    if(routingName && props.routingGroupId) {
+      // TODO: check for the default value of params
+      const payload = {
+        orderRoutingId: "",
+        routingGroupId: props.routingGroupId,
+        statusId: "ROUTING_DRAFT",
+        routingName,
+        sequenceNum: 0,
+        description: ""
+      }
+
+      await OrderRoutingService.createOrderRouting(payload)
+    }
+  })
+
+  return newRouteAlert.present();
+}
+
+function getActiveAndDraftOrderRoutings() {
+  return orderRoutings.value.filter((routing: Route) => routing.statusId !== 'ROUTING_ARCHIVED')
+}
+
+function getArchivedOrderRoutings() {
+  return orderRoutings.value.filter((routing: Route) => routing.statusId === 'ROUTING_ARCHIVED')
+}
+
+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)
+    }
+  })
+
+  return newRouteAlert.present();
+}
 </script>
 
 <style scoped>
@@ -129,7 +217,10 @@ ion-content > div {
   height: 100%;
 }
 
-ion-content > div > ion-list {
+ion-content > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   border-right: 1px solid #92949C;
 }
 </style>