docs : add my tasks page design spec
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
132
docs/superpowers/specs/2026-03-13-my-tasks-page-design.md
Normal file
132
docs/superpowers/specs/2026-03-13-my-tasks-page-design.md
Normal 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)
|
||||
Reference in New Issue
Block a user