Remove pagination from TransactionsPage - load all transactions

Fixed issue where users could only see 20 transactions at a time despite having more transactions in the selected time period.

Changes:
- **Removed pagination controls**: Eliminated prev/next page buttons and page counter
- **Load all transactions**: Set limit to 1000 to fetch all transactions for the selected time period
- **Natural scrolling**: Users can now scroll through all their transactions
- **Improved fuzzy search**: Search now works across ALL transactions, not just the current page
- **Simplified UI**: Cleaner interface without pagination complexity
- **Updated transaction count**: Now shows total count instead of "X-Y of Z"

Previous behavior:
- Limited to 20 transactions per page
- Required manual pagination to see more
- Fuzzy search only searched current page (20 transactions)

New behavior:
- Loads up to 1000 transactions at once
- Single scrollable list
- Fuzzy search works across all loaded transactions
- Lightweight (text-only data)

🐢 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
padreug 2025-11-14 16:50:59 +01:00
parent 557d7ecacc
commit 509fae1d35

View file

@ -16,8 +16,6 @@ import {
Flag,
XCircle,
RefreshCw,
ChevronLeft,
ChevronRight,
Calendar
} from 'lucide-vue-next'
@ -28,13 +26,6 @@ const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
const transactions = ref<Transaction[]>([])
const isLoading = ref(false)
const selectedDays = ref(5)
const pagination = ref({
total: 0,
limit: 20,
offset: 0,
has_next: false,
has_prev: false
})
const walletKey = computed(() => user.value?.wallets?.[0]?.inkey)
@ -123,19 +114,12 @@ async function loadTransactions() {
isLoading.value = true
try {
const response = await expensesAPI.getUserTransactions(walletKey.value, {
limit: pagination.value.limit,
offset: pagination.value.offset,
limit: 1000, // Load all transactions (no pagination needed)
offset: 0,
days: selectedDays.value
})
transactions.value = response.entries
pagination.value = {
total: response.total,
limit: response.limit,
offset: response.offset,
has_next: response.has_next,
has_prev: response.has_prev
}
} catch (error) {
console.error('Failed to load transactions:', error)
toast.error('Failed to load transactions', {
@ -149,26 +133,9 @@ async function loadTransactions() {
// Change day filter
function changeDayFilter(days: number) {
selectedDays.value = days
pagination.value.offset = 0 // Reset to first page
loadTransactions()
}
// Next page
function nextPage() {
if (pagination.value.has_next) {
pagination.value.offset += pagination.value.limit
loadTransactions()
}
}
// Previous page
function prevPage() {
if (pagination.value.has_prev) {
pagination.value.offset = Math.max(0, pagination.value.offset - pagination.value.limit)
loadTransactions()
}
}
onMounted(() => {
loadTransactions()
})
@ -232,7 +199,7 @@ onMounted(() => {
Found {{ transactionsToDisplay.length }} matching transaction{{ transactionsToDisplay.length === 1 ? '' : 's' }}
</span>
<span v-else>
Showing {{ pagination.offset + 1 }} - {{ Math.min(pagination.offset + pagination.limit, pagination.total) }} of {{ pagination.total }} transactions
{{ transactions.length }} transaction{{ transactions.length === 1 ? '' : 's' }}
</span>
</div>
@ -323,36 +290,6 @@ onMounted(() => {
</div>
</div>
<!-- Pagination (hide when searching) -->
<div
v-if="!isLoading && transactions.length > 0 && searchResults.length === 0 && (pagination.has_next || pagination.has_prev)"
class="flex items-center justify-between px-4 md:px-0 py-6 border-t"
>
<Button
variant="outline"
size="sm"
@click="prevPage"
:disabled="!pagination.has_prev || isLoading"
>
<ChevronLeft class="h-4 w-4 mr-1" />
<span class="hidden sm:inline">Previous</span>
</Button>
<span class="text-sm text-muted-foreground">
Page {{ Math.floor(pagination.offset / pagination.limit) + 1 }}
</span>
<Button
variant="outline"
size="sm"
@click="nextPage"
:disabled="!pagination.has_next || isLoading"
>
<span class="hidden sm:inline">Next</span>
<ChevronRight class="h-4 w-4 ml-1" />
</Button>
</div>
<!-- End of list indicator -->
<div v-if="transactionsToDisplay.length > 0" class="text-center py-6 text-md text-muted-foreground">
<p>🐢</p>