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

@ -337,23 +337,84 @@
</div>
<!-- Date Range Selector -->
<div class="row q-mb-md">
<div class="row q-mb-md q-gutter-md">
<div class="col-auto">
<div class="text-caption text-grey q-mb-xs">Show transactions from:</div>
<q-btn-toggle
v-model="transactionFilter.days"
v-model="transactionFilter.dateRangeType"
toggle-color="primary"
:options="[
{label: 'Last 5 days', value: 5},
{label: 'Last 15 days', value: 15},
{label: 'Last 30 days', value: 30},
{label: 'Last 60 days', value: 60},
{label: 'Last 90 days', value: 90}
{label: 'Custom Range', value: 'custom'}
]"
@update:model-value="setTransactionDays"
@update:model-value="onDateRangeTypeChange"
dense
unelevated
/>
</div>
<!-- Custom Date Range Inputs -->
<div v-if="transactionFilter.dateRangeType === 'custom'" class="col-auto row q-gutter-sm items-end">
<div class="col-auto">
<div class="text-caption text-grey q-mb-xs">From:</div>
<q-input
v-model="transactionFilter.startDate"
type="date"
outlined
dense
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-date
v-model="transactionFilter.startDate"
mask="YYYY-MM-DD"
>
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="col-auto">
<div class="text-caption text-grey q-mb-xs">To:</div>
<q-input
v-model="transactionFilter.endDate"
type="date"
outlined
dense
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
<q-date
v-model="transactionFilter.endDate"
mask="YYYY-MM-DD"
>
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="col-auto">
<q-btn
color="primary"
label="Apply"
@click="applyCustomDateRange"
:disable="!transactionFilter.startDate || !transactionFilter.endDate"
unelevated
/>
</div>
</div>
</div>
<!-- Filter Bar (Super User Only) -->