Implemented: support to fetch the route and rule status from server(#50)

.env.example

@@ -8,5 +8,4 @@ VUE_APP_RULE_ENUMS={"QUEUE":{"id":"OIP_QUEUE","code":"facilityId"},"SHIPPING_MET
 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={"RM_AUTO_CANCEL_DATE":{"id":"ORA_RM_CANCEL_DATE","code":"RM_AUTO_CANCEL_DATE"},"AUTO_CANCEL_DAYS":{"id":"ORA_AUTO_CANCEL_DAYS","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_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"},"RULE_DRAFT":{"id":"RULE_DRAFT","desc":"Draft","code":"DRAFT","color":"medium"},"RULE_ACTIVE":{"id":"RULE_ACTIVE","desc":"Active","code":"ACTIVE","color":"success"},"RULE_ARCHIVED":{"id":"RULE_ARCHIVED","desc":"Acrhived","code":"ARCHIVED","color":"warning"}}
 VUE_APP_CRON_EXPRESSIONS={"Every 30 minutes":"0 */30 * ? * *","Hourly":"0 0 * ? * *","Every six hours":"0 0 */6 ? * *","Every day at midnight":"0 0 0 * * ?"}

src/services/UtilService.ts

@@ -32,6 +32,14 @@ const fetchFacilityGroups = async (payload: any): Promise<any> => {
   });
 }
 
+const fetchStatusInformation = async (payload: any): Promise<any> => {
+  return api({
+    url: `status`,
+    method: "GET",
+    params: payload
+  });
+}
+
 const checkOmsConnection = async (): Promise<any> => {
   return api({
     url: `checkOmsConnection`,
@@ -45,4 +53,5 @@ export const UtilService = {
   fetchFacilities,
   fetchFacilityGroups,
   fetchShippingMethods,
+  fetchStatusInformation
 }

src/store/modules/util/UtilState.ts

@@ -10,4 +10,5 @@ export default interface UtilState {
   shippingMethods: object;
   facilityGroups: object;
   isOmsConnectionExist: boolean | undefined;
+  statuses: any
 }

src/store/modules/util/actions.ts

@@ -136,6 +136,34 @@ const actions: ActionTree<UtilState, RootState> = {
     commit(types.UTIL_OMS_CONNECTION_STATUS_UPDATED, isOmsConnectionExist)
   },
 
+  async fetchStatusInformation({ commit, state }) {
+    let statuses = JSON.parse(JSON.stringify(state.statuses))
+
+    // Do not fetch statuses again if already available
+    if(Object.keys(statuses).length) {
+      return;
+    }
+
+    const payload = {
+      parentTypeId: "ROUTING_STATUS"
+    }
+
+    try {
+      const resp = await UtilService.fetchStatusInformation(payload);
+
+      if(!hasError(resp)) {
+        statuses = resp.data.reduce((statues: any, status: any) => {
+          statues[status.statusId] = status
+          return statues
+        }, {})
+      }
+    } catch(err) {
+      logger.error("Failed to fetch the status information")
+    }
+
+    commit(types.UTIL_STATUSES_UPDATED, statuses)
+  },
+
   async clearUtilState({ commit }) {
     commit(types.UTIL_CLEARED)
   }

src/store/modules/util/getters.ts

@@ -17,6 +17,9 @@ const getters: GetterTree<UtilState, RootState> = {
   },
   isOmsConnectionExist(state) {
     return state.isOmsConnectionExist
+  },
+  getStatusDesc: (state) => (id: any) => {
+    return state.statuses[id]?.description ? state.statuses[id]?.description : id
   }
 }
 

src/store/modules/util/index.ts

@@ -12,7 +12,8 @@ const utilModule: Module<UtilState, RootState> = {
     facilities: {},
     shippingMethods: {},
     facilityGroups: {},
-    isOmsConnectionExist: undefined
+    isOmsConnectionExist: undefined,
+    statuses: {}
   },
   getters,
   actions,

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

@@ -4,4 +4,5 @@ export const UTIL_FACILITIES_UPDATED = SN_UTIL + "/FACILITIES_UPDATED"
 export const UTIL_SHIPPING_METHOD_UPDATED = SN_UTIL + "/SHIPPING_METHOD_UPDATED"
 export const UTIL_FACILITY_GROUP_UPDATED = SN_UTIL + "/FACILITY_GROUP_UPDATED"
 export const UTIL_OMS_CONNECTION_STATUS_UPDATED = SN_UTIL + "/OMS_CONNECTION_STATUS_UPDATED"
+export const UTIL_STATUSES_UPDATED = SN_UTIL + "/STATUSES_UPDATED"
 export const UTIL_CLEARED = SN_UTIL + "/CLEARED"

src/store/modules/util/mutations.ts

@@ -24,6 +24,10 @@ const mutations: MutationTree<UtilState> = {
     state.shippingMethods = {}
     state.facilityGroups = {}
     state.isOmsConnectionExist = undefined
+    state.statuses = {}
+  },
+  [types.UTIL_STATUSES_UPDATED](state, payload) {
+    state.statuses = payload
   }
 }
 export default mutations;

src/views/BrokeringQuery.vue

@@ -86,8 +86,8 @@
           <ion-item lines="none">
             <!-- TODO: add support to archive a rule, add rule status Desc, and add color option -->
             <ion-label>{{ "Rule Status" }}</ion-label>
-            <ion-badge :color="statusEnums[selectedRoutingRule.statusId]?.color" v-if="selectedRoutingRule.statusId === 'RULE_DRAFT'" @click="updateRuleStatus(selectedRoutingRule.routingRuleId, 'RULE_ACTIVE')">{{ statusEnums[selectedRoutingRule.statusId]?.desc }}</ion-badge>
-            <ion-badge :color="statusEnums[selectedRoutingRule.statusId]?.color" v-else>{{ statusEnums[selectedRoutingRule.statusId]?.desc }}</ion-badge>
+            <ion-badge v-if="selectedRoutingRule.statusId === 'RULE_DRAFT'" @click="updateRuleStatus(selectedRoutingRule.routingRuleId, 'RULE_ACTIVE')">{{ getStatusDesc(selectedRoutingRule.statusId) }}</ion-badge>
+            <ion-badge color="success" v-else>{{ getStatusDesc(selectedRoutingRule.statusId) }}</ion-badge>
           </ion-item>
           <section class="filters">
             <ion-card>
@@ -212,7 +212,7 @@ import { useRouter } from "vue-router";
 import { computed, defineProps, ref } from "vue";
 import store from "@/store";
 import AddInventoryFilterOptionsModal from "@/components/AddInventoryFilterOptionsModal.vue";
-import { showToast, sortSequence } from "@/utils";
+import { sortSequence } from "@/utils";
 import { Rule } from "@/types";
 import AddOrderRouteFilterOptions from "@/components/AddOrderRouteFilterOptions.vue"
 import PromiseFilterPopover from "@/components/PromiseFilterPopover.vue"
@@ -231,7 +231,6 @@ const props = defineProps({
 const ruleEnums = JSON.parse(process.env?.VUE_APP_RULE_ENUMS as string)
 const actionEnums = JSON.parse(process.env?.VUE_APP_RULE_ACTION_ENUMS as string)
 const conditionFilterEnums = JSON.parse(process.env?.VUE_APP_RULE_FILTER_ENUMS as string)
-const statusEnums = JSON.parse(process.env?.VUE_APP_STATUS_ENUMS as string)
 
 const currentRoutingGroup: any = computed(() => store.getters["orderRouting/getCurrentRoutingGroup"])
 const currentRouting = computed(() => store.getters["orderRouting/getCurrentOrderRouting"])
@@ -240,6 +239,7 @@ const facilities = computed(() => store.getters["util/getFacilities"])
 const enums = computed(() => store.getters["util/getEnums"])
 const shippingMethods = computed(() => store.getters["util/getShippingMethods"])
 const facilityGroups = computed(() => store.getters["util/getFacilityGroups"])
+const getStatusDesc = computed(() => (id: string) => store.getters["util/getStatusDesc"](id))
 
 let ruleActionType = ref('')
 let selectedRoutingRule = ref({}) as any

src/views/BrokeringRoute.vue

@@ -33,8 +33,8 @@
                   </ion-reorder>
                 </ion-item>
                 <ion-item lines="none">
-                  <ion-badge v-if="routing.statusId === 'ROUTING_DRAFT'" :color="routingStatus[routing.statusId]?.color" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ACTIVE')">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
-                  <ion-badge v-else :color="routingStatus[routing.statusId]?.color">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
+                  <ion-badge v-if="routing.statusId === 'ROUTING_DRAFT'" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ACTIVE')">{{ getStatusDesc(routing.statusId) }}</ion-badge>
+                  <ion-badge v-else color="success">{{ getStatusDesc(routing.statusId) }}</ion-badge>
                   <ion-button fill="clear" color="medium" slot="end" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ARCHIVED')">
                     {{ "Archive" }}
                     <ion-icon :icon="archiveOutline" />
@@ -135,7 +135,6 @@ const props = defineProps({
   }
 })
 
-const routingStatus = JSON.parse(process.env?.VUE_APP_STATUS_ENUMS as string)
 const cronExpressions = JSON.parse(process.env?.VUE_APP_CRON_EXPRESSIONS as string)
 let routingsForReorder = ref([])
 let description = ref("")
@@ -148,9 +147,11 @@ let orderRoutings = ref([]) as any
 const currentRoutingGroup: any = computed((): Group => store.getters["orderRouting/getCurrentRoutingGroup"])
 const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
 const isOmsConnectionExist = computed(() => store.getters["util/isOmsConnectionExist"])
+const getStatusDesc = computed(() => (id: string) => store.getters["util/getStatusDesc"](id))
 
 onIonViewWillEnter(async () => {
   await store.dispatch("orderRouting/fetchCurrentRoutingGroup", props.routingGroupId)
+  store.dispatch("util/fetchStatusInformation")
 
   job.value = currentRoutingGroup.value["schedule"] ? JSON.parse(JSON.stringify(currentRoutingGroup.value))["schedule"] : {}
   orderRoutings.value = currentRoutingGroup.value["routings"] ? JSON.parse(JSON.stringify(currentRoutingGroup.value))["routings"] : []