Only show "all" pagination option when needed. Text updates.

bcgov · Dec 10, 2024 · 62a252e · 62a252e
1 parent b9840c9
commit 62a252e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/frontend/src/components/housing/submission/SubmissionListNavigator.vue b/frontend/src/components/housing/submission/SubmissionListNavigator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Spinner } from '@/components/layout';
@@ -53,6 +53,7 @@ const pagination: Ref<Pagination> = ref({
   field: 'submittedAt',
   page: 0
 });
+const rowsPerPageOptions: Ref<Array<number>> = ref([10, 20, 50]);
 
 // read from query params if tab is set to enquiry otherwise use default values
 if (!route.query.tab || route.query.tab === '0') {
@@ -127,7 +128,6 @@ function isFinanciallySupported(data: Submission) {
   }
 }
 
-// Actions
 function updateQueryParams() {
   router.replace({
     name: RouteName.HOUSING_SUBMISSIONS,
@@ -140,6 +140,12 @@ function updateQueryParams() {
     }
   });
 }
+
+onMounted(() => {
+  if (submissions?.length && submissions.length > rowsPerPageOptions.value[rowsPerPageOptions.value.length - 1]) {
+    rowsPerPageOptions.value.push(submissions.length);
+  }
+});
 </script>
 
 <template>
@@ -158,7 +164,7 @@ function updateQueryParams() {
     :sort-order="pagination.order"
     paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink "
     current-page-report-template="{first}-{last} of {totalRecords}"
-    :rows-per-page-options="[10, 20, 50, submissions?.length as number]"
+    :rows-per-page-options="rowsPerPageOptions"
     selection-mode="single"
     :first="pagination.page && pagination.rows ? pagination.page * pagination.rows : 0"
     @update:sort-field="

diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
@@ -75,6 +75,7 @@ const { t } = useI18n();
   .acknowledgement {
     border-top: 3px solid #fcba19;
     border-bottom: 3px solid #fcba19;
+    // TODO: Reference a surface colour once PrimeVue 4 changes come in
     background-color: #252423 !important;
     color: #ffffff;
   }

diff --git a/frontend/src/locales/en-CA.json b/frontend/src/locales/en-CA.json
@@ -18,7 +18,7 @@
     "contact1": "We can help in over 220 languages and through other accessible options.",
     "contact2": "Call, email or text us",
     "contact3": ", or",
-    "contact4": "find a service centre.",
+    "contact4": "find a service centre",
     "copyright": "Copyright",
     "disclaimer": "Disclaimer",
     "gov": "Government of British Columbia",