Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

22776 - Shortname History Table Fixes #2982

Merged
merged 2 commits into from
Aug 28, 2024
Merged

22776 - Shortname History Table Fixes #2982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93ec3bd
22776 - Fix short name history reload issues with paginition and infi…
ochiu Aug 28, 2024
f5d00e0
version
ochiu Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions auth-web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion auth-web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "auth-web",
"version": "2.6.75",
"version": "2.6.76",
"appName": "Auth Web",
"sbcName": "SBC Common Components",
"private": true,
Expand Down
27 changes: 25 additions & 2 deletions auth-web/src/components/pay/eft/ShortNamePaymentHistory.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@
</ModalDialog>
<BaseVDataTable
id="eft-transactions-table"
ref="historyTable"
class="transaction-list"
itemKey="id"
:loading="state.loading"
Expand Down Expand Up @@ -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'
Copy link
Collaborator

@seeker25 seeker25 Aug 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not too sure why we're introducing this, we're actively trying to get away from using Vue-class-component and vue-property-decorator which are the opposite of composition-api

If you're looking for a Vue instance, you can grab it from another library eg. Vue

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

import Vue from 'vue'

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will fix this in my next PR, as it is another FE ticket.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all good, I was too slow on the review haha

import _ from 'lodash'
import moment from 'moment-timezone'

Expand All @@ -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',
Expand Down Expand Up @@ -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 })

Expand All @@ -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')
}
Expand All @@ -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++
Expand All @@ -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`
Expand Down Expand Up @@ -368,6 +389,7 @@ export default defineComponent({
...toRefs(state),
errorDialog,
confirmationDialog,
historyTable,
formatBalanceAmount,
formatTransactionAmount,
formatDate: formatTransactionDate,
Expand Down Expand Up @@ -399,6 +421,7 @@ export default defineComponent({

.v-data-table__wrapper {
overflow-y: auto;
max-height: 400px;
}

.v-data-table__empty-wrapper {
Expand Down
Loading