Implemented: support to display the routing history for each route(#85)

src/components/RoutingHistoryModal.vue

@@ -0,0 +1,80 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Routing history") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-item>
+        <ion-label>
+          <h1>{{ routingName }}</h1>
+          <p>{{ groupName }}</p>
+        </ion-label>
+        <ion-label slot="end">
+          {{ currentEComStore.productStoreId }}
+        </ion-label>
+      </ion-item>
+      <div class="empty-state" v-if="!routingHistory.length">
+        {{ translate("No available history for this route") }}
+      </div>
+      <div v-else>
+        <ion-item v-for="(history, index) in routingHistory" :key="index">
+          <ion-icon v-if="history.hasError === 'Y'" :icon="warningOutline" color="warning" slot="start" />
+          <ion-icon v-else :icon="checkmarkDoneOutline" slot="start"/>
+          <ion-label>{{ history.routingResult }}</ion-label>
+          <ion-label slot="end">{{ getDateAndTime(history.startDate) }}</ion-label>
+        </ion-item>
+      </div>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+import { translate } from "@/i18n";
+import store from "@/store";
+import { getDateAndTime } from "@/utils";
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from "@ionic/vue";
+import { checkmarkDoneOutline, closeOutline, warningOutline } from "ionicons/icons";
+import { computed, defineProps } from "vue";
+
+defineProps({
+  routingHistory: {
+    type: Array<any>,
+    required: true,
+    default: []
+  },
+  routingName: {
+    type: String,
+    default: "routing name"
+  },
+  groupName: {
+    type: String,
+    default: "group name"
+  }
+})
+
+const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
+
+function closeModal() {
+  modalController.dismiss();
+}
+</script>

src/locales/en.json

@@ -61,6 +61,7 @@
   "Job updated": "Job updated",
   "kms": "kms",
   "LEAVE": "LEAVE",
+  "Last run": "Last run",
   "Leave page": "Leave page",
   "Logging in...": "Logging in...",
   "Login": "Login",
@@ -79,6 +80,7 @@
   "New routing created": "New routing created",
   "Next rule": "Next rule",
   "No available history for this group": "No available history for this group",
+  "No available history for this route": "No available history for this route",
   "No archived routings": "No archived routings",
   "No runs scheduled": "No runs scheduled",
   "No time zone found": "No time zone found",
@@ -100,6 +102,7 @@
   "Queue": "Queue",
   "queue": "queue",
   "Rename": "Rename",
+  "Routing history": "Routing history",
   "Routing group information updated": "Routing group information updated",
   "Rule Status": "Rule Status",
   "Rule name": "Rule name",

src/views/BrokeringRoute.vue

@@ -35,12 +35,19 @@
                     </ion-chip>
                   </ion-reorder>
                 </ion-item>
+                <ion-item lines="full">
+                  <ion-icon :icon="timeOutline" slot="start" />
+                  <ion-label>{{ "Last run" }}</ion-label>
+                  <ion-chip outline @click.stop="openRoutingHistoryModal(routing.orderRoutingId, routing.routingName)">
+                    <ion-label>{{ routingHistory[routing.orderRoutingId] ? getDateAndTimeShort(routingHistory[routing.orderRoutingId][0].startDate) : "-" }}</ion-label>
+                  </ion-chip>
+                </ion-item>
                 <ion-item lines="none">
                   <ion-badge class="pointer" 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')">
                     {{ translate("Archive") }}
-                    <ion-icon :icon="archiveOutline" />
+                    <ion-icon slot="end" :icon="archiveOutline" />
                   </ion-button>
                 </ion-item>
               </ion-card>
@@ -149,6 +156,7 @@ import { hasError, getDate, getDateAndTime, getTime, getTimeFromSeconds, showToa
 import emitter from "@/event-bus";
 import { translate } from "@/i18n";
 import GroupHistoryModal from "@/components/GroupHistoryModal.vue"
+import RoutingHistoryModal from "@/components/RoutingHistoryModal.vue"
 
 const router = useRouter();
 const store = useStore();
@@ -168,6 +176,7 @@ let hasUnsavedChanges = ref(false)
 let job = ref({}) as any
 let orderRoutings = ref([]) as any
 let groupHistory = ref([]) as any
+let routingHistory = ref({}) as any
 
 const currentRoutingGroup: any = computed((): Group => store.getters["orderRouting/getCurrentRoutingGroup"])
 const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
@@ -177,6 +186,7 @@ const getStatusDesc = computed(() => (id: string) => store.getters["util/getStat
 onIonViewWillEnter(async () => {
   await store.dispatch("orderRouting/fetchCurrentRoutingGroup", props.routingGroupId)
   await fetchGroupHistory()
+  fetchRoutingHistory()
   store.dispatch("util/fetchStatusInformation")
 
   job.value = currentRoutingGroup.value["schedule"] ? JSON.parse(JSON.stringify(currentRoutingGroup.value))["schedule"] : {}
@@ -269,6 +279,39 @@ async function fetchGroupHistory() {
   }
 }
 
+async function fetchRoutingHistory() {
+  routingHistory.value = {}
+
+  if(!currentRoutingGroup.value?.jobName) {
+    return;
+  }
+
+  try {
+    const resp = await OrderRoutingService.fetchRoutingHistory(props.routingGroupId)
+
+    if(!hasError(resp)) {
+      // Sorting the history based on startTime, as we does not get the records in sorted order from api
+      const sortedRoutingHistory = resp.data.sort((a: any, b: any) => b.startDate - a.startDate)
+
+      routingHistory.value = sortedRoutingHistory.reduce((routings: any, routing: any) => {
+        if(routings[routing.orderRoutingId]) {
+          routings[routing.orderRoutingId].push(routing)
+        } else {
+          routings = {
+            ...routings,
+            [routing.orderRoutingId]: [routing]
+          }
+        }
+        return routings
+      }, {})
+    } else {
+      throw resp.data;
+    }
+  } catch(err) {
+    logger.error(err)
+  }
+}
+
 async function saveSchedule() {
   // If this is the first time then we are fetching the omsConnection status, as if the value of isOmsConnectionExist value is a boolean it means we have previously fetched the connection status
   if(typeof isOmsConnectionExist.value !== "boolean") {
@@ -496,6 +539,15 @@ async function openArchivedRoutingModal() {
   archivedRoutingModal.present();
 }
 
+async function openRoutingHistoryModal(orderRoutingId: string, routingName: string) {
+  const routingHistoryModal = await modalController.create({
+    component: RoutingHistoryModal,
+    componentProps: { routingHistory: routingHistory.value[orderRoutingId], routingName, groupName: currentRoutingGroup.value.groupName }
+  })
+
+  routingHistoryModal.present();
+}
+
 async function updateOrderRouting(routing: Route, fieldToUpdate: string, value: string) {
   orderRoutings.value.map((route: any) => {
     if(route.orderRoutingId === routing.orderRoutingId) {
@@ -600,6 +652,11 @@ async function showGroupHistory() {
 
   groupHistoryModal.present();
 }
+
+function getDateAndTimeShort(time: any) {
+  // format: hh:mm(localized 24-hour time) date/month
+  return time ? DateTime.fromMillis(time).toFormat("T dd/LL") : "-";
+}
 </script>
 
 <style scoped>