Improved: logic to show spinner and close configuration card in case of product store change (#720)

src/components/Menu.vue

@@ -83,12 +83,12 @@ export default defineComponent({
     async setEComStore(event: CustomEvent) {
       if(this.userProfile && this.eComStore?.productStoreId !== event.detail.value) {
         await this.store.dispatch('user/setEcomStore', { 'productStoreId': event.detail.value })
-        emitter.emit("productStoreOrConfigChanged")
+        emitter.emit("productStoreOrConfigChanged", true)
       }
     },
     async setShopifyConfig(event: CustomEvent){
       await this.store.dispatch('user/setCurrentShopifyConfig', { 'shopifyConfigId': event.detail.value });
-      emitter.emit("productStoreOrConfigChanged")
+      emitter.emit("productStoreOrConfigChanged", true)
     }
   },
   setup() {

src/locales/en.json

@@ -93,6 +93,7 @@
   "Failed records": "Failed records",
   "Failed job reason": "Failed job reason",
   "Failed to schedule service(s)": "Failed to schedule {count} service(s)",
+  "Fetching jobs": "Fetching jobs",
   "Fetching TimeZones": "Fetching TimeZones",
   "File upload status": "File upload status",
   "Filters": "Filters",

src/views/Brokering.vue

@@ -58,7 +58,7 @@
           <MoreJobs v-if="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId).length" :jobs="getMoreJobs({...jobEnums, ...initialLoadJobEnums}, enumTypeId)" />
         </section>
 
-        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob">
+        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob && Object.keys(currentJob).length">
           <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob" :isBrokerJob="orderBatchJobs.includes(currentJob) ? true : false"/>
         </aside>
       </main>
@@ -208,7 +208,14 @@ export default defineComponent({
         this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
         translate('Disabled')
     },
-    async fetchJobs() {
+    async fetchJobs(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = "";
+        this.freqType = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
       await this.store.dispatch("job/fetchJobs", {
         "inputFields": {
           // If we fetch broker sys job by not passing systemJobEnumId filter then this api

src/views/Fulfillment.vue

@@ -240,8 +240,15 @@ export default defineComponent({
         this.store.dispatch('job/updateJob', job)
       }
     },
-    async fetchJobs(){
-      this.isLoading = true
+    async fetchJobs(isCurrentJobUpdateRequired = false){
+      this.isLoading = true;
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = "";
+        this.freqType = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
       await this.store.dispatch("job/fetchJobs", {
         "inputFields": {
           "enumTypeId": "FULFILLMENT_SYS_JOB"

src/views/InitialLoad.vue

@@ -207,8 +207,15 @@ export default defineComponent({
         this.isJobDetailAnimationCompleted = true;
       }
     },
-    fetchJobs(){
-      this.store.dispatch("job/fetchJobs", {
+    async fetchJobs(isCurrentJobUpdateRequired = false){
+      if(isCurrentJobUpdateRequired) {
+        this.currentSelectedJobModal = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.job = {};
+        this.lastShopifyOrderId = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
+      await this.store.dispatch("job/fetchJobs", {
         "inputFields":{
           "systemJobEnumId": Object.values(this.jobEnums),
           "systemJobEnumId_op": "in"

src/views/Inventory.vue

@@ -178,9 +178,16 @@ export default defineComponent({
       });
       this.isLoading = false
     },
-    fetchData() {
+    async fetchData(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = "";
+        this.freqType = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
       this.store.dispatch('webhook/fetchWebhooks')
-      this.fetchJobs()
+      await this.fetchJobs()
     }
   },
   mounted () {

src/views/Miscellaneous.vue

@@ -59,7 +59,6 @@ import {
   IonMenuButton,
   IonNote,
   IonPage,
-  IonSpinner,
   IonTitle,
   IonToolbar,
   isPlatform,
@@ -87,18 +86,17 @@ export default defineComponent({
     IonMenuButton,
     IonNote,
     IonPage,
-    IonSpinner,
     IonTitle,
     IonToolbar,
     JobConfiguration
   },
   mounted() {
     emitter.on('jobUpdated', this.getMiscellaneousJobs);
     this.getMiscellaneousJobs();
-    emitter.on("productStoreOrConfigChanged", this.getMiscellaneousJobs);
+    emitter.on("productStoreOrConfigChanged", this.updateProductStoreConfig);
   },
   unmounted() {
-    emitter.off("productStoreOrConfigChanged", this.getMiscellaneousJobs);
+    emitter.off("productStoreOrConfigChanged", this.updateProductStoreConfig);
     emitter.off('jobUpdated', this.getMiscellaneousJobs);
   },
   data() {
@@ -107,7 +105,7 @@ export default defineComponent({
       currentJobStatus: '',
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
-      isRetrying: false,
+      isRetrying: false
     }
   },
   computed: {
@@ -152,6 +150,15 @@ export default defineComponent({
     async getMiscellaneousJobs(viewSize = 100, viewIndex = 0) {
       await this.store.dispatch('job/fetchMiscellaneousJobs', {eComStoreId: this.getCurrentEComStore.productStoreId, viewSize, viewIndex});
     },
+    async updateProductStoreConfig(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
+      this.getMiscellaneousJobs();
+    },
     async loadMoreMiscellaneousJobs (event: any) {
       this.getMiscellaneousJobs(
         undefined,

src/views/Orders.vue

@@ -279,8 +279,15 @@ export default defineComponent({
         this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
         translate('Disabled')
     },
-    async fetchJobs(){
+    async fetchJobs(isCurrentJobUpdateRequired = false){
       this.isLoading = true;
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = ""
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = ""
+        this.freqType = ""
+        this.isJobDetailAnimationCompleted = false
+      }
       this.store.dispatch('webhook/fetchWebhooks')
       await this.store.dispatch("job/fetchJobs", {
         "inputFields": {

src/views/Pipeline.vue

@@ -31,7 +31,13 @@
     </ion-header>
 
     <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="filter-content">
-      <main>
+      <div class="empty-state" v-if="jobsLoading">
+        <ion-item lines="none">
+          <ion-spinner name="crescent" slot="start" />
+          {{ translate("Fetching jobs") }}
+        </ion-item>
+      </div>
+      <main v-else>
         <section v-if="segmentSelected === 'pending'">
           <!-- Empty state -->
           <div v-if="pendingJobs?.length === 0">
@@ -368,6 +374,7 @@ export default defineComponent({
       isRetrying: false,
       queryString: '' as any,
       isScrollingEnabled: false,
+      jobsLoading: false,
       selectedJobId: '' as any
     }
   },
@@ -516,17 +523,17 @@ export default defineComponent({
     async refreshJobs(event: any, isRetrying = false ) {
       this.isRetrying = isRetrying;
       if(this.segmentSelected === 'pending') {
-        this.getPendingJobs().then(() => {
+        await this.getPendingJobs().then(() => {
           if(event) event.target.complete();
           this.isRetrying = false;
         });
       } else if(this.segmentSelected === 'running') {
-        this.getRunningJobs().then(() => {
+        await this.getRunningJobs().then(() => {
           if(event) event.target.complete();
           this.isRetrying = false;
         });
       } else {
-        this.getJobHistory().then(() => {
+        await this.getJobHistory().then(() => {
           if(event) event.target.complete();
           this.isRetrying = false;
         });
@@ -555,7 +562,7 @@ export default defineComponent({
               text: translate('Skip'),
               handler: async () => {
                 if(this.isRuntimePassed(job)) {
-                  await this.refreshJobs(undefined, true)
+                  await this.refreshJobs(undefined)
                   showToast(translate("Job runtime has passed. The job data has refreshed. Please try again."))
                   await this.store.dispatch('job/updateCurrentJob', { job: {} });
                   return;
@@ -601,7 +608,7 @@ export default defineComponent({
               text: translate("CANCEL"),
               handler: async () => {
                 if(this.isRuntimePassed(job)) {
-                  await this.refreshJobs(undefined, true)
+                  await this.refreshJobs(undefined)
                   showToast(translate("Job runtime has passed. The job data has refreshed. Please try again."))
                   await this.store.dispatch('job/updateCurrentJob', { job: {} });
                   return;
@@ -654,6 +661,17 @@ export default defineComponent({
         this.getPendingJobs();
       }
     },
+    async updateProductStoreConfig(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.jobsLoading = true;
+        await this.store.dispatch('job/updateCurrentJob', { job: {} });
+        this.currentJobStatus = ""
+        this.freqType = ""
+        this.isJobDetailAnimationCompleted = false
+      }
+      await this.refreshJobs(undefined);
+      this.jobsLoading = false;
+    }
   },
   async created() {
     this.getPendingJobs();
@@ -665,11 +683,11 @@ export default defineComponent({
     await this.store.dispatch('job/updateCurrentJob', { job: {} });
   },
   mounted(){
-    emitter.on("productStoreOrConfigChanged", this.refreshJobs);
+    emitter.on("productStoreOrConfigChanged", this.updateProductStoreConfig);
     emitter.on("pinnedJobsUpdated", (this as any).updateSelectedPinnedJob);
   },
   unmounted(){
-    emitter.off("productStoreOrConfigChanged", this.refreshJobs);
+    emitter.off("productStoreOrConfigChanged", this.updateProductStoreConfig);
     emitter.off('jobUpdated', this.updateJobs);
     emitter.off("pinnedJobsUpdated", (this as any).updateSelectedPinnedJob);
   },

src/views/PreOrder.vue

@@ -356,16 +356,23 @@ 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"
         }
       });
     },
-    fetchInitialData() {
-      this.fetchJobs();
-      this.getPreOrderBackorderCategory();
+    async fetchInitialData(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = ""
+        this.freqType = '';
+        this.isJobDetailAnimationCompleted = false;
+      }
+      await this.fetchJobs();
+      await this.getPreOrderBackorderCategory();
     }
   },
   mounted () {

src/views/Product.vue

@@ -192,8 +192,15 @@ export default defineComponent({
         this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
         translate('Disabled')
     },
-    async fetchJobs(){
-      this.isLoading = true
+    async fetchJobs(isCurrentJobUpdateRequired = false){
+      this.isLoading = true;
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = ""
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = ""
+        this.freqType = ""
+        this.isJobDetailAnimationCompleted = false
+      }
       await this.store.dispatch("job/fetchJobs", {
         "inputFields":{
           "enumTypeId": "PRODUCT_SYS_JOB"

src/views/Reports.vue

@@ -57,7 +57,6 @@ import {
   IonMenuButton,
   IonNote,
   IonPage,
-  IonSpinner,
   IonTitle,
   IonToolbar,
   isPlatform,
@@ -85,7 +84,6 @@ export default defineComponent({
     IonMenuButton,
     IonNote,
     IonPage,
-    IonSpinner,
     IonTitle,
     IonToolbar,
     JobConfiguration
@@ -97,7 +95,7 @@ export default defineComponent({
       currentJobStatus: '',
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
-      isRetrying: false,
+      isRetrying: false
     }
   },
   computed: {
@@ -110,11 +108,11 @@ export default defineComponent({
   mounted() {
     emitter.on('jobUpdated', this.getReportsJobs);
     this.getReportsJobs();
-    emitter.on("productStoreOrConfigChanged", this.getReportsJobs);
+    emitter.on("productStoreOrConfigChanged", this.updateProductStoreConfig);
   },
   unmounted() {
     emitter.on('jobUpdated', this.getReportsJobs);
-    emitter.off("productStoreOrConfigChanged", this.getReportsJobs);
+    emitter.off("productStoreOrConfigChanged", this.updateProductStoreConfig);
   },
   methods: {
     async viewJobConfiguration(job: any) {
@@ -140,6 +138,15 @@ export default defineComponent({
     async getReportsJobs(viewSize = 200, viewIndex = 0) {
       await this.store.dispatch('job/fetchReportsJobs', { eComStoreId: this.getCurrentEComStore.productStoreId, viewSize, viewIndex });
     },
+    async updateProductStoreConfig(isCurrentJobUpdateRequired = false) {
+      if(isCurrentJobUpdateRequired) {
+        this.currentJob = "";
+        await this.store.dispatch('job/updateCurrentJob', { });
+        this.currentJobStatus = "";
+        this.isJobDetailAnimationCompleted = false;
+      }
+      await this.getReportsJobs()
+    },
     async loadMoreReportsJobs(event: any) {
       this.getReportsJobs(
         undefined,