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,
|
Flag,
|
||||||
XCircle,
|
XCircle,
|
||||||
RefreshCw,
|
RefreshCw,
|
||||||
ChevronLeft,
|
|
||||||
ChevronRight,
|
|
||||||
Calendar
|
Calendar
|
||||||
} from 'lucide-vue-next'
|
} from 'lucide-vue-next'
|
||||||
|
|
||||||
|
|
@ -28,13 +26,6 @@ const expensesAPI = injectService<ExpensesAPI>(SERVICE_TOKENS.EXPENSES_API)
|
||||||
const transactions = ref<Transaction[]>([])
|
const transactions = ref<Transaction[]>([])
|
||||||
const isLoading = ref(false)
|
const isLoading = ref(false)
|
||||||
const selectedDays = ref(5)
|
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)
|
const walletKey = computed(() => user.value?.wallets?.[0]?.inkey)
|
||||||
|
|
||||||
|
|
@ -123,19 +114,12 @@ async function loadTransactions() {
|
||||||
isLoading.value = true
|
isLoading.value = true
|
||||||
try {
|
try {
|
||||||
const response = await expensesAPI.getUserTransactions(walletKey.value, {
|
const response = await expensesAPI.getUserTransactions(walletKey.value, {
|
||||||
limit: pagination.value.limit,
|
limit: 1000, // Load all transactions (no pagination needed)
|
||||||
offset: pagination.value.offset,
|
offset: 0,
|
||||||
days: selectedDays.value
|
days: selectedDays.value
|
||||||
})
|
})
|
||||||
|
|
||||||
transactions.value = response.entries
|
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) {
|
} catch (error) {
|
||||||
console.error('Failed to load transactions:', error)
|
console.error('Failed to load transactions:', error)
|
||||||
toast.error('Failed to load transactions', {
|
toast.error('Failed to load transactions', {
|
||||||
|
|
@ -149,26 +133,9 @@ async function loadTransactions() {
|
||||||
// Change day filter
|
// Change day filter
|
||||||
function changeDayFilter(days: number) {
|
function changeDayFilter(days: number) {
|
||||||
selectedDays.value = days
|
selectedDays.value = days
|
||||||
pagination.value.offset = 0 // Reset to first page
|
|
||||||
loadTransactions()
|
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(() => {
|
onMounted(() => {
|
||||||
loadTransactions()
|
loadTransactions()
|
||||||
})
|
})
|
||||||
|
|
@ -232,7 +199,7 @@ onMounted(() => {
|
||||||
Found {{ transactionsToDisplay.length }} matching transaction{{ transactionsToDisplay.length === 1 ? '' : 's' }}
|
Found {{ transactionsToDisplay.length }} matching transaction{{ transactionsToDisplay.length === 1 ? '' : 's' }}
|
||||||
</span>
|
</span>
|
||||||
<span v-else>
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -323,36 +290,6 @@ onMounted(() => {
|
||||||
</div>
|
</div>
|
||||||
</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 -->
|
<!-- End of list indicator -->
|
||||||
<div v-if="transactionsToDisplay.length > 0" class="text-center py-6 text-md text-muted-foreground">
|
<div v-if="transactionsToDisplay.length > 0" class="text-center py-6 text-md text-muted-foreground">
|
||||||
<p>🐢</p>
|
<p>🐢</p>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue