Implemented: Validation to set only future date and time on setting job runtime. (#2tzb5w4)

src/components/InitialJobConfiguration.vue

@@ -16,14 +16,14 @@
       <ion-item>
         <ion-icon slot="start" :icon="timeOutline" />
         <ion-label class="ion-text-wrap">{{ $t("Run time") }}</ion-label>
-        <ion-label class="ion-text-wrap" @click="() => isOpen = true" slot="end">{{ currentJob?.runTime ? getTime(currentJob?.runTime) : $t('Select run time') }}</ion-label>
+        <ion-label class="ion-text-wrap" @click="() => isOpen = true" slot="end">{{ runTime ? getTime(runTime) : $t('Select run time') }}</ion-label>
         <ion-modal :is-open="isOpen" @didDismiss="() => isOpen = false">
           <ion-content force-overscroll="false">
             <ion-datetime
-              hour-cycle="h12"
-              :min="minDateTime"
-              :value="currentJob?.runTime ? getDateTime(currentJob.runTime) : ''"
+              hour-cycle="h23"
+              :value="runTime ? getDateTime(runTime) : ''"
               @ionChange="updateRunTime($event, currentJob)"
+              :show-default-buttons="true"
             />
           </ion-content>
         </ion-modal>
@@ -121,7 +121,7 @@ import {
 import { mapGetters, useStore } from "vuex";
 import { translate } from "@/i18n";
 import { DateTime } from 'luxon';
-import { handleDateTimeInput,isFutureDate } from '@/utils';
+import { handleDateTimeInput,isFutureDate, showToast } from '@/utils';
 
 export default defineComponent({
   name: "InitialJobConfiguration",
@@ -143,9 +143,13 @@ export default defineComponent({
       isOpen: false,
       lastShopifyOrderId: this.shopifyOrderId,
       minDateTime: DateTime.now().toISO(),
-      jobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any
+      jobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
+      runTime: '' as any,
     }
   },
+  mounted() {
+    this.runTime = this.currentJob?.runTime 
+  },
   props: ['type', 'shopifyOrderId'],
   computed: {
     ...mapGetters({
@@ -207,7 +211,14 @@ export default defineComponent({
     },
     updateRunTime(ev: CustomEvent, job: any) {
       if (job) {
-        job.runTime = handleDateTimeInput(ev['detail'].value)
+        const currTime = DateTime.now().toMillis();
+        const setTime = handleDateTimeInput(ev['detail'].value);
+
+        if(setTime > currTime) {
+          this.runTime = setTime;
+        } else {
+          showToast(translate("Provide a future date and time"))
+        }
       }
     }
   },
@@ -261,4 +272,10 @@ ion-item:nth-child(2) > ion-label:nth-child(3) {
     display: none;
   }  
 }
+
+ion-modal {
+  --width: 290px;
+  --height: 440px;
+  --border-radius: 8px;
+}
 </style>

src/components/JobConfiguration.vue

@@ -16,7 +16,7 @@
       <ion-item>
         <ion-icon slot="start" :icon="timeOutline" />
         <ion-label class="ion-text-wrap">{{ $t("Run time") }}</ion-label>
-        <ion-label class="ion-text-wrap" @click="() => isOpen = true" slot="end">{{ currentJob?.runTime ? getTime(currentJob.runTime) : $t('Select run time') }}</ion-label>
+        <ion-label class="ion-text-wrap" @click="() => isOpen = true" slot="end">{{ runTime ? getTime(runTime) : $t('Select run time') }}</ion-label>
         <!-- TODO: display a button when we are not having a runtime and open the datetime component
         on click of that button
         Currently, when mapping the same datetime component for label and button so it's not working so for
@@ -25,10 +25,10 @@
         <ion-modal class="date-time-modal" :is-open="isOpen" @didDismiss="() => isOpen = false">
           <ion-content force-overscroll="false">
             <ion-datetime
-              hour-cycle="h12"
-              :min="minDateTime"
-              :value="currentJob?.runTime ? getDateTime(currentJob.runTime) : ''"
+              hour-cycle="h23"
+              :value="runTime ? getDateTime(runTime) : ''"
               @ionChange="updateRunTime($event, currentJob)"
+              :show-default-buttons="true"
             />
           </ion-content>
         </ion-modal>
@@ -150,9 +150,12 @@ export default defineComponent({
     return {
       isOpen: false,
       jobStatus: this.status,
-      minDateTime: DateTime.now().toISO()
+      runTime: '' as any,
     }
   },
+  mounted() {
+    this.runTime = this.currentJob?.runTime 
+  },
   updated() {
     // When updating the job, the job is fetched again with the latest values
     // Updated value should be set to instance variable jobStatus
@@ -324,7 +327,14 @@ export default defineComponent({
     },
     updateRunTime(ev: CustomEvent, job: any) {
       if (job) {
-        job.runTime = handleDateTimeInput(ev['detail'].value)
+        const currTime = DateTime.now().toMillis();
+        const setTime = handleDateTimeInput(ev['detail'].value);
+
+        if(setTime > currTime) {
+          this.runTime = setTime;
+        } else {
+          showToast(translate("Provide a future date and time"))
+        }
       }
     },
     async viewJobHistory(job: any) {
@@ -442,4 +452,10 @@ ion-label:nth-child(3) {
   cursor: pointer;
 }
 
+
+ion-modal {
+  --width: 290px;
+  --height: 440px;
+  --border-radius: 8px;
+}
 </style>

src/locales/en.json

@@ -114,6 +114,7 @@
   "Pin job": "Pin job",
   "Pinned jobs": "Pinned jobs",
   "Pipeline": "Pipeline",
+  "Provide a future date and time": "Provide a future date and time",
   "Process Uploads": "Process Uploads",
   "Product": "Product",
   "Products": "Products",