Merge pull request #110 from ymaheshwari1/#106

Implemented: support to persist the selected routingRule on page refresh and after saving changes(#106)

src/store/index.ts

@@ -15,7 +15,7 @@ import orderRoutingModule from "./modules/orderRouting"
 const state: any = {}
 
 const persistState = createPersistedState({
-  paths: ["user", "util", "orderRouting.currentGroup"],
+  paths: ["user", "util", "orderRouting.currentGroup", "orderRouting.currentRuleId"],
   fetchBeforeUse: true
 })
 

src/store/modules/orderRouting/OrderRoutingState.ts

@@ -4,4 +4,5 @@ export default interface OrderRoutingState {
   currentGroup: any;
   currentRoute: any;
   routingHistory: any;
+  currentRuleId: string;
 }

src/store/modules/orderRouting/actions.ts

@@ -257,6 +257,10 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     return orderRoutingId
   },
 
+  async updateRoutingRuleId({ commit }, payload) {
+    commit(types.ORDER_ROUTING_CURRENT_RULE_UPDATED, payload)
+  },
+
   async createRoutingRule({ commit, state }, payload) {
     const currentRoute = JSON.parse(JSON.stringify(state.currentRoute))
     let routingRules = currentRoute.rules?.length ? JSON.parse(JSON.stringify(currentRoute.rules)) : []
@@ -370,7 +374,7 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     }
 
     commit(types.ORDER_ROUTING_RULES_UPDATED, rulesInformation)
-    return JSON.parse(JSON.stringify(rulesInformation[routingRuleId]))
+    return rulesInformation[routingRuleId] ? JSON.parse(JSON.stringify(rulesInformation[routingRuleId])) : {}
   },
 
   async updateRule({ dispatch }, payload) {

src/store/modules/orderRouting/getters.ts

@@ -17,6 +17,9 @@ const getters: GetterTree<OrderRoutingState, RootState> = {
   },
   getRoutingHistory(state) {
     return JSON.parse(JSON.stringify(state.routingHistory))
+  },
+  getCurrentRuleId(state) {
+    return state.currentRuleId
   }
 }
 

src/store/modules/orderRouting/index.ts

@@ -12,7 +12,8 @@ const orderRoutingModule: Module<OrderRoutingState, RootState> = {
     rules: {},
     currentGroup: {},
     currentRoute: {},
-    routingHistory: {}
+    routingHistory: {},
+    currentRuleId: ""
   },
   getters,
   actions,

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

@@ -4,4 +4,5 @@ export const ORDER_ROUTING_RULES_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"
 export const ORDER_ROUTING_HISTORY_UPDATED = SN_ORDER_ROUTING + "/ROUTING_HISTORY_UPDATED"
+export const ORDER_ROUTING_CURRENT_RULE_UPDATED = SN_ORDER_ROUTING + "/CURRENT_RULE_UPDATED"
 export const ORDER_ROUTING_CLEARED = SN_ORDER_ROUTING + "/CLEARED"

src/store/modules/orderRouting/mutations.ts

@@ -18,6 +18,9 @@ const mutations: MutationTree<OrderRoutingState> = {
   [types.ORDER_ROUTING_HISTORY_UPDATED](state, payload) {
     state.routingHistory = payload
   },
+  [types.ORDER_ROUTING_CURRENT_RULE_UPDATED](state, payload) {
+    state.currentRuleId = payload
+  },
   [types.ORDER_ROUTING_CLEARED](state) {
     state.groups = []
     state.rules = {}

src/views/BrokeringQuery.vue

@@ -85,7 +85,7 @@
         <div class="menu">
           <ion-list>
             <ion-reorder-group @ionItemReorder="doReorder($event)" :disabled="false">
-              <ion-item lines="full" v-for="rule in inventoryRules" :key="rule.routingRuleId && inventoryRules.length" :color="rule.routingRuleId === selectedRoutingRule.routingRuleId ? 'light' : ''" @click="fetchRuleInformation(rule.routingRuleId)" button>
+              <ion-item lines="full" v-for="rule in inventoryRules" :key="rule.routingRuleId && inventoryRules.length" :color="rule.routingRuleId === selectedRoutingRule?.routingRuleId ? 'light' : ''" @click="fetchRuleInformation(rule.routingRuleId)" button>
                 <ion-label>{{ rule.ruleName }}</ion-label>
                 <!-- Don't display reordering option when there is a single rule -->
                 <ion-reorder v-show="inventoryRules.length > 1" />
@@ -97,7 +97,7 @@
             <ion-icon :icon="addCircleOutline"/>
           </ion-button>
         </div>
-        <div v-if="selectedRoutingRule.routingRuleId">
+        <div v-if="selectedRoutingRule?.routingRuleId">
           <ion-card class="rule-info">
             <ion-item lines="none">
               <ion-label>
@@ -281,6 +281,7 @@ const enums = computed(() => store.getters["util/getEnums"])
 const shippingMethods = computed(() => store.getters["util/getShippingMethods"])
 const facilityGroups = computed(() => store.getters["util/getFacilityGroups"])
 const routingHistory = computed(() => store.getters["orderRouting/getRoutingHistory"])
+const currentRuleId = computed(() => store.getters["orderRouting/getCurrentRuleId"])
 
 let ruleActionType = ref("")
 let selectedRoutingRule = ref({}) as any
@@ -312,7 +313,7 @@ onIonViewWillEnter(async () => {
   // Added check to not fetch any rule related information as when a new route will be created no rule will be available thus no need to fetch any other information
   if(currentRouting.value["rules"]?.length) {
     inventoryRules.value = sortSequence(JSON.parse(JSON.stringify(currentRouting.value["rules"])))
-    await fetchRuleInformation(inventoryRules.value[0].routingRuleId);
+    await fetchRuleInformation(currentRuleId.value || inventoryRules.value[0].routingRuleId);
   }
 
   routingStatus.value = currentRouting.value.statusId
@@ -347,6 +348,8 @@ onBeforeRouteLeave(async (to) => {
     await alert.onDidDismiss();
     return canLeave;
   }
+  // clearning the selected ruleId whenever user tries to leave the page, we need to clear this id, as if user opens some other routing then the id will not be found which will result in an empty state scenario
+  store.dispatch("orderRouting/updateRoutingRuleId", "")
 })
 
 function getRouteIndex() {
@@ -400,6 +403,8 @@ async function fetchRuleInformation(routingRuleId: string) {
   // Changing the value to false, as when fetching the information initially or after changing the rule we should stop the process of name updation
   isRuleNameUpdating.value = false
 
+  await store.dispatch("orderRouting/updateRoutingRuleId", routingRuleId)
+
   // When clicking the same enum again do not fetch its information
   // TODO: check behaviour when creating a new rule, when no rule exist and when already some rule exist and a rule is open
   if(selectedRoutingRule.value.routingRuleId === routingRuleId) {
@@ -420,7 +425,12 @@ async function fetchRuleInformation(routingRuleId: string) {
   // Using currentRouting["rules"] deep-cloned object here, as we will update the change in rules with route changes and not with rules filter changes
   selectedRoutingRule.value = inventoryRules.value.find((rule: Rule) => rule.routingRuleId === routingRuleId)
 
-  initializeInventoryRules(JSON.parse(JSON.stringify(rulesInformation.value[routingRuleId])));
+  // Even after fetching the rule is not found then initializing the selectedRouting to empty object
+  if(!selectedRoutingRule.value) {
+    selectedRoutingRule.value = {}
+  }
+
+  initializeInventoryRules(rulesInformation.value[routingRuleId] ? JSON.parse(JSON.stringify(rulesInformation.value[routingRuleId])) : {});
 }
 
 async function addInventoryFilterOptions(parentEnumId: string, conditionTypeEnumId: string, label = "") {
@@ -1065,7 +1075,7 @@ async function save() {
   // Added check to not fetch any rule related information as when a new route will be created no rule will be available thus no need to fetch any other information
   if(currentRouting.value["rules"]?.length) {
     inventoryRules.value = sortSequence(JSON.parse(JSON.stringify(currentRouting.value["rules"])))
-    await fetchRuleInformation(inventoryRules.value[0].routingRuleId);
+    await fetchRuleInformation(currentRuleId.value);
   }
 
   hasUnsavedChanges.value = false