Adds custom date range filtering to transactions

Enables users to filter transactions by a custom date range, providing more flexibility in viewing transaction history.

Prioritizes custom date range over preset days for filtering.

Displays a warning if a user attempts to apply a custom date range without selecting both start and end dates.
This commit is contained in:
Padreug 2025-12-14 12:47:23 +01:00
parent f2df2f543b
commit 1d2eb05c36
4 changed files with 162 additions and 23 deletions

View file

@ -19,7 +19,9 @@ window.app = Vue.createApp({
transactionFilter: {
user_id: null, // For filtering by user
account_type: null, // For filtering by receivable/payable (asset/liability)
days: 5 // Number of days to fetch (5, 30, 60, 90)
dateRangeType: 15, // Preset days (15, 30, 60) or 'custom'
startDate: null, // For custom date range (YYYY-MM-DD)
endDate: null // For custom date range (YYYY-MM-DD)
},
accounts: [],
currencies: [],
@ -362,9 +364,16 @@ window.app = Vue.createApp({
// Build query params with filters
let queryParams = `limit=${limit}&offset=${currentOffset}`
// Add days filter (default 5)
const days = this.transactionFilter.days || 5
queryParams += `&days=${days}`
// Add date filter - custom range takes precedence over preset days
if (this.transactionFilter.dateRangeType === 'custom' && this.transactionFilter.startDate && this.transactionFilter.endDate) {
// Dates are already in YYYY-MM-DD format from q-date with mask
queryParams += `&start_date=${this.transactionFilter.startDate}`
queryParams += `&end_date=${this.transactionFilter.endDate}`
} else {
// Use preset days filter
const days = typeof this.transactionFilter.dateRangeType === 'number' ? this.transactionFilter.dateRangeType : 15
queryParams += `&days=${days}`
}
if (this.transactionFilter.user_id) {
queryParams += `&filter_user_id=${this.transactionFilter.user_id}`
@ -403,11 +412,30 @@ window.app = Vue.createApp({
this.transactionPagination.offset = 0
this.loadTransactions(0)
},
setTransactionDays(days) {
// Update days filter and reload from first page
this.transactionFilter.days = days
this.transactionPagination.offset = 0
this.loadTransactions(0)
onDateRangeTypeChange(value) {
// Handle date range type change (preset days or custom)
if (value !== 'custom') {
// Clear custom date range when switching to preset days
this.transactionFilter.startDate = null
this.transactionFilter.endDate = null
// Load transactions with preset days
this.transactionPagination.offset = 0
this.loadTransactions(0)
}
// If switching to custom, don't load until user provides dates
},
applyCustomDateRange() {
// Apply custom date range filter
if (this.transactionFilter.startDate && this.transactionFilter.endDate) {
this.transactionPagination.offset = 0
this.loadTransactions(0)
} else {
this.$q.notify({
type: 'warning',
message: 'Please select both start and end dates',
timeout: 3000
})
}
},
nextTransactionsPage() {
if (this.transactionPagination.has_next) {