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.
2025-09-14 09:08:06 +02:00
parent cff99969d3
commit 9193305550
10 changed files with 324 additions and 86 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -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

--- a/components/kanban/Board.tsx
+++ b/components/kanban/Board.tsx
@@ -6,6 +6,16 @@ import { Button } from '@/components/ui/Button';
 import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { useMemo, useState } from 'react';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { TaskCard } from './TaskCard';

 interface KanbanBoardProps {
  tasks: Task[];
@@ -13,11 +23,22 @@ interface KanbanBoardProps {
  onDeleteTask?: (taskId: string) => Promise<void>;
  onEditTask?: (task: Task) => void;
  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
+  onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
  loading?: boolean;
 }

-export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, loading = false }: KanbanBoardProps) {
+export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, onUpdateStatus, loading = false }: KanbanBoardProps) {
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+
+  // Configuration des capteurs pour le drag & drop
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // Évite les clics accidentels
+      },
+    })
+  );
  // Organiser les tâches par statut
  const tasksByStatus = useMemo(() => {
    const grouped = tasks.reduce((acc, task) => {
@@ -70,7 +91,37 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
    }
  };

+  // Gestion du début du drag
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const task = tasks.find(t => t.id === active.id);
+    setActiveTask(task || null);
+  };
+
+  // Gestion de la fin du drag
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveTask(null);
+
+    if (!over || !onUpdateStatus) return;
+
+    const taskId = active.id as string;
+    const newStatus = over.id as TaskStatus;
+    
+    // Trouver la tâche actuelle
+    const task = tasks.find(t => t.id === taskId);
+    if (!task || task.status === newStatus) return;
+
+    // Mettre à jour le statut
+    await onUpdateStatus(taskId, newStatus);
+  };
+
  return (
+    <DndContext
+      sensors={sensors}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
      <div className="h-full flex flex-col bg-slate-950">
        {/* Header avec bouton nouvelle tâche */}
        <div className="flex justify-between items-center p-6 pb-0">
@@ -119,5 +170,20 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
          />
        )}
      </div>
+
+      {/* Overlay pour le drag & drop */}
+      <DragOverlay>
+        {activeTask ? (
+          <div className="rotate-3 opacity-90">
+            <TaskCard 
+              task={activeTask} 
+              onDelete={undefined}
+              onEdit={undefined}
+              onUpdateTitle={undefined}
+            />
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
  );
 }
--- a/components/kanban/BoardContainer.tsx
+++ b/components/kanban/BoardContainer.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { KanbanBoard } from './Board';
 import { EditTaskForm } from '@/components/forms/EditTaskForm';
 import { useTasks } from '@/hooks/useTasks';
-import { Task } from '@/lib/types';
+import { Task, TaskStatus } from '@/lib/types';
 import { UpdateTaskData } from '@/clients/tasks-client';

 interface BoardContainerProps {
@@ -19,7 +19,7 @@ interface BoardContainerProps {
 }

 export function KanbanBoardContainer({ initialTasks, initialStats }: BoardContainerProps) {
-  const { tasks, loading, createTask, deleteTask, updateTask } = useTasks(
+  const { tasks, loading, syncing, createTask, deleteTask, updateTask, updateTaskOptimistic } = useTasks(
    { limit: 20 }, 
    { tasks: initialTasks, stats: initialStats }
  );
@@ -42,6 +42,14 @@ export function KanbanBoardContainer({ initialTasks, initialStats }: BoardContai
    });
  };

+  const handleUpdateStatus = async (taskId: string, newStatus: TaskStatus) => {
+    // Utiliser la mise à jour optimiste pour le drag & drop
+    await updateTaskOptimistic({
+      taskId,
+      status: newStatus
+    });
+  };
+
  return (
    <>
      <KanbanBoard 
@@ -50,6 +58,7 @@ export function KanbanBoardContainer({ initialTasks, initialStats }: BoardContai
        onDeleteTask={deleteTask}
        onEditTask={handleEditTask}
        onUpdateTitle={handleUpdateTitle}
+        onUpdateStatus={handleUpdateStatus}
        loading={loading}
      />
      
--- a/components/kanban/Column.tsx
+++ b/components/kanban/Column.tsx
@@ -5,6 +5,7 @@ import { Card, CardHeader, CardContent } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { useState } from 'react';
+import { useDroppable } from '@dnd-kit/core';

 interface KanbanColumnProps {
  id: TaskStatus;
@@ -19,6 +20,11 @@ interface KanbanColumnProps {

 export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle }: KanbanColumnProps) {
  const [showQuickAdd, setShowQuickAdd] = useState(false);
+  
+  // Configuration de la zone droppable
+  const { setNodeRef, isOver } = useDroppable({
+    id: id,
+  });
  // Couleurs tech/cyberpunk
  const techStyles = {
    gray: {
@@ -61,7 +67,13 @@ export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTa

  return (
    <div className="flex-shrink-0 w-80 h-full">
-      <Card variant="elevated" className="h-full flex flex-col">
+      <Card 
+        ref={setNodeRef}
+        variant="elevated" 
+        className={`h-full flex flex-col transition-all duration-200 ${
+          isOver ? 'ring-2 ring-cyan-400/50 bg-slate-800/60' : ''
+        }`}
+      >
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
--- a/components/kanban/TaskCard.tsx
+++ b/components/kanban/TaskCard.tsx
@@ -4,6 +4,7 @@ import { formatDistanceToNow } from 'date-fns';
 import { fr } from 'date-fns/locale';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
+import { useDraggable } from '@dnd-kit/core';

 interface TaskCardProps {
  task: Task;
@@ -16,6 +17,17 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProp
  const [isEditingTitle, setIsEditingTitle] = useState(false);
  const [editTitle, setEditTitle] = useState(task.title);

+  // Configuration du draggable
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    isDragging,
+  } = useDraggable({
+    id: task.id,
+  });
+
  // Mettre à jour le titre local quand la tâche change
  useEffect(() => {
    setEditTitle(task.title);
@@ -39,7 +51,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProp
  const handleTitleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
-    if (onUpdateTitle) {
+    if (onUpdateTitle && !isDragging) {
      setIsEditingTitle(true);
    }
  };
@@ -66,6 +78,11 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProp
      handleTitleCancel();
    }
  };
+  // Style de transformation pour le drag
+  const style = transform ? {
+    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+  } : undefined;
+
  // Extraire les emojis du titre pour les afficher comme tags visuels
  const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu;
  const emojis = task.title.match(emojiRegex) || [];
@@ -73,7 +90,15 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProp


  return (
-    <Card className="p-3 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group">
+    <Card 
+      ref={setNodeRef}
+      style={style}
+      className={`p-3 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group ${
+        isDragging ? 'opacity-50 rotate-3 scale-105' : ''
+      }`}
+      {...attributes}
+      {...(isEditingTitle ? {} : listeners)}
+    >
      {/* Header tech avec titre et status */}
      <div className="flex items-start gap-2 mb-2">
        {emojis.length > 0 && (
--- a/components/ui/Header.tsx
+++ b/components/ui/Header.tsx
@@ -10,22 +10,27 @@ interface HeaderProps {
    todo: number;
    completionRate: number;
  };
+  syncing?: boolean;
 }

-export function Header({ title, subtitle, stats }: HeaderProps) {
+export function Header({ title, subtitle, stats, syncing = false }: HeaderProps) {
  return (
    <header className="bg-slate-900/80 backdrop-blur-sm border-b border-slate-700/50 shadow-lg shadow-slate-900/20">
      <div className="container mx-auto px-6 py-4">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
          {/* Titre tech avec glow */}
          <div className="flex items-center gap-4">
-            <div className="w-3 h-3 bg-cyan-400 rounded-full animate-pulse shadow-cyan-400/50 shadow-lg"></div>
+            <div className={`w-3 h-3 rounded-full shadow-lg ${
+              syncing 
+                ? 'bg-yellow-400 animate-spin shadow-yellow-400/50' 
+                : 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
+            }`}></div>
            <div>
              <h1 className="text-2xl font-mono font-bold text-slate-100 tracking-wider">
                {title}
              </h1>
              <p className="text-slate-400 mt-1 font-mono text-sm">
-                {subtitle}
+                {subtitle} {syncing && '• Synchronisation...'}
              </p>
            </div>
          </div>
--- a/components/ui/HeaderContainer.tsx
+++ b/components/ui/HeaderContainer.tsx
@@ -1,8 +1,7 @@
 'use client';

-import { useState, useEffect } from 'react';
 import { Header } from './Header';
-import { tasksClient } from '@/clients/tasks-client';
+import { useTasks } from '@/hooks/useTasks';

 interface HeaderContainerProps {
  title: string;
@@ -17,41 +16,17 @@ interface HeaderContainerProps {
 }

 export function HeaderContainer({ title, subtitle, initialStats }: HeaderContainerProps) {
-  const [stats, setStats] = useState(initialStats);
-  const [isHydrated, setIsHydrated] = useState(false);
-
-  // Hydratation côté client
-  useEffect(() => {
-    setIsHydrated(true);
-  }, []);
-
-  // Rafraîchir les stats périodiquement côté client
-  useEffect(() => {
-    if (!isHydrated) return;
-
-    const refreshStats = async () => {
-      try {
-        const response = await tasksClient.getTasks({ limit: 1 }); // Juste pour les stats
-        setStats(response.stats);
-      } catch (error) {
-        console.error('Erreur lors du rafraîchissement des stats:', error);
-      }
-    };
-
-    // Rafraîchir les stats toutes les 30 secondes
-    const interval = setInterval(refreshStats, 30000);
-
-    // Rafraîchir immédiatement après hydratation
-    refreshStats();
-
-    return () => clearInterval(interval);
-  }, [isHydrated]);
+  const { stats, syncing } = useTasks(
+    { limit: 1 }, // Juste pour les stats
+    { tasks: [], stats: initialStats }
+  );

  return (
    <Header 
      title={title}
      subtitle={subtitle}
      stats={stats}
+      syncing={syncing}
    />
  );
 }
--- a/hooks/useTasks.ts
+++ b/hooks/useTasks.ts
@@ -15,12 +15,14 @@ interface UseTasksState {
  };
  loading: boolean;
  error: string | null;
+  syncing: boolean; // Pour indiquer les opérations optimistes en cours
 }

 interface UseTasksActions {
  refreshTasks: () => Promise<void>;
  createTask: (data: CreateTaskData) => Promise<Task | null>;
  updateTask: (data: UpdateTaskData) => Promise<Task | null>;
+  updateTaskOptimistic: (data: UpdateTaskData) => Promise<Task | null>;
  deleteTask: (taskId: string) => Promise<void>;
  setFilters: (filters: TaskFilters) => void;
 }
@@ -42,7 +44,8 @@ export function useTasks(
      completionRate: 0
    },
    loading: false,
-    error: null
+    error: null,
+    syncing: false
  });

  const [filters, setFilters] = useState<TaskFilters>(initialFilters || {});
@@ -117,6 +120,87 @@ export function useTasks(
    }
  }, [refreshTasks]);

+  /**
+   * Met à jour une tâche de manière optimiste (pour drag & drop)
+   */
+  const updateTaskOptimistic = useCallback(async (data: UpdateTaskData): Promise<Task | null> => {
+    const { taskId, ...updates } = data;
+    
+    // 1. Sauvegarder l'état actuel pour rollback
+    const currentTasks = state.tasks;
+    const taskToUpdate = currentTasks.find(t => t.id === taskId);
+    
+    if (!taskToUpdate) {
+      console.error('Tâche non trouvée pour mise à jour optimiste:', taskId);
+      return null;
+    }
+
+    // 2. Mise à jour optimiste immédiate de l'état local
+    const updatedTask = { ...taskToUpdate, ...updates };
+    const updatedTasks = currentTasks.map(task => 
+      task.id === taskId ? updatedTask : task
+    );
+
+    // Recalculer les stats
+    const newStats = {
+      total: updatedTasks.length,
+      completed: updatedTasks.filter(t => t.status === 'done').length,
+      inProgress: updatedTasks.filter(t => t.status === 'in_progress').length,
+      todo: updatedTasks.filter(t => t.status === 'todo').length,
+      completionRate: updatedTasks.length > 0 
+        ? Math.round((updatedTasks.filter(t => t.status === 'done').length / updatedTasks.length) * 100)
+        : 0
+    };
+
+    setState(prev => ({
+      ...prev,
+      tasks: updatedTasks,
+      stats: newStats,
+      error: null,
+      syncing: true // Indiquer qu'une synchronisation est en cours
+    }));
+
+    // 3. Appel API en arrière-plan
+    try {
+      const response = await tasksClient.updateTask(data);
+      
+      // Si l'API retourne des données différentes, on met à jour
+      if (response.data) {
+        setState(prev => ({
+          ...prev,
+          tasks: prev.tasks.map(task => 
+            task.id === taskId ? response.data : task
+          ),
+          syncing: false // Synchronisation terminée
+        }));
+      } else {
+        setState(prev => ({ ...prev, syncing: false }));
+      }
+      
+      return response.data;
+    } catch (error) {
+      // 4. Rollback en cas d'erreur
+      setState(prev => ({
+        ...prev,
+        tasks: currentTasks,
+        stats: {
+          total: currentTasks.length,
+          completed: currentTasks.filter(t => t.status === 'done').length,
+          inProgress: currentTasks.filter(t => t.status === 'in_progress').length,
+          todo: currentTasks.filter(t => t.status === 'todo').length,
+          completionRate: currentTasks.length > 0 
+            ? Math.round((currentTasks.filter(t => t.status === 'done').length / currentTasks.length) * 100)
+            : 0
+        },
+        error: error instanceof Error ? error.message : 'Erreur lors de la mise à jour',
+        syncing: false // Arrêter l'indicateur de synchronisation
+      }));
+      
+      console.error('Erreur lors de la mise à jour optimiste:', error);
+      return null;
+    }
+  }, [state.tasks]);
+
  /**
   * Supprime une tâche
   */
@@ -148,6 +232,7 @@ export function useTasks(
    refreshTasks,
    createTask,
    updateTask,
+    updateTaskOptimistic,
    deleteTask,
    setFilters
  };
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
      "name": "towercontrol-temp",
      "version": "0.1.0",
      "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
        "@prisma/client": "^6.16.1",
        "clsx": "^2.1.1",
        "date-fns": "^4.1.0",
@@ -46,6 +49,59 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/@emnapi/core": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
--- a/package.json
+++ b/package.json
@@ -9,6 +9,9 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
    "@prisma/client": "^6.16.1",
    "clsx": "^2.1.1",
    "date-fns": "^4.1.0",