From fe7da2a9e79d142acf86d5c6058c05bbe88ecb37 Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Fri, 6 Dec 2024 19:32:53 +0530 Subject: [PATCH 1/3] Implemented: mobile view for the maarg jobs (#734) --- src/store/modules/maargJob/actions.ts | 39 ++++++++++++++++---- src/views/Fulfillment.vue | 7 +++- src/views/InitialLoad.vue | 2 +- src/views/Inventory.vue | 5 +++ src/views/JobDetails.vue | 52 ++++++++++++++++----------- src/views/Miscellaneous.vue | 4 +++ src/views/Orders.vue | 4 +++ src/views/PreOrder.vue | 5 +++ 8 files changed, 89 insertions(+), 29 deletions(-) diff --git a/src/store/modules/maargJob/actions.ts b/src/store/modules/maargJob/actions.ts index 8ebd7fb8..af20d860 100644 --- a/src/store/modules/maargJob/actions.ts +++ b/src/store/modules/maargJob/actions.ts @@ -58,12 +58,21 @@ const actions: ActionTree = { 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,31 @@ const actions: ActionTree = { 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 clearMaargJobState({ commit }) { diff --git a/src/views/Fulfillment.vue b/src/views/Fulfillment.vue index 36891f88..609bb45a 100644 --- a/src/views/Fulfillment.vue +++ b/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; diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue index 79ffe509..d8079601 100644 --- a/src/views/InitialLoad.vue +++ b/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) { diff --git a/src/views/Inventory.vue b/src/views/Inventory.vue index ce00e8c5..df4a5e6c 100644 --- a/src/views/Inventory.vue +++ b/src/views/Inventory.vue @@ -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: "initial-load-maarg" } }); + return; + } + if(!this.isJobDetailAnimationCompleted) { emitter.emit('playAnimation'); this.isJobDetailAnimationCompleted = true; diff --git a/src/views/JobDetails.vue b/src/views/JobDetails.vue index ebe0fac9..a7018697 100644 --- a/src/views/JobDetails.vue +++ b/src/views/JobDetails.vue @@ -9,7 +9,9 @@ + + @@ -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,8 +103,9 @@ 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); } }) diff --git a/src/views/Miscellaneous.vue b/src/views/Miscellaneous.vue index 2c4cc11a..58d8e2de 100644 --- a/src/views/Miscellaneous.vue +++ b/src/views/Miscellaneous.vue @@ -232,6 +232,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: "miscellaneous-maarg" } }); + return; + } if(!this.isJobDetailAnimationCompleted) { emitter.emit('playAnimation'); this.isJobDetailAnimationCompleted = true; diff --git a/src/views/Orders.vue b/src/views/Orders.vue index 655b34a0..320b32cb 100644 --- a/src/views/Orders.vue +++ b/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; diff --git a/src/views/PreOrder.vue b/src/views/PreOrder.vue index 265f1f4d..a25d87fb 100644 --- a/src/views/PreOrder.vue +++ b/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; From 1d06675e575393ad1ab43bb18219caa31cd7ccf0 Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Mon, 9 Dec 2024 16:05:52 +0530 Subject: [PATCH 2/3] Fixed: category for the inventory router push and name (#734) --- src/views/Inventory.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/Inventory.vue b/src/views/Inventory.vue index df4a5e6c..6a580a71 100644 --- a/src/views/Inventory.vue +++ b/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; } @@ -229,7 +229,7 @@ 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: "initial-load-maarg" } }); + this.router.push({ name: 'JobDetails', params: { jobId: this.currentMaargJob.jobTypeEnumId, category: "inventory-maarg" } }); return; } From 7b561a4d9eaf200c38066208ab5ce73dc24bf38f Mon Sep 17 00:00:00 2001 From: amansinghbais Date: Tue, 10 Dec 2024 10:56:48 +0530 Subject: [PATCH 3/3] Improved: clearing the currentMaargJob from state when changing the page (#734) --- src/store/modules/maargJob/actions.ts | 4 ++++ src/views/Fulfillment.vue | 5 ++++- src/views/Inventory.vue | 3 +++ src/views/JobDetails.vue | 3 +++ src/views/Miscellaneous.vue | 5 ++++- src/views/Orders.vue | 3 +++ src/views/Pipeline.vue | 3 +++ src/views/PreOrder.vue | 3 +++ 8 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/store/modules/maargJob/actions.ts b/src/store/modules/maargJob/actions.ts index af20d860..a63c1f80 100644 --- a/src/store/modules/maargJob/actions.ts +++ b/src/store/modules/maargJob/actions.ts @@ -142,6 +142,10 @@ const actions: ActionTree = { return currentMaargJob; }, + async clearCurrentMaargJob({ commit }) { + commit(types.MAARGJOB_CURRENT_UPDATED, {}); + }, + async clearMaargJobState({ commit }) { commit(types.MAARGJOB_ENUMS_UPDATED, {}); } diff --git a/src/views/Fulfillment.vue b/src/views/Fulfillment.vue index 609bb45a..148069fd 100644 --- a/src/views/Fulfillment.vue +++ b/src/views/Fulfillment.vue @@ -364,7 +364,7 @@ export default defineComponent({ this.router.push({ name: 'JobDetails', params: { jobId: this.currentMaargJob.jobTypeEnumId, category: "fulfillment-maarg" } }); return; } - + if(!this.isJobDetailAnimationCompleted) { emitter.emit('playAnimation'); this.isJobDetailAnimationCompleted = true; @@ -380,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(); diff --git a/src/views/Inventory.vue b/src/views/Inventory.vue index 6a580a71..1c462c8b 100644 --- a/src/views/Inventory.vue +++ b/src/views/Inventory.vue @@ -248,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(); diff --git a/src/views/JobDetails.vue b/src/views/JobDetails.vue index a7018697..22ae250f 100644 --- a/src/views/JobDetails.vue +++ b/src/views/JobDetails.vue @@ -110,6 +110,9 @@ export default defineComponent({ } }) }, + async ionViewWillLeave() { + await this.store.dispatch("maargJob/clearCurrentMaargJob"); + }, setup() { const store = useStore(); diff --git a/src/views/Miscellaneous.vue b/src/views/Miscellaneous.vue index 58d8e2de..0c17bd5a 100644 --- a/src/views/Miscellaneous.vue +++ b/src/views/Miscellaneous.vue @@ -240,7 +240,10 @@ export default defineComponent({ emitter.emit('playAnimation'); this.isJobDetailAnimationCompleted = true; } - } + }, + }, + async ionViewWillLeave() { + await this.store.dispatch("maargJob/clearCurrentMaargJob"); }, setup() { const store = useStore(); diff --git a/src/views/Orders.vue b/src/views/Orders.vue index 320b32cb..48487a5f 100644 --- a/src/views/Orders.vue +++ b/src/views/Orders.vue @@ -354,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(); diff --git a/src/views/Pipeline.vue b/src/views/Pipeline.vue index 5702b0ec..d05a56d9 100644 --- a/src/views/Pipeline.vue +++ b/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(); diff --git a/src/views/PreOrder.vue b/src/views/PreOrder.vue index a25d87fb..a6768999 100644 --- a/src/views/PreOrder.vue +++ b/src/views/PreOrder.vue @@ -426,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();