diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json index cfad87887..8b5e4b3d5 100644 --- a/auth-web/package-lock.json +++ b/auth-web/package-lock.json @@ -1,12 +1,12 @@ { "name": "auth-web", - "version": "2.6.75", + "version": "2.6.76", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "auth-web", - "version": "2.6.75", + "version": "2.6.76", "dependencies": { "@bcrs-shared-components/base-address": "2.0.3", "@bcrs-shared-components/bread-crumb": "1.0.8", diff --git a/auth-web/package.json b/auth-web/package.json index 4eeb476a9..0124297ad 100644 --- 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 index 3a2c6cf5a..6e02dc6c8 100644 --- a/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue +++ b/auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue @@ -67,6 +67,7 @@ > = ref(null) const errorDialog: Ref> = ref(null) + const historyTable: Ref> = 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 {