feat : add my-tasks page with Kanban and List views

Add a /my-tasks page displaying all non-archived tasks across projects with server-side filtering (assignee, project, group, priority, effort, tags, status) and two view modes (Kanban columns by status, List view). Includes sidebar navigation link and i18n translations. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 11:34:16 +01:00
parent c60f531607
commit 7540c99501
5 changed files with 409 additions and 3 deletions
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -85,5 +85,21 @@
        "statusFinal": "Statut final",
        "groupArchiveDisabled": "Tous les tickets doivent être en statut final pour archiver le groupe.",
        "groupNonFinalTasks": "Il reste {count} ticket(s) sans statut final dans ce groupe."
+    },
+    "myTasks": {
+        "title": "Mes tâches",
+        "viewKanban": "Vue Kanban",
+        "viewList": "Vue Liste",
+        "allProjects": "Tous les projets",
+        "allGroups": "Tous les groupes",
+        "allTypes": "Tous les types",
+        "allPriorities": "Toutes les priorités",
+        "allEfforts": "Tous les efforts",
+        "allAssignees": "Tous",
+        "noTasks": "Aucune tâche",
+        "backlog": "Backlog"
+    },
+    "sidebar": {
+        "myTasks": "Mes tâches"
    }
 }
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -27,6 +27,12 @@
                        :collapsed="ui.sidebarCollapsed"
                        :class="ui.sidebarCollapsed ? 'mt-4' : 'border-t border-secondary-500 pt-6'"
                    />
+                    <SidebarLink
+                        to="/my-tasks"
+                        icon="mdi:clipboard-check-outline"
+                        label="Mes tâches"
+                        :collapsed="ui.sidebarCollapsed"
+                    />
                    <SidebarLink
                        to="/projects"
                        icon="mdi:folder-outline"
--- a/frontend/pages/my-tasks.vue
+++ b/frontend/pages/my-tasks.vue
@@ -0,0 +1,379 @@
+<script setup lang="ts">
+import type { Task } 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 type { Project } from '~/services/dto/project'
+import { useTaskService } from '~/services/tasks'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskEffortService } from '~/services/task-efforts'
+import { useTaskPriorityService } from '~/services/task-priorities'
+import { useTaskTagService } from '~/services/task-tags'
+import { useTaskGroupService } from '~/services/task-groups'
+import { useUserService } from '~/services/users'
+import { useProjectService } from '~/services/projects'
+
+const { t } = useI18n()
+const auth = useAuthStore()
+
+useHead({ title: t('myTasks.title') })
+
+const taskService = useTaskService()
+const statusService = useTaskStatusService()
+const effortService = useTaskEffortService()
+const priorityService = useTaskPriorityService()
+const tagService = useTaskTagService()
+const groupService = useTaskGroupService()
+const userService = useUserService()
+const projectService = useProjectService()
+
+const tasks = ref<Task[]>([])
+const statuses = ref<TaskStatus[]>([])
+const efforts = ref<TaskEffort[]>([])
+const priorities = ref<TaskPriority[]>([])
+const tags = ref<TaskTag[]>([])
+const groups = ref<TaskGroup[]>([])
+const users = ref<UserData[]>([])
+const projects = ref<Project[]>([])
+const isLoading = ref(true)
+
+// Filters
+const selectedProjectId = ref<number | null>(null)
+const selectedGroupId = ref<number | null>(null)
+const selectedTagId = ref<number | null>(null)
+const selectedPriorityId = ref<number | null>(null)
+const selectedEffortId = ref<number | null>(null)
+const selectedAssigneeId = ref<number | null>(auth.user?.id ?? null)
+
+// View toggle
+const viewMode = ref<'kanban' | 'list'>('kanban')
+
+// Modal
+const taskModalOpen = ref(false)
+const selectedTask = ref<Task | null>(null)
+
+// Timer
+const timerStore = useTimerStore()
+
+function isTimerOnTask(task: Task): boolean {
+    const entry = timerStore.activeEntry
+    if (!entry?.task) return false
+    const entryTaskId = typeof entry.task === 'string'
+        ? entry.task
+        : (entry.task['@id'] ?? entry.task.id)
+    const taskId = task['@id'] ?? task.id
+    return entryTaskId === taskId || entryTaskId === `/api/tasks/${task.id}`
+}
+
+// Filter options
+const projectOptions = computed(() =>
+    projects.value.map(p => ({ label: p.name, value: p.id }))
+)
+
+const groupOptions = computed(() => {
+    let g = groups.value.filter(g => !g.archived)
+    if (selectedProjectId.value) {
+        g = g.filter(g => g.project?.id === selectedProjectId.value)
+    }
+    return g.map(g => ({ label: g.title, value: g.id }))
+})
+
+const tagOptions = computed(() =>
+    tags.value.map(t => ({ label: t.label, value: t.id }))
+)
+
+const priorityOptions = computed(() =>
+    priorities.value.map(p => ({ label: p.label, value: p.id }))
+)
+
+const effortOptions = computed(() =>
+    efforts.value.map(e => ({ label: e.label, value: e.id }))
+)
+
+const assigneeOptions = computed(() =>
+    users.value.map(u => ({ label: u.username, value: u.id }))
+)
+
+// Kanban helpers
+const sortedStatuses = computed(() =>
+    [...statuses.value].sort((a, b) => a.position - b.position)
+)
+
+function tasksByStatus(statusId: number): Task[] {
+    return tasks.value.filter(t => t.status?.id === statusId)
+}
+
+const backlogTasks = computed(() =>
+    tasks.value.filter(t => !t.status)
+)
+
+// Data loading
+async function loadReferenceData() {
+    const [s, e, pr, tg, g, u, p] = await Promise.all([
+        statusService.getAll(),
+        effortService.getAll(),
+        priorityService.getAll(),
+        tagService.getAll(),
+        groupService.getAll(),
+        userService.getAll(),
+        projectService.getAll(),
+    ])
+    statuses.value = s
+    efforts.value = e
+    priorities.value = pr
+    tags.value = tg
+    groups.value = g
+    users.value = u
+    projects.value = p
+}
+
+async function loadTasks() {
+    const params: Record<string, string | number | boolean | string[]> = {
+        archived: false,
+    }
+    if (selectedAssigneeId.value) {
+        params.assignee = `/api/users/${selectedAssigneeId.value}`
+    }
+    if (selectedProjectId.value) {
+        params.project = `/api/projects/${selectedProjectId.value}`
+    }
+    if (selectedGroupId.value) {
+        params.group = `/api/task_groups/${selectedGroupId.value}`
+    }
+    if (selectedPriorityId.value) {
+        params.priority = `/api/task_priorities/${selectedPriorityId.value}`
+    }
+    if (selectedEffortId.value) {
+        params.effort = `/api/task_efforts/${selectedEffortId.value}`
+    }
+    if (selectedTagId.value) {
+        params['tags[]'] = `/api/task_tags/${selectedTagId.value}`
+    }
+    tasks.value = await taskService.getFiltered(params)
+}
+
+async function loadAll() {
+    isLoading.value = true
+    try {
+        await Promise.all([loadReferenceData(), loadTasks()])
+    } finally {
+        isLoading.value = false
+    }
+}
+
+// Watch filters to reload tasks
+watch(
+    [selectedProjectId, selectedGroupId, selectedTagId, selectedPriorityId, selectedEffortId, selectedAssigneeId],
+    () => { loadTasks() },
+)
+
+// Reset group when project changes
+watch(selectedProjectId, () => {
+    selectedGroupId.value = null
+}, { flush: 'sync' })
+
+// Modal
+function openTaskEdit(task: Task) {
+    selectedTask.value = task
+    taskModalOpen.value = true
+}
+
+async function onSaved() {
+    await loadTasks()
+}
+
+onMounted(() => {
+    loadAll()
+})
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-primary-500">{{ $t('myTasks.title') }}</h1>
+            <div class="flex gap-1">
+                <button
+                    class="rounded-lg p-2 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="20" />
+                </button>
+                <button
+                    class="rounded-lg p-2 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="20" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="mt-4 flex flex-wrap gap-3">
+            <MalioSelect
+                v-model="selectedProjectId"
+                :options="projectOptions"
+                label="Projet"
+                :empty-option-label="$t('myTasks.allProjects')"
+                min-width="w-48"
+            />
+            <MalioSelect
+                v-model="selectedGroupId"
+                :options="groupOptions"
+                label="Groupe"
+                :empty-option-label="$t('myTasks.allGroups')"
+                min-width="w-48"
+            />
+            <MalioSelect
+                v-model="selectedTagId"
+                :options="tagOptions"
+                label="Type"
+                :empty-option-label="$t('myTasks.allTypes')"
+                min-width="w-48"
+            />
+            <MalioSelect
+                v-model="selectedPriorityId"
+                :options="priorityOptions"
+                label="Priorité"
+                :empty-option-label="$t('myTasks.allPriorities')"
+                min-width="w-48"
+            />
+            <MalioSelect
+                v-model="selectedEffortId"
+                :options="effortOptions"
+                label="Effort"
+                :empty-option-label="$t('myTasks.allEfforts')"
+                min-width="w-48"
+            />
+            <MalioSelect
+                v-model="selectedAssigneeId"
+                :options="assigneeOptions"
+                label="Assigné"
+                :empty-option-label="$t('myTasks.allAssignees')"
+                min-width="w-48"
+            />
+        </div>
+
+        <!-- Kanban View -->
+        <div v-if="viewMode === 'kanban'" class="mt-6 flex gap-4 overflow-x-auto pb-4">
+            <!-- Backlog column (tasks without status) -->
+            <div
+                v-if="backlogTasks.length > 0"
+                class="flex w-72 shrink-0 flex-col rounded-lg bg-neutral-50"
+            >
+                <div class="rounded-t-lg bg-neutral-500 px-4 py-3 text-sm font-bold text-white">
+                    {{ $t('myTasks.backlog') }} ({{ backlogTasks.length }})
+                </div>
+                <div class="flex flex-col gap-3 p-3">
+                    <TaskCard
+                        v-for="task in backlogTasks"
+                        :key="task.id"
+                        :task="task"
+                        @click="openTaskEdit(task)"
+                    />
+                </div>
+            </div>
+
+            <!-- Status columns -->
+            <div
+                v-for="status in sortedStatuses"
+                :key="status.id"
+                class="flex w-72 shrink-0 flex-col rounded-lg bg-neutral-50"
+            >
+                <div
+                    class="rounded-t-lg px-4 py-3 text-sm font-bold text-white"
+                    :style="{ backgroundColor: status.color }"
+                >
+                    {{ status.label }} ({{ tasksByStatus(status.id).length }})
+                </div>
+                <div class="flex flex-col gap-3 p-3">
+                    <TaskCard
+                        v-for="task in tasksByStatus(status.id)"
+                        :key="task.id"
+                        :task="task"
+                        @click="openTaskEdit(task)"
+                    />
+                    <p
+                        v-if="tasksByStatus(status.id).length === 0"
+                        class="py-4 text-center text-xs text-neutral-400"
+                    >
+                        {{ $t('myTasks.noTasks') }}
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- List View -->
+        <div v-if="viewMode === 'list'" class="mt-6">
+            <div
+                v-for="task in tasks"
+                :key="task.id"
+                class="flex cursor-pointer items-center justify-between border-b border-neutral-100 px-4 py-3 transition-colors hover:bg-neutral-50"
+                @click="openTaskEdit(task)"
+            >
+                <div class="min-w-0 flex-1">
+                    <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
+                    <div class="mt-1 flex items-center gap-1.5">
+                        <span
+                            v-if="task.priority"
+                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                            :style="{ backgroundColor: task.priority.color }"
+                        >
+                            {{ task.priority.label }}
+                        </span>
+                        <span
+                            v-for="tag in task.tags"
+                            :key="tag.id"
+                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                            :style="{ backgroundColor: tag.color }"
+                        >
+                            {{ tag.label }}
+                        </span>
+                    </div>
+                </div>
+                <div class="flex items-center gap-3">
+                    <button
+                        class="shrink-0 transition-colors"
+                        :class="isTimerOnTask(task) ? 'text-[#F18619] hover:text-[#d97314]' : 'text-neutral-400 hover:text-primary-500'"
+                        @click.stop="isTimerOnTask(task) ? timerStore.stop() : timerStore.startFromTask(task)"
+                    >
+                        <Icon :name="isTimerOnTask(task) ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'" size="20" />
+                    </button>
+                    <span
+                        v-if="task.project && task.number"
+                        class="text-sm font-medium text-primary-500"
+                    >
+                        {{ task.project.code }}-{{ task.number }}
+                    </span>
+                </div>
+            </div>
+            <p
+                v-if="tasks.length === 0 && !isLoading"
+                class="py-8 text-center text-sm text-neutral-400"
+            >
+                {{ $t('myTasks.noTasks') }}
+            </p>
+        </div>
+
+        <!-- TaskModal -->
+        <TaskModal
+            v-model="taskModalOpen"
+            :task="selectedTask"
+            :project-id="selectedTask?.project?.id ?? 0"
+            :statuses="statuses"
+            :efforts="efforts"
+            :priorities="priorities"
+            :tags="tags"
+            :groups="selectedTask?.project?.id ? groups.filter(g => g.project?.id === selectedTask?.project?.id) : groups"
+            :users="users"
+            @saved="onSaved"
+        />
+    </div>
+</template>
--- a/frontend/services/tasks.ts
+++ b/frontend/services/tasks.ts
@@ -26,6 +26,11 @@ export function useTaskService() {
        return extractHydraMembers(data)
    }

+    async function getFiltered(params: Record<string, string | number | boolean | string[]>): Promise<Task[]> {
+        const data = await api.get<HydraCollection<Task>>('/tasks', params as Record<string, unknown>)
+        return extractHydraMembers(data)
+    }
+
    async function create(payload: TaskWrite): Promise<Task> {
        return api.post<Task>('/tasks', payload as Record<string, unknown>, {
            toastSuccessKey: 'tasks.created',
@@ -44,5 +49,5 @@ export function useTaskService() {
        })
    }

-    return { getAll, getByProject, getByProjectArchived, create, update, remove }
+    return { getAll, getByProject, getByProjectArchived, getFiltered, create, update, remove }
 }
--- a/src/Entity/Task.php
+++ b/src/Entity/Task.php
@@ -22,7 +22,7 @@ use Symfony\Component\Serializer\Attribute\Groups;

 #[ApiResource(
    operations: [
-        new GetCollection(),
+        new GetCollection(paginationEnabled: false),
        new Get(),
        new Post(security: "is_granted('ROLE_ADMIN')", processor: TaskNumberProcessor::class),
        new Patch(security: "is_granted('ROLE_ADMIN')"),
@@ -32,7 +32,7 @@ use Symfony\Component\Serializer\Attribute\Groups;
    denormalizationContext: ['groups' => ['task:write']],
    order: ['id' => 'DESC'],
 )]
-#[ApiFilter(SearchFilter::class, properties: ['project' => 'exact', 'group' => 'exact'])]
+#[ApiFilter(SearchFilter::class, properties: ['project' => 'exact', 'group' => 'exact', 'assignee' => 'exact', 'priority' => 'exact', 'effort' => 'exact', 'tags' => 'exact', 'status' => 'exact'])]
 #[ApiFilter(BooleanFilter::class, properties: ['archived'])]
 #[ORM\Entity(repositoryClass: TaskRepository::class)]
 class Task