feat(time-tracking) : add list view for time entries

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 23:29:58 +01:00
parent 049275fd96
commit c15a10b36f
2 changed files with 120 additions and 9 deletions

View File

@@ -20,13 +20,13 @@
<Icon name="mdi:chevron-left" size="20" />
</button>
<button
v-for="mode in (['week', 'day'] as const)"
v-for="mode in (['week', 'day', 'list'] as const)"
:key="mode"
class="px-3 py-1 text-sm font-semibold transition"
:class="viewMode === mode ? 'bg-primary-500 text-white rounded' : 'text-neutral-500 hover:text-neutral-700'"
@click="viewMode = mode"
>
{{ mode === 'week' ? 'Semaine' : 'Jour' }}
{{ mode === 'week' ? 'Semaine' : mode === 'day' ? 'Jour' : 'Liste' }}
</button>
<button class="px-2 py-1 text-neutral-500 hover:text-neutral-700" @click="navigateNext">
<Icon name="mdi:chevron-right" size="20" />
@@ -59,7 +59,14 @@
</div>
<div class="mt-4">
<TimeEntryList
v-if="viewMode === 'list'"
:entries="filteredEntries"
@edit-entry="openEditDrawer"
@delete-entry="onDelete"
/>
<TimeTrackingCalendar
v-else
:entries="filteredEntries"
:start-date="startDate"
:view-mode="viewMode"
@@ -108,7 +115,7 @@ useHead({ title: 'Suivi des temps' })
const authStore = useAuthStore()
const timeEntryService = useTimeEntryService()
const viewMode = ref<'week' | 'day'>('week')
const viewMode = ref<'week' | 'day' | 'list'>('week')
const startDate = ref(getMonday(new Date()))
const selectedUserId = ref<number | null>(authStore.user?.id ?? null)
const selectedTypeId = ref<number | null>(null)
@@ -160,15 +167,15 @@ function getMonday(d: Date): Date {
function navigatePrev() {
const d = new Date(startDate.value)
d.setDate(d.getDate() - (viewMode.value === 'week' ? 7 : 1))
startDate.value = viewMode.value === 'week' ? getMonday(d) : d
d.setDate(d.getDate() - (viewMode.value === 'day' ? 1 : 7))
startDate.value = viewMode.value === 'day' ? d : getMonday(d)
loadEntries()
}
function navigateNext() {
const d = new Date(startDate.value)
d.setDate(d.getDate() + (viewMode.value === 'week' ? 7 : 1))
startDate.value = viewMode.value === 'week' ? getMonday(d) : d
d.setDate(d.getDate() + (viewMode.value === 'day' ? 1 : 7))
startDate.value = viewMode.value === 'day' ? d : getMonday(d)
loadEntries()
}
@@ -245,7 +252,7 @@ async function onDelete(entry: TimeEntry) {
async function loadEntries() {
const end = new Date(startDate.value)
end.setDate(end.getDate() + (viewMode.value === 'week' ? 7 : 1))
end.setDate(end.getDate() + (viewMode.value === 'day' ? 1 : 7))
entries.value = await timeEntryService.getByDateRange({
after: startDate.value.toISOString(),
@@ -274,7 +281,7 @@ onMounted(async () => {
})
watch(viewMode, () => {
startDate.value = viewMode.value === 'week' ? getMonday(startDate.value) : startDate.value
startDate.value = viewMode.value === 'day' ? startDate.value : getMonday(startDate.value)
loadEntries()
})
</script>