22776 - Shortname History Table Fixes (#2982)

bcgov · Aug 28, 2024 · 831dd6e · 831dd6e
1 parent 5761950
commit 831dd6e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
diff --git a/auth-web/package.json b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.75",
+  "version": "2.6.76",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

diff --git a/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue b/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue
@@ -67,6 +67,7 @@
     </ModalDialog>
     <BaseVDataTable
       id="eft-transactions-table"
+      ref="historyTable"
       class="transaction-list"
       itemKey="id"
       :loading="state.loading"
@@ -152,6 +153,7 @@ import { DEFAULT_DATA_OPTIONS } from '../../datatable/resources'
 import { EFTTransactionState } from '@/models/eft-transaction'
 import ModalDialog from '@/components/auth/common/ModalDialog.vue'
 import PaymentService from '@/services/payment.services'
+import { Vue } from 'vue-property-decorator'
 import _ from 'lodash'
 import moment from 'moment-timezone'
 
@@ -172,6 +174,7 @@ export default defineComponent({
     }
     const confirmationDialog: Ref<InstanceType<typeof ModalDialog>> = ref(null)
     const errorDialog: Ref<InstanceType<typeof ModalDialog>> = ref(null)
+    const historyTable: Ref<InstanceType<typeof BaseVDataTable>> = ref(null)
     const headers = [
       {
         col: 'transactionDate',
@@ -215,13 +218,14 @@ export default defineComponent({
       totalResults: 0,
       filters: {
         pageNumber: 1,
-        pageLimit: 5
+        pageLimit: 10
       },
       loading: false,
       options: _.cloneDeep(DEFAULT_DATA_OPTIONS)
     })
 
     watch(() => props.shortNameDetails, () => {
+      state.filters.pageNumber = 1
       return loadTransactions(props.shortNameDetails.id, false)
     }, { deep: true })
 
@@ -233,6 +237,13 @@ export default defineComponent({
           /* We use appendToResults for infinite scroll, so we keep the existing results. */
           state.results = appendToResults ? state.results.concat(response.data.items) : response.data.items
           state.totalResults = response.data.total
+
+          if (!appendToResults) {
+            await scrollToTop()
+            // Need to reset observer state. The infinite scroll observer will stop working if it previously reached
+            // the last set of results
+            historyTable.value.reachedEnd = false
+          }
         } else {
           throw new Error('No response from getEFTTransactions')
         }
@@ -243,6 +254,16 @@ export default defineComponent({
       state.loading = false
     }
 
+    async function scrollToTop () {
+      await Vue.nextTick()
+      if (historyTable.value) {
+        const tableWrapper = historyTable.value.$el.querySelector('.v-data-table__wrapper')
+        if (tableWrapper) {
+          tableWrapper.scrollTop = 0
+        }
+      }
+    }
+
     async function infiniteScrollCallback () {
       if (state.totalResults < (state.filters.pageLimit * state.filters.pageNumber)) return true
       state.filters.pageNumber++
@@ -252,7 +273,7 @@ export default defineComponent({
 
     function calculateTableHeight () {
       if (state.results.length <= state.filters.pageLimit) return null
-      const height = state.results.length * 40
+      const height = state.results.length * 75
       if (height > 400) return '400px'
 
       return `${height}px`
@@ -368,6 +389,7 @@ export default defineComponent({
       ...toRefs(state),
       errorDialog,
       confirmationDialog,
+      historyTable,
       formatBalanceAmount,
       formatTransactionAmount,
       formatDate: formatTransactionDate,
@@ -399,6 +421,7 @@ export default defineComponent({
 
   .v-data-table__wrapper {
     overflow-y: auto;
+    max-height: 400px;
   }
 
   .v-data-table__empty-wrapper {