Improved: Added support to refresh the related jobs. Also added checks to not allow any actions on the outdated job. (#288)

src/i18n/locales/en.json

@@ -86,6 +86,7 @@
     "Items queued for cancel successfully": "Items queued for cancel successfully",
     "Items queued for release successfully": "Items queued for release successfully",
     "Items queued to update promise date successfully": "Items queued to update promise date successfully",
+    "Job runtime has passed. Please refresh to get the latest job data in order to perform any action.": "Job runtime has passed. Please refresh to get the latest job data in order to perform any action.",
     "Jobs": "Jobs",
     "Last active purchase order": "Last active purchase order",
     "Listed": "Listed",
@@ -216,6 +217,7 @@
     "Stopped accepting from as there is no active PO": "Stopped accepting {category}s from {changeDatetime} as there is no active PO",
     "The job is currently in progress. Are you sure that you want to cancel this job?": "The job is currently in progress. Are you sure that you want to cancel this job?",
     "Store": "Store",
+    "The job data has been refreshed successfully.": "The job data has been refreshed successfully.",
     "The order count in product cards will be updated based on the filters you select.": "The order count in product cards will be updated based on the filters you select.",
     "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
     "There are no jobs running in the background right now.": "There are no jobs running in the background right now.",

src/views/audit-product-details.vue

@@ -268,11 +268,12 @@
 
       <section>
         <ion-card>
-          <ion-card-header>
-            <ion-card-title>
-              <h3>{{ $t('Related jobs') }}</h3>
-            </ion-card-title>
-          </ion-card-header>
+          <ion-item lines="none">
+            <h3>{{ $t('Related jobs') }}</h3>
+            <ion-button fill="outline" slot="end" @click="refreshRelatedJobs">
+              <ion-icon :icon="refreshOutline" slot="icon-only" />
+            </ion-button>
+          </ion-item>
           <div v-if="!isCtgryAndBrkrngJobsLoaded">
             <ion-item>
               <ion-skeleton-text animated style="height: 30%; width: 40%;" /> 
@@ -364,6 +365,7 @@
 <script lang="ts">
 import {
   alertController,
+  IonButton,
   IonButtons,
   IonBackButton,
   IonCard,
@@ -392,6 +394,7 @@ import {
   checkmarkCircleOutline,
   chevronForwardOutline,
   copyOutline,
+  refreshOutline,
   shirtOutline
 } from "ionicons/icons";
 import { useStore } from "@/store";
@@ -415,6 +418,7 @@ export default defineComponent({
   name: "AuditProductDetails",
   components: {
     DxpShopifyImg,
+    IonButton,
     IonButtons,
     IonBackButton,
     IonCard,
@@ -548,6 +552,11 @@ export default defineComponent({
       await this.prepareShopListings()
       await this.preparePoSummary()
     },
+    async refreshRelatedJobs() {
+      this.store.dispatch('job/fetchCtgryAndBrkrngJobs').then(() => {
+        showToast(translate('The job data has been refreshed successfully.'))
+      })
+    },
     async getCtgryAndBrkrngJobs() {
       const systemJobEnumIds = JSON.parse(process.env.VUE_APP_CTGRY_AND_BRKRNG_JOB)
       this.store.dispatch('job/fetchCtgryAndBrkrngJobs', { systemJobEnumIds }).then(() => {
@@ -1132,6 +1141,7 @@ export default defineComponent({
       getProductIdentificationValue,
       hasPermission,
       productIdentificationPref,
+      refreshOutline,
       router,
       shirtOutline,
       store

src/views/job-actions-popover.vue

@@ -46,6 +46,7 @@ import JobHistoryModal from "./job-history-modal.vue";
 import { JobService } from "@/services/JobService";
 import { hasError, showToast } from "@/utils";
 import { translate } from "@/i18n";
+import { DateTime } from 'luxon';
 
 export default defineComponent({
   name: "JobActionsPopover",
@@ -57,11 +58,19 @@ export default defineComponent({
     IonList
   },
   methods: {
+    isRuntimePassed() {
+      return this.job.runTime <= DateTime.now().toMillis()
+    },
     closeJobActionsPopover() {
       popoverController.dismiss({ dismissed: true });
     },
     async runNow() {
       try {
+        if (this.isRuntimePassed()) {
+          showToast(translate("Job runtime has passed. Please refresh to get the latest job data in order to perform any action."))
+          this.closeJobActionsPopover()
+          return;
+        }
         const resp = await JobService.runJobNow(this.job)
         if (!hasError(resp)) {
           showToast(translate('Service has been scheduled'))
@@ -85,6 +94,12 @@ export default defineComponent({
     },
     async cancelJob() {
       try {
+        if (this.isRuntimePassed()) {
+          showToast(translate("Job runtime has passed. Please refresh to get the latest job data in order to perform any action."))
+          this.closeJobActionsPopover()
+          return;
+        }
+
         const resp = await JobService.cancelJob(this.job.jobId)
         if (!hasError(resp)) {
           showToast(translate('Job cancelled successfully'))