feat(frontend) : add date filter component to time-tracking page

Reusable DateFilter component using @vuepic/vue-datepicker with day/week
toggle. Selecting a day switches to day view, selecting a week navigates
the calendar to that week. Includes "Aujourd'hui" and "Cette semaine"
quick shortcuts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-15 21:46:48 +01:00
parent 7047f64a6b
commit f7a76c9e9b
3 changed files with 117 additions and 70 deletions

View File

@@ -75,7 +75,7 @@
</div>
</div>
<div class="mt-4 -mb-24 min-h-0 flex-1">
<div class="relative z-0 mt-4 -mb-24 min-h-0 flex-1">
<TimeEntryList
v-if="viewMode === 'list'"
:entries="filteredEntries"
@@ -192,28 +192,6 @@ const filteredEntries = computed(() => {
if (selectedTagId.value) {
result = result.filter((e) => e.tags.some((t) => t.id === selectedTagId.value))
}
if (selectedDateFilter.value) {
if (Array.isArray(selectedDateFilter.value)) {
const [start, end] = selectedDateFilter.value
const startDay = new Date(start)
startDay.setHours(0, 0, 0, 0)
const endDay = new Date(end)
endDay.setHours(23, 59, 59, 999)
result = result.filter((e) => {
const entryDate = new Date(e.startedAt)
return entryDate >= startDay && entryDate <= endDay
})
} else {
const day = new Date(selectedDateFilter.value)
day.setHours(0, 0, 0, 0)
const nextDay = new Date(day)
nextDay.setDate(nextDay.getDate() + 1)
result = result.filter((e) => {
const entryDate = new Date(e.startedAt)
return entryDate >= day && entryDate < nextDay
})
}
}
return result
})
@@ -367,4 +345,16 @@ watch(viewMode, () => {
watch(selectedUserId, () => {
loadEntries()
})
watch(selectedDateFilter, (val) => {
if (!val) return
if (Array.isArray(val)) {
startDate.value = getMonday(val[0])
viewMode.value = 'week'
} else {
startDate.value = val
viewMode.value = 'day'
}
loadEntries()
})
</script>