From 68d636beb530716f25fd1740efc34ca2137dafbf Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 9 Aug 2024 12:27:03 +0530
Subject: [PATCH] Improved: logic to show spinner and close configuration card
 in case of product store change (#720)

---
 src/views/Brokering.vue     | 22 +++++++++++++++++++---
 src/views/Fulfillment.vue   | 20 ++++++++++++++++++--
 src/views/InitialLoad.vue   | 24 ++++++++++++++++++++----
 src/views/Inventory.vue     | 26 +++++++++++++++++++++-----
 src/views/Miscellaneous.vue | 15 ++++++++++++++-
 src/views/Orders.vue        | 20 ++++++++++++++++++--
 src/views/Pipeline.vue      | 30 +++++++++++++++++++++++-------
 src/views/PreOrder.vue      | 30 +++++++++++++++++++++++-------
 src/views/Product.vue       | 24 ++++++++++++++++++++----
 src/views/Reports.vue       | 15 ++++++++++++++-
 10 files changed, 190 insertions(+), 36 deletions(-)

diff --git a/src/views/Brokering.vue b/src/views/Brokering.vue
index 828fdb3d..186c253f 100644
--- a/src/views/Brokering.vue
+++ b/src/views/Brokering.vue
@@ -8,7 +8,13 @@
     </ion-header>
 
     <ion-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>
           <ion-button expand="block" :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="addBatch()">{{ translate('Create new brokering job') }}</ion-button>
 
@@ -58,7 +64,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>
@@ -83,6 +89,7 @@ import {
   IonMenuButton,
   IonPage,
   IonRow,
+  IonSpinner,
   IonTitle,
   IonToggle,
   IonToolbar,
@@ -121,6 +128,7 @@ export default defineComponent({
     IonMenuButton,
     IonPage,
     IonRow,
+    IonSpinner,
     IonTitle,
     IonToggle,
     IonToolbar,
@@ -138,7 +146,8 @@ export default defineComponent({
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
       enumTypeId: 'BROKER_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,
+      jobsLoading: false
     }
   },
   computed: {
@@ -209,6 +218,12 @@ export default defineComponent({
         translate('Disabled')
     },
     async fetchJobs() {
+      this.jobsLoading = true;
+      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
@@ -225,6 +240,7 @@ export default defineComponent({
           "systemJobEnumId_op": "in"
         }
       });
+      this.jobsLoading = false;
     },
     timeFromNow(time: any) {
       const timeDiff = DateTime.fromMillis(time).diff(DateTime.local());
diff --git a/src/views/Fulfillment.vue b/src/views/Fulfillment.vue
index e1becc8e..ae112ad4 100644
--- a/src/views/Fulfillment.vue
+++ b/src/views/Fulfillment.vue
@@ -8,7 +8,13 @@
     </ion-header>
 
     <ion-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>
           <ion-card>
             <ion-card-header>
@@ -110,6 +116,7 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
+  IonSpinner,
   IonTitle,
   IonToggle,
   IonToolbar,
@@ -142,6 +149,7 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
+    IonSpinner,
     IonTitle,
     IonToggle,
     IonToolbar,
@@ -159,7 +167,8 @@ export default defineComponent({
       isDesktop: isPlatform('desktop'),
       autoCancelDays: '',
       enumTypeId: 'FULFILLMENT_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,
+      jobsLoading: false
     }
   },
   computed: {
@@ -233,6 +242,12 @@ export default defineComponent({
       }
     },
     async fetchJobs(){
+      this.jobsLoading = true;
+      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"
@@ -241,6 +256,7 @@ export default defineComponent({
       if (this.currentEComStore.productStoreId) {
         this.getAutoCancelDays();
       }
+      this.jobsLoading = false;
     },
     async getAutoCancelDays(){
       const payload = {
diff --git a/src/views/InitialLoad.vue b/src/views/InitialLoad.vue
index e1ec23dc..c7e62a8b 100644
--- a/src/views/InitialLoad.vue
+++ b/src/views/InitialLoad.vue
@@ -8,7 +8,13 @@
     </ion-header>
 
     <ion-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>
           <ion-card>
             <ion-card-header>
@@ -74,6 +80,7 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
+  IonSpinner,
   IonTitle,
   IonToggle,
   IonToolbar,
@@ -103,6 +110,7 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
+    IonSpinner,
     IonTitle,
     IonToggle,
     IonToolbar
@@ -115,7 +123,8 @@ export default defineComponent({
       job: {} as any,
       lastShopifyOrderId: '',
       isJobDetailAnimationCompleted: false,
-      isDesktop: isPlatform('desktop')
+      isDesktop: isPlatform('desktop'),
+      jobsLoading: false
     }
   },
   mounted() {
@@ -207,14 +216,21 @@ export default defineComponent({
         this.isJobDetailAnimationCompleted = true;
       }
     },
-    fetchJobs(){
-      this.store.dispatch("job/fetchJobs", {
+    async fetchJobs(){
+      this.jobsLoading = true;
+      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"
         }
       })
       this.store.dispatch('webhook/fetchWebhooks')
+      this.jobsLoading = false;
     },
     async updateWebhook(checked: boolean, enumId: string) {
       const webhook = this.getCachedWebhook[this.webhookEnums[enumId]]
diff --git a/src/views/Inventory.vue b/src/views/Inventory.vue
index 877f055c..77384625 100644
--- a/src/views/Inventory.vue
+++ b/src/views/Inventory.vue
@@ -8,7 +8,13 @@
     </ion-header>
 
     <ion-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>
           <ion-card>
             <ion-card-header>
@@ -56,6 +62,7 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
+  IonSpinner,
   IonTitle,
   IonToggle,
   IonToolbar,
@@ -83,6 +90,7 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
+    IonSpinner,
     IonTitle,
     IonToggle,
     IonToolbar,
@@ -100,6 +108,7 @@ export default defineComponent({
       isDesktop: isPlatform('desktop'),
       enumTypeId: 'INVENTORY_SYS_JOB',
       webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
+      jobsLoading: false
     }
   },
   computed: {
@@ -165,16 +174,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": "INVENTORY_SYS_JOB"
         }
       });
     },
-    fetchData() {
+    async fetchData() {
+      this.jobsLoading = true;
+      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()
+      this.jobsLoading = false;
     }
   },
   mounted () {
diff --git a/src/views/Miscellaneous.vue b/src/views/Miscellaneous.vue
index eaba4aad..b29bd5d2 100644
--- a/src/views/Miscellaneous.vue
+++ b/src/views/Miscellaneous.vue
@@ -8,7 +8,13 @@
     </ion-header>
 
     <ion-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>
           <!-- Empty state -->
           <div v-if="miscellaneousJobs?.length === 0">
@@ -108,6 +114,7 @@ export default defineComponent({
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
       isRetrying: false,
+      jobsLoading: false
     }
   },
   computed: {
@@ -150,7 +157,13 @@ export default defineComponent({
       }
     },
     async getMiscellaneousJobs(viewSize = 100, viewIndex = 0) {
+      this.jobsLoading = true;
+      this.currentJob = "";
+      await this.store.dispatch('job/updateCurrentJob', { });
+      this.currentJobStatus = "";
+      this.isJobDetailAnimationCompleted = false;
       await this.store.dispatch('job/fetchMiscellaneousJobs', {eComStoreId: this.getCurrentEComStore.productStoreId, viewSize, viewIndex});
+      this.jobsLoading = false;
     },
     async loadMoreMiscellaneousJobs (event: any) {
       this.getMiscellaneousJobs(
diff --git a/src/views/Orders.vue b/src/views/Orders.vue
index 91adf507..f8dc427f 100644
--- a/src/views/Orders.vue
+++ b/src/views/Orders.vue
@@ -8,7 +8,13 @@
     </ion-header>
 
     <ion-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>
           <ion-card>
             <ion-card-header>
@@ -105,6 +111,7 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
+  IonSpinner,
   IonTitle,
   IonToggle,
   IonToolbar,
@@ -133,6 +140,7 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
+    IonSpinner,
     IonTitle,
     IonToggle,
     IonToolbar,
@@ -150,7 +158,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,
+      jobsLoading: false
     }
   },
   computed: {
@@ -268,12 +277,19 @@ export default defineComponent({
         translate('Disabled')
     },
     async fetchJobs(){
+      this.jobsLoading = true;
+      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": {
           "enumTypeId": "ORDER_SYS_JOB"
         }
       });
+      this.jobsLoading = false;
     }
   },
   mounted () {
diff --git a/src/views/Pipeline.vue b/src/views/Pipeline.vue
index 2e8164fd..968c2159 100644
--- a/src/views/Pipeline.vue
+++ b/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">
@@ -360,7 +366,8 @@ export default defineComponent({
       isDesktop: isPlatform('desktop'),
       isRetrying: false,
       queryString: '' as any,
-      isScrollingEnabled: false
+      isScrollingEnabled: false,
+      jobsLoading: false
     }
   },
   computed: {
@@ -501,17 +508,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;
         });
@@ -635,6 +642,15 @@ export default defineComponent({
         this.getPendingJobs();
       }
     },
+    async updateProductStoreConfig() {
+      this.jobsLoading = true;
+      await this.store.dispatch('job/updateCurrentJob', { job: {} });
+      this.currentJobStatus = ""
+      this.freqType = ""
+      this.isJobDetailAnimationCompleted = false
+      await this.refreshJobs(undefined, false);
+      this.jobsLoading = false;
+    }
   },
   async created() {
     this.getPendingJobs();
@@ -646,11 +662,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);
   },
diff --git a/src/views/PreOrder.vue b/src/views/PreOrder.vue
index ec1d0cbb..78823eb9 100644
--- a/src/views/PreOrder.vue
+++ b/src/views/PreOrder.vue
@@ -8,7 +8,13 @@
     </ion-header>
 
     <ion-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>
           <ion-card>
             <ion-card-header>
@@ -185,6 +191,7 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   isPlatform
@@ -218,6 +225,7 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
+    IonSpinner,
     IonTitle,
     IonToolbar,
     JobConfiguration,
@@ -244,7 +252,8 @@ export default defineComponent({
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
       enumTypeId: 'PRE_ORD_SYS_JOB',
-      preOrderBackorderCategory: {} as any
+      preOrderBackorderCategory: {} as any,
+      jobsLoading: false
     }
   },
   methods: {
@@ -356,16 +365,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() {
+      this.jobsLoading = true;
+      this.currentJob = "";
+      await this.store.dispatch('job/updateCurrentJob', { });
+      this.currentJobStatus = ""
+      this.freqType = '';
+      this.isJobDetailAnimationCompleted = false;
+      await this.fetchJobs();
+      await this.getPreOrderBackorderCategory();
+      this.jobsLoading = false;
     }
   },
   mounted () {
diff --git a/src/views/Product.vue b/src/views/Product.vue
index 07515198..a502098f 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -8,7 +8,13 @@
     </ion-header>
 
     <ion-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>
           <ion-card>
             <ion-card-header>
@@ -64,6 +70,7 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   IonToggle,
@@ -91,6 +98,7 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
+    IonSpinner,
     IonTitle,
     IonToolbar,
     IonToggle,
@@ -126,7 +134,8 @@ export default defineComponent({
       isDesktop: isPlatform('desktop'),
       webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
       enumTypeId: 'PRODUCT_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,
+      jobsLoading: false
     }
   },
   mounted () {
@@ -187,13 +196,20 @@ export default defineComponent({
         this.getTemporalExpr(this.getJobStatus(this.jobEnums[enumId]))?.description :
         translate('Disabled')
     },
-    fetchJobs(){
-      this.store.dispatch("job/fetchJobs", {
+    async fetchJobs(){
+      this.jobsLoading = true;
+      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"
         }
       });
       this.store.dispatch('webhook/fetchWebhooks')
+      this.jobsLoading = false;
     }
   },
   setup() {
diff --git a/src/views/Reports.vue b/src/views/Reports.vue
index e83e0204..80fb169f 100644
--- a/src/views/Reports.vue
+++ b/src/views/Reports.vue
@@ -8,7 +8,13 @@
     </ion-header>
 
     <ion-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>
           <div v-if="!reportsJobs?.length">
             <p class="ion-text-center">{{ translate("There are no reports jobs right now") }}</p>
@@ -98,6 +104,7 @@ export default defineComponent({
       isJobDetailAnimationCompleted: false,
       isDesktop: isPlatform('desktop'),
       isRetrying: false,
+      jobsLoading: false
     }
   },
   computed: {
@@ -138,7 +145,13 @@ export default defineComponent({
       }
     },
     async getReportsJobs(viewSize = 200, viewIndex = 0) {
+      this.jobsLoading = true;
+      this.currentJob = "";
+      await this.store.dispatch('job/updateCurrentJob', { });
+      this.currentJobStatus = "";
+      this.isJobDetailAnimationCompleted = false;
       await this.store.dispatch('job/fetchReportsJobs', { eComStoreId: this.getCurrentEComStore.productStoreId, viewSize, viewIndex });
+      this.jobsLoading = false;
     },
     async loadMoreReportsJobs(event: any) {
       this.getReportsJobs(