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/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,54 +91,99 @@ 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 (
-    <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">
-        <div className="flex items-center gap-3">
-          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
-          <h2 className="text-lg font-mono font-bold text-slate-100 uppercase tracking-wider">
-            Kanban Board
-          </h2>
+    <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">
+          <div className="flex items-center gap-3">
+            <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+            <h2 className="text-lg font-mono font-bold text-slate-100 uppercase tracking-wider">
+              Kanban Board
+            </h2>
+          </div>
+          
+          {onCreateTask && (
+            <Button
+              variant="primary"
+              onClick={() => setIsCreateModalOpen(true)}
+              disabled={loading}
+            >
+              + Nouvelle tâche
+            </Button>
+          )}
        </div>
-        
+
+        {/* Board tech dark */}
+        <div className="flex-1 flex gap-6 overflow-x-auto p-6">
+          {columns.map((column) => (
+            <KanbanColumn
+              key={column.id}
+              id={column.id}
+              title={column.title}
+              color={column.color}
+              tasks={column.tasks}
+              onCreateTask={onCreateTask ? handleCreateTask : undefined}
+              onDeleteTask={onDeleteTask}
+              onEditTask={onEditTask}
+              onUpdateTitle={onUpdateTitle}
+            />
+          ))}
+        </div>
+
+        {/* Modal de création */}
        {onCreateTask && (
-          <Button
-            variant="primary"
-            onClick={() => setIsCreateModalOpen(true)}
-            disabled={loading}
-          >
-            + Nouvelle tâche
-          </Button>
+          <CreateTaskForm
+            isOpen={isCreateModalOpen}
+            onClose={() => setIsCreateModalOpen(false)}
+            onSubmit={handleCreateTask}
+            loading={loading}
+          />
        )}
      </div>

-      {/* Board tech dark */}
-      <div className="flex-1 flex gap-6 overflow-x-auto p-6">
-        {columns.map((column) => (
-          <KanbanColumn
-            key={column.id}
-            id={column.id}
-            title={column.title}
-            color={column.color}
-            tasks={column.tasks}
-            onCreateTask={onCreateTask ? handleCreateTask : undefined}
-            onDeleteTask={onDeleteTask}
-            onEditTask={onEditTask}
-            onUpdateTitle={onUpdateTitle}
-          />
-        ))}
-      </div>
-
-      {/* Modal de création */}
-      {onCreateTask && (
-        <CreateTaskForm
-          isOpen={isCreateModalOpen}
-          onClose={() => setIsCreateModalOpen(false)}
-          onSubmit={handleCreateTask}
-          loading={loading}
-        />
-      )}
-    </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 && (