feat: implement drag & drop functionality using @dnd-kit

- Added drag & drop capabilities to the Kanban board with @dnd-kit for task status updates.
- Integrated DndContext in `KanbanBoard` and utilized `useDroppable` in `KanbanColumn` for drop zones.
- Enhanced `TaskCard` with draggable features and visual feedback during dragging.
- Updated `TODO.md` to reflect the completion of drag & drop tasks and optimistically update task statuses.
- Introduced optimistic updates in `useTasks` for smoother user experience during drag & drop operations.
This commit is contained in:
Julien Froidefond
2025-09-14 09:08:06 +02:00
parent cff99969d3
commit 9193305550
10 changed files with 324 additions and 86 deletions

View File

@@ -43,7 +43,7 @@
- [x] Formulaire d'édition de tâche (Modal + Form avec pré-remplissage)
- [x] Édition inline du titre des tâches (clic sur titre → input)
- [x] Suppression de tâche (icône discrète + API call)
- [ ] Changement de statut par drag & drop ou boutons
- [x] Changement de statut par drag & drop (@dnd-kit)
- [x] Validation des formulaires et gestion d'erreurs
### 2.4 Gestion des tags
@@ -64,7 +64,8 @@
- [x] Architecture SSR + hydratation client optimisée
### 2.6 Fonctionnalités Kanban avancées
- [ ] Drag & drop entre colonnes (react-beautiful-dnd)
- [x] Drag & drop entre colonnes (@dnd-kit avec React 19)
- [x] Drag & drop optimiste (mise à jour immédiate + rollback si erreur)
- [ ] Filtrage par statut/priorité/assigné
- [ ] Recherche en temps réel dans les tâches
- [ ] Tri des tâches (date, priorité, alphabétique)
@@ -159,6 +160,7 @@ lib/
- ✅ CRUD tâches complet (création, édition, suppression)
- ✅ Création rapide inline (QuickAddTask)
- ✅ Édition inline du titre (clic sur titre → input éditable)
- ✅ Drag & drop entre colonnes (@dnd-kit) + optimiste
- ✅ Client HTTP et hooks React
- ✅ Refactoring Kanban avec nouveaux composants