Merge pull request #680 from bcgov/vuetify-mt

added loading overlay for batch update
bcgov · Nov 7, 2024 · 698eb1c · 698eb1c
2 parents 6ba7e8f + bdf6e27
commit 698eb1c
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 34 deletions.
diff --git a/frontend/src/components/Batch/BatchRoutines.vue b/frontend/src/components/Batch/BatchRoutines.vue
@@ -1,5 +1,18 @@
 <template>
-  <div>
+  <v-container>
+    <v-overlay
+      v-model="isBatchRoutinesLoading"
+      class="align-center justify-center"
+      contained
+    >
+      <v-progress-circular
+        v-if="isBatchRoutinesLoading"
+        indeterminate
+        color="primary"
+        size="64"
+      >
+      </v-progress-circular>
+    </v-overlay>
     <v-data-table
       :headers="scheduledRoutinesFields"
       :items="batchRoutines"
@@ -45,7 +58,7 @@
       {{ snackbarMessage }}
       <v-btn text @click="snackbarVisible = false">Close</v-btn>
     </v-snackbar>
-  </div>
+  </v-container>
 </template>
 
 <script>
@@ -153,6 +166,7 @@ export default {
   computed: {
     ...mapState(useBatchProcessingStore, {
       batchRoutines: "getBatchRoutines",
+      isBatchRoutinesLoading: "getIsGettingBatchRoutinesLoading",
     }),
     ...mapState(useAccessStore, ["hasPermissions"]),
   },

diff --git a/frontend/src/components/Batch/BatchRuns.vue b/frontend/src/components/Batch/BatchRuns.vue
@@ -1,5 +1,18 @@
 <template>
   <v-container>
+    <v-overlay
+      v-model="isBatchJobsLoading"
+      class="align-center justify-center"
+      contained
+    >
+      <v-progress-circular
+        v-if="isBatchJobsLoading"
+        indeterminate
+        color="primary"
+        size="64"
+      >
+      </v-progress-circular>
+    </v-overlay>
     <v-row>
       <!-- First Column (col-5 for medium screens, col-12 for small screens) -->
       <v-col :cols="12" :md="isBatchShowing || isErrorShowing ? 7 : 12">
@@ -324,6 +337,7 @@ export default {
   computed: {
     ...mapState(useBatchProcessingStore, {
       batchRuns: "getBatchRuns",
+      isBatchJobsLoading: "getIsGettingBatchJobsLoading",
     }),
   },
   methods: {
@@ -335,14 +349,6 @@ export default {
     rerunBatch(bid) {
       BatchProcessingService.rerunBatch(bid).then((response) => {
         if (response) {
-          // this.$bvToast.toast(
-          //   "Created a new batch job based on batch #" + bid,
-          //   {
-          //     title: "NEW BATCH JOB STARTED",
-          //     variant: "success",
-          //     noAutoHide: true,
-          //   }
-          // );
           this.snackbarStore.showSnackbar(
             "Created a new batch job based on batch #" + bid,
             "success",

diff --git a/frontend/src/components/Batch/ScheduledBatchRuns.vue b/frontend/src/components/Batch/ScheduledBatchRuns.vue
@@ -1,5 +1,18 @@
 <template>
-  <div>
+  <v-container>
+    <v-overlay
+      v-model="isScheduledBatchJobsLoading"
+      class="align-center justify-center"
+      contained
+    >
+      <v-progress-circular
+        v-if="isScheduledBatchJobsLoading"
+        indeterminate
+        color="primary"
+        size="64"
+      >
+      </v-progress-circular>
+    </v-overlay>
     <div v-if="adminDashboardLoading">LOADING</div>
     <div v-if="!scheduledJobs.length">No Scheduled Jobs</div>
 
@@ -88,7 +101,7 @@
       {{ snackbar.message }}
       <v-btn text @click="snackbar.show = false">Close</v-btn>
     </v-snackbar>
-  </div>
+  </v-container>
 </template>
 
 <script>
@@ -150,6 +163,7 @@ export default {
   computed: {
     ...mapState(useBatchProcessingStore, {
       scheduledJobs: "getScheduledBatchRuns",
+      isScheduledBatchJobsLoading: "getIsGettingScheduledBatchJobsLoading",
     }),
     sortedScheduledJobs() {
       return [...this.scheduledJobs].sort((a, b) => {

diff --git a/frontend/src/store/modules/batchprocessing.js b/frontend/src/store/modules/batchprocessing.js
@@ -10,7 +10,9 @@ export const useBatchProcessingStore = defineStore("batchProcessing", {
     batchRuns: [],
     batchRoutines: [],
     activeTab: "batchRuns",
-
+    gettingBatchJobs: false,
+    gettingScheduledBatchJobs: false,
+    gettingBatchRoutines: false,
     //delete below
     schools: [],
     districts: [],
@@ -42,6 +44,9 @@ export const useBatchProcessingStore = defineStore("batchProcessing", {
   }),
   actions: {
     async updateDashboards() {
+      this.gettingScheduledBatchJobs = true;
+      this.gettingBatchRoutines = true;
+      this.gettingBatchJobs = true;
       await this.setBatchJobs();
       const batchRunScheduledRuns =
         await BatchProcessingService.getScheduledBatchJobs();
@@ -56,12 +61,14 @@ export const useBatchProcessingStore = defineStore("batchProcessing", {
     },
     async setBatchRoutines(payload) {
       this.batchRoutines = payload;
+      this.gettingBatchRoutines = false;
     },
     async setScheduledBatchJobs(payload) {
       this.scheduledBatchJobs = payload;
       for (let value of this.scheduledBatchJobs) {
         value.jobParameters = JSON.parse(value.jobParameters);
       }
+      this.gettingScheduledBatchJobs = false;
     },
     async setBatchJobs() {
       BatchProcessingService.getDashboardInfo()
@@ -73,15 +80,11 @@ export const useBatchProcessingStore = defineStore("batchProcessing", {
           }
           // Set the batchRuns property
           this.batchRuns = batchRunData;
+          this.gettingBatchJobs = false;
         })
         .catch((error) => {
-          this.adminDashboardLoading = false;
+          this.gettingBatchJobs = false;
           if (error.response && error.response.status) {
-            // this.$bvToast.toast("ERROR " + error.response.statusText, {
-            //   title: "ERROR" + error.response.status,
-            //   variant: "danger",
-            //   noAutoHide: true,
-            // });
             this.snackbarStore.showSnackbar(
               "ERROR " + error.response.statusText,
               "error",
@@ -111,15 +114,17 @@ export const useBatchProcessingStore = defineStore("batchProcessing", {
       }
     },
 
-    async setScheduledBatchJobs(payload) {
-      this.scheduledBatchJobs = payload;
-      for (let value of this.scheduledBatchJobs) {
-        value.jobParameters = JSON.parse(value.jobParameters);
-      }
-    },
-    async setBatchRoutines(payload) {
-      this.batchRoutines = payload;
-    },
+    // async setScheduledBatchJobs(payload) {
+    //   this.scheduledBatchJobs = payload;
+    //   for (let value of this.scheduledBatchJobs) {
+    //     value.jobParameters = JSON.parse(value.jobParameters);
+    //   }
+    //   this.gettingScheduledBatchJobs = false;
+    // },
+    // async setBatchRoutines(payload) {
+    //   this.batchRoutines = payload;
+    //   this.gettingBatchRoutines = false;
+    // },
 
     async removeScheduledJobs(payload) {
       const response = await BatchProcessingService.removeScheduledJobs(
@@ -128,12 +133,13 @@ export const useBatchProcessingStore = defineStore("batchProcessing", {
       this.updateDashboards();
       return response;
     },
-    async setScheduledBatchJobs(payload) {
-      this.scheduledBatchJobs = payload;
-      for (let value of this.scheduledBatchJobs) {
-        value.jobParameters = JSON.parse(value.jobParameters);
-      }
-    },
+    // async setScheduledBatchJobs(payload) {
+    //   this.scheduledBatchJobs = payload;
+    //   for (let value of this.scheduledBatchJobs) {
+    //     value.jobParameters = JSON.parse(value.jobParameters);
+    //   }
+    //   this.gettingScheduledBatchJobs = false;
+    // },
   },
   getters: {
     getActiveTab: (state) => {
@@ -142,5 +148,9 @@ export const useBatchProcessingStore = defineStore("batchProcessing", {
     getScheduledBatchRuns: (state) => state.scheduledBatchJobs,
     getBatchRuns: (state) => state.batchRuns,
     getBatchRoutines: (state) => state.batchRoutines,
+    getIsGettingScheduledBatchJobsLoading: (state) =>
+      state.gettingScheduledBatchJobs,
+    getIsGettingBatchRoutinesLoading: (state) => state.gettingBatchRoutines,
+    getIsGettingBatchJobsLoading: (state) => state.gettingBatchJobs,
   },
 });