Private
Public Access
1
0

Hide past payments in amortization schedule by default

Add toggle button to show/hide past payments. Future payments are shown
by default since past entries are rarely useful for day-to-day viewing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Catherine Renelle
2026-02-14 22:00:15 -05:00
parent 1b06894383
commit d28faa6838
+16 -2
View File
@@ -109,10 +109,16 @@
<!-- Amortization Schedule --> <!-- Amortization Schedule -->
<v-card v-if="loanDetail" class="mb-4"> <v-card v-if="loanDetail" class="mb-4">
<v-card-title>Amortization Schedule</v-card-title> <v-card-title class="d-flex align-center">
Amortization Schedule
<v-spacer />
<v-btn size="small" variant="text" @click="showPastPayments = !showPastPayments">
{{ showPastPayments ? 'Hide' : 'Show' }} past payments
</v-btn>
</v-card-title>
<v-data-table <v-data-table
:headers="amortHeaders" :headers="amortHeaders"
:items="loanDetail.amortizationSchedule" :items="filteredSchedule"
density="compact" density="compact"
:items-per-page="25" :items-per-page="25"
> >
@@ -267,12 +273,20 @@ const prePopulated = ref(false)
const snackbar = ref(false) const snackbar = ref(false)
const snackbarText = ref('') const snackbarText = ref('')
const snackbarColor = ref('success') const snackbarColor = ref('success')
const showPastPayments = ref(false)
const loanAccountTypes = ['AutoLoan', 'PersonalLoan', 'Mortgage', 'LineOfCredit'] const loanAccountTypes = ['AutoLoan', 'PersonalLoan', 'Mortgage', 'LineOfCredit']
const loanAccounts = computed(() => const loanAccounts = computed(() =>
accountsStore.accounts.filter(a => a.hasLoanDetail || loanAccountTypes.includes(a.type)) accountsStore.accounts.filter(a => a.hasLoanDetail || loanAccountTypes.includes(a.type))
) )
const filteredSchedule = computed(() => {
if (!loanDetail.value) return []
if (showPastPayments.value) return loanDetail.value.amortizationSchedule
const today = new Date().toISOString().split('T')[0]
return loanDetail.value.amortizationSchedule.filter(e => e.paymentDate.split('T')[0] >= today)
})
const amortHeaders = [ const amortHeaders = [
{ title: '#', key: 'paymentNumber', width: '60px' }, { title: '#', key: 'paymentNumber', width: '60px' },
{ title: 'Date', key: 'paymentDate', width: '110px' }, { title: 'Date', key: 'paymentDate', width: '110px' },