feat(mail) : création de tâche depuis mail — sélecteur user + statut (workflow), modale agrandie

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/components/mail/MailCreateTaskModal.vue

@@ -3,74 +3,63 @@ import type { MailMessageDetailDto } from '~/services/dto/mail'
 import type { Task } from '~/services/dto/task'
 import type { Project } from '~/services/dto/project'
 import type { TaskGroup } from '~/services/dto/task-group'
-import type { TaskPriority } from '~/services/dto/task-priority'
+import type { UserData } from '~/services/dto/user-data'
 import { useMailService } from '~/services/mail'
 import { useProjectService } from '~/services/projects'
 import { useTaskGroupService } from '~/services/task-groups'
-import { useTaskPriorityService } from '~/services/task-priorities'
+import { useUserService } from '~/services/users'
+import { useAuthStore } from '~/stores/auth'
 
 const props = defineProps<{
-    /** v-model: true = modal ouvert */
     modelValue: boolean
-    /** ID BDD du message source */
     messageId: number
-    /** Détail du message (pour afficher sujet/expéditeur en lecture seule) */
     messageDetail: MailMessageDetailDto | null
 }>()
-
 const emit = defineEmits<{
     'update:modelValue': [value: boolean]
-    /** Émis après création réussie — payload = tâche créée */
     created: [task: Task]
 }>()
 
 const { t } = useI18n()
+const auth = useAuthStore()
 const mailService = useMailService()
 const projectService = useProjectService()
 const taskGroupService = useTaskGroupService()
-const priorityService = useTaskPriorityService()
-
-// ─── État formulaire ──────────────────────────────────────────────────────
+const userService = useUserService()
 
 const projectId = ref<number | null>(null)
 const taskGroupId = ref<number | null>(null)
-const priorityId = ref<number | null>(null)
+const assigneeId = ref<number | null>(null)
+const statusId = ref<number | null>(null)
 const isSubmitting = ref(false)
 const touchedProject = ref(false)
 
-// ─── Données de référence ─────────────────────────────────────────────────
-
 const projects = ref<Project[]>([])
 const groups = ref<TaskGroup[]>([])
-const priorities = ref<TaskPriority[]>([])
+const users = ref<UserData[]>([])
 const loadingGroups = ref(false)
 
-const projectOptions = computed(() =>
-    projects.value.map(p => ({ label: p.name, value: p.id })),
-)
+const projectOptions = computed(() => projects.value.map(p => ({ label: p.name, value: p.id })))
+const groupOptions = computed(() => groups.value.filter(g => !g.archived).map(g => ({ label: g.title, value: g.id })))
+const userOptions = computed(() => users.value.map(u => ({ label: u.username, value: u.id })))
 
-const groupOptions = computed(() =>
-    groups.value.filter(g => !g.archived).map(g => ({ label: g.title, value: g.id })),
+const selectedProject = computed(() => projects.value.find(p => p.id === projectId.value) ?? null)
+const statusOptions = computed(() =>
+    (selectedProject.value?.workflow?.statuses ?? []).map(s => ({ label: s.label, value: s.id })),
 )
 
-const priorityOptions = computed(() =>
-    priorities.value.map(p => ({ label: p.label, value: p.id })),
-)
-
-// ─── Chargement initial ───────────────────────────────────────────────────
-
 onMounted(async () => {
-    const [projs, prios] = await Promise.all([
+    const [projs, us] = await Promise.all([
         projectService.getAll({ archived: false }),
-        priorityService.getAll(),
+        userService.getAll(),
     ])
     projects.value = projs
-    priorities.value = prios
+    users.value = us
 })
 
-// Recharger les groupes quand le projet change
 watch(projectId, async (pid) => {
     taskGroupId.value = null
+    statusId.value = selectedProject.value?.workflow?.statuses?.[0]?.id ?? null
     groups.value = []
     if (!pid) return
     loadingGroups.value = true
@@ -81,18 +70,16 @@ watch(projectId, async (pid) => {
     }
 })
 
-// Reset formulaire à l'ouverture
 watch(() => props.modelValue, (open) => {
     if (open) {
         projectId.value = null
         taskGroupId.value = null
-        priorityId.value = null
+        statusId.value = null
+        assigneeId.value = auth.user?.id ?? null
         touchedProject.value = false
     }
 })
 
-// ─── Actions ──────────────────────────────────────────────────────────────
-
 function close(): void {
     emit('update:modelValue', false)
 }
@@ -100,13 +87,13 @@ function close(): void {
 async function handleSubmit(): Promise<void> {
     touchedProject.value = true
     if (!projectId.value) return
-
     isSubmitting.value = true
     try {
         const task = await mailService.createTaskFromMail(props.messageId, {
             projectId: projectId.value,
             taskGroupId: taskGroupId.value ?? undefined,
-            priority: priorityId.value ? `/api/task_priorities/${priorityId.value}` : undefined,
+            assigneeId: assigneeId.value ?? undefined,
+            statusId: statusId.value ?? undefined,
         })
         emit('created', task)
         close()
@@ -117,135 +104,41 @@ async function handleSubmit(): Promise<void> {
 </script>
 
 <template>
-    <Teleport v-if="modelValue" to="body">
-        <Transition name="mail-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-lg rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 overflow-hidden"
-                    style="max-height: min(90vh, 640px)"
-                >
-                    <!-- Header -->
-                    <div class="flex items-center justify-between border-b border-neutral-100 bg-neutral-50/80 px-6 py-4">
-                        <h2 class="text-base font-bold text-neutral-900">
-                            {{ t('mail.createTaskModal.title') }}
-                        </h2>
-                        <MalioButtonIcon
-                            icon="mdi:close"
-                            aria-label="Fermer"
-                            variant="ghost"
-                            icon-size="20"
-                            @click="close"
-                        />
-                    </div>
-
-                    <!-- Corps -->
-                    <div class="overflow-y-auto px-6 py-5 space-y-5">
-                        <!-- Info mail source (lecture seule) -->
-                        <div
-                            v-if="messageDetail"
-                            class="rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm"
-                        >
-                            <p class="font-medium text-neutral-800 truncate">
-                                {{ messageDetail.header.subject ?? t('mail.noSubject') }}
-                            </p>
-                            <p class="mt-0.5 text-xs text-neutral-500 truncate">
-                                {{ messageDetail.header.fromName ?? messageDetail.header.fromEmail }}
-                            </p>
-                            <p class="mt-2 text-xs text-neutral-400 italic">
-                                {{ t('mail.createTaskModal.titleHint') }}
-                            </p>
-                            <p class="text-xs text-neutral-400 italic">
-                                {{ t('mail.createTaskModal.descriptionHint') }}
-                            </p>
-                        </div>
-
-                        <!-- Sélection projet -->
-                        <div>
-                            <MalioSelect
-                                v-model="projectId"
-                                :options="projectOptions"
-                                :label="t('mail.createTaskModal.projectLabel')"
-                                :empty-option-label="t('mail.createTaskModal.projectPlaceholder')"
-                                min-width="w-full"
-                            />
-                            <p
-                                v-if="touchedProject && !projectId"
-                                class="mt-1 text-xs text-red-500"
-                            >
-                                {{ t('mail.createTaskModal.projectLabel').replace(' *', '') }} requis
-                            </p>
-                        </div>
-
-                        <!-- Sélection groupe (optionnel, chargé après projet) -->
-                        <div v-if="projectId">
-                            <MalioSelect
-                                v-model="taskGroupId"
-                                :options="groupOptions"
-                                :label="t('mail.createTaskModal.groupLabel')"
-                                :empty-option-label="t('mail.createTaskModal.groupPlaceholder')"
-                                min-width="w-full"
-                                :disabled="loadingGroups"
-                            />
-                        </div>
-
-                        <!-- Sélection priorité (optionnelle) — MalioSelect car les values sont number | null -->
-                        <div>
-                            <MalioSelect
-                                v-model="priorityId"
-                                :options="priorityOptions"
-                                :label="t('mail.createTaskModal.priorityLabel')"
-                                :empty-option-label="t('mail.createTaskModal.priorityPlaceholder')"
-                                min-width="w-full"
-                            />
-                        </div>
-                    </div>
-
-                    <!-- Footer -->
-                    <div class="flex justify-end gap-3 border-t border-neutral-100 px-6 py-4">
-                        <MalioButton
-                            variant="tertiary"
-                            label="Annuler"
-                            button-class="w-auto px-4"
-                            @click="close"
-                        />
-                        <MalioButton
-                            :label="t('mail.createTaskModal.submit')"
-                            button-class="w-auto px-6"
-                            :disabled="isSubmitting"
-                            @click="handleSubmit"
-                        />
-                    </div>
-                </div>
+    <AppModal
+        :model-value="modelValue"
+        width="lg"
+        :title="t('mail.createTaskModal.title')"
+        @update:model-value="emit('update:modelValue', $event)"
+    >
+        <div class="space-y-5">
+            <div v-if="messageDetail" class="rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm">
+                <p class="truncate font-medium text-neutral-800">{{ messageDetail.header.subject ?? t('mail.noSubject') }}</p>
+                <p class="mt-0.5 truncate text-xs text-neutral-500">{{ messageDetail.header.fromName ?? messageDetail.header.fromEmail }}</p>
+                <p class="mt-2 text-xs italic text-neutral-400">{{ t('mail.createTaskModal.titleHint') }}</p>
+                <p class="text-xs italic text-neutral-400">{{ t('mail.createTaskModal.descriptionHint') }}</p>
             </div>
-        </Transition>
-    </Teleport>
+
+            <div>
+                <MalioSelect v-model="projectId" :options="projectOptions" :label="t('mail.createTaskModal.projectLabel')" :empty-option-label="t('mail.createTaskModal.projectPlaceholder')" min-width="w-full" />
+                <p v-if="touchedProject && !projectId" class="mt-1 text-xs text-red-500">{{ t('mail.createTaskModal.projectLabel').replace(' *', '') }} requis</p>
+            </div>
+
+            <div v-if="projectId">
+                <MalioSelect v-model="taskGroupId" :options="groupOptions" :label="t('mail.createTaskModal.groupLabel')" :empty-option-label="t('mail.createTaskModal.groupPlaceholder')" min-width="w-full" :disabled="loadingGroups" />
+            </div>
+
+            <div v-if="projectId">
+                <MalioSelect v-model="statusId" :options="statusOptions" :label="t('mail.createTaskModal.statusLabel')" min-width="w-full" />
+            </div>
+
+            <div>
+                <MalioSelect v-model="assigneeId" :options="userOptions" :label="t('mail.createTaskModal.assigneeLabel')" :empty-option-label="t('mail.createTaskModal.assigneePlaceholder')" min-width="w-full" />
+            </div>
+        </div>
+
+        <template #footer>
+            <MalioButton variant="tertiary" label="Annuler" button-class="w-auto px-4" @click="close" />
+            <MalioButton :label="t('mail.createTaskModal.submit')" button-class="w-auto px-6" :disabled="isSubmitting" @click="handleSubmit" />
+        </template>
+    </AppModal>
 </template>
-
-<style scoped>
-.mail-modal-enter-active,
-.mail-modal-leave-active {
-    transition: opacity 0.2s ease;
-}
-
-.mail-modal-enter-active > div:last-child,
-.mail-modal-leave-active > div:last-child {
-    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
-}
-
-.mail-modal-enter-from,
-.mail-modal-leave-to {
-    opacity: 0;
-}
-
-.mail-modal-enter-from > div:last-child {
-    transform: scale(0.95) translateY(8px);
-    opacity: 0;
-}
-</style>