docs : add my tasks page design spec

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-13 11:21:34 +01:00
parent bf9faee5f4
commit 7b8c754987

View File

@@ -0,0 +1,132 @@
# 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
- `status` — filtre exact
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
```
## 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" (sans colonne statut)
- 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 :
```typescript
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` :
```typescript
getFiltered(params: Record<string, string | number | boolean>): Promise<Task[]>
```
Construit les query params à partir de l'objet et appelle `GET /api/tasks?...`. Convertit les ids en IRIs si nécessaire.
### 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)