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
|
|
@ -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) -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue