Implemented: support for editing custom parameters on 'run now' (#628)

src/components/JobActionsPopover.vue

@@ -14,7 +14,7 @@
         <ion-icon slot="start" :icon="pinOutline" />
         {{ $t("Pin job") }}
       </ion-item>
-      <ion-item :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="runJobNow(job)" lines="none" button>
+      <ion-item :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="openJobCustomParameterModal()" lines="none" button>
         <ion-icon slot="start" :icon="flashOutline" />
         {{ $t("Run now") }}
       </ion-item>      
@@ -29,7 +29,6 @@ import {
   IonItem,
   IonList,
   IonListHeader,
-  alertController,
   modalController,
   popoverController
 } from "@ionic/vue";
@@ -38,9 +37,10 @@ import { copyOutline, flashOutline, pinOutline, timeOutline  } from 'ionicons/ic
 import { mapGetters, useStore } from 'vuex'
 import JobHistoryModal from '@/components/JobHistoryModal.vue'
 import { Plugins } from '@capacitor/core';
-import { generateJobCustomParameters, hasJobDataError, showToast } from '@/utils'
+import { generateJobCustomOptions, showToast } from '@/utils'
 import emitter from "@/event-bus"
 import { Actions, hasPermission } from '@/authorization'
+import JobParameterModal from '@/components/JobParameterModal.vue'
 
 export default defineComponent({
   name: "JobActionsPopover",
@@ -94,35 +94,20 @@ export default defineComponent({
       }
       this.closePopover();
     },
-    async runJobNow(job: any) {
-      const alert = await alertController
-        .create({
-          header: this.$t("Run now"),
-          message: this.$t('Running this job now will not replace this job. A copy of this job will be created and run immediately. You may not be able to reverse this action.', { space: '<br/><br/>' }),
-          buttons: [
-            {
-              text: this.$t("Cancel"),
-              role: 'cancel',
-            },
-            {
-              text: this.$t('Run now'),
-              handler: async () => {
-                if(job) {
-                  // return if job has missing data or error
-                  if (hasJobDataError(job)) {
-                    this.closePopover();
-                    return;
-                  }
-
-                  const jobCustomParameters = generateJobCustomParameters([], [], job.runtimeData)
-                  await this.store.dispatch('job/runServiceNow', { job, jobCustomParameters })
-                  this.closePopover();
-                }
-              }
-            }
-          ]
-        });
-      return alert.present();
+    async openJobCustomParameterModal() {
+      const jobParameterModal = await modalController.create({
+        component: JobParameterModal,
+        componentProps: {
+          customOptionalParameters: generateJobCustomOptions(this.job).optionalParameters,
+          customRequiredParameters: generateJobCustomOptions(this.job).requiredParameters,
+          currentJob: JSON.parse(JSON.stringify(this.job)),
+          runNow: true
+        },
+        breakpoints: [0, 0.25, 0.5, 0.75, 1],
+        initialBreakpoint: 0.75
+      });
+      await jobParameterModal.present();
+      this.closePopover();
     },
   },
   setup() {

src/components/JobConfiguration.vue

@@ -46,16 +46,16 @@
       </ion-item>
 
       <ion-item lines="none">
-        <ion-chip @click="openJobCustomParameterModal" outline v-if="!Object.keys(generateCustomParameters).length">
+        <ion-chip @click="openJobCustomParameterModal()" outline v-if="!Object.keys(generateCustomParameters).length">
           <ion-icon :icon="addOutline" />
           <ion-label>{{ $t('Add custom parameters') }}</ion-label>
         </ion-chip>
         <ion-row v-else>
-          <ion-chip @click="openJobCustomParameterModal" outline :color="value ? undefined :'danger'" :key="name" v-for="(value, name) in generateCustomParameters">
+          <ion-chip @click="openJobCustomParameterModal()" outline :color="value ? undefined :'danger'" :key="name" v-for="(value, name) in generateCustomParameters">
             {{ name }}: {{ value }}
           </ion-chip>
         </ion-row>
-        <ion-button @click="openJobCustomParameterModal" id="open-modal" slot="end" fill="clear">
+        <ion-button @click="openJobCustomParameterModal()" id="open-modal" slot="end" fill="clear">
           <ion-icon slot="icon-only" :icon="listCircleOutline"/>
         </ion-button>
       </ion-item>
@@ -94,7 +94,7 @@
       <ion-icon slot="start" :icon="timeOutline" />
       {{ $t("History") }}
     </ion-item>
-    <ion-item :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="runNow(currentJob)" button>
+    <ion-item :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="openJobCustomParameterModal(true)" button>
       <ion-icon slot="start" :icon="flashOutline" />
       {{ $t("Run now") }}
     </ion-item>
@@ -388,33 +388,6 @@ export default defineComponent({
         jobHistoryModal.dismiss({ dismissed: true });
       })
     },
-    async runNow(job: any) {
-      const jobAlert = await alertController
-        .create({
-          header: this.$t("Run now"),
-          message: this.$t('Running this job now will not replace this job. A copy of this job will be created and run immediately. You may not be able to reverse this action.', { space: '<br/><br/>' }),
-          buttons: [
-            {
-              text: this.$t("Cancel"),
-              role: 'cancel',
-            },
-            {
-              text: this.$t('Run now'),
-              handler: () => {
-                if (job && !hasJobDataError(job)) {
-
-                  // preparing the custom parameters those needs to passed with the job
-                  const jobCustomParameters = generateJobCustomParameters(this.customRequiredParameters, this.customOptionalParameters, job.runtimeData)
-
-                  this.store.dispatch('job/runServiceNow', { job, jobCustomParameters })
-                }
-              }
-            }
-          ]
-        });
-
-      return jobAlert.present();
-    },
     async copyJobInformation(job: any) {
       const { Clipboard } = Plugins;
       const jobDetails = `jobId: ${job.jobId}, jobName: ${job.enumName}, jobDescription: ${job.description} ${job.runtimeData ? (", runtimeData: " + JSON.stringify(job.runtimeData)) : ""}`;
@@ -447,10 +420,19 @@ export default defineComponent({
       if (setTime > currTime) this.generateRunTimes(setTime)
       else showToast(translate("Provide a future date and time"))
     },
-    async openJobCustomParameterModal() {
+    async openJobCustomParameterModal(runNow?: boolean) {
       const jobParameterModal = await modalController.create({
-      component: JobParameterModal,
-        componentProps: { customOptionalParameters: this.customOptionalParameters, customRequiredParameters: this.customRequiredParameters, currentJob: this.currentJob },
+        component: JobParameterModal,
+        // deep cloning the props for the 'run now' case as the parameter objects are
+        // v-modeled in the job parameter modal hence, changes are reflected back on the UI
+        // (because of reference) which is misleading as the job with edited changes
+        // has already ran
+        componentProps: {
+          customOptionalParameters: runNow ? JSON.parse(JSON.stringify(this.customOptionalParameters)) : this.customOptionalParameters,
+          customRequiredParameters: runNow ? JSON.parse(JSON.stringify(this.customRequiredParameters)) : this.customRequiredParameters,
+          currentJob: runNow ? JSON.parse(JSON.stringify(this.currentJob)) : this.currentJob,
+          runNow
+        },
         breakpoints: [0, 0.25, 0.5, 0.75, 1],
         initialBreakpoint: 0.75
       });

src/components/JobParameterModal.vue

@@ -1,8 +1,9 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-title>{{ $t('Custom Parameters') }}</ion-title>
+      <ion-title>{{ runNow ? $t('Run now') : $t('Custom Parameters') }}</ion-title>
       <ion-buttons slot="end">
+        <ion-button v-if="runNow" @click="confirmRunNow()" color="primary">{{ $t('Save') }}</ion-button>
         <ion-button @click="closeModal">{{ $t('Close') }}</ion-button>
       </ion-buttons>
     </ion-toolbar>
@@ -17,7 +18,7 @@
 
         <ion-item :key="index" v-for="(parameter, index) in customRequiredParameters">
           <ion-label>{{ parameter.name }}</ion-label>
-          <ion-input v-if="currentJob.statusId === 'SERVICE_DRAFT'" :placeholder="parameter.name" v-model="parameter.value" slot="end" />
+          <ion-input v-if="currentJob.statusId === 'SERVICE_DRAFT' || runNow" :placeholder="parameter.name" v-model="parameter.value" slot="end" />
           <ion-label v-else>{{ parameter.value }}</ion-label>
           <ion-note slot="helper">{{ parameter.type }}</ion-note>
         </ion-item>
@@ -28,7 +29,7 @@
 
         <ion-item :key="index" v-for="(parameter, index) in customOptionalParameters">
           <ion-label>{{ parameter.name }}</ion-label>
-          <ion-input v-if="currentJob.statusId === 'SERVICE_DRAFT'" :placeholder="parameter.name" v-model="parameter.value" slot="end" />
+          <ion-input v-if="currentJob.statusId === 'SERVICE_DRAFT' || runNow" :placeholder="parameter.name" v-model="parameter.value" slot="end" />
           <ion-label v-else>{{ parameter.value }}</ion-label>
           <ion-note slot="helper">{{ parameter.type }}</ion-note>
         </ion-item>
@@ -55,11 +56,13 @@ import {
   IonNote,
   IonTitle,
   IonToolbar,
-  modalController
+  modalController,
+  alertController
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { closeOutline } from 'ionicons/icons';
 import { useStore } from 'vuex';
+import { generateJobCustomParameters, hasJobDataError } from '@/utils';
 
 export default defineComponent({
   name: 'JobParameterModal',
@@ -78,10 +81,35 @@ export default defineComponent({
     IonTitle,
     IonToolbar,
   },
-  props: ['currentJob', 'customRequiredParameters', 'customOptionalParameters'],
+  props: ['currentJob', 'customRequiredParameters', 'customOptionalParameters', 'runNow'],
   methods: {
     closeModal() {
       modalController.dismiss({ dismissed: true })
+    },
+    async confirmRunNow() {
+      const jobAlert = await alertController.create({
+        header: this.$t("Run now"),
+        message: this.$t('Running this job now will not replace this job. A copy of this job will be created and run immediately. You may not be able to reverse this action.', { space: '<br/><br/>' }),
+        buttons: [
+          {
+            text: this.$t("Cancel"),
+            role: 'cancel',
+          },
+          {
+            text: this.$t('Run now'),
+            handler: () => {
+              if (this.currentJob && !hasJobDataError(this.currentJob)) {
+                // preparing the custom parameters those needs to passed with the job
+                const jobCustomParameters = generateJobCustomParameters(this.customRequiredParameters, this.customOptionalParameters, this.currentJob.runtimeData)
+                this.store.dispatch('job/runServiceNow', { job: this.currentJob, jobCustomParameters })
+              }
+              this.closeModal()
+            }
+          }
+        ]
+      });
+
+      return jobAlert.present();
     }
   },
   setup() {

src/views/PreOrder.vue

@@ -137,7 +137,7 @@
             </ion-item>
             <ion-item>
               <ion-label class="ion-text-wrap">{{ $t("Release preorders")}}</ion-label>
-              <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" fill="outline" @click="runJob(jobEnums['AUTO_RELSE_DAILY'])">{{ $t("Release") }}</ion-button>
+              <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" fill="outline" @click="openJobCustomParameterModal(jobEnums['AUTO_RELSE_DAILY'])">{{ $t("Release") }}</ion-button>
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap"><p>{{ $t("Auto releasing pre-orders will find pre-orders that have promise dates that have passed and release them for fulfillment.") }}</p></ion-label>
@@ -174,20 +174,28 @@ import {
   IonPage,
   IonTitle,
   IonToolbar,
-  isPlatform
+  isPlatform,
+  modalController
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { useRouter } from 'vue-router'
-import { alertController } from '@ionic/vue';
 import JobConfiguration from '@/components/JobConfiguration.vue'
-import { generateJobCustomParameters, isFutureDate, showToast, prepareRuntime, hasJobDataError } from '@/utils';
+import {
+  generateJobCustomParameters,
+  isFutureDate,
+  showToast,
+  prepareRuntime,
+  hasJobDataError,
+  generateJobCustomOptions
+} from '@/utils';
 import emitter from '@/event-bus';
 import { translate } from '@/i18n';
 import MoreJobs from '@/components/MoreJobs.vue';
 import { Actions, hasPermission } from '@/authorization'
 import { openOutline } from 'ionicons/icons'
+import JobParameterModal from '@/components/JobParameterModal.vue'
 
 export default defineComponent({
   name: 'PreOrder',
@@ -286,30 +294,20 @@ export default defineComponent({
         this.store.dispatch('job/updateJob', job)
       }
     },
-    async runJob(id: string) {
+    async openJobCustomParameterModal(id: string) {
       const job = this.getJob(id)
-      const jobAlert = await alertController
-        .create({
-          header: this.$t("Run now"),
-          message: this.$t('Running this job now will not replace this job. A copy of this job will be created and run immediately. You may not be able to reverse this action.', { space: '<br/><br/>' }),
-          buttons: [
-            {
-              text: this.$t("Cancel"),
-              role: 'cancel',
-            },
-            {
-              text: this.$t('Run now'),
-              handler: () => {
-                if (job && !hasJobDataError(job)) {
-                  const jobCustomParameters = generateJobCustomParameters([], [], job.runtimeData)
-                  this.store.dispatch('job/runServiceNow', { job, jobCustomParameters })
-                }
-              }
-            }
-          ]
-        });
-
-      return jobAlert.present();
+      const jobParameterModal = await modalController.create({
+        component: JobParameterModal,
+        componentProps: {
+          customOptionalParameters: generateJobCustomOptions(job).optionalParameters,
+          customRequiredParameters: generateJobCustomOptions(job).requiredParameters,
+          currentJob: job,
+          runNow: true
+        },
+        breakpoints: [0, 0.25, 0.5, 0.75, 1],
+        initialBreakpoint: 0.75
+      });
+      await jobParameterModal.present();
     },
     async viewJobConfiguration(jobInformation: any) {
       this.currentJob = jobInformation.job || this.getJob(this.jobEnums[jobInformation.id])