feat: move everything to fancy date math ranges
This commit is contained in:
kolaente
parent
32bdf16892
commit
6667df5f1f
1 changed files with 15 additions and 110 deletions
|
|
@ -77,125 +77,30 @@ watch(
|
||||||
}
|
}
|
||||||
|
|
||||||
emit('dateChanged', {
|
emit('dateChanged', {
|
||||||
dateFrom: new Date(fromDate),
|
dateFrom: fromDate,
|
||||||
dateTo: new Date(toDate),
|
dateTo: toDate,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
function formatDate(date: Date): string {
|
function setDateRange(range: string) {
|
||||||
return format(date, 'yyyy-MM-dd HH:mm')
|
dateRange.value = range
|
||||||
}
|
}
|
||||||
|
|
||||||
function startOfDay(date: Date): Date {
|
const dateRanges = {
|
||||||
date.setHours(0)
|
// Still using strings for the range instead of an array or object to keep it compatible with the dates from flatpickr
|
||||||
date.setMinutes(0)
|
'task.show.today': 'now/d to now/d+1d',
|
||||||
|
'task.show.thisWeek': 'now/w to now/w+1w',
|
||||||
return date
|
'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',
|
||||||
function endOfDay(date: Date): Date {
|
'task.show.nextMonth': 'now/M+1M to now/M+2M',
|
||||||
date.setHours(23)
|
'task.show.next30Days': 'now to now+30d',
|
||||||
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 customRangeActive = computed<Boolean>(() => {
|
const customRangeActive = computed<Boolean>(() => {
|
||||||
return dateRange.value !== datesToday.value &&
|
return !Object.values(dateRanges).includes(dateRange.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
|
|
||||||
})
|
})
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue