From 7d1d81688e8a4ab211da8e8d0cef22ed046118d6 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Fri, 13 Mar 2026 11:06:04 +0100
Subject: [PATCH] refactor(frontend) : replace TaskDrawer with TaskModal for
 ticket create/edit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/components/task/TaskModal.vue    | 411 ++++++++++++++++++++++
 frontend/pages/projects/[id]/archives.vue |   2 +-
 frontend/pages/projects/[id]/index.vue    |   2 +-
 3 files changed, 413 insertions(+), 2 deletions(-)
 create mode 100644 frontend/components/task/TaskModal.vue

diff --git a/frontend/components/task/TaskModal.vue b/frontend/components/task/TaskModal.vue
new file mode 100644
index 0000000..886e6e3
--- /dev/null
+++ b/frontend/components/task/TaskModal.vue
@@ -0,0 +1,411 @@
+<template>
+    <Teleport v-if="isOpen" to="body">
+        <Transition name="task-modal" appear>
+            <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+                <!-- Backdrop -->
+                <div
+                    class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
+                    @click="close"
+                />
+
+                <!-- Modal -->
+                <div
+                    class="relative z-10 w-full max-w-2xl overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5"
+                >
+                    <!-- Header -->
+                    <div class="border-b border-neutral-100 bg-neutral-50/80 px-8 py-5">
+                        <div class="flex items-center justify-between">
+                            <h2 class="text-lg font-bold tracking-tight text-neutral-900">
+                                {{ isEditing ? 'Modifier un ticket' : 'Ajouter un ticket' }}
+                            </h2>
+                            <button
+                                type="button"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg text-neutral-400 transition-colors hover:bg-neutral-200/60 hover:text-neutral-600"
+                                @click="close"
+                            >
+                                <Icon name="mdi:close" size="20" />
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Body -->
+                    <form @submit.prevent="handleSubmit" class="px-8 py-6">
+                        <!-- Title -->
+                        <MalioInputText
+                            v-model="form.title"
+                            label="Titre"
+                            input-class="w-full"
+                            :error="touched.title && !form.title.trim() ? 'Le titre est requis' : ''"
+                            @blur="touched.title = true"
+                        />
+
+                        <!-- Two-column selects -->
+                        <div class="mt-4 grid grid-cols-2 gap-x-6 gap-y-4">
+                            <MalioSelect
+                                v-model="form.statusId"
+                                :options="statusOptions"
+                                label="Statut"
+                                empty-option-label="Aucun statut"
+                                min-width="w-full"
+                            />
+                            <MalioSelect
+                                v-model="form.assigneeId"
+                                :options="userOptions"
+                                label="User"
+                                empty-option-label="Aucun utilisateur"
+                                min-width="w-full"
+                            />
+                            <MalioSelect
+                                v-model="form.effortId"
+                                :options="effortOptions"
+                                label="Effort"
+                                empty-option-label="Aucun effort"
+                                min-width="w-full"
+                            />
+                            <MalioSelect
+                                v-model="form.priorityId"
+                                :options="priorityOptions"
+                                label="Priorité"
+                                empty-option-label="Aucune priorité"
+                                min-width="w-full"
+                            />
+                            <MalioSelect
+                                v-model="form.groupId"
+                                :options="groupOptions"
+                                label="Groupe"
+                                empty-option-label="Aucun groupe"
+                                min-width="w-full"
+                            />
+                        </div>
+
+                        <!-- Tags -->
+                        <div v-if="tags.length" class="mt-5">
+                            <p class="mb-2 text-sm font-medium text-neutral-700">Tags</p>
+                            <div class="flex flex-wrap gap-2">
+                                <label
+                                    v-for="tag in tags"
+                                    :key="tag.id"
+                                    class="cursor-pointer rounded-full px-3 py-1 text-xs font-semibold transition-all"
+                                    :class="form.tagIds.includes(tag.id)
+                                        ? 'text-white shadow-sm'
+                                        : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'"
+                                    :style="form.tagIds.includes(tag.id) ? { backgroundColor: tag.color } : {}"
+                                >
+                                    <input
+                                        type="checkbox"
+                                        class="hidden"
+                                        :value="tag.id"
+                                        :checked="form.tagIds.includes(tag.id)"
+                                        @change="toggleTag(tag.id)"
+                                    />
+                                    {{ tag.label }}
+                                </label>
+                            </div>
+                        </div>
+
+                        <!-- Description -->
+                        <div class="mt-5">
+                            <MalioInputTextArea
+                                v-model="form.description"
+                                label="Description"
+                                :size="3"
+                            />
+                        </div>
+
+                        <!-- Footer -->
+                        <div
+                            class="mt-6 flex items-center border-t border-neutral-100 pt-5"
+                            :class="isEditing ? 'justify-between' : 'justify-end'"
+                        >
+                            <button
+                                v-if="isEditing"
+                                type="button"
+                                class="rounded-lg bg-red-50 px-4 py-2 text-sm font-semibold text-red-600 transition-colors hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50"
+                                :disabled="isSubmitting"
+                                @click="confirmDeleteOpen = true"
+                            >
+                                Supprimer
+                            </button>
+                            <div class="flex gap-3">
+                                <button
+                                    v-if="canArchive"
+                                    type="button"
+                                    class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                    :disabled="isSubmitting"
+                                    @click="handleArchive"
+                                >
+                                    {{ $t('archive.archiveButton') }}
+                                </button>
+                                <button
+                                    v-if="canUnarchive"
+                                    type="button"
+                                    class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                    :disabled="isSubmitting"
+                                    @click="handleUnarchive"
+                                >
+                                    {{ $t('archive.unarchiveButton') }}
+                                </button>
+                                <button
+                                    type="button"
+                                    class="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
+                                    @click="close"
+                                >
+                                    Annuler
+                                </button>
+                                <button
+                                    type="submit"
+                                    class="rounded-lg bg-primary-500 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                                    :disabled="isSubmitting"
+                                >
+                                    Enregistrer
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+
+                    <ConfirmDeleteTaskModal
+                        v-model="confirmDeleteOpen"
+                        @confirm="handleDelete"
+                    />
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { Task, TaskWrite } from '~/services/dto/task'
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskEffort } from '~/services/dto/task-effort'
+import type { TaskPriority } from '~/services/dto/task-priority'
+import type { TaskTag } from '~/services/dto/task-tag'
+import type { TaskGroup } from '~/services/dto/task-group'
+import type { UserData } from '~/services/dto/user-data'
+import { useTaskService } from '~/services/tasks'
+
+const props = defineProps<{
+    modelValue: boolean
+    task: Task | null
+    projectId: number
+    statuses: TaskStatus[]
+    efforts: TaskEffort[]
+    priorities: TaskPriority[]
+    tags: TaskTag[]
+    groups: TaskGroup[]
+    users: UserData[]
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'saved'): void
+}>()
+
+const isOpen = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+})
+
+function close() {
+    isOpen.value = false
+}
+
+const isEditing = computed(() => !!props.task)
+const isSubmitting = ref(false)
+const confirmDeleteOpen = ref(false)
+
+const form = reactive({
+    title: '',
+    description: '',
+    statusId: null as number | null,
+    effortId: null as number | null,
+    priorityId: null as number | null,
+    assigneeId: null as number | null,
+    groupId: null as number | null,
+    tagIds: [] as number[],
+})
+
+const touched = reactive({
+    title: false,
+})
+
+const statusOptions = computed(() =>
+    props.statuses.map(s => ({ label: s.label, value: s.id }))
+)
+
+const effortOptions = computed(() =>
+    props.efforts.map(e => ({ label: e.label, value: e.id }))
+)
+
+const priorityOptions = computed(() =>
+    props.priorities.map(p => ({ label: p.label, value: p.id }))
+)
+
+const userOptions = computed(() =>
+    props.users.map(u => ({ label: u.username, value: u.id }))
+)
+
+const groupOptions = computed(() =>
+    props.groups.map(g => ({ label: g.title, value: g.id }))
+)
+
+const canArchive = computed(() => {
+    if (!isEditing.value || !props.task) return false
+    if (props.task.archived) return false
+    const status = props.statuses.find(s => s.id === props.task?.status?.id)
+    return !!status?.isFinal
+})
+
+const canUnarchive = computed(() => {
+    return isEditing.value && !!props.task?.archived
+})
+
+function toggleTag(id: number) {
+    const idx = form.tagIds.indexOf(id)
+    if (idx >= 0) {
+        form.tagIds.splice(idx, 1)
+    } else {
+        form.tagIds.push(id)
+    }
+}
+
+function populateForm(task: Task | null) {
+    if (task) {
+        form.title = task.title ?? ''
+        form.description = task.description ?? ''
+        form.statusId = task.status?.id ?? null
+        form.effortId = task.effort?.id ?? null
+        form.priorityId = task.priority?.id ?? null
+        form.assigneeId = task.assignee?.id ?? null
+        form.groupId = task.group?.id ?? null
+        form.tagIds = task.tags.map(t => t.id)
+    } else {
+        form.title = ''
+        form.description = ''
+        form.statusId = null
+        form.effortId = null
+        form.priorityId = null
+        form.assigneeId = null
+        form.groupId = null
+        form.tagIds = []
+    }
+    touched.title = false
+}
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        populateForm(props.task)
+    }
+})
+
+watch(() => props.task, (task) => {
+    if (props.modelValue) {
+        populateForm(task)
+    }
+})
+
+const { create, update, remove } = useTaskService()
+
+async function handleDelete() {
+    if (!props.task) return
+    isSubmitting.value = true
+    try {
+        await remove(props.task.id)
+        confirmDeleteOpen.value = false
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function handleArchive() {
+    if (!props.task) return
+    const timerStore = useTimerStore()
+    if (timerStore.activeEntry?.task) {
+        const taskIri = typeof timerStore.activeEntry.task === 'string'
+            ? timerStore.activeEntry.task
+            : (timerStore.activeEntry.task as any)?.['@id'] ?? `/api/tasks/${(timerStore.activeEntry.task as any)?.id}`
+        if (taskIri === `/api/tasks/${props.task.id}`) {
+            await timerStore.stop()
+        }
+    }
+    isSubmitting.value = true
+    try {
+        await update(props.task.id, { archived: true })
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function handleUnarchive() {
+    if (!props.task) return
+    isSubmitting.value = true
+    try {
+        await update(props.task.id, { archived: false })
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+async function handleSubmit() {
+    touched.title = true
+    if (!form.title.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: TaskWrite = {
+            title: form.title.trim(),
+            description: form.description.trim() || null,
+            status: form.statusId ? `/api/task_statuses/${form.statusId}` : null,
+            effort: form.effortId ? `/api/task_efforts/${form.effortId}` : null,
+            priority: form.priorityId ? `/api/task_priorities/${form.priorityId}` : null,
+            assignee: form.assigneeId ? `/api/users/${form.assigneeId}` : null,
+            group: form.groupId ? `/api/task_groups/${form.groupId}` : null,
+            project: `/api/projects/${props.projectId}`,
+            tags: form.tagIds.map(id => `/api/task_tags/${id}`),
+        }
+
+        if (isEditing.value && props.task) {
+            await update(props.task.id, payload)
+        } else {
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
+
+<style scoped>
+.task-modal-enter-active,
+.task-modal-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.task-modal-enter-active > div:last-child,
+.task-modal-leave-active > div:last-child {
+    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+}
+
+.task-modal-enter-from,
+.task-modal-leave-to {
+    opacity: 0;
+}
+
+.task-modal-enter-from > div:last-child {
+    transform: scale(0.95) translateY(8px);
+    opacity: 0;
+}
+
+.task-modal-leave-to > div:last-child {
+    transform: scale(0.97);
+    opacity: 0;
+}
+</style>
diff --git a/frontend/pages/projects/[id]/archives.vue b/frontend/pages/projects/[id]/archives.vue
index eff8ecf..ae0180a 100644
--- a/frontend/pages/projects/[id]/archives.vue
+++ b/frontend/pages/projects/[id]/archives.vue
@@ -56,7 +56,7 @@
             </div>
         </div>
 
-        <TaskDrawer
+        <TaskModal
             v-model="taskDrawerOpen"
             :task="selectedTask"
             :project-id="projectId"
diff --git a/frontend/pages/projects/[id]/index.vue b/frontend/pages/projects/[id]/index.vue
index f6db5ca..6667f9e 100644
--- a/frontend/pages/projects/[id]/index.vue
+++ b/frontend/pages/projects/[id]/index.vue
@@ -116,7 +116,7 @@
             </div>
         </div>
 
-        <TaskDrawer
+        <TaskModal
             v-model="taskDrawerOpen"
             :task="selectedTask"
             :project-id="projectId"