Files
Lesstime/docs/superpowers/specs/2026-03-13-my-tasks-page-design.md
2026-03-13 11:23:45 +01:00

4.9 KiB

Feature: Page "Mes tâches"

Résumé

Page dédiée /my-tasks affichant toutes les tâches non-archivées de tous les projets, avec filtrage côté serveur. Deux vues : Kanban (colonnes par statut) et Liste. Par défaut filtrée sur l'utilisateur courant, avec possibilité de changer l'assigné, voir tous les utilisateurs, et filtrer par projet/groupe/type/priorité/effort.

Backend

Filtres API Platform sur Task

Ajouter des SearchFilter sur l'entité Task pour les champs suivants (en plus des filtres existants project, group, archived) :

  • assignee — filtre exact (par id)
  • priority — filtre exact
  • effort — filtre exact
  • tags — filtre exact (ManyToMany, query param format : tags[]=/api/task_tags/1)
  • status — filtre exact

Désactiver la pagination sur l'opération GetCollection de Task (paginationEnabled: false) pour charger toutes les tâches filtrées en un seul appel.

Aucune migration nécessaire — les filtres sont purement déclaratifs sur des relations existantes.

Exemple d'appel :

GET /api/tasks?assignee=/api/users/1&archived=false&project=/api/projects/2&tags[]=/api/task_tags/3

Frontend

Nouvelle page : frontend/pages/my-tasks.vue

Barre de filtres

Une ligne horizontale de MalioSelect :

Filtre Options Défaut
Projet Tous les projets de l'utilisateur Tous
Groupe Groupes (filtrés par projet sélectionné si applicable) Tous
Type (tags) Tous les tags Tous
Priorité Toutes les priorités Tous
Effort Tous les efforts Tous
Assigné Tous les utilisateurs + option "Tous" Utilisateur courant

Toggle de vue

Deux boutons icônes en haut à droite (à côté des filtres) :

  • Icône grille/kanban → vue Kanban
  • Icône liste → vue Liste

État persisté en localStorage ou simple ref (pas critique).

Vue Kanban

  • Colonnes par statut (ordonnées par position), même layout que projects/[id]/index.vue
  • Chaque colonne contient les TaskCard filtrés ayant ce statut
  • Les tâches sans statut vont dans une section "Backlog" en première colonne
  • Les colonnes de statut sans tâches sont affichées (cohérent avec la vue projet)
  • Pas de drag-and-drop (pas pertinent en contexte cross-projet)

Vue Liste

  • Lignes de tâches avec :
    • Titre (bold)
    • Badges : priorité (couleur) + tags (couleur)
    • Code projet + numéro de tâche (ex: SIRH-1) — aligné à droite
    • Icône timer (comme sur les TaskCard)
  • Pas d'affichage des temps (exclu du périmètre)
  • Séparation visuelle légère entre les lignes (border-bottom ou alternance de fond)

Chargement des données

Au montage, chargement parallèle :

const [tasks, statuses, projects, efforts, priorities, tags, groups, users] = await Promise.all([
    taskService.getFiltered({ assignee: currentUserId, archived: false }),
    statusService.getAll(),
    projectService.getAll(),
    effortService.getAll(),
    priorityService.getAll(),
    tagService.getAll(),
    groupService.getAll(),
    userService.getAll()
])

À chaque changement de filtre → nouvel appel API pour les tâches uniquement. Les données de référence (statuts, projets, etc.) ne sont chargées qu'une fois.

Interactions

  • Clic sur une TaskCard ou ligne de liste → ouvre le TaskModal en mode édition
  • Après save/delete dans le modal → rechargement des tâches
  • Timer sur les cartes/lignes fonctionne via le useTimerStore existant

Service tasks — nouvelle méthode

Ajout dans frontend/services/tasks.ts :

getFiltered(params: Record<string, string | number | boolean | string[]>): Promise<Task[]>

Construit les query params à partir de l'objet et appelle GET /api/tasks?.... Convertit les ids en IRIs si nécessaire. Gère les paramètres tableau pour les relations ManyToMany (tags[]).

Navigation

Nouveau SidebarLink dans frontend/layouts/default.vue :

  • Label : "Mes tâches"
  • Icône : mdi:clipboard-check-outline (ou similaire)
  • Position : entre "Tableau de bord" et "Projets"
  • Route : /my-tasks

Traductions (i18n)

Clés à ajouter dans fr.json :

  • myTasks.title : "Mes tâches"
  • myTasks.viewKanban : "Vue Kanban"
  • myTasks.viewList : "Vue Liste"
  • myTasks.allProjects : "Tous les projets"
  • myTasks.allGroups : "Tous les groupes"
  • myTasks.allTypes : "Tous les types"
  • myTasks.allPriorities : "Toutes les priorités"
  • myTasks.allEfforts : "Tous les efforts"
  • myTasks.allAssignees : "Tous"
  • myTasks.noTasks : "Aucune tâche"
  • myTasks.backlog : "Backlog"
  • Sidebar : sidebar.myTasks : "Mes tâches"

Hors périmètre

  • Drag-and-drop entre colonnes (pas pertinent cross-projet)
  • Affichage des temps/durées sur les tâches
  • Pagination (à ajouter plus tard si nécessaire)
  • Création de tâche depuis cette page (utiliser la vue projet pour ça)
  • Recherche texte (pourra être ajoutée plus tard)