Implemented: support for fetching the order routing dynamically(#21)

src/router/index.ts

@@ -38,8 +38,9 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import("@/views/BrokeringRuns.vue")
       },
       {
-        path: "brokering/route",
-        component: () => import("@/views/BrokeringRoute.vue")
+        path: "brokering/:routingGroupId/routes",
+        component: () => import("@/views/BrokeringRoute.vue"),
+        props: true
       },
       {
         path: "brokering/query",

src/services/RoutingService.ts

@@ -16,7 +16,16 @@ const createRoutingGroup = async (payload: any): Promise<any> => {
   })
 }
 
+const fetchOrderRoutings = async (payload: any): Promise<any> => {
+  return api({
+    url: `groups/${payload.routingGroupId}/routings`,
+    method: "GET",
+    query: payload
+  });
+}
+
 export const OrderRoutingService = {
   createRoutingGroup,
+  fetchOrderRoutings,
   fetchRoutingGroups
 }

src/store/modules/orderRouting/actions.ts

@@ -47,6 +47,36 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
       showToast("Failed to create brokering run")
       logger.error('err', err)
     }
+  },
+
+  async setCurrentRoutingGroupId({ commit }, payload) {
+    commit(types.ORDER_ROUTING_CURRENT_GROUP_UPDATED, payload)
+  },
+
+  async fetchOrderRoutings({ commit }, routingGroupId) {
+    let orderRoutings = [] as any;
+    // filter groups on the basis of productStoreId
+    const payload = {
+      routingGroupId
+    }
+
+    try {
+      const resp = await OrderRoutingService.fetchOrderRoutings(payload);
+
+      if(!hasError(resp) && resp.data.length) {
+        orderRoutings = resp.data
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      logger.error(err);
+    }
+
+    if(orderRoutings.length) {
+      orderRoutings = sortSequence(orderRoutings)
+    }
+
+    commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
   }
 }
 

src/store/modules/orderRouting/getters.ts

@@ -1,10 +1,18 @@
 import { GetterTree } from "vuex"
 import OrderRoutingState from "./OrderRoutingState"
 import RootState from "@/store/RootState"
+import { Group } from "@/types"
 
 const getters: GetterTree<OrderRoutingState, RootState> = {
   getRoutingGroups(state) {
     return state.groups
+  },
+  getOrderRoutings(state) {
+    return state.routes
+  },
+  getCurrentRoutingGroup(state) {
+    const currentRoutingGroup = state.groups?.find((group: Group) => group.routingGroupId === state.currentGroupId)
+    return currentRoutingGroup ? currentRoutingGroup : {}
   }
 }
 

src/store/modules/orderRouting/index.ts

@@ -11,7 +11,7 @@ const orderRoutingModule: Module<OrderRoutingState, RootState> = {
     groups: [],
     routes: [],
     rule: [],
-    currentGroupId: '',
+    currentGroupId: '', // choosing only to save id and not whole object, as when updating the state we don't need to care updating the state on two different places
     currentRouteId: ''
   },
   getters,

src/store/modules/orderRouting/mutation-types.ts

@@ -1,6 +1,6 @@
 export const SN_ORDER_ROUTING = "orderRouting"
 export const ORDER_ROUTING_GROUPS_UPDATED = SN_ORDER_ROUTING + "/GROUPS_UPDATED"
-export const ORDER_ROUTING_ROUTES_UPDATED = SN_ORDER_ROUTING + "/ROUTES_UPDATED"
+export const ORDER_ROUTINGS_UPDATED = SN_ORDER_ROUTING + "/ROUTES_UPDATED"
 export const ORDER_ROUTING_RULE_UPDATED = SN_ORDER_ROUTING + "/RULE_UPDATED"
 export const ORDER_ROUTING_CURRENT_GROUP_UPDATED = SN_ORDER_ROUTING + "/CURRENT_GROUP_UPDATED"
 export const ORDER_ROUTING_CURRENT_ROUTE_UPDATED = SN_ORDER_ROUTING + "/CURRENT_ROUTE_UPDATED"

src/store/modules/orderRouting/mutations.ts

@@ -6,7 +6,7 @@ const mutations: MutationTree<OrderRoutingState> = {
   [types.ORDER_ROUTING_GROUPS_UPDATED](state, payload) {
     state.groups = payload
   },
-  [types.ORDER_ROUTING_ROUTES_UPDATED](state, payload) {
+  [types.ORDER_ROUTINGS_UPDATED](state, payload) {
     state.routes = payload
   },
   [types.ORDER_ROUTING_RULE_UPDATED](state, payload) {

src/views/BrokeringRoute.vue

@@ -18,15 +18,15 @@
               <ion-icon :icon="addCircleOutline" />
             </ion-button>
           </ion-list-header>
-          <ion-card v-for="card in [1, 2, 3, 4]" ref="cards" :key="card" @click="router.push('query')">
+          <ion-card v-for="routing in orderRoutings" :key="routing.orderRoutingId" @click="router.push('query')">
             <ion-item lines="full">
               <ion-label>
-                <h1>{{ "Order lookup name" }}</h1>
+                <h1>{{ routing.routingName }}</h1>
               </ion-label>
-              <ion-chip>{{ `${card}/4` }}</ion-chip>
+              <ion-chip>{{ `${routing.sequenceNum}/4` }}</ion-chip>
             </ion-item>
-            <ion-item ref="item">
-              <ion-badge>{{ "BADGE" }}</ion-badge>
+            <ion-item>
+              <ion-badge>{{ routing.statusId }}</ion-badge>
               <ion-button fill="clear" color="medium" slot="end">
                 {{ "Archive" }}
               </ion-button>
@@ -43,7 +43,7 @@
             </ion-item>
             <ion-item lines="none">
               <ion-label>
-                {{ "This is what a long description of the routing rule that the user has created looks like. This also includes an edit button where the user can edit their description inline" }}
+                {{ currentRoutingGroup.description ? currentRoutingGroup.description : "No description available" }}
               </ion-label>
             </ion-item>
           </main>
@@ -57,19 +57,19 @@
               <ion-item>
                 <ion-icon slot="start" :icon="timeOutline"/>
                 <ion-label>{{ "Run time" }}</ion-label>
-                <ion-label slot="end">{{ "3:00 PM EST" }}</ion-label>
+                <!-- <ion-label slot="end">{{ currentRoutingGroup.runTime || "-" }}</ion-label> -->
               </ion-item>
               <ion-item>
                 <ion-icon slot="start" :icon="timerOutline"/>
                 <ion-label>{{ "Schedule" }}</ion-label>
-                <ion-label slot="end">{{ "Every 5 minutes" }}</ion-label>
+                <!-- <ion-label slot="end">{{ currentRoutingGroup.frequency || "-" }}</ion-label> -->
               </ion-item>
             </ion-card>
             <ion-item>
-              {{ "Created at <time>" }}
+              {{ `Created at ${currentRoutingGroup.createdDate || "-"}` }}
             </ion-item>
             <ion-item>
-              {{ "Updated at <time>" }}
+              {{ `Updated at ${currentRoutingGroup.lastUpdatedStamp || "-"}` }}
             </ion-item>
           </aside>
         </section>
@@ -79,11 +79,33 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+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 { useRouter } from "vue-router";
+import { useStore } from "vuex";
+import { computed, defineProps } from "vue";
+import { Group } from "@/types";
 
 const router = useRouter();
+const store = useStore();
+const props = defineProps({
+  routingGroupId: {
+    type: String,
+    required: true
+  }
+})
+
+const currentRoutingGroup = computed((): Group => store.getters["orderRouting/getCurrentRoutingGroup"])
+const orderRoutings = computed(() => store.getters["orderRouting/getOrderRoutings"])
+
+onIonViewWillEnter(async () => {
+  await store.dispatch("orderRouting/fetchOrderRoutings", props.routingGroupId)
+
+  // On refresh, the groups list is removed thus resulting is not fetching the current group information
+  if(!currentRoutingGroup.value.routingGroupId) {
+    await store.dispatch("orderRouting/fetchOrderRoutingGroups")
+  }
+})
 </script>
 
 <style scoped>

src/views/BrokeringRuns.vue

@@ -16,7 +16,7 @@
     <ion-content>
       <main v-if="groups.length">
         <section>
-          <ion-card v-for="group in groups" :key="group.routingGroupId" @click="router.push('brokering/route')">
+          <ion-card v-for="group in groups" :key="group.routingGroupId" @click="redirect(group.routingGroupId)">
             <ion-card-header>
               <ion-card-title>
                 {{ group.groupName }}
@@ -85,6 +85,11 @@ async function addNewRun() {
   return newRunAlert.present();
 }
 
+async function redirect(routingGroupId: string) {
+  await store.dispatch('orderRouting/setCurrentRoutingGroupId', routingGroupId)
+  router.push(`brokering/${routingGroupId}/routes`)
+}
+
 </script>
 
 <style scoped>