vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: add date math for filters #1342

Merged
konrad merged 88 commits from feature/date-math into main 2022-03-28 17:30:43 +00:00
Conversation 2 Commits 88 Files Changed 18 +15 -110
1 changed files with 15 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6667df5f1f - Show all commits

125
src/components/date/datepickerWithRange.vue
View File

@ -14,7 +14,7 @@
<button
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:10:52 +00:00
Outdated
Review
Copy Link

Use BaseButton

Use BaseButton
konrad commented 2022-02-06 17:52:01 +00:00
Outdated
Review
Copy Link

Done.

Done.
v-for="(value, text) in dateRanges"
:key="text"
@click="setDateRange(value)"
@click="setDateRange(value)"
konrad marked this conversation as resolved Outdated
dpschen commented 2022-02-06 13:11:05 +00:00
Outdated
Review
Copy Link

Use BaseButton

Use BaseButton
konrad commented 2022-02-06 17:52:08 +00:00
Outdated
Review
Copy Link

Done.

Done.
:class="{'is-active': dateRange === value}">
{{ $t(text) }}
</button>
@ -77,125 +77,30 @@ watch(
}
emit('dateChanged', {
dateFrom: new Date(fromDate),
dateTo: new Date(toDate),
dateFrom: fromDate,
dateTo: toDate,
})
},
)
function formatDate(date: Date): string {
return format(date, 'yyyy-MM-dd HH:mm')
function setDateRange(range: string) {
dateRange.value = range
}
function startOfDay(date: Date): Date {
date.setHours(0)
date.setMinutes(0)
return date
}
function endOfDay(date: Date): Date {
date.setHours(23)
date.setMinutes(59)
return date
}
const datesToday = computed<string>(() => {
const startDate = startOfDay(new Date())
const endDate = endOfDay(new Date())
return `${formatDate(startDate)} to ${formatDate(endDate)}`
})
function thisWeek() {
const startDate = startOfDay(new Date())
const first = startDate.getDate() - startDate.getDay() + weekStart.value
startDate.setDate(first)
const endDate = endOfDay(new Date((new Date(startDate).setDate(first + 6))))
return {
startDate,
endDate,
}
}
const datesThisWeek = computed<string>(() => {
const {startDate, endDate} = thisWeek()
return `${formatDate(startDate)} to ${formatDate(endDate)}`
})
const datesNextWeek = computed<string>(() => {
const {startDate, endDate} = thisWeek()
startDate.setDate(startDate.getDate() + 7)
endDate.setDate(endDate.getDate() + 7)
return `${formatDate(startDate)} to ${formatDate(endDate)}`
})
const datesNext7Days = computed<string>(() => {
const startDate = startOfDay(new Date())
const endDate = endOfDay(new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000))
return `${formatDate(startDate)} to ${formatDate(endDate)}`
})
function thisMonth() {
const startDate = startOfDay(new Date())
startDate.setDate(1)
const endDate = endOfDay(new Date((new Date()).getFullYear(), (new Date()).getMonth() + 1, 0))
return {
startDate,
endDate,
}
}
const datesThisMonth = computed<string>(() => {
const {startDate, endDate} = thisMonth()
return `${formatDate(startDate)} to ${formatDate(endDate)}`
})
const datesNextMonth = computed<string>(() => {
const {startDate, endDate} = thisMonth()
startDate.setMonth(startDate.getMonth() + 1)
endDate.setMonth(endDate.getMonth() + 1)
return `${formatDate(startDate)} to ${formatDate(endDate)}`
})
const datesNext30Days = computed<string>(() => {
const startDate = startOfDay(new Date())
const endDate = endOfDay(new Date((new Date()).setMonth((new Date()).getMonth() + 1)))
return `${formatDate(startDate)} to ${formatDate(endDate)}`
})
function setDateRange(range: Ref<string>) {
dateRange.value = range.value
const dateRanges = {
// Still using strings for the range instead of an array or object to keep it compatible with the dates from flatpickr
'task.show.today': 'now/d to now/d+1d',
'task.show.thisWeek': 'now/w to now/w+1w',
'task.show.nextWeek': 'now/w+1w to now/w+2w',
'task.show.next7Days': 'now to now+7d',
'task.show.thisMonth': 'now/M to now/M+1M',
'task.show.nextMonth': 'now/M+1M to now/M+2M',
'task.show.next30Days': 'now to now+30d',
}
const customRangeActive = computed<Boolean>(() => {
return dateRange.value !== datesToday.value &&
dateRange.value !== datesThisWeek.value &&
dateRange.value !== datesNextWeek.value &&
dateRange.value !== datesNext7Days.value &&
dateRange.value !== datesThisMonth.value &&
dateRange.value !== datesNextMonth.value &&
dateRange.value !== datesNext30Days.value
return !Object.values(dateRanges).includes(dateRange.value)
})
const dateRanges = {
'task.show.today': datesToday,
'task.show.thisWeek': datesThisWeek,
'task.show.nextWeek': datesNextWeek,
'task.show.next7Days': datesNext7Days,
'task.show.thisMonth': datesThisMonth,
'task.show.nextMonth': datesNextMonth,
'task.show.next30Days': datesNext30Days,
}
</script>
<style lang="scss" scoped>