Merge pull request #127 from ymaheshwari1/#114

Improved: UI for run cards in case of different status(#114)
hotwax · Feb 19, 2024 · f114bf8 · f114bf8
2 parents 91425d6 + 1d9ddd6
commit f114bf8
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 15 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -28,6 +28,7 @@
   "Close": "Close",
   "Confirm": "Confirm",
   "Connection configuration is missing for oms.": "Connection configuration is missing for oms.",
+  "Created at": "Created at",
   "Description": "Description",
   "Draft": "Draft",
   "duration": "duration",
@@ -140,6 +141,7 @@
   "Time zone updated successfully": "Time zone updated successfully",
   "Unarchive": "Unarchive",
   "Unavailable items": "Unavailable items",
+  "Updated at": "Updated at",
   "Updating...": "Updating...",
   "Upcoming duration": "Upcoming duration",
   "Updating inventory rules and filters": "Updating inventory rules and filters",

diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
@@ -93,7 +93,8 @@
             <ion-card>
               <ion-item lines="none">
                 <h2>{{ translate("Scheduler") }}</h2>
-                <ion-badge slot="end">{{ timeTillJobUsingSeconds(job.nextExecutionDateTime) }}</ion-badge>
+                <!-- When the group is in draft status, do not display the time delta badge -->
+                <ion-badge slot="end" v-if="job.paused === 'N'">{{ timeTillJobUsingSeconds(job.nextExecutionDateTime) }}</ion-badge>
               </ion-item>
               <ion-item v-show="typeof isOmsConnectionExist === 'boolean' && !isOmsConnectionExist" lines="none">
                 <ion-label color="danger" class="ion-text-wrap">
@@ -106,11 +107,15 @@
               <ion-item>
                 <ion-icon slot="start" :icon="timeOutline"/>
                 <ion-label>{{ translate("Run time") }}</ion-label>
-                <ion-label slot="end">{{ getTimeFromSeconds(job.nextExecutionDateTime) }}</ion-label>
+                <!-- When the group is in draft status, do not display the runTime from the schedule -->
+                <ion-label slot="end">{{ job.paused === 'N' ? getTimeFromSeconds(job.nextExecutionDateTime) : "-" }}</ion-label>
               </ion-item>
               <ion-item lines="none">
                 <ion-icon slot="start" :icon="timerOutline"/>
-                <ion-select :label="translate('Schedule')" interface="popover" :placeholder="translate('Select')" :value="job.cronExpression" @ionChange="updateCronExpression($event)">
+                <!-- When the group is in draft status, do not display the frequency and juust display the label for schedule -->
+                <ion-label v-if="job.paused === 'Y'">{{ translate("Schedule") }}</ion-label>
+                <ion-label v-if="job.paused === 'Y'" slot="end">{{ "-" }}</ion-label>
+                <ion-select v-else :label="translate('Schedule')" interface="popover" :placeholder="translate('Select')" :value="job.cronExpression" @ionChange="updateCronExpression($event)">
                   <ion-select-option v-for="(expression, description) in cronExpressions" :key="expression" :value="expression">{{ description }}</ion-select-option>
                 </ion-select>
               </ion-item>

diff --git a/src/views/BrokeringRuns.vue b/src/views/BrokeringRuns.vue
@@ -39,23 +39,33 @@
         <main v-else-if="brokeringGroups.length">
           <section>
             <ion-card class="pointer" v-for="group in brokeringGroups" :key="group.routingGroupId" @click="redirect(group)">
-              <ion-card-header>
-                <ion-card-title>
-                  {{ group.groupName }}
-                </ion-card-title>
-              </ion-card-header>
+              <ion-item>
+                <ion-label>
+                  <h1>{{ group.groupName }}</h1>
+                  <p>{{ getDateAndTime(group.createdDate) }}</p>
+                </ion-label>
+              </ion-item>
               <ion-item v-if="group.description">
                 {{ group.description }}
               </ion-item>
-              <ion-item>
-                <ion-label>{{ group.schedule ? getScheduleFrequency(group.schedule.cronExpression) : "-" }}</ion-label>
-                <ion-label slot="end">{{ group.schedule ? getTimeFromSeconds(group.schedule.nextExecutionDateTime) : "-" }}</ion-label>
+              <ion-item v-if="group.schedule?.paused === 'N'">
+                <ion-label>
+                  {{ group.schedule ? getTimeFromSeconds(group.schedule.nextExecutionDateTime) : "-" }}
+                  <p>{{ group.schedule ? getScheduleFrequency(group.schedule.cronExpression) : "-" }}</p>
+                </ion-label>
+                <ion-badge slot="end" color="dark">
+                  {{ group.schedule ? timeTillRunUsingSeconds(group.schedule.nextExecutionDateTime) : "-" }}
+                </ion-badge>
               </ion-item>
-              <ion-item>
-                {{ getDateAndTime(group.createdDate) }}
+              <ion-item v-else>
+                <!-- TODO: display lastRunTime, but as we are not getting the same in response, so displaying nextExecutionTime for now -->
+                <ion-label>
+                  {{ group.schedule ? getTimeFromSeconds(group.schedule.nextExecutionDateTime) : "-" }}
+                </ion-label>
+                <ion-badge slot="end" color="dark">{{ translate("Draft") }}</ion-badge>
               </ion-item>
               <ion-item lines="none">
-                {{ getDateAndTime(group.lastUpdatedStamp) }}
+                {{ `Updated at ${getDateAndTime(group.lastUpdatedStamp)}` }}
               </ion-item>
             </ion-card>
           </section>
@@ -73,8 +83,9 @@ import emitter from "@/event-bus";
 import { translate } from "@/i18n";
 import { Group } from "@/types";
 import { getDateAndTime, getTimeFromSeconds, showToast } from "@/utils";
-import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonRadioGroup, IonRadio, IonSearchbar, IonSpinner, IonTitle, IonToolbar, alertController, onIonViewWillEnter } from "@ionic/vue";
+import { IonBadge, IonButton, IonButtons, IonCard, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonRadioGroup, IonRadio, IonSearchbar, IonSpinner, IonTitle, IonToolbar, alertController, onIonViewWillEnter } from "@ionic/vue";
 import { addOutline } from "ionicons/icons"
+import { DateTime } from "luxon";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
@@ -99,6 +110,11 @@ onIonViewWillEnter(async () => {
   store.dispatch("util/fetchEnums", { parentTypeId: "ORDER_ROUTING" })
 })
 
+function timeTillRunUsingSeconds(time: any) {
+  const timeDiff = DateTime.fromSeconds(time).diff(DateTime.local());
+  return DateTime.local().plus(timeDiff).toRelative();
+}
+
 function filterGroups() {
   // Before filtering the groups, reassinging it with state, if we have searched for a specific character and then updates the search string then we need to again filter on all the groups and not on the previously searched results
   brokeringGroups.value = JSON.parse(JSON.stringify(groups.value))