From 74f006287e0244607f48a2e44d8bd8892261ed96 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 19 Oct 2023 12:04:36 +0530
Subject: [PATCH 01/14] Implemented: ui for the brokering page (#620)

---
 src/components/BatchModal.vue | 197 ++++++++++++++++++++++++++++++----
 src/views/Brokering.vue       |  72 +++++++++++--
 2 files changed, 240 insertions(+), 29 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index 65f0d1cf..5f017510 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -1,5 +1,80 @@
 <template>
-  <ion-header>
+  <!-- <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>{{ $t('New broker run') }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item>
+      <ion-label position="fixed">{{ $t('Name') }}</ion-label>
+      <ion-input placeholder="Batch Name" v-model="jobName" />
+    </ion-item>
+    <ion-item :disabled="currentBatch?.jobId">
+      <ion-icon slot="start" :icon="ticketOutline" />
+      <ion-label>{{ $t('Order parking') }}</ion-label>
+      <ion-select slot="end" interface="popover" :value="this.currentScheduledBatch?.facilityId || batchFacilityId" @ionChange="batchFacilityId = $event['detail'].value">
+        <ion-select-option value="_NA_">{{ $t("Brokering queue") }}</ion-select-option>
+        <ion-select-option value="PRE_ORDER_PARKING">{{ $t("Pre-order parking") }}</ion-select-option>
+        <ion-select-option value="BACKORDER_PARKING">{{ $t("Back-order parking") }}</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item :disabled="currentBatch?.jobId">
+      <ion-icon slot="start" :icon="warningOutline" />
+      <ion-label>{{ $t('Unfillable Orders') }}</ion-label>
+      <ion-toggle slot="end"></ion-toggle>
+    </ion-item>
+    <ion-list>
+      <ion-list-header>
+        {{ 'More parameters' }}
+      </ion-list-header>
+      <ion-item>
+        <ion-label>{{ 'Placeholder 1' }}</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label>{{ 'Placeholder 2' }}</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label>{{ 'Placeholder 3' }}</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
+      </ion-item>
+    </ion-list>
+    <ion-card>
+      <ion-item lines="none">
+        <ion-label>{{ 'Schedule' }}</ion-label>
+      </ion-item>
+      <ion-item :disabled="currentBatch?.jobId">
+        <ion-icon slot="start" :icon="timeOutline" />
+        <ion-label>{{ $t('Run time') }}</ion-label>
+        <ion-select slot="end" interface="popover" value="Select" @ionChange="batchFacilityId = $event['detail'].value">
+          <ion-select-option value="Select">{{ $t("Select") }}</ion-select-option> -->
+          <!-- <ion-select-option value="PRE_ORDER_PARKING">{{ $t("Pre-order parking") }}</ion-select-option>
+          <ion-select-option value="BACKORDER_PARKING">{{ $t("Back-order parking") }}</ion-select-option> -->
+        <!-- </ion-select>
+      </ion-item>
+      <ion-item lines="none" :disabled="currentBatch?.jobId">
+        <ion-icon slot="start" :icon="timerOutline" />
+        <ion-label>{{ $t('Frequency') }}</ion-label>
+        <ion-select slot="end" interface="popover" value="Select" @ionChange="batchFacilityId = $event['detail'].value">
+          <ion-select-option value="Select">{{ $t("Once in 15 minutes") }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-card>
+    <ion-fab @click="updateJob()" vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon :icon="checkmarkDoneOutline" />  
+      </ion-fab-button>
+    </ion-fab>
+  </ion-content> -->
+
+  <!-- <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
         <ion-button @click="closeModal">
@@ -26,12 +101,12 @@
     <ion-radio-group>
       <ion-item :disabled="currentBatch?.jobId">
         <ion-label>{{ $t('New orders') }}</ion-label>
-        <!-- "this.currentScheduledBatch?.unfillable === false" - Did this because ion-radio is not considering boolean -->
+        "this.currentScheduledBatch?.unfillable === false" - Did this because ion-radio is not considering boolean 
         <ion-radio :checked="this.currentScheduledBatch?.unfillable === false" slot="start" @click="unfillableOrder = false" color="secondary"/>
       </ion-item>
       <ion-item :disabled="currentBatch?.jobId">
         <ion-label>{{ $t('Unfillable orders') }}</ion-label>
-        <!-- "this.currentScheduledBatch?.unfillable === false" - Did this because ion-radio is not considering boolean -->
+        "this.currentScheduledBatch?.unfillable === false" - Did this because ion-radio is not considering boolean 
         <ion-radio :checked="this.currentScheduledBatch?.unfillable === true" slot="start" @click="unfillableOrder = true" color="secondary"/>
       </ion-item>
     </ion-radio-group>
@@ -44,6 +119,87 @@
         <ion-icon :icon="checkmarkDoneOutline" />  
       </ion-fab-button>
     </ion-fab>
+  </ion-content> -->
+  <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>{{ $t('New broker run') }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item>
+      <ion-label position="fixed">{{ $t('Name') }}</ion-label>
+      <ion-input placeholder="Batch Name" v-model="jobName" />
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" :icon="ticketOutline" />
+      <ion-label>{{ $t('Order parking') }}</ion-label>
+      <ion-select slot="end" interface="popover" :value="batchFacilityId" @ionChange="batchFacilityId = $event['detail'].value">
+        <ion-select-option value="_NA_">{{ $t("Brokering queue") }}</ion-select-option>
+        <ion-select-option value="PRE_ORDER_PARKING">{{ $t("Pre-order parking") }}</ion-select-option>
+        <ion-select-option value="BACKORDER_PARKING">{{ $t("Back-order parking") }}</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item>
+      <ion-icon slot="start" :icon="warningOutline" />
+      <ion-label>{{ $t('Unfillable Orders') }}</ion-label>
+      <ion-toggle slot="end" :checked="unfillableOrder" @ionChange="unfillableOrder = !unfillableOrder"></ion-toggle>
+    </ion-item>
+
+    <ion-list>
+      <ion-list-header>
+        {{ 'More parameters' }}
+      </ion-list-header>
+      <ion-item>
+        <ion-label>{{ 'Placeholder 1' }}</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label>{{ 'Placeholder 2' }}</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label>{{ 'Placeholder 3' }}</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
+      </ion-item>
+    </ion-list>
+
+    <ion-card>
+      <ion-item lines="none">
+        <ion-label>{{ 'Schedule' }}</ion-label>
+      </ion-item>
+      <ion-item :disabled="currentBatch?.jobId">
+        <ion-icon slot="start" :icon="timeOutline" />
+        <ion-label>{{ $t('Run time') }}</ion-label>
+        <ion-select slot="end" interface="popover" value="Select" @ionChange="batchFacilityId = $event['detail'].value">
+          <ion-select-option value="Select">{{ $t("Select") }}</ion-select-option>
+          <ion-select-option value="PRE_ORDER_PARKING">{{ $t("Pre-order parking") }}</ion-select-option>
+          <ion-select-option value="BACKORDER_PARKING">{{ $t("Back-order parking") }}</ion-select-option> -->
+        </ion-select>
+      </ion-item>
+      <ion-item lines="none" :disabled="currentBatch?.jobId">
+        <ion-icon slot="start" :icon="timerOutline" />
+        <ion-label>{{ $t('Frequency') }}</ion-label>
+        <ion-select slot="end" interface="popover" value="Select" @ionChange="batchFacilityId = $event['detail'].value">
+          <ion-select-option value="Select">{{ $t("Once in 15 minutes") }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-card>
+    
+    <ion-item>
+      <ion-label position="fixed">{{ $t("Schedule") }}</ion-label>
+      <ion-datetime hour-cycle="h12" :value="getNowTimestamp()" @ionChange="updateRunTime($event)" presentation="time" size="cover" />
+    </ion-item>    
+    <ion-fab @click="updateJob()" vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon :icon="checkmarkDoneOutline" />  
+      </ion-fab-button>
+    </ion-fab>
   </ion-content>
 </template>
 
@@ -69,7 +225,7 @@ import {
   modalController
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
-import { closeOutline, checkmarkDoneOutline } from 'ionicons/icons';
+import { closeOutline, checkmarkDoneOutline, timeOutline, timerOutline, ticketOutline, warningOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from 'vuex';
 import { DateTime } from 'luxon';
 import { handleDateTimeInput, generateJobCustomParameters, getNowTimestamp, isFutureDate, showToast, hasJobDataError } from '@/utils';
@@ -81,16 +237,16 @@ export default defineComponent({
     IonButton,
     IonButtons,
     IonContent,
-    IonDatetime,
-    IonFab,
-    IonFabButton,
+    // IonDatetime,
+    // IonFab,
+    // IonFabButton,
     IonHeader,
     IonIcon,
     IonInput,
     IonItem,
     IonLabel,
-    IonRadio,
-    IonRadioGroup,
+    // IonRadio,
+    // IonRadioGroup,
     IonSelect,
     IonSelectOption,
     IonTitle,
@@ -119,14 +275,9 @@ export default defineComponent({
     }),
   },
   mounted() {
-    this.getCurrentBatch();
+    // this.getCurrentBatch();
   },
   methods: {
-    getCurrentBatch() {
-      this.currentBatch = this.getJob(this.enumId)?.find((job: any) => job.id === this.id)
-      this.jobName = this.currentBatch?.jobName;
-      this.currentScheduledBatch = (this as any).jobEnums[this.currentBatch?.enumId];
-    },
     getDateTime(time: any) {
       return DateTime.fromMillis(time).toISO()
     },
@@ -143,7 +294,7 @@ export default defineComponent({
       }
 
       const job = this.currentBatch ? this.currentBatch : this.getJob(batchJobEnum)?.find((job: any) => job.status === 'SERVICE_DRAFT');
-
+      
       if (!job) {
         showToast(translate('Configuration missing'))
         return;
@@ -163,15 +314,21 @@ export default defineComponent({
       if (job?.runTime && !isFutureDate(job?.runTime)) {
         job.runTime = ''
       }
+      console.log(this.jobRunTime);
+      console.log(getNowTimestamp());
+      
+      console.log('end', job);
+      
       if (job?.status === 'SERVICE_DRAFT') {
         const jobCustomParameters = generateJobCustomParameters([], [], job.runtimeData)
-        await this.store.dispatch('job/scheduleService', { job, jobCustomParameters })
+        // await this.store.dispatch('job/scheduleService', { job, jobCustomParameters })
       } else if (job?.status === 'SERVICE_PENDING') {
-        await this.store.dispatch('job/updateJob', job)
+        // await this.store.dispatch('job/updateJob', job)
       }
       this.closeModal()
     },
     updateRunTime(ev: CustomEvent) {
+      console.log('ev', ev)
       this.jobRunTime = handleDateTimeInput(ev['detail'].value)
     },
     getCurrentDateTime() {
@@ -184,6 +341,10 @@ export default defineComponent({
     return {
       checkmarkDoneOutline,
       closeOutline,
+      ticketOutline,
+      timeOutline,
+      timerOutline,
+      warningOutline,
       store,
       getNowTimestamp
     };
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 1f8149b7..f0cfc36a 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -10,6 +10,45 @@
     <ion-content>
       <main>
         <section>
+          <ion-button expand="block" :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="addBatch()" >{{ 'Create new brokering job' }}</ion-button>
+        
+          <ion-item lines="none">
+            <ion-label>
+              <h1>{{ 'Scheduled Job' }}</h1>
+            </ion-label>
+          </ion-item>
+
+          <ion-card v-for="batch in orderBatchJobs" :key="batch?.id" detail v-show="batch?.status === 'SERVICE_PENDING'" @click="viewJobConfiguration({ id: batch.systemJobEnumId, status: batch.statusId})">
+            <ion-item lines="none">
+              <ion-label>
+                {{'Queue Name'}}
+                <h1>{{ batch?.jobName }}</h1>
+              </ion-label>
+              <ion-badge slot="end" color="dark" >{{ timeFromNow(batch?.runTime) }}</ion-badge>
+            </ion-item>
+
+            <ion-list>
+              <ion-item lines="none">
+                <ion-label class="ion-text-wrap">{{ batch?.frequency }}</ion-label>
+                <ion-label slot="end">{{ batch?.runTime ? getTime(batch.runTime) : '' }}</ion-label>
+              </ion-item>
+
+              <ion-item lines="none">
+                <ion-label class="ion-text-wrap">{{ $t("Unfillable Order") }}</ion-label>
+                <ion-toggle slot="end"/>
+              </ion-item>
+
+              <ion-item lines="none">
+                <ion-row>
+                  <ion-chip outline >
+                    {{ 'Custom' }}: {{ 'Parameter' }}
+                  </ion-chip>
+                </ion-row>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+        </section>
+        <!-- <section>
           <ion-card>
             <ion-card-header>
               <ion-card-title>{{ $t("Routing") }}</ion-card-title>
@@ -51,7 +90,7 @@
             </ion-item>
           </ion-card>
           <MoreJobs v-if="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId).length" :jobs="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId)" />
-        </section>
+        </section> -->
 
         <aside class="desktop-only" v-if="isDesktop" v-show="currentJob">
           <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob"/>
@@ -105,25 +144,25 @@ export default defineComponent({
   components: {
     IonButton,
     IonCard,
-    IonCardHeader,
-    IonCardTitle,
+    // IonCardHeader,
+    // IonCardTitle,
     IonContent,
     IonHeader,
-    IonIcon,
+    // IonIcon,
     IonItem,
-    IonItemSliding,
-    IonItemDivider,
+    // IonItemSliding,
+    // IonItemDivider,
     IonLabel,
     IonList,
     IonMenuButton,
-    IonNote,
-    IonItemOption,
-    IonItemOptions,
+    // IonNote,
+    // IonItemOption,
+    // IonItemOptions,
     IonPage,
     IonTitle,
     IonToolbar,
     JobConfiguration,
-    MoreJobs
+    // MoreJobs
   },
   data() {
     return {
@@ -210,10 +249,14 @@ export default defineComponent({
       return skipJobAlert.present();
     },
     getTime (time: any) {
-      return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
+      // return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
+      return DateTime.fromMillis(time).toLocaleString(DateTime.TIME_24_SIMPLE);
     },
     async viewJobConfiguration(jobInformation: any) {
       this.currentJob = jobInformation.job || this.getJob(this.jobEnums[jobInformation.id])
+      console.log(this.jobEnums[jobInformation.id]);
+      console.log(this.currentJob);
+      
       this.currentJobStatus = jobInformation.status
       this.freqType = jobInformation.id && this.jobFrequencyType[jobInformation.id]
 
@@ -255,11 +298,18 @@ export default defineComponent({
         }
       });
     },
+    timeFromNow (time: any) {
+      if(time){
+        const timeDiff = DateTime.fromMillis(time).diff(DateTime.local());
+        return DateTime.local().plus(timeDiff).toRelative();
+      }
+    },    
   },
   mounted () {
     this.fetchJobs();
     emitter.on("productStoreOrConfigChanged", this.fetchJobs);
     emitter.on('viewJobConfiguration', this.viewJobConfiguration)
+    
   },
   unmounted() {
     emitter.off("productStoreOrConfigChanged", this.fetchJobs);

From 4be79c45ca0192884f79f4fe139a1018c9152fd3 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 19 Oct 2023 13:12:27 +0530
Subject: [PATCH 02/14] Improved: update ui for brokering jobs (#620)

---
 src/components/BatchModal.vue       | 185 +++++++++++-----------------
 src/components/JobConfiguration.vue |   2 +
 src/views/Brokering.vue             |   1 +
 3 files changed, 77 insertions(+), 111 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index 5f017510..3c12adc9 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -1,79 +1,4 @@
 <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>{{ $t('New broker run') }}</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <ion-content>
-    <ion-item>
-      <ion-label position="fixed">{{ $t('Name') }}</ion-label>
-      <ion-input placeholder="Batch Name" v-model="jobName" />
-    </ion-item>
-    <ion-item :disabled="currentBatch?.jobId">
-      <ion-icon slot="start" :icon="ticketOutline" />
-      <ion-label>{{ $t('Order parking') }}</ion-label>
-      <ion-select slot="end" interface="popover" :value="this.currentScheduledBatch?.facilityId || batchFacilityId" @ionChange="batchFacilityId = $event['detail'].value">
-        <ion-select-option value="_NA_">{{ $t("Brokering queue") }}</ion-select-option>
-        <ion-select-option value="PRE_ORDER_PARKING">{{ $t("Pre-order parking") }}</ion-select-option>
-        <ion-select-option value="BACKORDER_PARKING">{{ $t("Back-order parking") }}</ion-select-option>
-      </ion-select>
-    </ion-item>
-    <ion-item :disabled="currentBatch?.jobId">
-      <ion-icon slot="start" :icon="warningOutline" />
-      <ion-label>{{ $t('Unfillable Orders') }}</ion-label>
-      <ion-toggle slot="end"></ion-toggle>
-    </ion-item>
-    <ion-list>
-      <ion-list-header>
-        {{ 'More parameters' }}
-      </ion-list-header>
-      <ion-item>
-        <ion-label>{{ 'Placeholder 1' }}</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
-      </ion-item>
-      <ion-item>
-        <ion-label>{{ 'Placeholder 2' }}</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
-      </ion-item>
-      <ion-item>
-        <ion-label>{{ 'Placeholder 3' }}</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
-      </ion-item>
-    </ion-list>
-    <ion-card>
-      <ion-item lines="none">
-        <ion-label>{{ 'Schedule' }}</ion-label>
-      </ion-item>
-      <ion-item :disabled="currentBatch?.jobId">
-        <ion-icon slot="start" :icon="timeOutline" />
-        <ion-label>{{ $t('Run time') }}</ion-label>
-        <ion-select slot="end" interface="popover" value="Select" @ionChange="batchFacilityId = $event['detail'].value">
-          <ion-select-option value="Select">{{ $t("Select") }}</ion-select-option> -->
-          <!-- <ion-select-option value="PRE_ORDER_PARKING">{{ $t("Pre-order parking") }}</ion-select-option>
-          <ion-select-option value="BACKORDER_PARKING">{{ $t("Back-order parking") }}</ion-select-option> -->
-        <!-- </ion-select>
-      </ion-item>
-      <ion-item lines="none" :disabled="currentBatch?.jobId">
-        <ion-icon slot="start" :icon="timerOutline" />
-        <ion-label>{{ $t('Frequency') }}</ion-label>
-        <ion-select slot="end" interface="popover" value="Select" @ionChange="batchFacilityId = $event['detail'].value">
-          <ion-select-option value="Select">{{ $t("Once in 15 minutes") }}</ion-select-option>
-        </ion-select>
-      </ion-item>
-    </ion-card>
-    <ion-fab @click="updateJob()" vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="checkmarkDoneOutline" />  
-      </ion-fab-button>
-    </ion-fab>
-  </ion-content> -->
-
   <!-- <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
@@ -120,6 +45,7 @@
       </ion-fab-button>
     </ion-fab>
   </ion-content> -->
+
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
@@ -134,7 +60,7 @@
   <ion-content>
     <ion-item>
       <ion-label position="fixed">{{ $t('Name') }}</ion-label>
-      <ion-input placeholder="Batch Name" v-model="jobName" />
+      <ion-input :placeholder="currentDateTime = getCurrentDateTime()" v-model="jobName" />
     </ion-item>
     <ion-item>
       <ion-icon slot="start" :icon="ticketOutline" />
@@ -176,11 +102,24 @@
       <ion-item :disabled="currentBatch?.jobId">
         <ion-icon slot="start" :icon="timeOutline" />
         <ion-label>{{ $t('Run time') }}</ion-label>
-        <ion-select slot="end" interface="popover" value="Select" @ionChange="batchFacilityId = $event['detail'].value">
-          <ion-select-option value="Select">{{ $t("Select") }}</ion-select-option>
-          <ion-select-option value="PRE_ORDER_PARKING">{{ $t("Pre-order parking") }}</ion-select-option>
-          <ion-select-option value="BACKORDER_PARKING">{{ $t("Back-order parking") }}</ion-select-option> -->
+        <ion-select interface="popover" :placeholder="$t('Select')" :value="runTime" @ionChange="updateRunTime($event)">
+          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ $t(runTime.label) }}</ion-select-option>
         </ion-select>
+        <!-- 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
+        now commented the button and added a fallback string -->
+        <!-- <ion-button id="open-run-time-modal" size="small" fill="outline" color="medium" v-show="!currentJob?.runTime">{{ $t("Select run time") }}</ion-button> -->
+        <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">
+          <ion-content force-overscroll="false">
+            <ion-datetime          
+              show-default-buttons
+              hour-cycle="h23"
+              :value="runTime ? (isCustomRunTime(runTime) ? getDateTime(runTime) : getDateTime(DateTime.now().toMillis() + runTime)) : getNowTimestamp()"
+              @ionChange="updateCustomTime($event)"
+            />
+          </ion-content>
+        </ion-modal>
       </ion-item>
       <ion-item lines="none" :disabled="currentBatch?.jobId">
         <ion-icon slot="start" :icon="timerOutline" />
@@ -209,15 +148,11 @@ import {
   IonButtons,
   IonContent,
   IonDatetime,
-  IonFab,
-  IonFabButton,
   IonHeader,
   IonIcon,
   IonInput,
   IonItem,
   IonLabel,
-  IonRadio,
-  IonRadioGroup,
   IonSelect,
   IonSelectOption,
   IonTitle,
@@ -228,7 +163,7 @@ import { defineComponent } from 'vue';
 import { closeOutline, checkmarkDoneOutline, timeOutline, timerOutline, ticketOutline, warningOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from 'vuex';
 import { DateTime } from 'luxon';
-import { handleDateTimeInput, generateJobCustomParameters, getNowTimestamp, isFutureDate, showToast, hasJobDataError } from '@/utils';
+import { handleDateTimeInput, generateAllowedRunTimes, generateJobCustomParameters, getNowTimestamp, isCustomRunTime, isFutureDate, showToast, hasJobDataError } from '@/utils';
 import { translate } from '@/i18n'
 
 export default defineComponent({
@@ -237,16 +172,11 @@ export default defineComponent({
     IonButton,
     IonButtons,
     IonContent,
-    // IonDatetime,
-    // IonFab,
-    // IonFabButton,
     IonHeader,
     IonIcon,
     IonInput,
     IonItem,
     IonLabel,
-    // IonRadio,
-    // IonRadioGroup,
     IonSelect,
     IonSelectOption,
     IonTitle,
@@ -263,7 +193,10 @@ export default defineComponent({
       currentDateTime: '' as string,
       jobRunTime: '' as any,
       currentScheduledBatch: {} as any,
-      orders: ""
+      orders: "",
+      runTime: '' as any,
+      runTimes: [] as any,
+      isDateTimeModalOpen: false,
     }
   },
   computed: {
@@ -276,6 +209,7 @@ export default defineComponent({
   },
   mounted() {
     // this.getCurrentBatch();
+    this.generateRunTimes(this.runTime)
   },
   methods: {
     getDateTime(time: any) {
@@ -284,17 +218,28 @@ export default defineComponent({
     closeModal() {
       modalController.dismiss({ dismissed: true });
     },
+    async generateRunTimes(currentRunTime?: any) {
+      const runTimes = JSON.parse(JSON.stringify(generateAllowedRunTimes()))
+      let selectedRunTime
+      // 0 check for the 'Now' value and '' check for initial render
+      if (currentRunTime || currentRunTime === 0 ) {
+        selectedRunTime = runTimes.some((runTime: any) => runTime.value === currentRunTime)
+        if (!selectedRunTime) runTimes.push({ label: this.getTime(currentRunTime), value: currentRunTime })
+      }
+      this.runTime = currentRunTime
+      this.runTimes = runTimes
+    },
     async updateJob() {
       let batchJobEnum = this.enumId;
       if (!batchJobEnum) {
+        console.log('enter');
         const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => {
           return job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId
         });
         batchJobEnum = jobEnum.id
       }
-
-      const job = this.currentBatch ? this.currentBatch : this.getJob(batchJobEnum)?.find((job: any) => job.status === 'SERVICE_DRAFT');
       
+      const job = this.getJob(batchJobEnum)?.find((job: any) => job.status === 'SERVICE_DRAFT');
       if (!job) {
         showToast(translate('Configuration missing'))
         return;
@@ -303,37 +248,53 @@ export default defineComponent({
       // return if job has missing data or error
       if (hasJobDataError(job)) return;
 
-      if (this.jobRunTime) {
-        job['runTime'] = this.jobRunTime
+      console.log('run', this.runTime);
+      
+      if (this.runTime) {
+        console.log('entered');
+        
+        job['runTime'] = this.runTime
       }
 
       job['jobStatus'] = 'EVERYDAY';
       job['jobName'] = this.jobName || this.currentDateTime;
 
       // if job runTime is not a valid date then making runTime as empty
-      if (job?.runTime && !isFutureDate(job?.runTime)) {
-        job.runTime = ''
-      }
-      console.log(this.jobRunTime);
-      console.log(getNowTimestamp());
-      
+      // if (job?.runTime && !isFutureDate(job?.runTime)) {
+      //   job.runTime = ''
+      // }
       console.log('end', job);
       
-      if (job?.status === 'SERVICE_DRAFT') {
-        const jobCustomParameters = generateJobCustomParameters([], [], job.runtimeData)
-        // await this.store.dispatch('job/scheduleService', { job, jobCustomParameters })
-      } else if (job?.status === 'SERVICE_PENDING') {
-        // await this.store.dispatch('job/updateJob', job)
-      }
+      // if (job?.status === 'SERVICE_DRAFT') {
+      //   const jobCustomParameters = generateJobCustomParameters([], [], job.runtimeData)
+      //   await this.store.dispatch('job/scheduleService', { job, jobCustomParameters })
+      // } else if (job?.status === 'SERVICE_PENDING') {
+      //   await this.store.dispatch('job/updateJob', job)
+      // }
       this.closeModal()
     },
-    updateRunTime(ev: CustomEvent) {
-      console.log('ev', ev)
-      this.jobRunTime = handleDateTimeInput(ev['detail'].value)
+    updateCustomTime(event: CustomEvent) {
+      const currTime = DateTime.now().toMillis();
+      const setTime = handleDateTimeInput(event.detail.value);
+      if (setTime > currTime) this.generateRunTimes(setTime)
+      else showToast(translate("Provide a future date and time"))
+    },
+    // updateRunTime(ev: CustomEvent) {
+    //   console.log('ev', ev)
+    //   this.jobRunTime = handleDateTimeInput(ev['detail'].value)
+    // },
+    updateRunTime(event: CustomEvent) {
+      console.log(event);
+      const value = event.detail.value
+      if (value != 'CUSTOM') this.generateRunTimes(value)
+      else this.isDateTimeModalOpen = true
     },
     getCurrentDateTime() {
       return DateTime.now().setZone(this.userProfile.userTimeZone).toLocaleString(DateTime.DATETIME_MED);
     },
+    getTime (time: any) {
+      return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
+    },
   },
   setup() {
     const store = useStore();
@@ -346,7 +307,9 @@ export default defineComponent({
       timerOutline,
       warningOutline,
       store,
-      getNowTimestamp
+      DateTime,
+      getNowTimestamp,
+      isCustomRunTime
     };
   },
 });
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 41b08b43..fe9aefa7 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -244,6 +244,8 @@ export default defineComponent({
         if (!selectedRunTime) runTimes.push({ label: this.getTime(currentRunTime), value: currentRunTime })
       }
       this.runTime = currentRunTime
+      console.log(this.runTime);
+      
       this.runTimes = runTimes
     },
     async skipJob(job: any) {
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index f0cfc36a..7e67dcbf 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -189,6 +189,7 @@ export default defineComponent({
   },
   methods: {
     async addBatch() {
+      console.log(this.orderBatchJobs);
       const batchmodal = await modalController.create({
         component: BatchModal
       });

From 50d79e69c4df2cacf14acb55c696377bd9af32af Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 20 Oct 2023 16:33:07 +0530
Subject: [PATCH 03/14] Implemented: logic for new brokering page (#620)

---
 src/components/BatchModal.vue       | 219 +++++++++++++++-------------
 src/components/JobConfiguration.vue |   6 +-
 src/locales/en.json                 |   2 +
 src/views/Brokering.vue             | 156 ++++++++++----------
 4 files changed, 197 insertions(+), 186 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index 3c12adc9..6ab45f2d 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -1,51 +1,4 @@
 <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>{{ currentBatch?.jobName ? currentBatch?.jobName : $t('New broker run') }}</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <ion-content>
-    <ion-item>
-      <ion-label position="fixed">{{ $t('Batch name') }}</ion-label>
-      <ion-input :placeholder="currentDateTime = getCurrentDateTime()" v-model="jobName" />
-    </ion-item>
-    <ion-item :disabled="currentBatch?.jobId">
-      <ion-label>{{ $t('Order queue') }}</ion-label>
-      <ion-select slot="end" interface="popover" :value="this.currentScheduledBatch?.facilityId || batchFacilityId" @ionChange="batchFacilityId = $event['detail'].value">
-        <ion-select-option value="_NA_">{{ $t("Brokering queue") }}</ion-select-option>
-        <ion-select-option value="PRE_ORDER_PARKING">{{ $t("Pre-order parking") }}</ion-select-option>
-        <ion-select-option value="BACKORDER_PARKING">{{ $t("Back-order parking") }}</ion-select-option>
-      </ion-select>
-    </ion-item>
-    <ion-radio-group>
-      <ion-item :disabled="currentBatch?.jobId">
-        <ion-label>{{ $t('New orders') }}</ion-label>
-        "this.currentScheduledBatch?.unfillable === false" - Did this because ion-radio is not considering boolean 
-        <ion-radio :checked="this.currentScheduledBatch?.unfillable === false" slot="start" @click="unfillableOrder = false" color="secondary"/>
-      </ion-item>
-      <ion-item :disabled="currentBatch?.jobId">
-        <ion-label>{{ $t('Unfillable orders') }}</ion-label>
-        "this.currentScheduledBatch?.unfillable === false" - Did this because ion-radio is not considering boolean 
-        <ion-radio :checked="this.currentScheduledBatch?.unfillable === true" slot="start" @click="unfillableOrder = true" color="secondary"/>
-      </ion-item>
-    </ion-radio-group>
-    <ion-item>
-      <ion-label position="fixed">{{ $t("Schedule") }}</ion-label>
-      <ion-datetime hour-cycle="h12" :value="currentBatch?.runTime ? getDateTime(currentBatch.runTime) : getNowTimestamp()" @ionChange="updateRunTime($event)" presentation="time" size="cover" />
-    </ion-item>    
-    <ion-fab @click="updateJob()" vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="checkmarkDoneOutline" />  
-      </ion-fab-button>
-    </ion-fab>
-  </ion-content> -->
-
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
@@ -65,33 +18,49 @@
     <ion-item>
       <ion-icon slot="start" :icon="ticketOutline" />
       <ion-label>{{ $t('Order parking') }}</ion-label>
-      <ion-select slot="end" interface="popover" :value="batchFacilityId" @ionChange="batchFacilityId = $event['detail'].value">
+      <ion-select slot="end" interface="popover" :value="batchFacilityId" @ionChange="batchFacilityId = $event['detail'].value; updateCustomParameters()">
         <ion-select-option value="_NA_">{{ $t("Brokering queue") }}</ion-select-option>
         <ion-select-option value="PRE_ORDER_PARKING">{{ $t("Pre-order parking") }}</ion-select-option>
         <ion-select-option value="BACKORDER_PARKING">{{ $t("Back-order parking") }}</ion-select-option>
       </ion-select>
     </ion-item>
-    <ion-item>
+    <ion-item lines="full">
       <ion-icon slot="start" :icon="warningOutline" />
-      <ion-label>{{ $t('Unfillable Orders') }}</ion-label>
-      <ion-toggle slot="end" :checked="unfillableOrder" @ionChange="unfillableOrder = !unfillableOrder"></ion-toggle>
+      <ion-label>{{ $t('Unfillable orders') }}</ion-label>
+      <ion-toggle slot="end" :checked="unfillableOrder" @click="unfillableOrder = !unfillableOrder; updateCustomParameters()"></ion-toggle>
     </ion-item>
+    
+    
+    <ion-list v-if="customOptionalParameters.length || customRequiredParameters.length">
+      <ion-item lines="none">
+        <ion-label>
+          {{ 'More Parameters' }}
+        </ion-label>
+      </ion-item>
 
-    <ion-list>
-      <ion-list-header>
-        {{ 'More parameters' }}
-      </ion-list-header>
-      <ion-item>
-        <ion-label>{{ 'Placeholder 1' }}</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+      <ion-item-divider v-if="customRequiredParameters.length">
+        <ion-label>{{ $t('Required Parameters') }}</ion-label>
+      </ion-item-divider>
+      
+      <ion-item :key="index" v-for="(parameter, index) in customRequiredParameters">
+        <ion-label>{{ parameter.name }}</ion-label>
+        <ion-input ></ion-input>>
+        <ion-note slot="helper">{{ parameter.type }}</ion-note>
       </ion-item>
-      <ion-item>
-        <ion-label>{{ 'Placeholder 2' }}</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+      
+      <ion-item-divider v-if="customOptionalParameters.length" color="light">
+        <ion-label>{{ $t('Optional Parameters') }}</ion-label>
+      </ion-item-divider>
+
+      <ion-item :key="parameter.value" v-for="parameter in customOptionalParameters">
+        <ion-label>{{ parameter.name }}</ion-label>
+        <ion-input :placeholder="parameter.name" v-model="parameter.value" />
+        <ion-note slot="helper">{{ parameter.type }}</ion-note>
       </ion-item>
+    </ion-list>
+    <ion-list v-else>
       <ion-item>
-        <ion-label>{{ 'Placeholder 3' }}</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+        <ion-label>{{ 'No parameters available' }}</ion-label>
       </ion-item>
     </ion-list>
 
@@ -124,38 +93,42 @@
       <ion-item lines="none" :disabled="currentBatch?.jobId">
         <ion-icon slot="start" :icon="timerOutline" />
         <ion-label>{{ $t('Frequency') }}</ion-label>
-        <ion-select slot="end" interface="popover" value="Select" @ionChange="batchFacilityId = $event['detail'].value">
-          <ion-select-option value="Select">{{ $t("Once in 15 minutes") }}</ion-select-option>
+        <ion-select :value="jobStatus" :interface-options="{ header: $t('Frequency') }" interface="popover" :placeholder="$t('Disabled')" @ionChange="jobStatus = $event.detail.value" @ionDismiss="jobStatus == 'CUSTOM' && setCustomFrequency()">
+          <ion-select-option v-for="freq in frequencyOptions" :key="freq.id" :value="freq.id">{{ freq.description }}</ion-select-option>
         </ion-select>
       </ion-item>
     </ion-card>
-    
-    <ion-item>
-      <ion-label position="fixed">{{ $t("Schedule") }}</ion-label>
-      <ion-datetime hour-cycle="h12" :value="getNowTimestamp()" @ionChange="updateRunTime($event)" presentation="time" size="cover" />
-    </ion-item>    
-    <ion-fab @click="updateJob()" vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button>
-        <ion-icon :icon="checkmarkDoneOutline" />  
-      </ion-fab-button>
-    </ion-fab>
+
   </ion-content>
+  <ion-fab  :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing"  @click="updateJob()" vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon :icon="checkmarkDoneOutline" />  
+    </ion-fab-button>
+  </ion-fab>
 </template>
 
 <script lang="ts">
 import {
   IonButton,
   IonButtons,
+  IonCard,
   IonContent,
   IonDatetime,
+  IonFab,
+  IonFabButton,
   IonHeader,
   IonIcon,
   IonInput,
   IonItem,
+  IonItemDivider,
   IonLabel,
+  IonList,
+  IonModal,
+  IonNote,
   IonSelect,
   IonSelectOption,
   IonTitle,
+  IonToggle,
   IonToolbar,
   modalController
 } from '@ionic/vue';
@@ -163,23 +136,34 @@ import { defineComponent } from 'vue';
 import { closeOutline, checkmarkDoneOutline, timeOutline, timerOutline, ticketOutline, warningOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from 'vuex';
 import { DateTime } from 'luxon';
-import { handleDateTimeInput, generateAllowedRunTimes, generateJobCustomParameters, getNowTimestamp, isCustomRunTime, isFutureDate, showToast, hasJobDataError } from '@/utils';
+import { handleDateTimeInput, generateAllowedRunTimes, generateAllowedFrequencies, generateJobCustomParameters, generateJobCustomOptions, getNowTimestamp, isCustomRunTime, isFutureDate, showToast, hasJobDataError } from '@/utils';
 import { translate } from '@/i18n'
+import CustomFrequencyModal from '@/components/CustomFrequencyModal.vue';
+import { Actions, hasPermission } from '@/authorization'
 
 export default defineComponent({
   name: 'BatchModal',
   components: {
     IonButton,
     IonButtons,
+    IonCard,
     IonContent,
+    IonDatetime,
+    IonFab,
+    IonFabButton,
     IonHeader,
     IonIcon,
     IonInput,
     IonItem,
+    IonItemDivider,
     IonLabel,
+    IonList,
+    IonModal,
+    IonNote,
     IonSelect,
     IonSelectOption,
     IonTitle,
+    IonToggle,
     IonToolbar,
   },
   props: ["id", "enumId"],
@@ -191,12 +175,13 @@ export default defineComponent({
       unfillableOrder: false as boolean,
       batchFacilityId: '_NA_' as string,
       currentDateTime: '' as string,
-      jobRunTime: '' as any,
-      currentScheduledBatch: {} as any,
-      orders: "",
       runTime: '' as any,
       runTimes: [] as any,
       isDateTimeModalOpen: false,
+      jobStatus: null,
+      frequencyOptions: [] as any,
+      customOptionalParameters: [] as any,
+      customRequiredParameters: [] as any
     }
   },
   computed: {
@@ -208,8 +193,9 @@ export default defineComponent({
     }),
   },
   mounted() {
-    // this.getCurrentBatch();
     this.generateRunTimes(this.runTime)
+    this.generateFrequencyOptions(this.jobStatus)
+    this.updateCustomParameters()
   },
   methods: {
     getDateTime(time: any) {
@@ -229,10 +215,23 @@ export default defineComponent({
       this.runTime = currentRunTime
       this.runTimes = runTimes
     },
+    async generateFrequencyOptions(currentFrequency?: any) {
+      const frequencyOptions = JSON.parse(JSON.stringify(generateAllowedFrequencies()));
+      if (hasPermission(Actions.APP_CUSTOM_FREQ_VIEW)) frequencyOptions.push({ "id": "CUSTOM", "description": "Custom"})
+      if (currentFrequency) {
+        const selectedFrequency = frequencyOptions.find((frequency: any) => frequency.id === currentFrequency);
+        if (!selectedFrequency ) {
+          const frequencies = await this.store.dispatch("job/fetchTemporalExpression", [ currentFrequency ]);
+          const frequency = frequencies[currentFrequency];
+          frequency && (frequencyOptions.push({ "id": frequency.tempExprId,  "description": frequency.description }))
+        }
+      }
+      this.frequencyOptions = frequencyOptions;
+      this.jobStatus = currentFrequency;
+    },
     async updateJob() {
       let batchJobEnum = this.enumId;
       if (!batchJobEnum) {
-        console.log('enter');
         const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => {
           return job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId
         });
@@ -247,16 +246,12 @@ export default defineComponent({
 
       // return if job has missing data or error
       if (hasJobDataError(job)) return;
-
-      console.log('run', this.runTime);
       
       if (this.runTime) {
-        console.log('entered');
-        
         job['runTime'] = this.runTime
       }
 
-      job['jobStatus'] = 'EVERYDAY';
+      job['jobStatus'] = this.jobStatus !== 'SERVICE_DRAFT' ? this.jobStatus : 'HOURLY';
       job['jobName'] = this.jobName || this.currentDateTime;
 
       // if job runTime is not a valid date then making runTime as empty
@@ -265,26 +260,42 @@ export default defineComponent({
       // }
       console.log('end', job);
       
-      // if (job?.status === 'SERVICE_DRAFT') {
-      //   const jobCustomParameters = generateJobCustomParameters([], [], job.runtimeData)
-      //   await this.store.dispatch('job/scheduleService', { job, jobCustomParameters })
-      // } else if (job?.status === 'SERVICE_PENDING') {
-      //   await this.store.dispatch('job/updateJob', job)
-      // }
+      if (job?.status === 'SERVICE_DRAFT') {
+        const jobCustomParameters = generateJobCustomParameters(this.customRequiredParameters, this.customOptionalParameters, job.runtimeData)  
+        await this.store.dispatch('job/scheduleService', { job, jobCustomParameters })
+      } else if (job?.status === 'SERVICE_PENDING') {
+        await this.store.dispatch('job/updateJob', job)
+      }
       this.closeModal()
     },
+    async setCustomFrequency() {
+      const customFrequencyModal = await modalController.create({
+        component: CustomFrequencyModal,
+      });
+      customFrequencyModal.onDidDismiss()
+        .then((result) => {
+          let jobStatus = result.data.frequencyId;
+          this.generateFrequencyOptions(jobStatus);
+        });
+      return customFrequencyModal.present();
+    },
     updateCustomTime(event: CustomEvent) {
       const currTime = DateTime.now().toMillis();
       const setTime = handleDateTimeInput(event.detail.value);
       if (setTime > currTime) this.generateRunTimes(setTime)
       else showToast(translate("Provide a future date and time"))
     },
-    // updateRunTime(ev: CustomEvent) {
-    //   console.log('ev', ev)
-    //   this.jobRunTime = handleDateTimeInput(ev['detail'].value)
-    // },
+    updateCustomParameters() {
+      const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => {
+        return job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId
+      });
+      let batchJobEnum = jobEnum.id
+      
+      const job = this.getJob(batchJobEnum)?.find((job: any) => job.status === 'SERVICE_DRAFT');
+      this.customOptionalParameters = generateJobCustomOptions(job).optionalParameters;
+      this.customRequiredParameters = generateJobCustomOptions(job).requiredParameters;
+    },
     updateRunTime(event: CustomEvent) {
-      console.log(event);
       const value = event.detail.value
       if (value != 'CUSTOM') this.generateRunTimes(value)
       else this.isDateTimeModalOpen = true
@@ -295,6 +306,9 @@ export default defineComponent({
     getTime (time: any) {
       return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
     },
+    isRequiredParametersMissing() {
+      return this.customRequiredParameters.some((parameter: any) => !parameter.value?.trim())
+    },
   },
   setup() {
     const store = useStore();
@@ -309,8 +323,15 @@ export default defineComponent({
       store,
       DateTime,
       getNowTimestamp,
-      isCustomRunTime
+      isCustomRunTime,
+      Actions,
+      hasPermission
     };
   },
 });
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+  ion-content {
+  --offset-bottom: 100px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index fe9aefa7..a27be9a9 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -2,7 +2,7 @@
   <section>
     <ion-item lines="none">
       <!-- Adding conditional check for currentJob.jobName as currentJob is undefined when i18n runs $t -->
-      <h1>{{ currentJob.enumName ? currentJob.enumName : currentJob.jobName ? currentJob.jobName : '' }}</h1>
+      <h1>{{ isBrokerJob ? currentJob.jobName : currentJob.enumName ? currentJob.enumName : currentJob.jobName ? currentJob.jobName : '' }}</h1>
       <ion-badge slot="end" color="dark" v-if="currentJob?.runTime && currentJob.statusId !== 'SERVICE_DRAFT'">{{ $t("running") }} {{ timeTillJob(currentJob.runTime) }}</ion-badge>
     </ion-item>
 
@@ -199,7 +199,7 @@ export default defineComponent({
     this.generateRunTimes(this.runTime)
     this.generateFrequencyOptions(this.jobStatus)
   },
-  props: ["status", "type"],
+  props: ["isBrokerJob", "status", "type"],
   computed: {
     ...mapGetters({
       pinnedJobs: 'user/getPinnedJobs',
@@ -244,8 +244,6 @@ export default defineComponent({
         if (!selectedRunTime) runTimes.push({ label: this.getTime(currentRunTime), value: currentRunTime })
       }
       this.runTime = currentRunTime
-      console.log(this.runTime);
-      
       this.runTimes = runTimes
     },
     async skipJob(job: any) {
diff --git a/src/locales/en.json b/src/locales/en.json
index eafe5f28..dad35fcd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -130,6 +130,7 @@
   "Miscellaneous jobs": "Miscellaneous jobs",
   "More jobs": "More jobs",
   "More options": "More options",
+  "Name": "Name",
   "New broker run": "New broker run",
   "New orders": "New orders",
   "New products": "New products",
@@ -149,6 +150,7 @@
   "On hold": "On hold",
   "Open": "Open",
   "Optional Parameters": "Optional Parameters",
+  "Order parking": "Order parking",
   "Order queue": "Order queue",
   "Order status": "Order status",
   "Orders": "Orders",
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 7e67dcbf..62a4b05d 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -11,89 +11,54 @@
       <main>
         <section>
           <ion-button expand="block" :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="addBatch()" >{{ 'Create new brokering job' }}</ion-button>
-        
+
           <ion-item lines="none">
             <ion-label>
               <h1>{{ 'Scheduled Job' }}</h1>
             </ion-label>
           </ion-item>
 
-          <ion-card v-for="batch in orderBatchJobs" :key="batch?.id" detail v-show="batch?.status === 'SERVICE_PENDING'" @click="viewJobConfiguration({ id: batch.systemJobEnumId, status: batch.statusId})">
-            <ion-item lines="none">
-              <ion-label>
-                {{'Queue Name'}}
-                <h1>{{ batch?.jobName }}</h1>
-              </ion-label>
-              <ion-badge slot="end" color="dark" >{{ timeFromNow(batch?.runTime) }}</ion-badge>
+          <ion-card>
+            <ion-item @click="viewJobConfiguration({ id: 'REJ_ORDR', status: getJobStatus(jobEnums['REJ_ORDR'])})" detail button>
+              <ion-label class="ion-text-wrap">{{ $t("Rejected orders") }}</ion-label>
+              <ion-label slot="end">{{ getTemporalExpression('REJ_ORDR') }}</ion-label>
             </ion-item>
+          </ion-card>
+
+          <ion-card :button="isDesktop" v-for="batch in orderBatchJobs" :key="batch?.id" detail v-show="batch?.status === 'SERVICE_PENDING'" @click="hasPermission(Actions.APP_JOB_UPDATE) && viewJobConfiguration({ job:batch })">
+            <ion-card-header>
+              <div>
+                <ion-card-subtitle>{{ getBrokerQueue(batch) }}</ion-card-subtitle>
+                <ion-card-title>{{ batch?.jobName }}</ion-card-title>
+              </div>
+              <ion-badge class="ion-margin-start" color="dark" >{{ timeFromNow(batch?.runTime) }}</ion-badge>
+            </ion-card-header>
 
             <ion-list>
               <ion-item lines="none">
-                <ion-label class="ion-text-wrap">{{ batch?.frequency }}</ion-label>
-                <ion-label slot="end">{{ batch?.runTime ? getTime(batch.runTime) : '' }}</ion-label>
+                <ion-label class="ion-text-wrap">{{ batch?.temporalExpression?.description }}</ion-label>
+                <ion-label slot="end">{{  batch?.runTime ? getTime(batch.runTime) : "-" }}</ion-label>
               </ion-item>
-
+  
               <ion-item lines="none">
-                <ion-label class="ion-text-wrap">{{ $t("Unfillable Order") }}</ion-label>
-                <ion-toggle slot="end"/>
+                <ion-text class="ion-text-wrap">{{ $t("Unfillable orders") }}</ion-text>
+                <ion-toggle disabled :checked="batchJobEnums[batch?.enumId].unfillable" slot="end"/>
               </ion-item>
-
-              <ion-item lines="none">
+  
+              <ion-item lines="none" v-if="generateCustomParameters(batch).length">
                 <ion-row>
-                  <ion-chip outline >
-                    {{ 'Custom' }}: {{ 'Parameter' }}
+                  <ion-chip outline :key="name" v-for="(value, name) in generateCustomParameters(batch)">
+                    {{ name }}: {{ value }}
                   </ion-chip>
                 </ion-row>
               </ion-item>
             </ion-list>
           </ion-card>
-        </section>
-        <!-- <section>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>{{ $t("Routing") }}</ion-card-title>
-            </ion-card-header>
-            <ion-item @click="viewJobConfiguration({ id: 'REJ_ORDR', status: getJobStatus(jobEnums['REJ_ORDR'])})" detail button>
-              <ion-label class="ion-text-wrap">{{ $t("Rejected orders") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('REJ_ORDR') }}</ion-label>
-            </ion-item>
-            <ion-item-divider>
-              <ion-label class="ion-text-wrap">{{ $t("Batches") }}</ion-label>
-              <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" fill="clear" @click="addBatch()" slot="end">
-                {{ $t("Add") }}
-                <ion-icon :icon="addCircleOutline" slot="end" />
-              </ion-button>
-            </ion-item-divider>
-
-            <ion-list ref="slidingOptions">
-              <ion-item-sliding v-for="batch in orderBatchJobs" :key="batch?.id" detail v-show="batch?.status === 'SERVICE_PENDING'">
-                <ion-item @click="hasPermission(Actions.APP_JOB_UPDATE) && editBatch(batch.id, batch.systemJobEnumId)" button>
-                  <ion-label class="ion-text-wrap">{{ batch?.jobName }}</ion-label>
-                  <ion-note slot="end">{{ batch?.runTime ? getTime(batch.runTime) : '' }}</ion-note>
-                </ion-item>
-                <ion-item-options side="start">
-                  <ion-item-option @click="hasPermission(Actions.APP_JOB_UPDATE) && skipBatch(batch)" color="secondary">
-                    <ion-icon slot="icon-only" :icon="arrowRedoOutline" />
-                  </ion-item-option>
-                </ion-item-options>
-                <ion-item-options side="end">
-                  <ion-item-option @click="hasPermission(Actions.APP_JOB_UPDATE) && deleteBatch(batch)" color="danger">
-                    <ion-icon slot="icon-only" :icon="trashOutline" />
-                  </ion-item-option>
-                </ion-item-options>
-              </ion-item-sliding>
-            </ion-list>
-            <ion-item lines="none">
-              <ion-label class="ion-text-wrap">
-                <p>{{ $t("Create batches and schedule brokering for different orders.") }}</p>
-              </ion-label>
-            </ion-item>
-          </ion-card>
           <MoreJobs v-if="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId).length" :jobs="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId)" />
-        </section> -->
+        </section>
 
         <aside class="desktop-only" v-if="isDesktop" v-show="currentJob">
-          <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob"/>
+          <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob" isBrokerJob="true"/>
         </aside>
       </main>
     </ion-content>
@@ -103,25 +68,25 @@
 <script lang="ts">
 import {
   alertController,
+  IonBadge,
   IonButton,
   IonCard,
   IonCardHeader,
+  IonCardSubtitle,
   IonCardTitle,
+  IonChip,
   IonContent,
   IonHeader,
-  IonIcon,
   IonItem,
-  IonItemDivider,
-  IonItemSliding,
   IonLabel,
   IonList,
   IonMenuButton,
-  IonNote,
-  IonItemOption,
-  IonItemOptions,
   IonPage,
+  IonText,
   IonTitle,
+  IonToggle,
   IonToolbar,
+  IonRow,
   isPlatform,
   modalController
 } from '@ionic/vue';
@@ -134,7 +99,7 @@ import { useRouter } from 'vue-router'
 import { mapGetters } from "vuex";
 import JobConfiguration from '@/components/JobConfiguration.vue';
 import { DateTime } from 'luxon';
-import { hasError, isFutureDate, showToast } from '@/utils';
+import { generateJobCustomOptions, generateJobCustomParameters, hasError, isFutureDate, showToast } from '@/utils';
 import emitter from '@/event-bus';
 import MoreJobs from '@/components/MoreJobs.vue';
 import { Actions, hasPermission } from '@/authorization'
@@ -142,27 +107,27 @@ import { Actions, hasPermission } from '@/authorization'
 export default defineComponent({
   name: 'Brokering',
   components: {
+    IonBadge,
     IonButton,
     IonCard,
-    // IonCardHeader,
-    // IonCardTitle,
+    IonCardHeader,
+    IonCardSubtitle,
+    IonCardTitle,
+    IonChip,
     IonContent,
     IonHeader,
-    // IonIcon,
     IonItem,
-    // IonItemSliding,
-    // IonItemDivider,
     IonLabel,
     IonList,
     IonMenuButton,
-    // IonNote,
-    // IonItemOption,
-    // IonItemOptions,
     IonPage,
+    IonRow,
+    IonText,
     IonTitle,
+    IonToggle,
     IonToolbar,
     JobConfiguration,
-    // MoreJobs
+    MoreJobs
   },
   data() {
     return {
@@ -189,7 +154,6 @@ export default defineComponent({
   },
   methods: {
     async addBatch() {
-      console.log(this.orderBatchJobs);
       const batchmodal = await modalController.create({
         component: BatchModal
       });
@@ -253,11 +217,21 @@ export default defineComponent({
       // return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
       return DateTime.fromMillis(time).toLocaleString(DateTime.TIME_24_SIMPLE);
     },
+    getBrokerQueue(job: any){
+      if(job.status === 'SERVICE_PENDING'){
+        const brokerQueueId = this.batchJobEnums[job?.enumId].id
+        
+        if(brokerQueueId === "_NA_"){
+          return "Brokering queue"
+        }else if(brokerQueueId === "PRE_ORDER_PARKING"){
+          return "Pre-order parking"
+        }else{
+          return "Back-order parking"
+        }
+      }
+    },
     async viewJobConfiguration(jobInformation: any) {
       this.currentJob = jobInformation.job || this.getJob(this.jobEnums[jobInformation.id])
-      console.log(this.jobEnums[jobInformation.id]);
-      console.log(this.currentJob);
-      
       this.currentJobStatus = jobInformation.status
       this.freqType = jobInformation.id && this.jobFrequencyType[jobInformation.id]
 
@@ -304,7 +278,15 @@ export default defineComponent({
         const timeDiff = DateTime.fromMillis(time).diff(DateTime.local());
         return DateTime.local().plus(timeDiff).toRelative();
       }
-    },    
+    },
+    generateCustomParameters(job: any) {
+      let customOptionalParameters = generateJobCustomOptions(job).optionalParameters;
+      let customRequiredParameters = generateJobCustomOptions(job).requiredParameters;
+      
+      // passing runTimeData params as empty, as we don't need to show the runTimeData information on UI as all the options from runtimeData might not be available in serviceInParams
+      return generateJobCustomParameters(customRequiredParameters, customOptionalParameters, {})
+      // return generateJobCustomParameters(customRequiredParameters, customOptionalParameters, job.runtimeData)
+    }
   },
   mounted () {
     this.fetchJobs();
@@ -331,4 +313,12 @@ export default defineComponent({
     };
   },
 });
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+ion-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>
\ No newline at end of file

From a0bc6dc25dace2b07faef5c12b4540132941e774 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 20 Oct 2023 17:46:48 +0530
Subject: [PATCH 04/14] Improved: optimal code for brokering page(#620)

---
 src/components/BatchModal.vue | 72 +++++++++++++++--------------------
 src/locales/en.json           |  1 +
 src/views/Brokering.vue       | 58 ++--------------------------
 3 files changed, 35 insertions(+), 96 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index 6ab45f2d..a3de69d8 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -24,13 +24,12 @@
         <ion-select-option value="BACKORDER_PARKING">{{ $t("Back-order parking") }}</ion-select-option>
       </ion-select>
     </ion-item>
-    <ion-item lines="full">
+    <ion-item>
       <ion-icon slot="start" :icon="warningOutline" />
       <ion-label>{{ $t('Unfillable orders') }}</ion-label>
       <ion-toggle slot="end" :checked="unfillableOrder" @click="unfillableOrder = !unfillableOrder; updateCustomParameters()"></ion-toggle>
     </ion-item>
-    
-    
+
     <ion-list v-if="customOptionalParameters.length || customRequiredParameters.length">
       <ion-item lines="none">
         <ion-label>
@@ -44,7 +43,7 @@
       
       <ion-item :key="index" v-for="(parameter, index) in customRequiredParameters">
         <ion-label>{{ parameter.name }}</ion-label>
-        <ion-input ></ion-input>>
+        <ion-input :placeholder="parameter.name" v-model="parameter.value" />
         <ion-note slot="helper">{{ parameter.type }}</ion-note>
       </ion-item>
       
@@ -54,31 +53,29 @@
 
       <ion-item :key="parameter.value" v-for="parameter in customOptionalParameters">
         <ion-label>{{ parameter.name }}</ion-label>
+        <!-- Todo: look into issue with input taking one character at a time -->
         <ion-input :placeholder="parameter.name" v-model="parameter.value" />
         <ion-note slot="helper">{{ parameter.type }}</ion-note>
       </ion-item>
     </ion-list>
     <ion-list v-else>
       <ion-item>
-        <ion-label>{{ 'No parameters available' }}</ion-label>
+        <ion-label>{{ $t('No parameters available') }}</ion-label>
       </ion-item>
     </ion-list>
 
     <ion-card>
-      <ion-item lines="none">
-        <ion-label>{{ 'Schedule' }}</ion-label>
-      </ion-item>
+      <ion-card-header>
+        <ion-card-title>{{ $t('Schedule') }}</ion-card-title>
+      </ion-card-header>
+
       <ion-item :disabled="currentBatch?.jobId">
         <ion-icon slot="start" :icon="timeOutline" />
         <ion-label>{{ $t('Run time') }}</ion-label>
         <ion-select interface="popover" :placeholder="$t('Select')" :value="runTime" @ionChange="updateRunTime($event)">
           <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ $t(runTime.label) }}</ion-select-option>
         </ion-select>
-        <!-- 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
-        now commented the button and added a fallback string -->
-        <!-- <ion-button id="open-run-time-modal" size="small" fill="outline" color="medium" v-show="!currentJob?.runTime">{{ $t("Select run time") }}</ion-button> -->
+
         <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">
           <ion-content force-overscroll="false">
             <ion-datetime          
@@ -112,6 +109,8 @@ import {
   IonButton,
   IonButtons,
   IonCard,
+  IonCardHeader,
+  IonCardTitle,
   IonContent,
   IonDatetime,
   IonFab,
@@ -133,10 +132,10 @@ import {
   modalController
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
-import { closeOutline, checkmarkDoneOutline, timeOutline, timerOutline, ticketOutline, warningOutline } from 'ionicons/icons';
+import { closeOutline, checkmarkDoneOutline, ticketOutline, timeOutline, timerOutline, warningOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from 'vuex';
 import { DateTime } from 'luxon';
-import { handleDateTimeInput, generateAllowedRunTimes, generateAllowedFrequencies, generateJobCustomParameters, generateJobCustomOptions, getNowTimestamp, isCustomRunTime, isFutureDate, showToast, hasJobDataError } from '@/utils';
+import { handleDateTimeInput, generateAllowedFrequencies, generateAllowedRunTimes, generateJobCustomParameters, generateJobCustomOptions, getNowTimestamp, hasJobDataError, isCustomRunTime, showToast } from '@/utils';
 import { translate } from '@/i18n'
 import CustomFrequencyModal from '@/components/CustomFrequencyModal.vue';
 import { Actions, hasPermission } from '@/authorization'
@@ -147,6 +146,8 @@ export default defineComponent({
     IonButton,
     IonButtons,
     IonCard,
+    IonCardHeader,
+    IonCardTitle,
     IonContent,
     IonDatetime,
     IonFab,
@@ -166,7 +167,6 @@ export default defineComponent({
     IonToggle,
     IonToolbar,
   },
-  props: ["id", "enumId"],
   data() {
     return {
       jobEnums: JSON.parse(process.env?.VUE_APP_BATCH_JOB_ENUMS as string) as any,
@@ -230,15 +230,11 @@ export default defineComponent({
       this.jobStatus = currentFrequency;
     },
     async updateJob() {
-      let batchJobEnum = this.enumId;
-      if (!batchJobEnum) {
-        const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => {
-          return job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId
-        });
-        batchJobEnum = jobEnum.id
-      }
-      
-      const job = this.getJob(batchJobEnum)?.find((job: any) => job.status === 'SERVICE_DRAFT');
+      const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => {
+        return job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId
+      });
+
+      const job = this.getJob(jobEnum.id)?.find((job: any) => job.status === 'SERVICE_DRAFT');
       if (!job) {
         showToast(translate('Configuration missing'))
         return;
@@ -254,14 +250,8 @@ export default defineComponent({
       job['jobStatus'] = this.jobStatus !== 'SERVICE_DRAFT' ? this.jobStatus : 'HOURLY';
       job['jobName'] = this.jobName || this.currentDateTime;
 
-      // if job runTime is not a valid date then making runTime as empty
-      // if (job?.runTime && !isFutureDate(job?.runTime)) {
-      //   job.runTime = ''
-      // }
-      console.log('end', job);
-      
       if (job?.status === 'SERVICE_DRAFT') {
-        const jobCustomParameters = generateJobCustomParameters(this.customRequiredParameters, this.customOptionalParameters, job.runtimeData)  
+        const jobCustomParameters = generateJobCustomParameters(this.customRequiredParameters, this.customOptionalParameters, job.runtimeData)
         await this.store.dispatch('job/scheduleService', { job, jobCustomParameters })
       } else if (job?.status === 'SERVICE_PENDING') {
         await this.store.dispatch('job/updateJob', job)
@@ -289,9 +279,8 @@ export default defineComponent({
       const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => {
         return job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId
       });
-      let batchJobEnum = jobEnum.id
-      
-      const job = this.getJob(batchJobEnum)?.find((job: any) => job.status === 'SERVICE_DRAFT');
+
+      const job = this.getJob(jobEnum.id)?.find((job: any) => job.status === 'SERVICE_DRAFT');
       this.customOptionalParameters = generateJobCustomOptions(job).optionalParameters;
       this.customRequiredParameters = generateJobCustomOptions(job).requiredParameters;
     },
@@ -308,7 +297,7 @@ export default defineComponent({
     },
     isRequiredParametersMissing() {
       return this.customRequiredParameters.some((parameter: any) => !parameter.value?.trim())
-    },
+    }
   },
   setup() {
     const store = useStore();
@@ -316,20 +305,21 @@ export default defineComponent({
     return {
       checkmarkDoneOutline,
       closeOutline,
+      getNowTimestamp,
+      hasPermission,
+      isCustomRunTime,
+      store,
       ticketOutline,
       timeOutline,
       timerOutline,
       warningOutline,
-      store,
-      DateTime,
-      getNowTimestamp,
-      isCustomRunTime,
       Actions,
-      hasPermission
+      DateTime
     };
   },
 });
 </script>
+
 <style scoped>
   ion-content {
   --offset-bottom: 100px;
diff --git a/src/locales/en.json b/src/locales/en.json
index dad35fcd..17c21f51 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -139,6 +139,7 @@
   "No frequency found": "No frequency found",
   "No jobs found": "No jobs found",
   "No jobs have run yet": "No jobs have run yet",
+  "No parameters available": "No parameters available",
   "No previous occurrence": "No previous occurrence",
   "No time zone found": "No time zone found",
   "Notes": "Notes",
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 62a4b05d..9e3f78dd 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -25,7 +25,7 @@
             </ion-item>
           </ion-card>
 
-          <ion-card :button="isDesktop" v-for="batch in orderBatchJobs" :key="batch?.id" detail v-show="batch?.status === 'SERVICE_PENDING'" @click="hasPermission(Actions.APP_JOB_UPDATE) && viewJobConfiguration({ job:batch })">
+          <ion-card :button="isDesktop" v-for="batch in orderBatchJobs" :key="batch?.id" detail v-show="batch?.status === 'SERVICE_PENDING'" @click="hasPermission(Actions.APP_JOB_UPDATE) && viewJobConfiguration({ job: batch })">
             <ion-card-header>
               <div>
                 <ion-card-subtitle>{{ getBrokerQueue(batch) }}</ion-card-subtitle>
@@ -67,7 +67,6 @@
 
 <script lang="ts">
 import {
-  alertController,
   IonBadge,
   IonButton,
   IonCard,
@@ -82,16 +81,15 @@ import {
   IonList,
   IonMenuButton,
   IonPage,
+  IonRow,
   IonText,
   IonTitle,
   IonToggle,
   IonToolbar,
-  IonRow,
   isPlatform,
   modalController
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
-import { translate } from '@/i18n'
 import { addCircleOutline, arrowRedoOutline, trashOutline } from 'ionicons/icons';
 import BatchModal from '@/components/BatchModal.vue';
 import { useStore } from "@/store";
@@ -166,55 +164,7 @@ export default defineComponent({
       });
       return batchmodal.present();
     },
-    async deleteBatch(batch: any) {
-      const deleteBatchAlert = await alertController
-        .create({
-          header: this.$t('Cancel job'),
-          message: this.$t("Canceling this job will cancel this occurrence and all following occurrences. This job will have to be re-enabled manually to run it again."),
-          buttons: [
-            {
-              text: this.$t("Don't cancel"),
-              role: 'cancel',
-            },
-            {
-              text: this.$t("Cancel"),
-              handler: async () => {
-                await this.store.dispatch('job/cancelJob', batch);
-              },
-            },
-          ],
-        });
-      return deleteBatchAlert.present();
-    },
-    async skipBatch (batch: any) {
-      const skipJobAlert = await alertController
-        .create({
-          header: this.$t('Skip job'),
-          message: this.$t('Skipping will run this job at the next occurrence based on the temporal expression.'),
-          buttons: [
-            {
-              text: this.$t("Don't skip"),
-              role: 'cancel',
-            },
-            {
-              text: this.$t('Skip'),
-              handler: async () => {
-                this.store.dispatch('job/skipJob', batch).then((resp) => {
-                  if (resp.status === 200 && !hasError(resp)) {
-                    showToast(translate("This job has been skipped"));
-                  } else {
-                    showToast(translate("This job schedule cannot be skipped"));
-                  }
-                });
-                (this as any).$refs.slidingOptions.$el.closeSlidingItems();
-              },
-            }
-          ]
-        });
-      return skipJobAlert.present();
-    },
     getTime (time: any) {
-      // return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
       return DateTime.fromMillis(time).toLocaleString(DateTime.TIME_24_SIMPLE);
     },
     getBrokerQueue(job: any){
@@ -283,16 +233,14 @@ export default defineComponent({
       let customOptionalParameters = generateJobCustomOptions(job).optionalParameters;
       let customRequiredParameters = generateJobCustomOptions(job).requiredParameters;
       
-      // passing runTimeData params as empty, as we don't need to show the runTimeData information on UI as all the options from runtimeData might not be available in serviceInParams
+      // passing runTimeData params as empty, as we don't need to show the runTimeData information on UI
       return generateJobCustomParameters(customRequiredParameters, customOptionalParameters, {})
-      // return generateJobCustomParameters(customRequiredParameters, customOptionalParameters, job.runtimeData)
     }
   },
   mounted () {
     this.fetchJobs();
     emitter.on("productStoreOrConfigChanged", this.fetchJobs);
     emitter.on('viewJobConfiguration', this.viewJobConfiguration)
-    
   },
   unmounted() {
     emitter.off("productStoreOrConfigChanged", this.fetchJobs);

From b280ff69083f05da19e91448a6ec9e1c5e7cccda Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 20 Oct 2023 18:22:02 +0530
Subject: [PATCH 05/14] Improved: time format to show AM/PM (#620)

---
 src/views/Brokering.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 9e3f78dd..627692dc 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -165,7 +165,7 @@ export default defineComponent({
       return batchmodal.present();
     },
     getTime (time: any) {
-      return DateTime.fromMillis(time).toLocaleString(DateTime.TIME_24_SIMPLE);
+      return DateTime.fromMillis(time).toFormat('hh:mm a');
     },
     getBrokerQueue(job: any){
       if(job.status === 'SERVICE_PENDING'){

From fd03327a5e8bf32ec01f91f268148275065d5060 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 20 Oct 2023 19:35:50 +0530
Subject: [PATCH 06/14] Improved: runtime to be passed from current time millis
 (#620)

---
 src/components/BatchModal.vue       | 19 +++++++++----------
 src/components/JobConfiguration.vue |  2 +-
 src/store/modules/job/actions.ts    |  1 +
 src/views/Brokering.vue             |  4 ++--
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index a3de69d8..921dc1b1 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -10,7 +10,7 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content>
+  <ion-content class="custom-ion-content">
     <ion-item>
       <ion-label position="fixed">{{ $t('Name') }}</ion-label>
       <ion-input :placeholder="currentDateTime = getCurrentDateTime()" v-model="jobName" />
@@ -244,18 +244,14 @@ export default defineComponent({
       if (hasJobDataError(job)) return;
       
       if (this.runTime) {
-        job['runTime'] = this.runTime
+        job['runTime'] = DateTime.now().toMillis() + this.runTime
       }
 
       job['jobStatus'] = this.jobStatus !== 'SERVICE_DRAFT' ? this.jobStatus : 'HOURLY';
       job['jobName'] = this.jobName || this.currentDateTime;
 
-      if (job?.status === 'SERVICE_DRAFT') {
-        const jobCustomParameters = generateJobCustomParameters(this.customRequiredParameters, this.customOptionalParameters, job.runtimeData)
-        await this.store.dispatch('job/scheduleService', { job, jobCustomParameters })
-      } else if (job?.status === 'SERVICE_PENDING') {
-        await this.store.dispatch('job/updateJob', job)
-      }
+      const jobCustomParameters = generateJobCustomParameters(this.customRequiredParameters, this.customOptionalParameters, job.runtimeData)
+      await this.store.dispatch('job/scheduleService', { job, jobCustomParameters })
       this.closeModal()
     },
     async setCustomFrequency() {
@@ -321,7 +317,10 @@ export default defineComponent({
 </script>
 
 <style scoped>
-  ion-content {
+ion-content {
+--offset-bottom: 100px;
+}
+.custom-ion-content {
   --offset-bottom: 100px;
-  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index a27be9a9..8165c3ce 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -18,7 +18,7 @@
         <ion-icon slot="start" :icon="timeOutline" />
         <ion-label class="ion-text-wrap">{{ $t("Run time") }}</ion-label>
         <ion-select interface="popover" :placeholder="$t('Select')" :value="runTime" @ionChange="updateRunTime($event)">
-          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ $t(runTime.label) }}</ion-select-option>
+          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ runTime.label }}</ion-select-option>
         </ion-select>
         <!-- TODO: display a button when we are not having a runtime and open the datetime component
         on click of that button
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index c0225028..9c01d8e7 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -577,6 +577,7 @@ const actions: ActionTree<JobState, RootState> = {
 
     try {
       resp = await JobService.scheduleJob({ ...payload });
+      console.log(resp)
       if (resp.status == 200 && !hasError(resp)) {
         showToast(translate('Service has been scheduled'));
         const fetchJobsResponses = await dispatch('fetchJobs', {
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 627692dc..24e67f3b 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -25,7 +25,7 @@
             </ion-item>
           </ion-card>
 
-          <ion-card :button="isDesktop" v-for="batch in orderBatchJobs" :key="batch?.id" detail v-show="batch?.status === 'SERVICE_PENDING'" @click="hasPermission(Actions.APP_JOB_UPDATE) && viewJobConfiguration({ job: batch })">
+          <ion-card :button="isDesktop" v-for="batch in orderBatchJobs" :key="batch?.id" detail v-show="batch?.status === 'SERVICE_PENDING'" @click="hasPermission(Actions.APP_JOB_UPDATE) && viewJobConfiguration({ id: batch.enumId, job: batch })">
             <ion-card-header>
               <div>
                 <ion-card-subtitle>{{ getBrokerQueue(batch) }}</ion-card-subtitle>
@@ -58,7 +58,7 @@
         </section>
 
         <aside class="desktop-only" v-if="isDesktop" v-show="currentJob">
-          <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob" isBrokerJob="true"/>
+          <JobConfiguration :type="freqType" :key="currentJob" isBrokerJob="true"/>
         </aside>
       </main>
     </ion-content>

From c5fd952ef995bd15f9f0beab61aeb6f108415830 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 23 Oct 2023 14:16:39 +0530
Subject: [PATCH 07/14] Improved: runtime logic and bottom sheet modal (#620)

---
 src/components/BatchModal.vue | 42 +++++++++++++----------------------
 src/locales/en.json           |  3 +--
 src/views/Brokering.vue       | 11 +++------
 3 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index 921dc1b1..79235003 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -10,7 +10,7 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content class="custom-ion-content">
+  <ion-content>
     <ion-item>
       <ion-label position="fixed">{{ $t('Name') }}</ion-label>
       <ion-input :placeholder="currentDateTime = getCurrentDateTime()" v-model="jobName" />
@@ -27,14 +27,12 @@
     <ion-item>
       <ion-icon slot="start" :icon="warningOutline" />
       <ion-label>{{ $t('Unfillable orders') }}</ion-label>
-      <ion-toggle slot="end" :checked="unfillableOrder" @click="unfillableOrder = !unfillableOrder; updateCustomParameters()"></ion-toggle>
+      <ion-toggle slot="end" :checked="unfillableOrder" @ion-change="unfillableOrder = !unfillableOrder; updateCustomParameters()" />
     </ion-item>
 
     <ion-list v-if="customOptionalParameters.length || customRequiredParameters.length">
       <ion-item lines="none">
-        <ion-label>
-          {{ 'More Parameters' }}
-        </ion-label>
+        <ion-label>{{ $t('More parameters') }}</ion-label>
       </ion-item>
 
       <ion-item-divider v-if="customRequiredParameters.length">
@@ -43,7 +41,7 @@
       
       <ion-item :key="index" v-for="(parameter, index) in customRequiredParameters">
         <ion-label>{{ parameter.name }}</ion-label>
-        <ion-input :placeholder="parameter.name" v-model="parameter.value" />
+        <ion-input :placeholder="parameter.value ? parameter.value : parameter.name" v-model="parameter.value" />
         <ion-note slot="helper">{{ parameter.type }}</ion-note>
       </ion-item>
       
@@ -51,10 +49,9 @@
         <ion-label>{{ $t('Optional Parameters') }}</ion-label>
       </ion-item-divider>
 
-      <ion-item :key="parameter.value" v-for="parameter in customOptionalParameters">
+      <ion-item :key="index" v-for="(parameter, index) in customOptionalParameters">
         <ion-label>{{ parameter.name }}</ion-label>
-        <!-- Todo: look into issue with input taking one character at a time -->
-        <ion-input :placeholder="parameter.name" v-model="parameter.value" />
+        <ion-input :placeholder="parameter.value ? parameter.value : parameter.name" v-model="parameter.value"/>
         <ion-note slot="helper">{{ parameter.type }}</ion-note>
       </ion-item>
     </ion-list>
@@ -73,7 +70,7 @@
         <ion-icon slot="start" :icon="timeOutline" />
         <ion-label>{{ $t('Run time') }}</ion-label>
         <ion-select interface="popover" :placeholder="$t('Select')" :value="runTime" @ionChange="updateRunTime($event)">
-          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ $t(runTime.label) }}</ion-select-option>
+          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ runTime.label }}</ion-select-option>
         </ion-select>
 
         <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">
@@ -95,9 +92,8 @@
         </ion-select>
       </ion-item>
     </ion-card>
-
   </ion-content>
-  <ion-fab  :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing"  @click="updateJob()" vertical="bottom" horizontal="end" slot="fixed">
+  <ion-fab :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing"  @click="updateJob()" vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button>
       <ion-icon :icon="checkmarkDoneOutline" />  
     </ion-fab-button>
@@ -135,7 +131,7 @@ import { defineComponent } from 'vue';
 import { closeOutline, checkmarkDoneOutline, ticketOutline, timeOutline, timerOutline, warningOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from 'vuex';
 import { DateTime } from 'luxon';
-import { handleDateTimeInput, generateAllowedFrequencies, generateAllowedRunTimes, generateJobCustomParameters, generateJobCustomOptions, getNowTimestamp, hasJobDataError, isCustomRunTime, showToast } from '@/utils';
+import { handleDateTimeInput, generateAllowedFrequencies, generateAllowedRunTimes, generateJobCustomParameters, generateJobCustomOptions, getNowTimestamp, hasJobDataError, isCustomRunTime, isFutureDate, showToast } from '@/utils';
 import { translate } from '@/i18n'
 import CustomFrequencyModal from '@/components/CustomFrequencyModal.vue';
 import { Actions, hasPermission } from '@/authorization'
@@ -242,9 +238,12 @@ export default defineComponent({
 
       // return if job has missing data or error
       if (hasJobDataError(job)) return;
-      
-      if (this.runTime) {
-        job['runTime'] = DateTime.now().toMillis() + this.runTime
+
+      job.runTime = this.runTime != 0 ? (!isCustomRunTime(this.runTime) ? DateTime.now().toMillis() + this.runTime : this.runTime) : ''
+
+      // if job runTime is not a valid date then making runTime as empty
+      if (job?.runTime && !isFutureDate(job?.runTime)) {
+        job.runTime = ''
       }
 
       job['jobStatus'] = this.jobStatus !== 'SERVICE_DRAFT' ? this.jobStatus : 'HOURLY';
@@ -314,13 +313,4 @@ export default defineComponent({
     };
   },
 });
-</script>
-
-<style scoped>
-ion-content {
---offset-bottom: 100px;
-}
-.custom-ion-content {
-  --offset-bottom: 100px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 17c21f51..0cda6951 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -33,7 +33,6 @@
   "Automatically ship orders that are packed and have a tracking number if required.": "Automatically ship orders that are packed and have a tracking number if required.",
   "Back-order parking": "Back-order parking",
   "Backorder": "Backorder",
-  "Batch name": "Batch name",
   "Batches": "Batches",
   "before auto cancelation": "before auto cancelation",
   "Before importing historical orders in bulk, make sure all products are set up or else order import will not run correctly.": "Before importing historical orders in bulk, make sure all products are set up or else order import will not run correctly.",
@@ -129,6 +128,7 @@
   "Miscellaneous": "Miscellaneous",
   "Miscellaneous jobs": "Miscellaneous jobs",
   "More jobs": "More jobs",
+  "More parameters": "More parameters",
   "More options": "More options",
   "Name": "Name",
   "New broker run": "New broker run",
@@ -152,7 +152,6 @@
   "Open": "Open",
   "Optional Parameters": "Optional Parameters",
   "Order parking": "Order parking",
-  "Order queue": "Order queue",
   "Order status": "Order status",
   "Orders": "Orders",
   "Order fulfillment": "Order fulfillment",
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 24e67f3b..38d9cf61 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -97,7 +97,7 @@ import { useRouter } from 'vue-router'
 import { mapGetters } from "vuex";
 import JobConfiguration from '@/components/JobConfiguration.vue';
 import { DateTime } from 'luxon';
-import { generateJobCustomOptions, generateJobCustomParameters, hasError, isFutureDate, showToast } from '@/utils';
+import { generateJobCustomOptions, generateJobCustomParameters, isFutureDate } from '@/utils';
 import emitter from '@/event-bus';
 import MoreJobs from '@/components/MoreJobs.vue';
 import { Actions, hasPermission } from '@/authorization'
@@ -152,15 +152,10 @@ export default defineComponent({
   },
   methods: {
     async addBatch() {
-      const batchmodal = await modalController.create({
-        component: BatchModal
-      });
-      return batchmodal.present();
-    },
-    async editBatch(id: string, enumId: string) {
       const batchmodal = await modalController.create({
         component: BatchModal,
-        componentProps: {id, enumId}
+        breakpoints: [0, 0.25, 0.5, 0.75, 1],
+        initialBreakpoint: 1
       });
       return batchmodal.present();
     },

From 97c1c32e9afe0c65e1c24439b7370da6f9259153 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 23 Oct 2023 14:35:56 +0530
Subject: [PATCH 08/14] Improved: custom parameters visibility on job card
 (#620)

---
 src/views/Brokering.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 38d9cf61..f4e3c308 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -44,10 +44,10 @@
                 <ion-text class="ion-text-wrap">{{ $t("Unfillable orders") }}</ion-text>
                 <ion-toggle disabled :checked="batchJobEnums[batch?.enumId].unfillable" slot="end"/>
               </ion-item>
-  
-              <ion-item lines="none" v-if="generateCustomParameters(batch).length">
+
+              <ion-item lines="none" v-if="batch?.status === 'SERVICE_PENDING' && Object.keys(generateCustomParameters(batch)).length">
                 <ion-row>
-                  <ion-chip outline :key="name" v-for="(value, name) in generateCustomParameters(batch)">
+                  <ion-chip disabled outline :key="index" v-for="(value, name, index) in generateCustomParameters(batch)">
                     {{ name }}: {{ value }}
                   </ion-chip>
                 </ion-row>

From efd73171d0ee63800e7d104ab1708a04ca25ce10 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 26 Oct 2023 16:24:06 +0530
Subject: [PATCH 09/14] Improved: code for translation of static text (#620)

---
 src/components/BatchModal.vue       | 4 ++--
 src/components/JobConfiguration.vue | 2 +-
 src/locales/en.json                 | 2 ++
 src/store/modules/job/actions.ts    | 1 -
 src/views/Brokering.vue             | 4 ++--
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index 79235003..abbb8f6b 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -38,13 +38,13 @@
       <ion-item-divider v-if="customRequiredParameters.length">
         <ion-label>{{ $t('Required Parameters') }}</ion-label>
       </ion-item-divider>
-      
+
       <ion-item :key="index" v-for="(parameter, index) in customRequiredParameters">
         <ion-label>{{ parameter.name }}</ion-label>
         <ion-input :placeholder="parameter.value ? parameter.value : parameter.name" v-model="parameter.value" />
         <ion-note slot="helper">{{ parameter.type }}</ion-note>
       </ion-item>
-      
+
       <ion-item-divider v-if="customOptionalParameters.length" color="light">
         <ion-label>{{ $t('Optional Parameters') }}</ion-label>
       </ion-item-divider>
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 8165c3ce..a27be9a9 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -18,7 +18,7 @@
         <ion-icon slot="start" :icon="timeOutline" />
         <ion-label class="ion-text-wrap">{{ $t("Run time") }}</ion-label>
         <ion-select interface="popover" :placeholder="$t('Select')" :value="runTime" @ionChange="updateRunTime($event)">
-          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ runTime.label }}</ion-select-option>
+          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ $t(runTime.label) }}</ion-select-option>
         </ion-select>
         <!-- TODO: display a button when we are not having a runtime and open the datetime component
         on click of that button
diff --git a/src/locales/en.json b/src/locales/en.json
index 0cda6951..4c7207d8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -66,6 +66,7 @@
   "Custom Parameters": "Custom Parameters",
   "Create batches and schedule brokering for different orders.": "Create batches and schedule brokering for different orders.",
   "Create or update order fulfillment history records from FTP.": "Create or update order fulfillment history records from FTP.",
+  "Create new brokering job": "Create new brokering job",
   "Daily": "Daily",
   "Dashoard": "Dashoard",
   "Days": "Days",
@@ -215,6 +216,7 @@
   "Schedule in bulk": "Schedule in bulk",
   "Schedule inventory hard sync": "Schedule inventory hard sync",
   "Schedule product sync": "Schedule product sync",
+  "Scheduled Job": "Scheduled Job",
   "Scheduler": "Scheduler",
   "Search jobs": "Search jobs",
   "Search time zones": "Search time zones",
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index 9c01d8e7..c0225028 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -577,7 +577,6 @@ const actions: ActionTree<JobState, RootState> = {
 
     try {
       resp = await JobService.scheduleJob({ ...payload });
-      console.log(resp)
       if (resp.status == 200 && !hasError(resp)) {
         showToast(translate('Service has been scheduled'));
         const fetchJobsResponses = await dispatch('fetchJobs', {
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index f4e3c308..56ffc117 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -10,11 +10,11 @@
     <ion-content>
       <main>
         <section>
-          <ion-button expand="block" :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="addBatch()" >{{ 'Create new brokering job' }}</ion-button>
+          <ion-button expand="block" :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="addBatch()" >{{ $t('Create new brokering job') }}</ion-button>
 
           <ion-item lines="none">
             <ion-label>
-              <h1>{{ 'Scheduled Job' }}</h1>
+              <h1>{{ $t('Scheduled Job') }}</h1>
             </ion-label>
           </ion-item>
 

From d57851fa4ca4015d010d58ae7c973bf0eee7641b Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 26 Oct 2023 16:26:45 +0530
Subject: [PATCH 10/14] Improved: added translation for runtime label (#620)

---
 src/components/BatchModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index abbb8f6b..2ccb12ef 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -70,7 +70,7 @@
         <ion-icon slot="start" :icon="timeOutline" />
         <ion-label>{{ $t('Run time') }}</ion-label>
         <ion-select interface="popover" :placeholder="$t('Select')" :value="runTime" @ionChange="updateRunTime($event)">
-          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ runTime.label }}</ion-select-option>
+          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ $t(runTime.label) }}</ion-select-option>
         </ion-select>
 
         <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">

From 6e19f00431e349f00cf01e9ba843d8db6f8be33a Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 30 Oct 2023 14:51:41 +0530
Subject: [PATCH 11/14] Improved: code for default runtime for new job and skip
 job not working (#620)

---
 src/components/BatchModal.vue    | 17 +++++++----------
 src/store/modules/job/actions.ts | 18 +++++++++++++++++-
 src/views/Brokering.vue          | 24 +++++++++++-------------
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index 2ccb12ef..98cea914 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -35,7 +35,7 @@
         <ion-label>{{ $t('More parameters') }}</ion-label>
       </ion-item>
 
-      <ion-item-divider v-if="customRequiredParameters.length">
+      <ion-item-divider v-if="customRequiredParameters.length" color="light">
         <ion-label>{{ $t('Required Parameters') }}</ion-label>
       </ion-item-divider>
 
@@ -66,7 +66,7 @@
         <ion-card-title>{{ $t('Schedule') }}</ion-card-title>
       </ion-card-header>
 
-      <ion-item :disabled="currentBatch?.jobId">
+      <ion-item>
         <ion-icon slot="start" :icon="timeOutline" />
         <ion-label>{{ $t('Run time') }}</ion-label>
         <ion-select interface="popover" :placeholder="$t('Select')" :value="runTime" @ionChange="updateRunTime($event)">
@@ -84,7 +84,7 @@
           </ion-content>
         </ion-modal>
       </ion-item>
-      <ion-item lines="none" :disabled="currentBatch?.jobId">
+      <ion-item lines="none">
         <ion-icon slot="start" :icon="timerOutline" />
         <ion-label>{{ $t('Frequency') }}</ion-label>
         <ion-select :value="jobStatus" :interface-options="{ header: $t('Frequency') }" interface="popover" :placeholder="$t('Disabled')" @ionChange="jobStatus = $event.detail.value" @ionDismiss="jobStatus == 'CUSTOM' && setCustomFrequency()">
@@ -226,9 +226,7 @@ export default defineComponent({
       this.jobStatus = currentFrequency;
     },
     async updateJob() {
-      const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => {
-        return job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId
-      });
+      const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId);
 
       const job = this.getJob(jobEnum.id)?.find((job: any) => job.status === 'SERVICE_DRAFT');
       if (!job) {
@@ -246,10 +244,11 @@ export default defineComponent({
         job.runTime = ''
       }
 
-      job['jobStatus'] = this.jobStatus !== 'SERVICE_DRAFT' ? this.jobStatus : 'HOURLY';
+      job['jobStatus'] = this.jobStatus ? this.jobStatus : 'HOURLY';
       job['jobName'] = this.jobName || this.currentDateTime;
 
       const jobCustomParameters = generateJobCustomParameters(this.customRequiredParameters, this.customOptionalParameters, job.runtimeData)
+
       await this.store.dispatch('job/scheduleService', { job, jobCustomParameters })
       this.closeModal()
     },
@@ -271,9 +270,7 @@ export default defineComponent({
       else showToast(translate("Provide a future date and time"))
     },
     updateCustomParameters() {
-      const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => {
-        return job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId
-      });
+      const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId);
 
       const job = this.getJob(jobEnum.id)?.find((job: any) => job.status === 'SERVICE_DRAFT');
       this.customOptionalParameters = generateJobCustomOptions(job).optionalParameters;
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index c0225028..b7a7019e 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -483,7 +483,23 @@ const actions: ActionTree<JobState, RootState> = {
     });
 
     // fetching temp expressions
-    const tempExpr = Object.values(cached).map((job: any) => job.tempExprId)
+    // added check to loop over cachedJob (in else part), as in case of batch job same enum contains multiple jobs as an array
+    // and thus tempExprId is not available by default on the root
+    // Before looping over cachedJob, checking whether the tempExprId is directly available on the root or not,
+    // if tempExprId is available on root it simply means that we have a single job against the enum
+    const tempExpr = Object.values(cached).reduce((tempExprIds: any, cachedJob: any) => {
+      if(cachedJob.tempExprId && !tempExprIds.includes(cachedJob.tempExprId)) {
+        tempExprIds.push(cachedJob.tempExprId)
+      } else if (cachedJob?.length) {
+        cachedJob.map((job: any) => {
+          if(job.tempExprId && !tempExprIds.includes(job.tempExprId)) {
+            tempExprIds.push(job.tempExprId)
+          }
+        });
+      }
+
+      return tempExprIds;
+    }, [])
     await dispatch('fetchTemporalExpression', tempExpr)
 
     commit(types.JOB_UPDATED_BULK, cached);
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 56ffc117..22cba048 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -37,7 +37,7 @@
             <ion-list>
               <ion-item lines="none">
                 <ion-label class="ion-text-wrap">{{ batch?.temporalExpression?.description }}</ion-label>
-                <ion-label slot="end">{{  batch?.runTime ? getTime(batch.runTime) : "-" }}</ion-label>
+                <ion-label slot="end">{{ batch?.runTime ? getTime(batch.runTime) : "-" }}</ion-label>
               </ion-item>
   
               <ion-item lines="none">
@@ -58,7 +58,7 @@
         </section>
 
         <aside class="desktop-only" v-if="isDesktop" v-show="currentJob">
-          <JobConfiguration :type="freqType" :key="currentJob" isBrokerJob="true"/>
+          <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob" isBrokerJob="true"/>
         </aside>
       </main>
     </ion-content>
@@ -163,21 +163,19 @@ export default defineComponent({
       return DateTime.fromMillis(time).toFormat('hh:mm a');
     },
     getBrokerQueue(job: any){
-      if(job.status === 'SERVICE_PENDING'){
-        const brokerQueueId = this.batchJobEnums[job?.enumId].id
-        
-        if(brokerQueueId === "_NA_"){
-          return "Brokering queue"
-        }else if(brokerQueueId === "PRE_ORDER_PARKING"){
-          return "Pre-order parking"
-        }else{
-          return "Back-order parking"
-        }
+      const brokerQueueId = this.batchJobEnums[job?.enumId].facilityId
+
+      if(brokerQueueId === "_NA_"){
+        return "Brokering queue"
+      }else if(brokerQueueId === "PRE_ORDER_PARKING"){
+        return "Pre-order parking"
+      }else{
+        return "Back-order parking"
       }
     },
     async viewJobConfiguration(jobInformation: any) {
       this.currentJob = jobInformation.job || this.getJob(this.jobEnums[jobInformation.id])
-      this.currentJobStatus = jobInformation.status
+      this.currentJobStatus = this.currentJob.statusId === 'SERVICE_DRAFT' ? 'SERVICE_DRAFT' : this.currentJob.frequency
       this.freqType = jobInformation.id && this.jobFrequencyType[jobInformation.id]
 
       // if job runTime is not a valid date then making runTime as empty

From 4980c216b80d0a8cd459a01fb90c65889e577530 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 31 Oct 2023 10:42:26 +0530
Subject: [PATCH 12/14] Improved: code syntax and conditions (#620)

---
 src/components/BatchModal.vue    | 22 ++++++++++-----------
 src/store/modules/job/actions.ts |  2 +-
 src/views/Brokering.vue          | 34 +++++++++++++++-----------------
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index 98cea914..74f52d79 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -204,19 +204,19 @@ export default defineComponent({
       const runTimes = JSON.parse(JSON.stringify(generateAllowedRunTimes()))
       let selectedRunTime
       // 0 check for the 'Now' value and '' check for initial render
-      if (currentRunTime || currentRunTime === 0 ) {
+      if(currentRunTime || currentRunTime === 0 ) {
         selectedRunTime = runTimes.some((runTime: any) => runTime.value === currentRunTime)
-        if (!selectedRunTime) runTimes.push({ label: this.getTime(currentRunTime), value: currentRunTime })
+        if(!selectedRunTime) runTimes.push({ label: this.getTime(currentRunTime), value: currentRunTime })
       }
       this.runTime = currentRunTime
       this.runTimes = runTimes
     },
     async generateFrequencyOptions(currentFrequency?: any) {
       const frequencyOptions = JSON.parse(JSON.stringify(generateAllowedFrequencies()));
-      if (hasPermission(Actions.APP_CUSTOM_FREQ_VIEW)) frequencyOptions.push({ "id": "CUSTOM", "description": "Custom"})
-      if (currentFrequency) {
+      if(hasPermission(Actions.APP_CUSTOM_FREQ_VIEW)) frequencyOptions.push({ "id": "CUSTOM", "description": "Custom"})
+      if(currentFrequency) {
         const selectedFrequency = frequencyOptions.find((frequency: any) => frequency.id === currentFrequency);
-        if (!selectedFrequency ) {
+        if(!selectedFrequency ) {
           const frequencies = await this.store.dispatch("job/fetchTemporalExpression", [ currentFrequency ]);
           const frequency = frequencies[currentFrequency];
           frequency && (frequencyOptions.push({ "id": frequency.tempExprId,  "description": frequency.description }))
@@ -229,18 +229,18 @@ export default defineComponent({
       const jobEnum: any = Object.values(this.jobEnums)?.find((job: any) => job.unfillable === this.unfillableOrder && job.facilityId === this.batchFacilityId);
 
       const job = this.getJob(jobEnum.id)?.find((job: any) => job.status === 'SERVICE_DRAFT');
-      if (!job) {
+      if(!job) {
         showToast(translate('Configuration missing'))
         return;
       }
 
       // return if job has missing data or error
-      if (hasJobDataError(job)) return;
+      if(hasJobDataError(job)) return;
 
       job.runTime = this.runTime != 0 ? (!isCustomRunTime(this.runTime) ? DateTime.now().toMillis() + this.runTime : this.runTime) : ''
 
       // if job runTime is not a valid date then making runTime as empty
-      if (job?.runTime && !isFutureDate(job?.runTime)) {
+      if(job?.runTime && !isFutureDate(job?.runTime)) {
         job.runTime = ''
       }
 
@@ -266,7 +266,7 @@ export default defineComponent({
     updateCustomTime(event: CustomEvent) {
       const currTime = DateTime.now().toMillis();
       const setTime = handleDateTimeInput(event.detail.value);
-      if (setTime > currTime) this.generateRunTimes(setTime)
+      if(setTime > currTime) this.generateRunTimes(setTime)
       else showToast(translate("Provide a future date and time"))
     },
     updateCustomParameters() {
@@ -278,13 +278,13 @@ export default defineComponent({
     },
     updateRunTime(event: CustomEvent) {
       const value = event.detail.value
-      if (value != 'CUSTOM') this.generateRunTimes(value)
+      if(value != 'CUSTOM') this.generateRunTimes(value)
       else this.isDateTimeModalOpen = true
     },
     getCurrentDateTime() {
       return DateTime.now().setZone(this.userProfile.userTimeZone).toLocaleString(DateTime.DATETIME_MED);
     },
-    getTime (time: any) {
+    getTime(time: any) {
       return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
     },
     isRequiredParametersMissing() {
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index b7a7019e..8f58ec00 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -490,7 +490,7 @@ const actions: ActionTree<JobState, RootState> = {
     const tempExpr = Object.values(cached).reduce((tempExprIds: any, cachedJob: any) => {
       if(cachedJob.tempExprId && !tempExprIds.includes(cachedJob.tempExprId)) {
         tempExprIds.push(cachedJob.tempExprId)
-      } else if (cachedJob?.length) {
+      } else if(Array.isArray(cachedJob)) {
         cachedJob.map((job: any) => {
           if(job.tempExprId && !tempExprIds.includes(job.tempExprId)) {
             tempExprIds.push(job.tempExprId)
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 22cba048..1bc2c25d 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -10,7 +10,7 @@
     <ion-content>
       <main>
         <section>
-          <ion-button expand="block" :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="addBatch()" >{{ $t('Create new brokering job') }}</ion-button>
+          <ion-button expand="block" :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="addBatch()">{{ $t('Create new brokering job') }}</ion-button>
 
           <ion-item lines="none">
             <ion-label>
@@ -31,7 +31,7 @@
                 <ion-card-subtitle>{{ getBrokerQueue(batch) }}</ion-card-subtitle>
                 <ion-card-title>{{ batch?.jobName }}</ion-card-title>
               </div>
-              <ion-badge class="ion-margin-start" color="dark" >{{ timeFromNow(batch?.runTime) }}</ion-badge>
+              <ion-badge class="ion-margin-start" color="dark" v-if="batch.status === 'SERVICE_PENDING'">{{ timeFromNow(batch?.runTime) }}</ion-badge>
             </ion-card-header>
 
             <ion-list>
@@ -58,7 +58,7 @@
         </section>
 
         <aside class="desktop-only" v-if="isDesktop" v-show="currentJob">
-          <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob" isBrokerJob="true"/>
+          <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob" :isBrokerJob="orderBatchJobs.includes(currentJob) ? true : false"/>
         </aside>
       </main>
     </ion-content>
@@ -159,27 +159,27 @@ export default defineComponent({
       });
       return batchmodal.present();
     },
-    getTime (time: any) {
+    getTime(time: any) {
       return DateTime.fromMillis(time).toFormat('hh:mm a');
     },
-    getBrokerQueue(job: any){
+    getBrokerQueue(job: any) {
       const brokerQueueId = this.batchJobEnums[job?.enumId].facilityId
 
-      if(brokerQueueId === "_NA_"){
+      if(brokerQueueId === "_NA_") {
         return "Brokering queue"
-      }else if(brokerQueueId === "PRE_ORDER_PARKING"){
+      } else if(brokerQueueId === "PRE_ORDER_PARKING") {
         return "Pre-order parking"
-      }else{
+      } else {
         return "Back-order parking"
       }
     },
     async viewJobConfiguration(jobInformation: any) {
       this.currentJob = jobInformation.job || this.getJob(this.jobEnums[jobInformation.id])
-      this.currentJobStatus = this.currentJob.statusId === 'SERVICE_DRAFT' ? 'SERVICE_DRAFT' : this.currentJob.frequency
+      this.currentJobStatus = this.currentJob?.statusId === 'SERVICE_DRAFT' ? 'SERVICE_DRAFT' : this.currentJob?.frequency
       this.freqType = jobInformation.id && this.jobFrequencyType[jobInformation.id]
 
       // if job runTime is not a valid date then making runTime as empty
-      if (this.currentJob?.runTime && !isFutureDate(this.currentJob?.runTime)) {
+      if(this.currentJob?.runTime && !isFutureDate(this.currentJob?.runTime)) {
         this.currentJob.runTime = ''
       }
 
@@ -188,7 +188,7 @@ export default defineComponent({
         this.router.push({ name: 'JobDetails', params: { jobId: this.currentJob.jobId, category: "orders" } });
         return;
       }
-      if (this.currentJob && !this.isJobDetailAnimationCompleted) {
+      if(this.currentJob && !this.isJobDetailAnimationCompleted) {
         emitter.emit('playAnimation');
         this.isJobDetailAnimationCompleted = true;
       }
@@ -198,7 +198,7 @@ export default defineComponent({
         this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
         this.$t('Disabled')
     },
-    async fetchJobs(){
+    async fetchJobs() {
       await this.store.dispatch("job/fetchJobs", {
         "inputFields": {
           // If we fetch broker sys job by not passing systemJobEnumId filter then this api
@@ -216,11 +216,9 @@ export default defineComponent({
         }
       });
     },
-    timeFromNow (time: any) {
-      if(time){
-        const timeDiff = DateTime.fromMillis(time).diff(DateTime.local());
-        return DateTime.local().plus(timeDiff).toRelative();
-      }
+    timeFromNow(time: any) {
+      const timeDiff = DateTime.fromMillis(time).diff(DateTime.local());
+      return DateTime.local().plus(timeDiff).toRelative();
     },
     generateCustomParameters(job: any) {
       let customOptionalParameters = generateJobCustomOptions(job).optionalParameters;
@@ -230,7 +228,7 @@ export default defineComponent({
       return generateJobCustomParameters(customRequiredParameters, customOptionalParameters, {})
     }
   },
-  mounted () {
+  mounted() {
     this.fetchJobs();
     emitter.on("productStoreOrConfigChanged", this.fetchJobs);
     emitter.on('viewJobConfiguration', this.viewJobConfiguration)

From 0153939970a710d7e849b4f1685a014bad42d021 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 31 Oct 2023 12:35:17 +0530
Subject: [PATCH 13/14] Improved: ionChange syntax and spacing (#620)

---
 src/components/BatchModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index 74f52d79..3e8ff433 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -27,7 +27,7 @@
     <ion-item>
       <ion-icon slot="start" :icon="warningOutline" />
       <ion-label>{{ $t('Unfillable orders') }}</ion-label>
-      <ion-toggle slot="end" :checked="unfillableOrder" @ion-change="unfillableOrder = !unfillableOrder; updateCustomParameters()" />
+      <ion-toggle slot="end" :checked="unfillableOrder" @ionChange="unfillableOrder = !unfillableOrder; updateCustomParameters()" />
     </ion-item>
 
     <ion-list v-if="customOptionalParameters.length || customRequiredParameters.length">
@@ -213,7 +213,7 @@ export default defineComponent({
     },
     async generateFrequencyOptions(currentFrequency?: any) {
       const frequencyOptions = JSON.parse(JSON.stringify(generateAllowedFrequencies()));
-      if(hasPermission(Actions.APP_CUSTOM_FREQ_VIEW)) frequencyOptions.push({ "id": "CUSTOM", "description": "Custom"})
+      if(hasPermission(Actions.APP_CUSTOM_FREQ_VIEW)) frequencyOptions.push({ "id": "CUSTOM", "description": "Custom" })
       if(currentFrequency) {
         const selectedFrequency = frequencyOptions.find((frequency: any) => frequency.id === currentFrequency);
         if(!selectedFrequency ) {

From 82050e81867b9eadbd4a0b6c73fc716209029a15 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 2 Nov 2023 12:54:29 +0530
Subject: [PATCH 14/14] Improved: dateTime css and sorting batchOrderJobs
 (#620)

---
 src/components/BatchModal.vue | 10 +++++++++-
 src/views/Brokering.vue       |  5 ++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/BatchModal.vue b/src/components/BatchModal.vue
index 3e8ff433..c64b9f48 100644
--- a/src/components/BatchModal.vue
+++ b/src/components/BatchModal.vue
@@ -310,4 +310,12 @@ export default defineComponent({
     };
   },
 });
-</script>
\ No newline at end of file
+</script>
+
+<style>
+ion-modal.date-time-modal {
+  --width: 290px;
+  --height: 440px;
+  --border-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 1bc2c25d..f51d6cfa 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -25,7 +25,7 @@
             </ion-item>
           </ion-card>
 
-          <ion-card :button="isDesktop" v-for="batch in orderBatchJobs" :key="batch?.id" detail v-show="batch?.status === 'SERVICE_PENDING'" @click="hasPermission(Actions.APP_JOB_UPDATE) && viewJobConfiguration({ id: batch.enumId, job: batch })">
+          <ion-card :button="isDesktop" v-for="batch in batchJobs()" :key="batch?.id" detail v-show="batch?.status === 'SERVICE_PENDING'" @click="hasPermission(Actions.APP_JOB_UPDATE) && viewJobConfiguration({ id: batch.enumId, job: batch })">
             <ion-card-header>
               <div>
                 <ion-card-subtitle>{{ getBrokerQueue(batch) }}</ion-card-subtitle>
@@ -151,6 +151,9 @@ export default defineComponent({
     }),
   },
   methods: {
+    batchJobs() {
+      return this.orderBatchJobs?.sort((jobA: any,jobB: any) => jobA.runTime - jobB.runTime)
+    },
     async addBatch() {
       const batchmodal = await modalController.create({
         component: BatchModal,