Adds pagination to transaction history
Implements pagination for the transaction history, enabling users to navigate through their transactions in manageable chunks. This improves performance and user experience, especially for users with a large number of transactions. It also introduces total entry counts.
This commit is contained in:
parent
4b327a0aab
commit
69b8f6e2d3
4 changed files with 120 additions and 12 deletions
|
|
@ -394,6 +394,35 @@
|
|||
No transactions yet
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<q-card-section v-if="transactionPagination.total > transactionPagination.limit" class="q-pt-none">
|
||||
<div class="row items-center justify-between">
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="chevron_left"
|
||||
label="Previous"
|
||||
:disable="!transactionPagination.has_prev"
|
||||
@click="prevTransactionsPage"
|
||||
/>
|
||||
</div>
|
||||
<div class="col text-center text-grey">
|
||||
{% raw %}{{ transactionPagination.offset + 1 }} - {{ Math.min(transactionPagination.offset + transactionPagination.limit, transactionPagination.total) }} of {{ transactionPagination.total }}{% endraw %}
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon-right="chevron_right"
|
||||
label="Next"
|
||||
:disable="!transactionPagination.has_next"
|
||||
@click="nextTransactionsPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<!-- Balance Assertions (Super User Only) -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue