Improve date-range logic for global search

- Allow future dates in custom date range
- Fix date ranges for example, before now, today range was roughly
 between `now()` to `now() + a few milli seconds`
- Update text in custom date range modal, right align "Search in range"
 button.

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
pull/41507/head
fenn-cs 2023-11-15 16:00:36 +07:00
parent f74084cd3d
commit 4964cb838b
2 changed files with 29 additions and 24 deletions

@ -1,33 +1,33 @@
<template>
<NcModal v-if="isModalOpen"
id="global-search"
:name="t('core', 'Date range filter')"
:name="t('core', 'Custom date range')"
:show.sync="isModalOpen"
:size="'small'"
:clear-view-delay="0"
:title="t('Date range filter')"
:title="t('Custom date range')"
@close="closeModal">
<!-- Custom date range -->
<div class="global-search-custom-date-modal">
<h1>{{ t('core', 'Date range filter') }}</h1>
<h1>{{ t('core', 'Custom date range') }}</h1>
<div class="global-search-custom-date-modal__pickers">
<NcDateTimePicker :id="'globalsearch-custom-date-range-start'"
v-model="dateFilter.startFrom"
:max="new Date()"
:label="t('core', 'Pick a start date')"
:label="t('core', 'Pick start date')"
type="date" />
<NcDateTimePicker :id="'globalsearch-custom-date-range-end'"
v-model="dateFilter.endAt"
:max="new Date()"
:label="t('core', 'Pick an end date')"
:label="t('core', 'Pick end date')"
type="date" />
</div>
<NcButton @click="applyCustomRange">
{{ t('core', 'Apply range') }}
<template #icon>
<CalendarRangeIcon :size="20" />
</template>
</NcButton>
<div class="global-search-custom-date-modal__footer">
<NcButton @click="applyCustomRange">
{{ t('core', 'Search in date range') }}
<template #icon>
<CalendarRangeIcon :size="20" />
</template>
</NcButton>
</div>
</div>
</NcModal>
</template>
@ -94,5 +94,10 @@ export default {
flex-direction: column;
}
&__footer {
display: flex;
justify-content: end;
}
}
</style>

@ -462,35 +462,36 @@ export default {
applyQuickDateRange(range) {
this.dateActionMenuIsOpen = false
const today = new Date()
let endDate = today
let startDate
let endDate
switch (range) {
case 'today':
// For 'Today', both start and end are set to today
startDate = today
startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0)
endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999)
this.dateFilter.text = t('core', 'Today')
break
case '7days':
// For 'Last 7 days', start date is 7 days ago, end is today
startDate = new Date(today)
startDate.setDate(today.getDate() - 7)
startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0, 0, 0, 0)
this.dateFilter.text = t('core', 'Last 7 days')
break
case '30days':
// For 'Last 30 days', start date is 30 days ago, end is today
startDate = new Date(today)
startDate.setDate(today.getDate() - 30)
startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 29, 0, 0, 0, 0)
this.dateFilter.text = t('core', 'Last 30 days')
break
case 'thisyear':
// For 'This year', start date is the first day of the year, end is today
startDate = new Date(today.getFullYear(), 0, 1)
// For 'This year', start date is the first day of the year, end is the last day of the year
startDate = new Date(today.getFullYear(), 0, 1, 0, 0, 0, 0)
endDate = new Date(today.getFullYear(), 11, 31, 23, 59, 59, 999)
this.dateFilter.text = t('core', 'This year')
break
case 'lastyear':
// For 'Last year', start date is the first day of the previous year, end is the last day of the previous year
startDate = new Date(today.getFullYear() - 1, 0, 1)
endDate = new Date(today.getFullYear() - 1, 11, 31)
startDate = new Date(today.getFullYear() - 1, 0, 1, 0, 0, 0, 0)
endDate = new Date(today.getFullYear() - 1, 11, 31, 23, 59, 59, 999)
this.dateFilter.text = t('core', 'Last year')
break
case 'custom':
@ -498,7 +499,6 @@ export default {
return
default:
return
}
this.dateFilter.startFrom = startDate
this.dateFilter.endAt = endDate