fixed batch errors pagination

bcgov · Nov 5, 2024 · 276becf · 276becf
1 parent 9b2579c
commit 276becf
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/frontend/src/components/Batch/BatchJobErrorResults.vue b/frontend/src/components/Batch/BatchJobErrorResults.vue
@@ -6,19 +6,20 @@
       <!-- Slot for close button -->
       <slot name="close"></slot>
     </div>
+
     <!-- No results message-->
     <p v-if="rows < 1">
       There are no results to display.<br />
       Please select another Job Execution ID.
     </p>
-    <v-data-table
+    <v-data-table-server
+      v-model:items-per-page="itemsPerPage"
       title="Job/Runs"
-      :items="batchData"
       :headers="batchDataFields"
-      id="id"
-      :showFilter="false"
-      :pagination="true"
-      class="p-3"
+      :items="batchData"
+      :items-length="totalElements"
+      item-value="id"
+      @update:options="loadItems"
     >
       <template v-slot:item.pen="{ item }">
         <v-btn
@@ -35,7 +36,7 @@
       <template v-slot:item.schoolOfRecord="{ item }">
         <div v-if="item.schoolOfRecord">{{ item.schoolOfRecord }}</div>
       </template>
-    </v-data-table>
+    </v-data-table-server>
   </v-card>
 </template>
 
@@ -58,9 +59,12 @@ export default {
       batchData: [],
       perPage: 10,
       rows: 0,
+      totalElements: 0,
+      itemsPerPage: 10,
       currentPage: 0,
       userSelectedPage: 0,
       batchLoading: false,
+
       batchDataFields: [
         {
           key: "pen",
@@ -96,10 +100,6 @@ export default {
 
   computed: {
     ...mapGetters("auth", ["token"]),
-
-    currentPageChange() {
-      return this.userSelectedPage;
-    },
   },
   created() {
     this.loadStudent = sharedMethods.loadStudent;
@@ -109,13 +109,22 @@ export default {
     selectedErrorId: function () {
       this.getAdminDashboardData(this.selectedErrorId, 0);
     },
-    currentPageChange: function () {
-      if (this.userSelectedPage !== null) {
-        this.getAdminDashboardData(this.selectedErrorId, this.userSelectedPage);
-      }
-    },
   },
   methods: {
+    loadItems({ page, itemsPerPage, sortBy }) {
+      this.batchLoading = true;
+      BatchProcessingService.getBatchErrors(this.selectedErrorId, page - 1)
+        .then((response) => {
+          this.batchData = response.data.errorList;
+          this.totalElements = response.data.totalElements;
+          this.batchLoading = false;
+        })
+        .catch((error) => {
+          if (error.response.status) {
+            this.batchLoading = false;
+          }
+        });
+    },
     getAdminDashboardData(batchId, page) {
       this.batchData = [];
       this.rows = 0;

diff --git a/frontend/src/components/Batch/BatchJobSearchResults.vue b/frontend/src/components/Batch/BatchJobSearchResults.vue
@@ -129,7 +129,7 @@ export default {
         })
         .catch((error) => {
           if (error.response.status) {
-            this.isBatchLoading = false;
+            this.batchLoading = false;
           }
         });
     },