Fixes changing of pagesize on custom tables when pagination isn't hidden

bcgov · Sep 14, 2024 · 573e3a6 · 573e3a6
1 parent f02f8cd
commit 573e3a6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/frontend/src/components/common/CustomTable.vue b/frontend/src/components/common/CustomTable.vue
@@ -4,10 +4,12 @@
       v-model:page.sync="pageNumber"
       v-model:items-per-page.sync="pageSize"
       v-model="selected"
+      :class="itemsPerPageOptions.length === 0 ? 'hide-items-per-page' : ''"
       :items-length="totalElements"
       :items="data"
       :headers="headers"
       mobile-breakpoint="0"
+      :items-per-page-options="itemsPerPageOptions"
     >
       <template #top>
         <v-progress-linear
@@ -280,6 +282,10 @@ export default {
     clickable: {
       type: Boolean,
       default: true
+    },
+    itemsPerPageOptions: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['reload', 'openStudentDetails', 'selections', 'editSelectedRow'],
@@ -299,6 +305,11 @@ export default {
     ...mapState(appStore, ['config']),
   },
   watch: {
+    pageSize(newPageSize) {
+      this.masterCheckbox = false;
+      this.selected = [];
+      this.$emit('reload', {pageNumber: 0, pageSize: newPageSize});
+    },
     pageNumber: {
       handler(val) {
         if(val) {
@@ -420,9 +431,9 @@ export default {
     vertical-align: top !important;
  }
 
- :deep(.v-data-table-footer__items-per-page) {
-       display: none;
- }
+:deep(.hide-items-per-page .v-data-table-footer__items-per-page) {
+  display: none;
+}
 
  .hoverTable tr:hover td {
   background-color: #e8e8e8 !important;

diff --git a/frontend/src/components/data-collection/PenReview.vue b/frontend/src/components/data-collection/PenReview.vue
@@ -26,6 +26,11 @@
               :data="studentList"
               :total-elements="totalElements"
               :is-loading="isLoading"
+              :items-per-page-options="[
+                {value: 15, title: '15'},
+                {value: 25, title: '25'},
+                {value: 50, title: '50'}
+              ]"
               @reload="reload"
               @selections="selectedStudents = $event"
               @editSelectedRow="editStudent"
@@ -137,9 +142,5 @@ export default {
 .table {
   width: none !important;
 }
-
-:deep(.v-data-table-footer__items-per-page) {
-       display: flex;
- }
   </style>
   
diff --git a/frontend/src/components/penreg/student/StudentSLDHistoryV2.vue b/frontend/src/components/penreg/student/StudentSLDHistoryV2.vue
@@ -166,7 +166,6 @@ export default {
             .then(response => {
               this.sldData = response?.data?.content;
               this.sldData.map(data => {
-                console.log(data);
                 if(this.existingMergedStudentIds.includes(data.assignedStudentId)) {
                   data.toolTipText = `Merged from ${data.assignedPen}`;
                   data.toolTipChipText = 'M';