From 60b5aad0a4d2f0c7856f29c9bea501159186cdd5 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 12 Mar 2026 15:14:25 +0100
Subject: [PATCH] feat(frontend) : allow multiple type selection in time entry
 drawer and remove group creation from kanban

Replace single-select dropdown with multi-select colored badges for types in TimeEntryDrawer, matching TaskDrawer pattern. Remove the "Ajouter un groupe" button and associated code from the kanban page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../time-tracking/TimeEntryDrawer.vue         | 51 +++++++++++++------
 frontend/pages/projects/[id]/index.vue        | 33 +++---------
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/frontend/components/time-tracking/TimeEntryDrawer.vue b/frontend/components/time-tracking/TimeEntryDrawer.vue
index 7fcde22..b2fcb90 100644
--- a/frontend/components/time-tracking/TimeEntryDrawer.vue
+++ b/frontend/components/time-tracking/TimeEntryDrawer.vue
@@ -72,13 +72,29 @@
                 min-width="w-full"
             />
 
-            <MalioSelect
-                v-model="form.typeId"
-                :options="typeOptions"
-                label="Type"
-                empty-option-label="— Aucun —"
-                min-width="w-full"
-            />
+            <div>
+                <p class="mb-2 text-sm font-semibold text-neutral-700">Types</p>
+                <div class="flex flex-wrap gap-2">
+                    <label
+                        v-for="type in types"
+                        :key="type.id"
+                        class="cursor-pointer rounded-full px-3 py-1 text-xs font-semibold transition"
+                        :class="form.typeIds.includes(type.id)
+                            ? 'text-white'
+                            : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'"
+                        :style="form.typeIds.includes(type.id) ? { backgroundColor: type.color } : {}"
+                    >
+                        <input
+                            type="checkbox"
+                            class="hidden"
+                            :value="type.id"
+                            :checked="form.typeIds.includes(type.id)"
+                            @change="toggleType(type.id)"
+                        />
+                        {{ type.label }}
+                    </label>
+                </div>
+            </div>
 
             <div class="flex items-center" :class="isEditing ? 'justify-between' : 'justify-end'">
                 <button
@@ -138,7 +154,7 @@ const form = reactive({
     endTime: '',
     userId: authStore.user?.id ?? null as number | null,
     projectId: null as number | null,
-    typeId: null as number | null,
+    typeIds: [] as number[],
 })
 
 const userOptions = computed(() =>
@@ -149,10 +165,6 @@ const projectOptions = computed(() =>
     props.projects.map(p => ({ label: p.name, value: p.id }))
 )
 
-const typeOptions = computed(() =>
-    props.types.map(t => ({ label: t.label, value: t.id }))
-)
-
 const durationLabel = computed(() => {
     if (!form.startTime || !form.endTime) return ''
     const [sh, sm] = form.startTime.split(':').map(Number) as [number, number]
@@ -164,6 +176,15 @@ const durationLabel = computed(() => {
     return m > 0 ? `${h}h${String(m).padStart(2, '0')}` : `${h}h`
 })
 
+function toggleType(id: number) {
+    const idx = form.typeIds.indexOf(id)
+    if (idx >= 0) {
+        form.typeIds.splice(idx, 1)
+    } else {
+        form.typeIds.push(id)
+    }
+}
+
 function toLocalDate(iso: string): string {
     const d = new Date(iso)
     const offset = d.getTimezoneOffset()
@@ -191,7 +212,7 @@ function populateForm(entry: TimeEntry | null | undefined) {
         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
+        form.typeIds = entry.types?.map(t => t.id) ?? []
     } else {
         form.title = ''
         form.description = ''
@@ -200,7 +221,7 @@ function populateForm(entry: TimeEntry | null | undefined) {
         form.endTime = ''
         form.userId = authStore.user?.id ?? null
         form.projectId = null
-        form.typeId = null
+        form.typeIds = []
     }
 }
 
@@ -230,7 +251,7 @@ async function onSubmit() {
         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}`] : [],
+        types: form.typeIds.map(id => `/api/task_types/${id}`),
     }
 
     if (isEditing.value && props.entry) {
diff --git a/frontend/pages/projects/[id]/index.vue b/frontend/pages/projects/[id]/index.vue
index 658e99e..02981e2 100644
--- a/frontend/pages/projects/[id]/index.vue
+++ b/frontend/pages/projects/[id]/index.vue
@@ -2,20 +2,12 @@
     <div>
         <div class="flex items-center justify-between">
             <h1 class="text-2xl font-bold text-primary-500">{{ project?.name ?? '' }}</h1>
-            <div class="flex gap-3">
-                <button
-                    class="rounded-md bg-secondary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-600"
-                    @click="openGroupCreate"
-                >
-                    + Ajouter un groupe
-                </button>
-                <button
-                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
-                    @click="openTaskCreate"
-                >
-                    + Ajouter un ticket
-                </button>
-            </div>
+            <button
+                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                @click="openTaskCreate"
+            >
+                + Ajouter un ticket
+            </button>
         </div>
 
         <div class="mt-4">
@@ -137,12 +129,6 @@
             @saved="onSaved"
         />
 
-        <TaskGroupDrawer
-            v-model="groupDrawerOpen"
-            :group="selectedGroup"
-            :project-id="projectId"
-            @saved="onSaved"
-        />
     </div>
 </template>
 
@@ -193,8 +179,6 @@ const dragOverStatusId = ref<number | null>(null)
 const dragCounter = ref(0)
 const taskDrawerOpen = ref(false)
 const selectedTask = ref<Task | null>(null)
-const groupDrawerOpen = ref(false)
-const selectedGroup = ref<TaskGroup | null>(null)
 
 const groupFilterOptions = computed(() =>
     groups.value.map(g => ({ label: g.title, value: g.id }))
@@ -249,11 +233,6 @@ function openTaskEdit(task: Task) {
     taskDrawerOpen.value = true
 }
 
-function openGroupCreate() {
-    selectedGroup.value = null
-    groupDrawerOpen.value = true
-}
-
 function onDragEnter(id: number) {
     dragCounter.value++
     dragOverStatusId.value = id