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:
parent
f2df2f543b
commit
1d2eb05c36
4 changed files with 162 additions and 23 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue