Skip to content

Commit 9afbb5b

Browse files
ochiuochiu
authored
28692 - statement dashboard updates for total and horizontal scroll (#3452)
1 parent 237c466 commit 9afbb5b

File tree

3 files changed

+126
-97
lines changed

3 files changed

+126
-97
lines changed

‎auth-web/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎auth-web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "auth-web",
3-
"version": "2.10.12",
3+
"version": "2.10.13",
44
"appName": "Auth Web",
55
"sbcName": "SBC Common Components",
66
"private": true,

‎auth-web/src/components/auth/account-settings/statement/Statements.vue‎

Lines changed: 123 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<v-container>
2+
<v-container class="statements-container">
33
<v-fade-transition>
44
<div
55
v-if="isLoading"
@@ -89,91 +89,95 @@
8989
</v-alert>
9090
</div>
9191
</template>
92-
<div>
93-
<v-data-table
94-
class="statement-list"
95-
:headers="headerStatements"
96-
:items="statementsList"
97-
:no-data-text="$t('noStatementsList')"
98-
:server-items-length="totalStatementsCount"
99-
:options.sync="tableDataOptions"
100-
:custom-sort="customSortActive"
101-
:loading="isDataLoading"
102-
loading-text="loading text"
103-
:footer-props="{ itemsPerPageOptions: [5, 10, 15, 20] }"
92+
93+
<v-data-table
94+
:headers="headerStatements"
95+
:items="statementsList"
96+
:no-data-text="$t('noStatementsList')"
97+
:server-items-length="totalStatementsCount"
98+
:options.sync="tableDataOptions"
99+
:custom-sort="customSortActive"
100+
:loading="isDataLoading"
101+
loading-text="loading text"
102+
:footer-props="{ itemsPerPageOptions: [5, 10, 15, 20] }"
103+
>
104+
<template #loading>
105+
Loading...
106+
</template>
107+
<template #[`item.dateRange`]="{ item }">
108+
<div class="font-weight-bold">
109+
<span>{{ formatDateRange(item.fromDate, item.toDate) }}</span>
110+
</div>
111+
<div>
112+
<span
113+
v-if="isStatementNew(item)"
114+
class="label mr-2 mb-2 px-2 d-inline-block"
115+
>NEW</span>
116+
<span
117+
v-if="isStatementOverdue(item)"
118+
class="label overdue mr-2 mb-2 px-2 d-inline-block"
119+
>OVERDUE</span>
120+
</div>
121+
</template>
122+
<template #[`item.statementTotal`]="{ item }">
123+
<div class="font-weight-bold">
124+
<span>{{ formatAmount(item.statementTotal) }}</span>
125+
</div>
126+
</template>
127+
<template
128+
v-if="hasEFTPaymentMethod"
129+
#[`item.frequency`]="{ item }"
104130
>
105-
<template #loading>
106-
Loading...
107-
</template>
108-
<template #[`item.dateRange`]="{ item }">
109-
<div class="font-weight-bold">
110-
<span>{{ formatDateRange(item.fromDate, item.toDate) }}</span>
111-
<span
112-
v-if="isStatementNew(item)"
113-
class="label ml-2 px-2 d-inline-block"
114-
>NEW</span>
115-
<span
116-
v-if="isStatementOverdue(item)"
117-
class="label overdue ml-2 px-2 d-inline-block"
118-
>OVERDUE</span>
119-
</div>
120-
</template>
121-
<template
122-
v-if="hasEFTPaymentMethod"
123-
#[`item.frequency`]="{ item }"
124-
>
125-
<div>
126-
<span>{{ frequencyDisplay(item) }}</span>
127-
</div>
128-
</template>
129-
<template
130-
v-if="hasEFTPaymentMethod"
131-
#[`item.paymentMethods`]="{ item }"
132-
>
133-
<div>
134-
<span>{{ paymentMethodsDisplay(item.paymentMethods) }}</span>
135-
</div>
136-
</template>
137-
<template
138-
#[`item.statementNumber`]="{ item }"
139-
>
140-
<div>
141-
<span>{{ item.id }}</span>
142-
</div>
143-
</template>
144-
<template #[`item.action`]="{ item }">
145-
<div>
146-
<v-btn
147-
text
148-
color="primary"
149-
class="mr-1"
150-
aria-label="Download CSV"
151-
title="Download statement as a CSV file"
152-
:data-test="getIndexedTag('csv-button', item.id)"
153-
@click="downloadStatement(item, 'CSV')"
154-
>
155-
<v-icon class="ml-n2">
156-
mdi-file-table-outline
157-
</v-icon>
158-
<span class="ml-n1 font-weight-bold">CSV</span>
159-
</v-btn>
160-
<v-btn
161-
text
162-
color="primary"
163-
aria-label="Download PDF"
164-
title="Download statement as a PDF file"
165-
:data-test="getIndexedTag('pdf-button', item.id)"
166-
@click="downloadStatement(item, 'PDF')"
167-
>
168-
<v-icon class="ml-n2">
169-
mdi-file-pdf-outline
170-
</v-icon>
171-
<span class="ml-n1 font-weight-bold">PDF</span>
172-
</v-btn>
173-
</div>
174-
</template>
175-
</v-data-table>
176-
</div>
131+
<div>
132+
<span>{{ frequencyDisplay(item) }}</span>
133+
</div>
134+
</template>
135+
<template
136+
#[`item.statementNumber`]="{ item }"
137+
>
138+
<div>
139+
<span>{{ item.id }}</span>
140+
</div>
141+
</template>
142+
<template
143+
#[`item.paymentMethods`]="{ item }"
144+
>
145+
<div>
146+
<span>{{ paymentMethodsDisplay(item.paymentMethods) }}</span>
147+
</div>
148+
</template>
149+
<template #[`item.action`]="{ item }">
150+
<div>
151+
<v-btn
152+
text
153+
color="primary"
154+
class="mr-1"
155+
aria-label="Download CSV"
156+
title="Download statement as a CSV file"
157+
:data-test="getIndexedTag('csv-button', item.id)"
158+
@click="downloadStatement(item, 'CSV')"
159+
>
160+
<v-icon class="ml-n2">
161+
mdi-file-table-outline
162+
</v-icon>
163+
<span class="ml-n1 font-weight-bold">CSV</span>
164+
</v-btn>
165+
<v-btn
166+
text
167+
color="primary"
168+
aria-label="Download PDF"
169+
title="Download statement as a PDF file"
170+
:data-test="getIndexedTag('pdf-button', item.id)"
171+
@click="downloadStatement(item, 'PDF')"
172+
>
173+
<v-icon class="ml-n2">
174+
mdi-file-pdf-outline
175+
</v-icon>
176+
<span class="ml-n1 font-weight-bold">PDF</span>
177+
</v-btn>
178+
</div>
179+
</template>
180+
</v-data-table>
177181
<StatementsSettings
178182
ref="statementSettingsModal"
179183
/>
@@ -232,30 +236,50 @@ export default defineComponent({
232236
text: 'Date',
233237
align: 'left',
234238
sortable: false,
235-
value: 'dateRange'
239+
value: 'dateRange',
240+
maxWidth: '200',
241+
width: '200'
242+
},
243+
{
244+
text: 'Statement Total',
245+
align: 'right',
246+
sortable: false,
247+
value: 'statementTotal',
248+
maxWidth: '150',
249+
width: '150'
236250
},
237251
{
238252
text: 'Frequency',
239253
align: 'left',
240254
sortable: false,
241-
value: 'frequency'
255+
value: 'frequency',
256+
maxWidth: '100',
257+
width: '100'
242258
},
243259
{
244-
text: 'Statement Number',
260+
text: 'Statement #',
245261
align: 'left',
246262
sortable: false,
247-
value: 'statementNumber'
263+
value: 'statementNumber',
264+
maxWidth: '110',
265+
width: '110'
266+
},
267+
{ text: 'Payment Type',
268+
align: 'left',
269+
sortable: false,
270+
value: 'paymentMethods',
271+
maxWidth: '200',
272+
width: '200'
248273
},
249274
{
250275
text: 'Downloads',
251-
align: 'right',
276+
align: 'left',
252277
sortable: false,
253-
value: 'action'
278+
value: 'action',
279+
maxWidth: '200',
280+
width: '200'
254281
}
255282
]
256-
if (state.hasEFTPaymentMethod) {
257-
headers.splice(2, 0, { text: 'Payment Methods', align: 'left', sortable: false, value: 'paymentMethods' })
258-
}
259283
return headers
260284
}),
261285
nextStatementDate: computed<string>(() => {
@@ -539,4 +563,9 @@ export default defineComponent({
539563
color: $gray7;
540564
font-size: 12px;
541565
}
566+
567+
.statements-container {
568+
overflow: hidden;
569+
}
570+
542571
</style>

0 commit comments

Comments
 (0)