From 579d644737051cdce1aa2057eb7a1586c51cb9d2 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 26 Nov 2024 11:22:53 +0530
Subject: [PATCH] Implemented: maarg jobs in the inventory, misc, orders and
 preorder page (#734)

---
 src/views/Fulfillment.vue   |  4 +++
 src/views/Inventory.vue     | 55 ++++++++++++++++++++++++++++++----
 src/views/Miscellaneous.vue | 60 +++++++++++++++++++++++++++++++++----
 src/views/Orders.vue        | 57 +++++++++++++++++++++++++++++++----
 src/views/PreOrder.vue      | 50 +++++++++++++++++++++++++++----
 5 files changed, 204 insertions(+), 22 deletions(-)

diff --git a/src/views/Fulfillment.vue b/src/views/Fulfillment.vue
index 28a6a04d..6c4475f3 100644
--- a/src/views/Fulfillment.vue
+++ b/src/views/Fulfillment.vue
@@ -99,6 +99,10 @@
               <ion-label class="ion-text-wrap">{{ translate("Send shopify acknowledge feed") }}</ion-label>
               <ion-label slot="end">{{ isMaargJobFound('SND_FF_ACK_FEED') ? getMaargJobStatus("SND_FF_ACK_FEED") : translate("Not found") }}</ion-label>
             </ion-item>
+            <ion-item button detail :disabled="!isMaargJobFound('POL_OMS_FLFLMNT_FEED')" @click="viewMaargJobConfiguration('POL_OMS_FLFLMNT_FEED')">
+              <ion-label class="ion-text-wrap">{{ translate("Poll OMS fulfillment feed") }}</ion-label>
+              <ion-label slot="end">{{ isMaargJobFound('POL_OMS_FLFLMNT_FEED') ? getMaargJobStatus("POL_OMS_FLFLMNT_FEED") : translate("Not found") }}</ion-label>
+            </ion-item>
 
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">
diff --git a/src/views/Inventory.vue b/src/views/Inventory.vue
index 877f055c..5f98375e 100644
--- a/src/views/Inventory.vue
+++ b/src/views/Inventory.vue
@@ -34,11 +34,31 @@
               </ion-toggle>
             </ion-item>
           </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Feed") }}</ion-card-title>
+            </ion-card-header>
+            <ion-item button detail :disabled="!isMaargJobFound('GEN_TO_RCPT_FEED')" @click="viewMaargJobConfiguration('GEN_TO_RCPT_FEED')">
+              <ion-label class="ion-text-wrap">{{ translate("Transfer order feed") }}</ion-label>
+              <ion-label slot="end" >{{ isMaargJobFound('GEN_TO_RCPT_FEED') ? getMaargJobStatus("GEN_TO_RCPT_FEED") : translate("Not found") }}</ion-label>
+            </ion-item>
+            <ion-item button detail :disabled="!isMaargJobFound('GEN_INV_VAR_FEED')" @click="viewMaargJobConfiguration('GEN_INV_VAR_FEED')">
+              <ion-label class="ion-text-wrap">{{ translate("Inventory variance feed") }}</ion-label>
+              <ion-label slot="end">{{ isMaargJobFound('GEN_INV_VAR_FEED') ? getMaargJobStatus("GEN_INV_VAR_FEED") : translate("Not found") }}</ion-label>
+            </ion-item>
+            <ion-item button detail :disabled="!isMaargJobFound('GEN_INVCYC_COUNT_VAR_FEED')" @click="viewMaargJobConfiguration('GEN_INVCYC_COUNT_VAR_FEED')">
+              <ion-label class="ion-text-wrap">{{ translate("Inventory cycle count variance feed") }}</ion-label>
+              <ion-label slot="end">{{ isMaargJobFound('GEN_INVCYC_COUNT_VAR_FEED') ? getMaargJobStatus("GEN_INVCYC_COUNT_VAR_FEED") : translate("Not found") }}</ion-label>
+            </ion-item>
+          </ion-card>
+
           <MoreJobs v-if="getMoreJobs(jobEnums, enumTypeId).length" :jobs="getMoreJobs(jobEnums, enumTypeId)" />
         </section>
 
-        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob">
-          <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob"/>
+        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob || Object.keys(currentMaargJob).length">
+          <JobConfiguration v-if="currentJob" :status="currentJobStatus" :type="freqType" :key="currentJob"/>
+          <MaargJobConfiguration v-else-if="Object.keys(currentMaargJob).length" :key="currentMaargJob" />
         </aside>
       </main>
     </ion-content>
@@ -64,12 +84,13 @@ import {
 import { defineComponent } from 'vue';
 import { mapGetters, useStore } from 'vuex';
 import JobConfiguration from '@/components/JobConfiguration.vue'
-import { isFutureDate, showToast } from '@/utils';
+import { getCronString, isFutureDate, showToast } from '@/utils';
 import emitter from '@/event-bus';
 import { useRouter } from 'vue-router'
 import { translate } from '@hotwax/dxp-components';
 import MoreJobs from '@/components/MoreJobs.vue';
 import { Actions, hasPermission } from '@/authorization'
+import MaargJobConfiguration from '@/components/MaargJobConfiguration.vue';
 
 export default defineComponent({
   name: 'Inventory',
@@ -87,6 +108,7 @@ export default defineComponent({
     IonToggle,
     IonToolbar,
     JobConfiguration,
+    MaargJobConfiguration,
     MoreJobs
   },
   data() {
@@ -100,6 +122,7 @@ export default defineComponent({
       isDesktop: isPlatform('desktop'),
       enumTypeId: 'INVENTORY_SYS_JOB',
       webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
+      maargJobEnums: JSON.parse(process.env.VUE_APP_INVENTORY_MAARG_JOB_NAMES as string) as any,
     }
   },
   computed: {
@@ -111,6 +134,8 @@ export default defineComponent({
       getTemporalExpr: 'job/getTemporalExpr',
       getMoreJobs: 'job/getMoreJobs',
       getCachedWebhook: 'webhook/getCachedWebhook',
+      getMaargJob: 'maargJob/getMaargJob',
+      currentMaargJob: 'maargJob/getCurrentMaargJob'
     }),
     isInventoryLevelUpdated (): boolean {
       const webhookTopic = this.webhookEnums['INVENTORY_LEVEL_UPDATE']
@@ -165,17 +190,36 @@ export default defineComponent({
         this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
         translate('Disabled')
     },
-    fetchJobs(){
+    async fetchJobs(){
       this.store.dispatch("job/fetchJobs", {
         "inputFields":{
           "enumTypeId": "INVENTORY_SYS_JOB"
         }
       });
+      await this.store.dispatch("maargJob/fetchMaargJobs", Object.values(this.maargJobEnums));
     },
     fetchData() {
       this.store.dispatch('webhook/fetchWebhooks')
       this.fetchJobs()
-    }
+    },
+    isMaargJobFound(id: string) {
+      const job = this.getMaargJob(this.maargJobEnums[id])
+      return job && Object.keys(job)?.length
+    },
+    getMaargJobStatus(id: string) {
+      const job = this.getMaargJob(this.maargJobEnums[id])
+      return (job?.paused === "N" && job?.cronExpression) ? this.getCronString(job.cronExpression) ? this.getCronString(job.cronExpression) : job.cronExpression : 'Disabled'
+    },
+    async viewMaargJobConfiguration(id: any) {
+      const enumId = this.maargJobEnums[id];
+      const job = this.getMaargJob(enumId);
+      await this.store.dispatch("maargJob/updateCurrentMaargJob", { job })
+      this.currentJob = ""
+      if(!this.isJobDetailAnimationCompleted) {
+        emitter.emit('playAnimation');
+        this.isJobDetailAnimationCompleted = true;
+      }
+    },
   },
   mounted () {
     this.fetchData();
@@ -191,6 +235,7 @@ export default defineComponent({
     const router = useRouter();
     return {
       Actions,
+      getCronString,
       hasPermission,
       store,
       router,
diff --git a/src/views/Miscellaneous.vue b/src/views/Miscellaneous.vue
index eaba4aad..79283cd3 100644
--- a/src/views/Miscellaneous.vue
+++ b/src/views/Miscellaneous.vue
@@ -34,10 +34,28 @@
               <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
             </ion-infinite-scroll>
           </div>
+
+          <div>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>{{ translate("Shopify bulk query") }}</ion-card-title>
+              </ion-card-header>
+
+              <ion-item button detail :disabled="!isMaargJobFound('BLK_SYS_MESS_SHPFY')" @click="viewMaargJobConfiguration('BLK_SYS_MESS_SHPFY')">
+                <ion-label class="ion-text-wrap">{{ translate("Poll bulk system message") }}</ion-label>
+                <ion-label slot="end" >{{ isMaargJobFound('BLK_SYS_MESS_SHPFY') ? getMaargJobStatus("BLK_SYS_MESS_SHPFY") : translate("Not found") }}</ion-label>
+              </ion-item>
+              <ion-item button detail :disabled="!isMaargJobFound('BLK_RSLT_SHPFY')" @click="viewMaargJobConfiguration('BLK_RSLT_SHPFY')">
+                <ion-label class="ion-text-wrap">{{ translate("Poll bulk operation result") }}</ion-label>
+                <ion-label slot="end" >{{ isMaargJobFound('BLK_RSLT_SHPFY') ? getMaargJobStatus("BLK_RSLT_SHPFY") : translate("Not found") }}</ion-label>
+              </ion-item>
+            </ion-card>
+          </div>
         </section>
 
-        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob && Object.keys(currentJob).length">
-          <JobConfiguration :status="currentJobStatus" :key="currentJob"/>
+        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob || Object.keys(currentMaargJob).length">
+          <JobConfiguration v-if="currentJob" :status="currentJobStatus" :type="freqType" :key="currentJob"/>
+          <MaargJobConfiguration v-else-if="Object.keys(currentMaargJob).length" :key="currentMaargJob" />
         </aside>
       </main>
     </ion-content>
@@ -48,6 +66,9 @@
 import { DateTime } from 'luxon';
 import {
   IonButton,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
   IonContent,
   IonHeader,
   IonInfiniteScroll,
@@ -69,13 +90,17 @@ import { useRouter } from 'vue-router'
 import { mapGetters, useStore } from 'vuex'
 import emitter from '@/event-bus';
 import JobConfiguration from '@/components/JobConfiguration.vue';
-import { isFutureDate } from '@/utils';
+import { getCronString, isFutureDate } from '@/utils';
 import { translate } from '@hotwax/dxp-components';
+import MaargJobConfiguration from '@/components/MaargJobConfiguration.vue';
 
 export default defineComponent({
   name: 'Miscellaneous',
   components: {
     IonButton,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
     IonContent,
     IonHeader,
     IonInfiniteScroll,
@@ -90,7 +115,8 @@ export default defineComponent({
     IonSpinner,
     IonTitle,
     IonToolbar,
-    JobConfiguration
+    JobConfiguration,
+    MaargJobConfiguration
   },
   mounted() {
     emitter.on('jobUpdated', this.getMiscellaneousJobs);
@@ -108,13 +134,16 @@ export default defineComponent({
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
       isRetrying: false,
+      maargJobEnums: JSON.parse(process.env.VUE_APP_MISC_MAARG_JOB_NAMES as string) as any
     }
   },
   computed: {
     ...mapGetters({
       miscellaneousJobs: 'job/getMiscellaneousJobs',
       getCurrentEComStore:'user/getCurrentEComStore',
-      isMiscellaneousJobsScrollable: 'job/isMiscellaneousJobsScrollable'
+      isMiscellaneousJobsScrollable: 'job/isMiscellaneousJobsScrollable',
+      getMaargJob: 'maargJob/getMaargJob',
+      currentMaargJob: 'maargJob/getCurrentMaargJob'
     }),
     prepareMiscJobs() {
       // preparing the jobs to display single instance of a job if the job is in pending and draft status
@@ -151,6 +180,7 @@ export default defineComponent({
     },
     async getMiscellaneousJobs(viewSize = 100, viewIndex = 0) {
       await this.store.dispatch('job/fetchMiscellaneousJobs', {eComStoreId: this.getCurrentEComStore.productStoreId, viewSize, viewIndex});
+      await this.store.dispatch("maargJob/fetchMaargJobs", Object.values(this.maargJobEnums));
     },
     async loadMoreMiscellaneousJobs (event: any) {
       this.getMiscellaneousJobs(
@@ -173,6 +203,25 @@ export default defineComponent({
     },
     getJobRuntime(job: any) {
       return job.statusId !== 'SERVICE_DRAFT' && this.timeFromNow(job.runTime) ? this.timeFromNow(job.runTime) : translate('Disabled')
+    },
+
+    isMaargJobFound(id: string) {
+      const job = this.getMaargJob(this.maargJobEnums[id])
+      return job && Object.keys(job)?.length
+    },
+    getMaargJobStatus(id: string) {
+      const job = this.getMaargJob(this.maargJobEnums[id])
+      return (job?.paused === "N" && job?.cronExpression) ? this.getCronString(job.cronExpression) ? this.getCronString(job.cronExpression) : job.cronExpression : 'Disabled'
+    },
+    async viewMaargJobConfiguration(id: any) {
+      const enumId = this.maargJobEnums[id];
+      const job = this.getMaargJob(enumId);
+      await this.store.dispatch("maargJob/updateCurrentMaargJob", { job })
+      this.currentJob = ""
+      if(!this.isJobDetailAnimationCompleted) {
+        emitter.emit('playAnimation');
+        this.isJobDetailAnimationCompleted = true;
+      }
     }
   },
   setup() {
@@ -180,6 +229,7 @@ export default defineComponent({
     const router = useRouter();
 
     return {
+      getCronString,
       router,
       store,
       translate
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 91adf507..02b573f7 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -83,11 +83,31 @@
               <ion-label slot="end">{{ getTemporalExpression('UPLD_REFUNDS') }}</ion-label>
             </ion-item>
           </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Generate Feed") }}</ion-card-title>
+            </ion-card-header>
+            <ion-item button detail :disabled="!isMaargJobFound('GEN_BRKD_ORDITM_FEED')" @click="viewMaargJobConfiguration('GEN_BRKD_ORDITM_FEED')">
+              <ion-label class="ion-text-wrap">{{ translate("Brokered order items feed") }}</ion-label>
+              <ion-label slot="end" >{{ isMaargJobFound('GEN_BRKD_ORDITM_FEED') ? getMaargJobStatus("GEN_BRKD_ORDITM_FEED") : translate("Not found") }}</ion-label>
+            </ion-item>
+            <ion-item button detail :disabled="!isMaargJobFound('GEN_APPEASE_FIN_FEED')" @click="viewMaargJobConfiguration('GEN_APPEASE_FIN_FEED')">
+              <ion-label class="ion-text-wrap">{{ translate("Appeasements financial feed") }}</ion-label>
+              <ion-label slot="end">{{ isMaargJobFound('GEN_APPEASE_FIN_FEED') ? getMaargJobStatus("GEN_APPEASE_FIN_FEED") : translate("Not found") }}</ion-label>
+            </ion-item>
+            <ion-item button detail :disabled="!isMaargJobFound('GEN_RTRN_FIN_FEED')" @click="viewMaargJobConfiguration('GEN_RTRN_FIN_FEED')">
+              <ion-label class="ion-text-wrap">{{ translate("Returns financial feed") }}</ion-label>
+              <ion-label slot="end">{{ isMaargJobFound('GEN_RTRN_FIN_FEED') ? getMaargJobStatus("GEN_RTRN_FIN_FEED") : translate("Not found") }}</ion-label>
+            </ion-item>
+          </ion-card>
+
           <MoreJobs v-if="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId).length" :jobs="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId)" />
         </section>
 
-        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob">
-          <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob"/>
+        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob || Object.keys(currentMaargJob).length">
+          <JobConfiguration v-if="currentJob" :status="currentJobStatus" :type="freqType" :key="currentJob"/>
+          <MaargJobConfiguration v-else-if="Object.keys(currentMaargJob).length" :key="currentMaargJob" />
         </aside>
       </main>
     </ion-content>
@@ -116,10 +136,11 @@ import { useStore } from "@/store";
 import { useRouter } from 'vue-router'
 import { mapGetters } from "vuex";
 import JobConfiguration from '@/components/JobConfiguration.vue';
-import { generateJobCustomParameters, isFutureDate, showToast, prepareRuntime, hasJobDataError } from '@/utils';
+import { generateJobCustomParameters, getCronString, isFutureDate, showToast, prepareRuntime, hasJobDataError } from '@/utils';
 import emitter from '@/event-bus';
 import MoreJobs from '@/components/MoreJobs.vue';
 import { Actions, hasPermission } from '@/authorization'
+import MaargJobConfiguration from '@/components/MaargJobConfiguration.vue';
 
 export default defineComponent({
   name: 'Orders',
@@ -137,6 +158,7 @@ export default defineComponent({
     IonToggle,
     IonToolbar,
     JobConfiguration,
+    MaargJobConfiguration,
     MoreJobs
 },
   data() {
@@ -150,7 +172,8 @@ export default defineComponent({
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
       enumTypeId: 'ORDER_SYS_JOB',
-      initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any
+      initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
+      maargJobEnums: JSON.parse(process.env.VUE_APP_ORDERS_MAARG_JOB_NAMES as string) as any,
     }
   },
   computed: {
@@ -161,7 +184,9 @@ export default defineComponent({
       currentEComStore: 'user/getCurrentEComStore',
       getTemporalExpr: 'job/getTemporalExpr',
       getCachedWebhook: 'webhook/getCachedWebhook',
-      getMoreJobs: 'job/getMoreJobs'
+      getMoreJobs: 'job/getMoreJobs',
+      getMaargJob: 'maargJob/getMaargJob',
+      currentMaargJob: 'maargJob/getCurrentMaargJob'
     }),
     promiseDateChanges(): boolean {
       const status = this.getJobStatus(this.jobEnums['NTS_PRMS_DT_CHNG']);
@@ -274,7 +299,26 @@ export default defineComponent({
           "enumTypeId": "ORDER_SYS_JOB"
         }
       });
-    }
+      await this.store.dispatch("maargJob/fetchMaargJobs", Object.values(this.maargJobEnums));
+    },
+    isMaargJobFound(id: string) {
+      const job = this.getMaargJob(this.maargJobEnums[id])
+      return job && Object.keys(job)?.length
+    },
+    getMaargJobStatus(id: string) {
+      const job = this.getMaargJob(this.maargJobEnums[id])
+      return (job?.paused === "N" && job?.cronExpression) ? this.getCronString(job.cronExpression) ? this.getCronString(job.cronExpression) : job.cronExpression : 'Disabled'
+    },
+    async viewMaargJobConfiguration(id: any) {
+      const enumId = this.maargJobEnums[id];
+      const job = this.getMaargJob(enumId);
+      await this.store.dispatch("maargJob/updateCurrentMaargJob", { job })
+      this.currentJob = ""
+      if(!this.isJobDetailAnimationCompleted) {
+        emitter.emit('playAnimation');
+        this.isJobDetailAnimationCompleted = true;
+      }
+    },
   },
   mounted () {
     this.fetchJobs();
@@ -291,6 +335,7 @@ export default defineComponent({
 
     return {
       Actions,
+      getCronString,
       hasPermission,
       router,
       store,
diff --git a/src/views/PreOrder.vue b/src/views/PreOrder.vue
index ec1d0cbb..69c19e1f 100644
--- a/src/views/PreOrder.vue
+++ b/src/views/PreOrder.vue
@@ -157,7 +157,20 @@
             </ion-item>
           </ion-card>
 
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Feed") }}</ion-card-title>
+            </ion-card-header>
+            <ion-item button detail :disabled="!isMaargJobFound('PO_RCPT_FEED')" @click="viewMaargJobConfiguration('PO_RCPT_FEED')">
+              <ion-label class="ion-text-wrap">{{ translate("Purchase order receipt feed") }}</ion-label>
+              <ion-label slot="end" >{{ isMaargJobFound('PO_RCPT_FEED') ? getMaargJobStatus("PO_RCPT_FEED") : translate("Not found") }}</ion-label>
+            </ion-item>
+          </ion-card>
 
+          <aside class="desktop-only" v-if="isDesktop" v-show="currentJob || Object.keys(currentMaargJob).length">
+            <JobConfiguration v-if="currentJob" :status="currentJobStatus" :type="freqType" :key="currentJob"/>
+            <MaargJobConfiguration v-else-if="Object.keys(currentMaargJob).length" :key="currentMaargJob" />
+          </aside>
 
           <MoreJobs v-if="getMoreJobs(jobEnums, enumTypeId).length" :jobs="getMoreJobs(jobEnums, enumTypeId)" />
         </section>
@@ -195,12 +208,13 @@ import { mapGetters } from "vuex";
 import { useRouter } from 'vue-router'
 import { alertController } from '@ionic/vue';
 import JobConfiguration from '@/components/JobConfiguration.vue'
-import { generateJobCustomParameters, isFutureDate, showToast, prepareRuntime, hasJobDataError } from '@/utils';
+import { generateJobCustomParameters, getCronString, isFutureDate, showToast, prepareRuntime, hasJobDataError } from '@/utils';
 import emitter from '@/event-bus';
 import { translate } from '@hotwax/dxp-components';
 import MoreJobs from '@/components/MoreJobs.vue';
 import { Actions, hasPermission } from '@/authorization'
 import { openOutline } from 'ionicons/icons'
+import MaargJobConfiguration from '@/components/MaargJobConfiguration.vue';
 
 export default defineComponent({
   name: 'PreOrder',
@@ -221,6 +235,7 @@ export default defineComponent({
     IonTitle,
     IonToolbar,
     JobConfiguration,
+    MaargJobConfiguration,
     MoreJobs
 },
   computed: {
@@ -231,7 +246,9 @@ export default defineComponent({
       currentShopifyConfig: 'user/getCurrentShopifyConfig',
       currentEComStore: 'user/getCurrentEComStore',
       getTemporalExpr: 'job/getTemporalExpr',
-      getMoreJobs: 'job/getMoreJobs'
+      getMoreJobs: 'job/getMoreJobs',
+      getMaargJob: 'maargJob/getMaargJob',
+      currentMaargJob: 'maargJob/getCurrentMaargJob'
     })
   },
   data() {
@@ -244,7 +261,8 @@ export default defineComponent({
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
       enumTypeId: 'PRE_ORD_SYS_JOB',
-      preOrderBackorderCategory: {} as any
+      preOrderBackorderCategory: {} as any,
+      maargJobEnums: JSON.parse(process.env.VUE_APP_PREORD_MAARG_JOB_NAMES as string) as any,
     }
   },
   methods: {
@@ -356,17 +374,36 @@ export default defineComponent({
         this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
         translate('Disabled')
     },
-    fetchJobs(){
-      this.store.dispatch("job/fetchJobs", {
+    async fetchJobs(){
+      await this.store.dispatch("job/fetchJobs", {
         "inputFields":{
           "enumTypeId": "PRE_ORD_SYS_JOB"
         }
       });
+      await this.store.dispatch("maargJob/fetchMaargJobs", Object.values(this.maargJobEnums));
     },
     fetchInitialData() {
       this.fetchJobs();
       this.getPreOrderBackorderCategory();
-    }
+    },
+    isMaargJobFound(id: string) {
+      const job = this.getMaargJob(this.maargJobEnums[id])
+      return job && Object.keys(job)?.length
+    },
+    getMaargJobStatus(id: string) {
+      const job = this.getMaargJob(this.maargJobEnums[id])
+      return (job?.paused === "N" && job?.cronExpression) ? this.getCronString(job.cronExpression) ? this.getCronString(job.cronExpression) : job.cronExpression : 'Disabled'
+    },
+    async viewMaargJobConfiguration(id: any) {
+      const enumId = this.maargJobEnums[id];
+      const job = this.getMaargJob(enumId);
+      await this.store.dispatch("maargJob/updateCurrentMaargJob", { job })
+      this.currentJob = ""
+      if(!this.isJobDetailAnimationCompleted) {
+        emitter.emit('playAnimation');
+        this.isJobDetailAnimationCompleted = true;
+      }
+    },
   },
   mounted () {
     this.fetchInitialData();
@@ -382,6 +419,7 @@ export default defineComponent({
     const router = useRouter();
     return {
       Actions,
+      getCronString,
       hasPermission,
       openOutline,
       store,