From a9ba2f3815870c6d198618635d5350b2450d31d3 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Tue, 10 Mar 2026 23:20:02 +0100
Subject: [PATCH] feat(time-tracking) : improve TimeEntryDrawer with date/time
 fields, duration label, and delete

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/components/TimeEntryDrawer.vue | 129 ++++++++++++++++++------
 1 file changed, 97 insertions(+), 32 deletions(-)

diff --git a/frontend/components/TimeEntryDrawer.vue b/frontend/components/TimeEntryDrawer.vue
index 2e13ce7..a3b2a17 100644
--- a/frontend/components/TimeEntryDrawer.vue
+++ b/frontend/components/TimeEntryDrawer.vue
@@ -20,25 +20,43 @@
                 />
             </div>
 
+            <div>
+                <label class="mb-1 block text-sm font-semibold text-neutral-700">Date</label>
+                <input
+                    v-model="form.date"
+                    type="date"
+                    class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
+                />
+            </div>
+
             <div class="grid grid-cols-2 gap-3">
                 <div>
-                    <label class="mb-1 block text-sm font-semibold text-neutral-700">Heure début</label>
+                    <label class="mb-1 block text-sm font-semibold text-neutral-700">Début</label>
                     <input
-                        v-model="form.startedAt"
-                        type="datetime-local"
-                        class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
+                        v-model="form.startTime"
+                        type="time"
+                        step="60"
+                        class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm tabular-nums focus:border-primary-500 focus:outline-none"
                     />
                 </div>
                 <div>
-                    <label class="mb-1 block text-sm font-semibold text-neutral-700">Heure fin</label>
+                    <label class="mb-1 block text-sm font-semibold text-neutral-700">Fin</label>
                     <input
-                        v-model="form.stoppedAt"
-                        type="datetime-local"
-                        class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
+                        v-model="form.endTime"
+                        type="time"
+                        step="60"
+                        class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm tabular-nums focus:border-primary-500 focus:outline-none"
                     />
                 </div>
             </div>
 
+            <div
+                v-if="durationLabel"
+                class="rounded-md bg-neutral-100 px-3 py-2 text-center text-sm font-semibold text-neutral-600 tabular-nums"
+            >
+                {{ durationLabel }}
+            </div>
+
             <div>
                 <label class="mb-1 block text-sm font-semibold text-neutral-700">Utilisateur</label>
                 <select
@@ -71,12 +89,22 @@
                 </select>
             </div>
 
-            <button
-                type="submit"
-                class="w-full rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition"
-            >
-                Enregistrer
-            </button>
+            <div class="flex items-center" :class="isEditing ? 'justify-between' : 'justify-end'">
+                <button
+                    v-if="isEditing"
+                    type="button"
+                    class="rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white hover:bg-red-600 transition"
+                    @click="onDelete"
+                >
+                    Supprimer
+                </button>
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition"
+                >
+                    Enregistrer
+                </button>
+            </div>
         </form>
     </AppDrawer>
 </template>
@@ -114,52 +142,89 @@ const authStore = useAuthStore()
 const form = reactive({
     title: '',
     description: '',
-    startedAt: '',
-    stoppedAt: '',
+    date: '',
+    startTime: '',
+    endTime: '',
     userId: authStore.user?.id ?? null as number | null,
     projectId: null as number | null,
     typeId: null as number | null,
 })
 
-watch(() => props.entry, (entry) => {
+const durationLabel = computed(() => {
+    if (!form.startTime || !form.endTime) return ''
+    const [sh, sm] = form.startTime.split(':').map(Number) as [number, number]
+    const [eh, em] = form.endTime.split(':').map(Number) as [number, number]
+    const diff = (eh * 60 + em) - (sh * 60 + sm)
+    if (diff <= 0) return ''
+    const h = Math.floor(diff / 60)
+    const m = diff % 60
+    return m > 0 ? `${h}h${String(m).padStart(2, '0')}` : `${h}h`
+})
+
+function toLocalDate(iso: string): string {
+    const d = new Date(iso)
+    const offset = d.getTimezoneOffset()
+    const local = new Date(d.getTime() - offset * 60000)
+    return local.toISOString().slice(0, 10)
+}
+
+function toLocalTime(iso: string): string {
+    const d = new Date(iso)
+    const offset = d.getTimezoneOffset()
+    const local = new Date(d.getTime() - offset * 60000)
+    return local.toISOString().slice(11, 16)
+}
+
+function toISO(date: string, time: string): string {
+    return new Date(`${date}T${time}`).toISOString()
+}
+
+function populateForm(entry: TimeEntry | null | undefined) {
     if (entry) {
         form.title = entry.title ?? ''
         form.description = entry.description ?? ''
-        form.startedAt = toLocalDatetimeInput(entry.startedAt)
-        form.stoppedAt = entry.stoppedAt ? toLocalDatetimeInput(entry.stoppedAt) : ''
+        form.date = toLocalDate(entry.startedAt)
+        form.startTime = toLocalTime(entry.startedAt)
+        form.endTime = entry.stoppedAt ? toLocalTime(entry.stoppedAt) : ''
         form.userId = entry.user?.id ?? authStore.user?.id ?? null
         form.projectId = entry.project?.id ?? null
         form.typeId = entry.types?.[0]?.id ?? null
     } else {
         form.title = ''
         form.description = ''
-        form.startedAt = props.prefillStartedAt ? toLocalDatetimeInput(props.prefillStartedAt) : ''
-        form.stoppedAt = ''
+        form.date = props.prefillStartedAt ? toLocalDate(props.prefillStartedAt) : new Date().toISOString().slice(0, 10)
+        form.startTime = props.prefillStartedAt ? toLocalTime(props.prefillStartedAt) : ''
+        form.endTime = ''
         form.userId = authStore.user?.id ?? null
         form.projectId = null
         form.typeId = null
     }
-}, { immediate: true })
-
-function toLocalDatetimeInput(iso: string): string {
-    const d = new Date(iso)
-    const offset = d.getTimezoneOffset()
-    const local = new Date(d.getTime() - offset * 60000)
-    return local.toISOString().slice(0, 16)
 }
 
-function toISOFromLocal(localStr: string): string {
-    return new Date(localStr).toISOString()
+watch([() => props.modelValue, () => props.entry] as const, ([open, entry]) => {
+    if (open) {
+        populateForm(entry)
+    }
+})
+
+async function onDelete() {
+    if (!props.entry) return
+    const { remove } = useTimeEntryService()
+    await remove(props.entry.id)
+    emit('saved')
+    isOpen.value = false
 }
 
 async function onSubmit() {
+    if (!form.date || !form.startTime || !form.endTime) return
+
     const { create, update } = useTimeEntryService()
 
     const payload: Record<string, unknown> = {
         title: form.title || null,
         description: form.description || null,
-        startedAt: toISOFromLocal(form.startedAt),
-        stoppedAt: form.stoppedAt ? toISOFromLocal(form.stoppedAt) : null,
+        startedAt: toISO(form.date, form.startTime),
+        stoppedAt: form.endTime ? toISO(form.date, form.endTime) : null,
         user: `/api/users/${form.userId}`,
         project: form.projectId ? `/api/projects/${form.projectId}` : null,
         types: form.typeId ? [`/api/task_types/${form.typeId}`] : [],