feat(ui) : add create task button on my-tasks and responsive kanban columns

- Add "Créer une tâche" button on my-tasks page with mandatory project selector - TaskModal now accepts optional projects prop for project selection in create mode - Replace fixed-width kanban columns (w-72 shrink-0) with flexible layout (min-w-36 flex-1) - Add min-w-0 and overflow-x-hidden on default layout to properly contain content - Kanban now adapts to screen size from 1024px to 1920px+ Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-16 16:35:02 +01:00
parent 0180dd3715
commit c5898fbf74
5 changed files with 103 additions and 29 deletions
--- a/frontend/components/task/TaskModal.vue
+++ b/frontend/components/task/TaskModal.vue
@@ -65,6 +65,20 @@
                            @blur="touched.title = true"
                        />

+                        <!-- Project select (create mode with project list) -->
+                        <div v-if="showProjectSelect" class="mt-4">
+                            <MalioSelect
+                                v-model="form.projectId"
+                                :options="projectOptions"
+                                label="Projet *"
+                                empty-option-label="Sélectionner un projet"
+                                min-width="w-full"
+                            />
+                            <p v-if="touched.project && !form.projectId" class="mt-1 text-xs text-red-500">
+                                Le projet est requis
+                            </p>
+                        </div>
+
                        <!-- Two-column selects -->
                        <div class="mt-4 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
                            <MalioSelect
@@ -266,6 +280,8 @@ import type { TaskGroup } from '~/services/dto/task-group'
 import type { UserData } from '~/services/dto/user-data'
 import { useTaskService } from '~/services/tasks'

+import type { Project } from '~/services/dto/project'
+
 const props = defineProps<{
    modelValue: boolean
    task: Task | null
@@ -276,6 +292,7 @@ const props = defineProps<{
    tags: TaskTag[]
    groups: TaskGroup[]
    users: UserData[]
+    projects?: Project[]
 }>()

 const emit = defineEmits<{
@@ -318,10 +335,12 @@ const form = reactive({
    groupId: null as number | null,
    tagIds: [] as number[],
    clientTicketId: null as number | null,
+    projectId: null as number | null,
 })

 const touched = reactive({
    title: false,
+    project: false,
 })

 const statusOptions = computed(() =>
@@ -340,8 +359,22 @@ 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 groupOptions = computed(() => {
+    let filtered = props.groups
+    if (showProjectSelect.value && form.projectId) {
+        filtered = filtered.filter(g => g.project?.id === form.projectId)
+    }
+    return filtered.map(g => ({ label: g.title, value: g.id }))
+})
+
+const showProjectSelect = computed(() => !!props.projects?.length && !isEditing.value)
+
+const projectOptions = computed(() =>
+    (props.projects ?? []).map(p => ({ label: p.name, value: p.id }))
+)
+
+const resolvedProjectId = computed(() =>
+    showProjectSelect.value ? form.projectId : props.projectId
 )

 const canArchive = computed(() => {
@@ -385,8 +418,10 @@ function populateForm(task: Task | null) {
        form.groupId = null
        form.tagIds = []
        form.clientTicketId = null
+        form.projectId = null
    }
    touched.title = false
+    touched.project = false
 }

 watch(() => props.modelValue, async (open) => {
@@ -394,9 +429,14 @@ watch(() => props.modelValue, async (open) => {
        confirmDeleteDocOpen.value = false
        documentToDelete.value = null
        populateForm(props.task)
-        try {
-            clientTickets.value = await clientTicketService.getAll({ project: props.projectId })
-        } catch {
+        const pid = resolvedProjectId.value
+        if (pid) {
+            try {
+                clientTickets.value = await clientTicketService.getAll({ project: pid })
+            } catch {
+                clientTickets.value = []
+            }
+        } else {
            clientTickets.value = []
        }
        if (props.task?.project?.giteaOwner && props.task?.project?.giteaRepo && !giteaUrl.value) {
@@ -426,6 +466,22 @@ const clientTicketOptions = computed(() =>
    clientTickets.value.map(ct => ({ label: `CT-${String(ct.number).padStart(3, '0')} — ${ct.title}`, value: ct.id }))
 )

+// Reset group and reload client tickets when project changes in create mode
+watch(() => form.projectId, async (pid) => {
+    if (!showProjectSelect.value) return
+    form.groupId = null
+    form.clientTicketId = null
+    if (pid) {
+        try {
+            clientTickets.value = await clientTicketService.getAll({ project: pid })
+        } catch {
+            clientTickets.value = []
+        }
+    } else {
+        clientTickets.value = []
+    }
+})
+
 const authStore = useAuthStore()
 const isAdmin = computed(() => authStore.user?.roles?.includes('ROLE_ADMIN') ?? false)

@@ -541,7 +597,9 @@ async function handleUnarchive() {

 async function handleSubmit() {
    touched.title = true
+    touched.project = true
    if (!form.title.trim()) return
+    if (showProjectSelect.value && !form.projectId) return

    isSubmitting.value = true
    try {
@@ -553,7 +611,7 @@ async function handleSubmit() {
            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}`,
+            project: `/api/projects/${resolvedProjectId.value}`,
            tags: form.tagIds.map(id => `/api/task_tags/${id}`),
            clientTicket: form.clientTicketId ? `/api/client_tickets/${form.clientTicketId}` : null,
        }
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -112,7 +112,8 @@
        "allEfforts": "Tous les efforts",
        "allAssignees": "Tous",
        "noTasks": "Aucune tâche",
-        "backlog": "Backlog"
+        "backlog": "Backlog",
+        "createTask": "Créer une tâche"
    },
    "dashboard": {
        "title": "Tableau de bord",
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -123,9 +123,9 @@
                </div>
            </aside>

-            <div class="h-full flex-1 flex flex-col min-h-0">
+            <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
                <AppTopNav :user="auth.user" />
-                <main class="flex flex-1 flex-col overflow-y-auto bg-white px-4 pb-24 sm:px-8 lg:px-16">
+                <main class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-8 lg:px-16">
                    <div aria-hidden="true" class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12" />
                    <slot/>
                </main>
--- a/frontend/pages/my-tasks.vue
+++ b/frontend/pages/my-tasks.vue
@@ -214,6 +214,11 @@ async function onDropBacklog(event: DragEvent) {
 }

 // Modal
+function openTaskCreate() {
+    selectedTask.value = null
+    taskModalOpen.value = true
+}
+
 function openTaskEdit(task: Task) {
    selectedTask.value = task
    taskModalOpen.value = true
@@ -229,28 +234,37 @@ onMounted(() => {
 </script>

 <template>
-    <div>
+    <div class="min-w-0">
        <!-- Header + Filters -->
        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
            <div class="flex items-center justify-between gap-3">
                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('myTasks.title') }}</h1>
-                <div class="flex gap-1">
+                <div class="flex items-center gap-2">
                    <button
-                        class="flex items-center justify-center rounded-md p-1.5 transition-colors"
-                        :class="viewMode === 'kanban' ? 'bg-primary-500 text-white' : 'text-neutral-400 hover:text-primary-500'"
-                        :title="$t('myTasks.viewKanban')"
-                        @click="viewMode = 'kanban'"
+                        class="flex items-center gap-1.5 rounded-lg bg-primary-500 px-3 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-secondary-500"
+                        @click="openTaskCreate"
                    >
-                        <Icon name="mdi:view-column-outline" size="18" />
-                    </button>
-                    <button
-                        class="flex items-center justify-center rounded-md p-1.5 transition-colors"
-                        :class="viewMode === 'list' ? 'bg-primary-500 text-white' : 'text-neutral-400 hover:text-primary-500'"
-                        :title="$t('myTasks.viewList')"
-                        @click="viewMode = 'list'"
-                    >
-                        <Icon name="mdi:view-list-outline" size="18" />
+                        <Icon name="mdi:plus" size="18" />
+                        {{ $t('myTasks.createTask') }}
                    </button>
+                    <div class="flex gap-1">
+                        <button
+                            class="flex items-center justify-center rounded-md p-1.5 transition-colors"
+                            :class="viewMode === 'kanban' ? 'bg-primary-500 text-white' : 'text-neutral-400 hover:text-primary-500'"
+                            :title="$t('myTasks.viewKanban')"
+                            @click="viewMode = 'kanban'"
+                        >
+                            <Icon name="mdi:view-column-outline" size="18" />
+                        </button>
+                        <button
+                            class="flex items-center justify-center rounded-md p-1.5 transition-colors"
+                            :class="viewMode === 'list' ? 'bg-primary-500 text-white' : 'text-neutral-400 hover:text-primary-500'"
+                            :title="$t('myTasks.viewList')"
+                            @click="viewMode = 'list'"
+                        >
+                            <Icon name="mdi:view-list-outline" size="18" />
+                        </button>
+                    </div>
                </div>
            </div>

@@ -314,11 +328,11 @@ onMounted(() => {

        <!-- Kanban View -->
        <div v-if="viewMode === 'kanban'">
-            <div class="mt-6 flex gap-4 overflow-x-auto pb-4">
+            <div class="mt-6 flex gap-3 overflow-x-auto pb-4">
                <div
                    v-for="status in sortedStatuses"
                    :key="status.id"
-                    class="flex w-72 shrink-0 flex-col rounded-lg transition-colors"
+                    class="flex min-w-36 flex-1 flex-col rounded-lg transition-colors"
                    :class="dragOverStatusId === status.id ? 'bg-neutral-200' : 'bg-neutral-50'"
                    @dragover.prevent
                    @dragenter.prevent="onDragEnter(status.id)"
@@ -446,6 +460,7 @@ onMounted(() => {
            :tags="tags"
            :groups="selectedTask?.project?.id ? groups.filter(g => g.project?.id === selectedTask?.project?.id) : groups"
            :users="users"
+            :projects="projects"
            @saved="onSaved"
        />
    </div>
--- a/frontend/pages/projects/[id]/index.vue
+++ b/frontend/pages/projects/[id]/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="min-w-0">
        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
            <div class="flex items-center justify-between gap-3">
                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ project?.name ?? '' }}</h1>
@@ -62,11 +62,11 @@
        </div>

        <!-- Kanban -->
-        <div class="mt-6 flex gap-4 overflow-x-auto pb-4">
+        <div class="mt-6 flex gap-3 overflow-x-auto pb-4">
            <div
                v-for="status in statuses"
                :key="status.id"
-                class="flex w-72 shrink-0 flex-col rounded-lg transition-colors"
+                class="flex min-w-36 flex-1 flex-col rounded-lg transition-colors"
                :class="dragOverStatusId === status.id ? 'bg-neutral-200' : 'bg-neutral-50'"
                @dragover.prevent
                @dragenter.prevent="onDragEnter(status.id)"