Implemented: support to display all the history in a modal and update…

…d en.json file(#64)

src/components/GroupHistoryModal.vue

@@ -0,0 +1,56 @@
+<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("Group history") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-item v-for="history in groupHistory" :key="history.jobRunId">
+        <ion-label>
+          <h3>{{ getTime(history.startTime) }}</h3>
+          <p>{{ getDate(history.startTime) }}</p>
+        </ion-label>
+        <ion-badge color="dark">{{ getTime(history.endTime - history.startTime) }}</ion-badge>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+import { translate } from "@/i18n";
+import {
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from "@ionic/vue";
+import { closeOutline } from "ionicons/icons";
+import { defineProps } from "vue";
+import { getDate, getTime } from "@/utils";
+
+defineProps({
+  groupHistory: {
+    required: true,
+    default: {}
+  }
+})
+
+function closeModal() {
+  modalController.dismiss();
+}
+</script>

src/locales/en.json

@@ -48,6 +48,7 @@
   "Filters": "Filters",
   "facility group": "facility group",
   "Group": "Group",
+  "Group history": "Group history",
   "greater": "greater",
   "greater than or equal to": "greater than or equal to",
   "High": "High",
@@ -75,6 +76,7 @@
   "New Run": "New Run",
   "New routing created": "New routing created",
   "Next rule": "Next rule",
+  "No available history for this group": "No available history for this group",
   "No archived routings": "No archived routings",
   "No runs scheduled": "No runs scheduled",
   "No time zone found": "No time zone found",
@@ -139,5 +141,6 @@
   "Updating inventory rules and filters": "Updating inventory rules and filters",
   "Username": "Username",
   "Version:": "Version: ",
+  "View All": "View All",
   "value": "value"
 }

src/views/BrokeringRoute.vue

@@ -68,14 +68,15 @@
             </ion-item>
             <ion-item lines="none">
               <h2>{{ translate("History") }}</h2>
+              <ion-button v-if="groupHistory.length" fill="clear" @click="showGroupHistory" slot="end">{{ translate("View All") }}</ion-button>
             </ion-item>
             <p class="empty-state" v-if="!groupHistory.length">{{ translate("No available history for this group") }}</p>
-            <ion-item v-for="routing in groupHistory" :key="routing.routingGroupId">
+            <ion-item v-else>
               <ion-label>
-                <h3>{{ getTime(routing.startTime) }}</h3>
-                <p>{{ getDate(routing.startTime) }}</p>
+                <h3>{{ getTime(groupHistory[0].startTime) }}</h3>
+                <p>{{ getDate(groupHistory[0].startTime) }}</p>
               </ion-label>
-              <ion-badge color="dark">{{ getTime(routing.endTime - routing.startTime) }}</ion-badge>
+              <ion-badge color="dark">{{ getTime(groupHistory[0].endTime - groupHistory[0].startTime) }}</ion-badge>
             </ion-item>
           </main>
           <aside>
@@ -147,6 +148,7 @@ import { DateTime } from "luxon";
 import { hasError, getDate, getDateAndTime, getTime, getTimeFromSeconds, showToast, sortSequence } from "@/utils";
 import emitter from "@/event-bus";
 import { translate } from "@/i18n";
+import GroupHistoryModal from "@/components/GroupHistoryModal.vue"
 
 const router = useRouter();
 const store = useStore();
@@ -589,6 +591,15 @@ async function updateRoutingGroup(payload: any) {
   emitter.emit("dismissLoader")
   return routingGroupId
 }
+
+async function showGroupHistory() {
+  const groupHistoryModal = await modalController.create({
+    component: GroupHistoryModal,
+    componentProps: { groupHistory: groupHistory.value }
+  })
+
+  groupHistoryModal.present();
+}
 </script>
 
 <style scoped>