Merge pull request #677 from bcgov/shaun-dev

fixed loading for error and search
bcgov · Nov 6, 2024 · ef65d98 · ef65d98
2 parents a6fd965 + 710742e
commit ef65d98
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 16 deletions.
diff --git a/frontend/src/components/Batch/BatchJobErrorResults.vue b/frontend/src/components/Batch/BatchJobErrorResults.vue
@@ -1,5 +1,19 @@
 <template>
-  <v-card>
+  <v-card class="p-3">
+    <v-overlay
+      v-model="batchLoading"
+      class="align-center justify-center"
+      contained
+    >
+      <v-progress-circular
+        v-if="batchLoading"
+        indeterminate
+        color="primary"
+        size="64"
+      >
+        Loading...
+      </v-progress-circular>
+    </v-overlay>
     <div class="d-flex justify-space-between align-center">
       <v-card-title> Batch Job #{{ selectedErrorId }} Error(s) </v-card-title>
 
@@ -8,10 +22,11 @@
     </div>
 
     <!-- No results message-->
-    <p v-if="rows < 1">
+    <p v-if="totalElements < 1 && !batchLoading">
       There are no results to display.<br />
       Please select another Job Execution ID.
     </p>
+
     <v-data-table-server
       v-model:items-per-page="itemsPerPage"
       title="Job/Runs"

diff --git a/frontend/src/components/Batch/BatchJobSearchResults.vue b/frontend/src/components/Batch/BatchJobSearchResults.vue
@@ -1,22 +1,28 @@
 <template>
   <v-card class="p-3">
+    <v-overlay
+      v-model="batchLoading"
+      class="align-center justify-center"
+      contained
+    >
+      <v-progress-circular
+        v-if="batchLoading"
+        indeterminate
+        color="primary"
+        size="64"
+      >
+        Loading...
+      </v-progress-circular>
+    </v-overlay>
     <div class="d-flex justify-space-between align-center">
       <v-card-title> Batch Job #{{ selectedBatchId }} students </v-card-title>
 
       <!-- Slot for close button -->
       <slot name="close"></slot>
     </div>
-    <v-progress-circular
-      v-if="isLoading"
-      indeterminate
-      color="primary"
-      size="64"
-    >
-      Loading...
-    </v-progress-circular>
 
     <!-- No results message-->
-    <p v-if="rows < 1">
+    <p v-if="totalElements < 1 && !batchLoading">
       There are no results to display.<br />
       Please select another Job Execution ID.
     </p>
@@ -26,7 +32,7 @@
       :headers="batchDataFields"
       :items="batchData"
       :items-length="totalElements"
-      :loading="loading"
+      :loading="batchLoading"
       item-value="id"
       @update:options="loadItems"
     >
@@ -60,7 +66,6 @@ export default {
       batchData: [],
       perPage: 10,
       rows: 0,
-      loading: false,
       totalElements: 0,
       itemsPerPage: 10,
       currentPage: 0,
@@ -152,7 +157,7 @@ export default {
         })
         .catch((error) => {
           if (error.response.status) {
-            this.isBatchLoading = false;
+            this.BatchLoading = false;
           }
         });
     },

diff --git a/frontend/src/components/Batch/Forms/GraduationAlgorithmForm.vue b/frontend/src/components/Batch/Forms/GraduationAlgorithmForm.vue
@@ -11,6 +11,15 @@
         >
       </template>
       <v-card>
+        <v-overlay
+          v-model="batchLoading"
+          class="align-center justify-center"
+          contained
+        >
+          <v-progress-circular indeterminate color="primary" size="64">
+            Loading...
+          </v-progress-circular>
+        </v-overlay>
         <div class="d-flex justify-space-between align-center">
           <v-card-title>Graduation Algorithm</v-card-title>
           <v-btn
@@ -313,6 +322,7 @@ export default {
       "updateDashboards",
     ]),
     closeDialogAndResetForm() {
+      this.batchLoading = false;
       this.group = null;
       this.dialog = false;
       this.clearBatchDetails();
@@ -325,8 +335,8 @@ export default {
       this.step = step;
     },
     async submit() {
-      this.dialog = false;
       try {
+        this.batchLoading = true;
         const requestTemplate = [
           "districts",
           "gradDateFrom",
@@ -349,6 +359,7 @@ export default {
           requestPayload,
           this.getBatchRequestCrontime
         );
+        this.batchLoading = false;
         if (this.getBatchRequestCrontime) {
           this.snackbarStore.showSnackbar(
             "Graduation Algorithm request has been successfully scheduled",
@@ -364,7 +375,6 @@ export default {
           );
         }
         this.closeDialogAndResetForm();
-
         this.setActiveTab("batchRuns");
       } catch (error) {
         // handle the error and show the notification
@@ -373,6 +383,7 @@ export default {
           "danger",
           5000
         );
+        this.batchLoading = false;
         console.error("Error:", error);
       }
     },