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:
parent
557d7ecacc
commit
509fae1d35
1 changed files with 3 additions and 66 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue