Implemented: mobile view for the maarg jobs (#734)

src/store/modules/maargJob/actions.ts

@@ -58,12 +58,21 @@ const actions: ActionTree<JobState, RootState> = {
     commit(types.MAARGJOB_UPDATED, maargJobs);
   },
 
-  async updateMaargJob({ commit, state }, jobEnumId) {
-    const jobs = JSON.parse(JSON.stringify(state.maargJobs));
-    const currentJob = jobs[jobEnumId]
+  async updateMaargJob({ commit, dispatch, state }, jobEnumId) {
+    let resp = {} as any;
+    let jobs = JSON.parse(JSON.stringify(state.maargJobs));
+    let currentJob = jobs[jobEnumId]
 
     try {
-      const resp = await MaargJobService.fetchMaargJobInfo(currentJob.jobName);
+      if(!currentJob?.jobName) {
+        await dispatch("fetchMaargJobs", [jobEnumId]);
+        jobs = JSON.parse(JSON.stringify(state.maargJobs));
+        currentJob = jobs[jobEnumId]
+        commit(types.MAARGJOB_CURRENT_UPDATED, currentJob);
+        return;
+      }
+
+      resp = await MaargJobService.fetchMaargJobInfo(currentJob.jobName);
       if(!hasError(resp)) {
         const currentJob = resp.data?.jobDetail
 
@@ -106,13 +115,35 @@ const actions: ActionTree<JobState, RootState> = {
     commit(types.MAARGJOB_ENUMS_UPDATED, jobEnums);
   },
 
-  async updateCurrentMaargJob({ commit }, payload) {
+  async updateCurrentMaargJob({ commit, dispatch, state }, payload) {
+    const maargJobs = state.maargJobs;
+    const getMaargJob = store.getters["maargJob/getMaargJob"]
+
     if(payload?.job) {
       commit(types.MAARGJOB_CURRENT_UPDATED, payload.job);
       return payload?.job;
     }
 
-    // Todo: refetch job for the mobile view of job details.
+    if(!payload.jobId) {
+      commit(types.MAARGJOB_CURRENT_UPDATED, {});
+      return;
+    }
+
+    let currentMaargJob = maargJobs[payload.jobId];
+    if(currentMaargJob) {
+      commit(types.MAARGJOB_CURRENT_UPDATED, currentMaargJob);
+      return currentMaargJob;
+    }
+
+    await dispatch("updateMaargJob", payload.jobId);
+    currentMaargJob = getMaargJob(payload.jobId)
+
+    commit(types.MAARGJOB_CURRENT_UPDATED, currentMaargJob ? currentMaargJob : {});
+    return currentMaargJob;
+  },
+
+  async clearCurrentMaargJob({ commit }) {
+    commit(types.MAARGJOB_CURRENT_UPDATED, {});
   },
 
   async clearMaargJobState({ commit }) {

src/views/Fulfillment.vue

@@ -330,7 +330,7 @@ export default defineComponent({
       }
 
       if(!this.isDesktop && this.currentJob) {
-        this.router.push({ name: 'JobDetails', params: { jobId: this.currentJob.jobId, category: "orders" } });
+        this.router.push({ name: 'JobDetails', params: { jobId: this.currentJob.jobId, category: "fulfillment" } });
         return;
       }
       if (this.currentJob && !this.isJobDetailAnimationCompleted) {
@@ -360,6 +360,11 @@ export default defineComponent({
 
       await this.store.dispatch("maargJob/updateCurrentMaargJob", { job })
       this.currentJob = ""
+      if(!this.isDesktop && this.currentMaargJob?.jobName) {
+        this.router.push({ name: 'JobDetails', params: { jobId: this.currentMaargJob.jobTypeEnumId, category: "fulfillment-maarg" } });
+        return;
+      }
+
       if(!this.isJobDetailAnimationCompleted) {
         emitter.emit('playAnimation');
         this.isJobDetailAnimationCompleted = true;
@@ -375,6 +380,9 @@ export default defineComponent({
     emitter.off("productStoreOrConfigChanged", this.fetchJobs);
     emitter.off('viewJobConfiguration', this.viewJobConfiguration)
   },
+  async ionViewWillLeave() {
+    await this.store.dispatch("maargJob/clearCurrentMaargJob");
+  },
   setup() {
     const store = useStore();
     const router = useRouter();

src/views/InitialLoad.vue

@@ -246,7 +246,7 @@ export default defineComponent({
       }
 
       if(!this.isDesktop && this.currentJob) {
-        this.router.push({ name: 'JobDetails', params: { jobId: this.currentJob.jobId, category: "orders" } });
+        this.router.push({ name: 'JobDetails', params: { jobId: this.currentJob.jobId, category: "initial-load" } });
         return;
       }
       if (this.currentJob && !this.isJobDetailAnimationCompleted) {

src/views/Inventory.vue

@@ -176,7 +176,7 @@ export default defineComponent({
       }
 
       if(!this.isDesktop && this.currentJob) {
-        this.router.push({ name: 'JsobDetails', params: { jobId: this.currentJob.jobId, category: "inventory" } });
+        this.router.push({ name: 'JobDetails', params: { jobId: this.currentJob.jobId, category: "inventory" } });
         return;
       }
 
@@ -228,6 +228,11 @@ export default defineComponent({
       const job = this.getMaargJob(enumId);
       await this.store.dispatch("maargJob/updateCurrentMaargJob", { job })
       this.currentJob = ""
+      if(!this.isDesktop && this.currentMaargJob?.jobName) {
+        this.router.push({ name: 'JobDetails', params: { jobId: this.currentMaargJob.jobTypeEnumId, category: "inventory-maarg" } });
+        return;
+      }
+
       if(!this.isJobDetailAnimationCompleted) {
         emitter.emit('playAnimation');
         this.isJobDetailAnimationCompleted = true;
@@ -243,6 +248,9 @@ export default defineComponent({
     emitter.off("productStoreOrConfigChanged", this.fetchData);
     emitter.off('viewJobConfiguration', this.viewJobConfiguration)
   },
+  async ionViewWillLeave() {
+    await this.store.dispatch("maargJob/clearCurrentMaargJob");
+  },
   setup() {
     const store = useStore();
     const router = useRouter();

src/views/JobDetails.vue

@@ -9,7 +9,9 @@
 
     <ion-content>
       <InitialJobConfiguration v-if="jobCategory === 'initial-load'" :type='type' :shopifyOrderId='lastShopifyOrderId' :key="currentJob" />
+      <MaargJobConfiguration v-else-if="isMaargJob && Object.keys(currentMaargJob).length" :key="currentMaargJob" />
       <JobConfiguration v-else :status="currentJob?.status === 'SERVICE_DRAFT' ? currentJob?.status : currentJob?.tempExprId" :type="freqType" :key="currentJob" :historyJobConfig="checkJobStatus(currentJob?.statusId)"/>
+
     </ion-content>
   </ion-page>
 </template>
@@ -26,6 +28,7 @@ import {
 import { defineComponent } from 'vue';
 import JobConfiguration from '@/components/JobConfiguration.vue';
 import InitialJobConfiguration from '@/components/InitialJobConfiguration.vue';
+import MaargJobConfiguration from '@/components/MaargJobConfiguration.vue';
 import { useStore, mapGetters } from "vuex";
 import { isFutureDate } from '@/utils';
 import { translate } from '@hotwax/dxp-components';
@@ -40,7 +43,8 @@ export default defineComponent({
     IonTitle,
     IonToolbar,
     JobConfiguration,
-    InitialJobConfiguration
+    InitialJobConfiguration,
+    MaargJobConfiguration
   },
   data() {
     return {
@@ -57,35 +61,40 @@ export default defineComponent({
         ...JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
       },
       jobTypes: JSON.parse(process.env.VUE_APP_INITIAL_JOB_TYPES as string) as any,
+      isMaargJob: false
     }
   },
   computed:{
     ...mapGetters({
       currentJob: 'job/getCurrentJob',
+      currentMaargJob: 'maargJob/getCurrentMaargJob'
     }),
   },
   methods: {
     async viewJobConfiguration(job: any) {
-      this.jobCategory = this.$route.params.category;
-
-      if(this.jobCategory === 'initial-load') {
-        this.type = this.jobTypes[this.currentJob?.systemJobEnumId];
-        if(job?.runtimeData?.sinceId?.length >= 0) {
-          this.lastShopifyOrderId = job.runtimeData.sinceId !== 'null' ? job.runtimeData.sinceId : ''
-        }
+      const category = this.$route.params.category as any
+      this.jobCategory = this.isMaargJob ? category?.replace("-maarg","") : this.$route.params.category;
 
-        // if job runTime is not a valid date then assigning current date to the runTime
-        if (job?.runTime && !isFutureDate(job?.runTime)) {
-          job.runTime = ''
-          this.store.dispatch('job/updateCurrentJob', { job });
+      if(!this.isMaargJob) {
+        if(this.jobCategory === 'initial-load') {
+          this.type = this.jobTypes[this.currentJob?.systemJobEnumId];
+          if(job?.runtimeData?.sinceId?.length >= 0) {
+            this.lastShopifyOrderId = job.runtimeData.sinceId !== 'null' ? job.runtimeData.sinceId : ''
+          }
+
+          // if job runTime is not a valid date then assigning current date to the runTime
+          if (job?.runTime && !isFutureDate(job?.runTime)) {
+            job.runTime = ''
+            this.store.dispatch('job/updateCurrentJob', { job });
+          }
+        } else if(this.jobCategory !== 'pipeline') {
+          const id = Object.keys(this.jobEnums).find((id: any) => this.jobEnums[id] === job.systemJobEnumId)
+          this.freqType = id && this.jobFrequencyType[id];
+        } else {
+          const id = Object.keys(this.jobEnums).find((id: any) => this.jobEnums[id] === job.systemJobEnumId)
+          const jobFreqTypeId = (Object.keys(this.jobFrequencyType).find((enumId: any) => enumId === id)) as any;
+          this.freqType = (id && jobFreqTypeId) && this.jobFrequencyType[jobFreqTypeId];
         }
-      } else if(this.jobCategory !== 'pipeline') {
-        const id = Object.keys(this.jobEnums).find((id: any) => this.jobEnums[id] === job.systemJobEnumId)
-        this.freqType = id && this.jobFrequencyType[id];
-      } else {
-        const id = Object.keys(this.jobEnums).find((id: any) => this.jobEnums[id] === job.systemJobEnumId)
-        const jobFreqTypeId = (Object.keys(this.jobFrequencyType).find((enumId: any) => enumId === id)) as any;
-        this.freqType = (id && jobFreqTypeId) && this.jobFrequencyType[jobFreqTypeId];
       }
     },
     checkJobStatus(statusId: string) {
@@ -94,12 +103,16 @@ export default defineComponent({
     }
   },
   mounted() {
-    this.store.dispatch('job/updateCurrentJob', { jobId: this.$route.params.jobId }).then((job: any) => {
-      if(job?.jobId) {
+    this.isMaargJob = this.$route.params.category.includes("maarg")
+    this.store.dispatch(this.isMaargJob ? 'maargJob/updateCurrentMaargJob' : 'job/updateCurrentJob', { jobId: this.$route.params.jobId }).then((job: any) => {
+      if(job?.jobId || job?.jobName) {
         this.viewJobConfiguration(job);
       }
     })
   },
+  async ionViewWillLeave() {
+    await this.store.dispatch("maargJob/clearCurrentMaargJob");
+  },
   setup() {
     const store = useStore();
 

src/views/Miscellaneous.vue

@@ -232,11 +232,18 @@ export default defineComponent({
       const job = this.getMaargJob(enumId);
       await this.store.dispatch("maargJob/updateCurrentMaargJob", { job })
       this.currentJob = ""
+      if(!this.isDesktop && this.currentMaargJob?.jobName) {
+        this.router.push({ name: 'JobDetails', params: { jobId: this.currentMaargJob.jobTypeEnumId, category: "miscellaneous-maarg" } });
+        return;
+      }
       if(!this.isJobDetailAnimationCompleted) {
         emitter.emit('playAnimation');
         this.isJobDetailAnimationCompleted = true;
       }
-    }
+    },
+  },
+  async ionViewWillLeave() {
+    await this.store.dispatch("maargJob/clearCurrentMaargJob");
   },
   setup() {
     const store = useStore();

src/views/Orders.vue

@@ -335,6 +335,10 @@ export default defineComponent({
       const job = this.getMaargJob(enumId);
       await this.store.dispatch("maargJob/updateCurrentMaargJob", { job })
       this.currentJob = ""
+      if(!this.isDesktop && this.currentMaargJob?.jobName) {
+        this.router.push({ name: 'JobDetails', params: { jobId: this.currentMaargJob.jobTypeEnumId, category: "orders-maarg" } });
+        return;
+      }
       if(!this.isJobDetailAnimationCompleted) {
         emitter.emit('playAnimation');
         this.isJobDetailAnimationCompleted = true;
@@ -350,6 +354,9 @@ export default defineComponent({
     emitter.off("productStoreOrConfigChanged", this.fetchJobs);
     emitter.off('viewJobConfiguration', this.viewJobConfiguration)
   },
+  async ionViewWillLeave() {
+    await this.store.dispatch("maargJob/clearCurrentMaargJob");
+  },
   setup() {
     const store = useStore();
     const router = useRouter();

src/views/Pipeline.vue

@@ -708,6 +708,9 @@ export default defineComponent({
     emitter.off('jobUpdated', this.updateJobs);
     emitter.off("pinnedJobsUpdated", (this as any).updateSelectedPinnedJob);
   },
+  async ionViewWillLeave() {
+    await this.store.dispatch("maargJob/clearCurrentMaargJob");
+  },
   setup() {
     const router = useRouter();
     const store = useStore();

src/views/PreOrder.vue

@@ -406,6 +406,11 @@ export default defineComponent({
       const job = this.getMaargJob(enumId);
       await this.store.dispatch("maargJob/updateCurrentMaargJob", { job })
       this.currentJob = ""
+      if(!this.isDesktop && this.currentMaargJob?.jobName) {
+        this.router.push({ name: 'JobDetails', params: { jobId: this.currentMaargJob.jobTypeEnumId, category: "pre-order-maarg" } });
+        return;
+      }
+
       if(!this.isJobDetailAnimationCompleted) {
         emitter.emit('playAnimation');
         this.isJobDetailAnimationCompleted = true;
@@ -421,6 +426,9 @@ export default defineComponent({
     emitter.on('viewJobConfiguration', this.viewJobConfiguration)
     emitter.off("productStoreOrConfigChanged", this.fetchJobs);
   },
+  async ionViewWillLeave() {
+    await this.store.dispatch("maargJob/clearCurrentMaargJob");
+  },
   setup() {
     const store = useStore();
     const router = useRouter();