Merge pull request #34 from ymaheshwari1/feat/route

Fixed: case that on routing page refresh the routing information is not available

src/services/RoutingService.ts

@@ -1,6 +1,5 @@
 import api from "@/api"
 import logger from "@/logger";
-import store from "@/store";
 import { hasError, showToast } from "@/utils";
 
 const fetchRoutingGroups = async (payload: any): Promise<any> => {
@@ -11,6 +10,13 @@ const fetchRoutingGroups = async (payload: any): Promise<any> => {
   });
 }
 
+const fetchRoutingGroup = async (routingGroupId: string): Promise<any> => {
+  return api({
+    url: `groups/${routingGroupId}`,
+    method: "GET"
+  });
+}
+
 const createRoutingGroup = async (payload: any): Promise<any> => {
   return api({
     url: "groups",
@@ -109,6 +115,7 @@ export const OrderRoutingService = {
   createRoutingRule,
   fetchOrderRoutings,
   fetchRoutingFilters,
+  fetchRoutingGroup,
   fetchRoutingGroups,
   fetchRoutingRules,
   fetchRuleActions,

src/store/modules/orderRouting/OrderRoutingState.ts

@@ -1,10 +1,10 @@
-import { RouteFilter } from "@/types";
+import { Group, RouteFilter } from "@/types";
 
 export default interface OrderRoutingState {
   groups: Array<any>; // runs
   routes: Array<any>;
   rules: Array<any>;
-  currentGroupId: string;
+  currentGroup: any;
   currentRouteId: string;
   currentRouteFilters: {
     [key: string]: {  // conditionTypeEnumId as key

src/store/modules/orderRouting/actions.ts

@@ -77,7 +77,31 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     commit(types.ORDER_ROUTING_GROUPS_UPDATED, routingGroups)
   },
 
-  async setCurrentRoutingGroupId({ commit }, payload) {
+  async fetchCurrentRoutingGroup({ dispatch, state }, routingGroupId) {
+    const current = state.currentGroup
+    if(current.routingGroupId) {
+      dispatch("setCurrentRoutingGroup", current)
+      return;
+    }
+
+    let currentGroup = {}
+
+    try {
+      const resp = await OrderRoutingService.fetchRoutingGroup(routingGroupId);
+
+      if(!hasError(resp) && resp.data) {
+        currentGroup = resp.data
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      logger.error(err);
+    }
+
+    dispatch("setCurrentRoutingGroup", currentGroup)
+  },
+
+  async setCurrentRoutingGroup({ commit }, payload) {
     commit(types.ORDER_ROUTING_CURRENT_GROUP_UPDATED, payload)
   },
 

src/store/modules/orderRouting/getters.ts

@@ -14,8 +14,7 @@ const getters: GetterTree<OrderRoutingState, RootState> = {
     return state.rules
   },
   getCurrentRoutingGroup(state) {
-    const currentRoutingGroup = state.groups?.find((group: Group) => group.routingGroupId === state.currentGroupId)
-    return currentRoutingGroup ? currentRoutingGroup : {}
+    return JSON.parse(JSON.stringify(state.currentGroup))
   },
   getCurrentOrderRouting(state) {
     const orderRouting = state.routes?.find((route: Route) => route.orderRoutingId === state.currentRouteId)

src/store/modules/orderRouting/index.ts

@@ -4,14 +4,15 @@ import mutations from "./mutations"
 import { Module } from "vuex"
 import OrderRoutingState from "./OrderRoutingState"
 import RootState from "@/store/RootState"
+import { Route } from "@/types"
 
 const orderRoutingModule: Module<OrderRoutingState, RootState> = {
   namespaced: true,
   state: {
     groups: [],
     routes: [],
     rules: [],
-    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
+    currentGroup: {},
     currentRouteId: '',
     currentRouteFilters: {},
     ruleConditions: {},

src/store/modules/orderRouting/mutations.ts

@@ -12,8 +12,8 @@ const mutations: MutationTree<OrderRoutingState> = {
   [types.ORDER_ROUTING_RULES_UPDATED](state, payload) {
     state.rules = payload
   },
-  [types.ORDER_ROUTING_CURRENT_GROUP_UPDATED](state, groupId) {
-    state.currentGroupId = groupId
+  [types.ORDER_ROUTING_CURRENT_GROUP_UPDATED](state, payload) {
+    state.currentGroup = payload
   },
   [types.ORDER_ROUTING_CURRENT_ROUTE_UPDATED](state, routeId) {
     state.currentRouteId = routeId

src/views/BrokeringRoute.vue

@@ -105,7 +105,7 @@ import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader,
 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";
+import { computed, defineProps, onMounted, ref } from "vue";
 import { Group, Route } from "@/types";
 import ArchivedRoutingModal from "@/components/ArchivedRoutingModal.vue"
 import emitter from "@/event-bus";
@@ -130,15 +130,10 @@ const currentRoutingGroup = computed((): Group => store.getters["orderRouting/ge
 const orderRoutings = computed(() => store.getters["orderRouting/getOrderRoutings"])
 
 onIonViewWillEnter(async () => {
-  await store.dispatch("orderRouting/fetchOrderRoutings", props.routingGroupId)
+  await Promise.all([store.dispatch("orderRouting/fetchOrderRoutings", props.routingGroupId), store.dispatch("orderRouting/fetchCurrentRoutingGroup", props.routingGroupId)])
 
   initializeOrderRoutings();
 
-  // 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")
-  }
-
   description.value = currentRoutingGroup.value.description ? currentRoutingGroup.value.description : "No description available"
   emitter.on("initializeOrderRoutings", initializeOrderRoutings)
 })

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="redirect(group.routingGroupId)">
+          <ion-card v-for="group in groups" :key="group.routingGroupId" @click="redirect(group)">
             <ion-card-header>
               <ion-card-title>
                 {{ group.groupName }}
@@ -46,6 +46,7 @@
 </template>
 
 <script setup lang="ts">
+import { Group } from "@/types";
 import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToolbar, alertController, onIonViewWillEnter } from "@ionic/vue";
 import { addOutline } from "ionicons/icons"
 import { computed } from "vue";
@@ -85,9 +86,9 @@ async function addNewRun() {
   return newRunAlert.present();
 }
 
-async function redirect(routingGroupId: string) {
-  await store.dispatch('orderRouting/setCurrentRoutingGroupId', routingGroupId)
-  router.push(`brokering/${routingGroupId}/routes`)
+async function redirect(group: Group) {
+  await store.dispatch('orderRouting/setCurrentRoutingGroup', group)
+  router.push(`brokering/${group.routingGroupId}/routes`)
 }
 
 </script>