feat: implement drag-and-drop functionality in ObjectivesBoard
- Added DnD context and handlers for task reordering and status updates. - Introduced DroppableColumn component for better task organization by status. - Enhanced task card interaction with visual feedback during drag events. - Updated KanbanBoardContainer to support new status update prop.
This commit is contained in:
Julien Froidefond
@@ -1,78 +1,175 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useObjectivesCollapse } from '@/hooks/useObjectivesCollapse';
|
||||
import { Task } from '@/lib/types';
|
||||
import { Task, TaskStatus } from '@/lib/types';
|
||||
import { TaskCard } from './TaskCard';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import {
|
||||
DndContext,
|
||||
DragEndEvent,
|
||||
DragOverlay,
|
||||
DragStartEvent,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
SortableContext,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { useDroppable } from '@dnd-kit/core';
|
||||
|
||||
interface ObjectivesBoardProps {
|
||||
tasks: Task[];
|
||||
onDeleteTask?: (taskId: string) => Promise<void>;
|
||||
onEditTask?: (task: Task) => void;
|
||||
onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
|
||||
onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
|
||||
compactView?: boolean;
|
||||
pinnedTagName?: string;
|
||||
}
|
||||
|
||||
// Composant pour les colonnes droppables
|
||||
function DroppableColumn({
|
||||
status,
|
||||
tasks,
|
||||
title,
|
||||
color,
|
||||
icon,
|
||||
onDeleteTask,
|
||||
onEditTask,
|
||||
onUpdateTitle,
|
||||
compactView
|
||||
}: {
|
||||
status: TaskStatus;
|
||||
tasks: Task[];
|
||||
title: string;
|
||||
color: string;
|
||||
icon: string;
|
||||
onDeleteTask?: (taskId: string) => Promise<void>;
|
||||
onEditTask?: (task: Task) => void;
|
||||
onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
|
||||
compactView: boolean;
|
||||
}) {
|
||||
const { setNodeRef } = useDroppable({
|
||||
id: status,
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} className="space-y-3">
|
||||
<div className="flex items-center gap-2 pt-2 pb-2 border-b border-[var(--accent)]/20">
|
||||
<div className={`w-2 h-2 rounded-full ${color}`}></div>
|
||||
<h3 className={`text-sm font-mono font-medium uppercase tracking-wider ${color.replace('bg-', 'text-').replace('400', '300')}`}>
|
||||
{title}
|
||||
</h3>
|
||||
<div className="flex-1"></div>
|
||||
<span className="text-xs text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||
{tasks.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{tasks.length === 0 ? (
|
||||
<div className="text-center py-8 text-[var(--muted-foreground)] text-sm">
|
||||
<div className="text-2xl mb-2">{icon}</div>
|
||||
Aucun objectif {title.toLowerCase()}
|
||||
</div>
|
||||
) : (
|
||||
<SortableContext items={tasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
|
||||
<div className="space-y-3">
|
||||
{tasks.map(task => (
|
||||
<div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200">
|
||||
<TaskCard
|
||||
task={task}
|
||||
onDelete={onDeleteTask}
|
||||
onEdit={onEditTask}
|
||||
onUpdateTitle={onUpdateTitle}
|
||||
compactView={compactView}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ObjectivesBoard({
|
||||
tasks,
|
||||
onDeleteTask,
|
||||
onEditTask,
|
||||
onUpdateTitle,
|
||||
onUpdateStatus,
|
||||
compactView = false,
|
||||
pinnedTagName = "Objectifs"
|
||||
}: ObjectivesBoardProps) {
|
||||
const { isCollapsed, toggleCollapse } = useObjectivesCollapse();
|
||||
const [activeTask, setActiveTask] = useState<Task | null>(null);
|
||||
|
||||
// Configuration des sensors pour le drag & drop
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 8, // Évite les clics accidentels
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// Handlers pour le drag & drop
|
||||
const handleDragStart = (event: DragStartEvent) => {
|
||||
const task = tasks.find(t => t.id === event.active.id);
|
||||
setActiveTask(task || null);
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
// Vérifier si le statut a changé
|
||||
const task = tasks.find(t => t.id === taskId);
|
||||
if (task && task.status !== newStatus) {
|
||||
await onUpdateStatus(taskId, newStatus);
|
||||
}
|
||||
};
|
||||
|
||||
if (tasks.length === 0) {
|
||||
return null; // Ne rien afficher s'il n'y a pas d'objectifs
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-[var(--card)]/30 border-b border-[var(--accent)]/30">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<Card variant="column" className="border-[var(--accent)]/30 shadow-[var(--accent)]/10">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={toggleCollapse}
|
||||
className="flex items-center gap-3 hover:bg-[var(--accent)]/20 rounded-lg p-2 -m-2 transition-colors group"
|
||||
>
|
||||
<div className="w-3 h-3 bg-[var(--accent)] rounded-full animate-pulse shadow-[var(--accent)]/50 shadow-lg"></div>
|
||||
<h2 className="text-lg font-mono font-bold text-[var(--accent)] uppercase tracking-wider">
|
||||
🎯 Objectifs Principaux
|
||||
</h2>
|
||||
{pinnedTagName && (
|
||||
<Badge variant="outline" className="border-[var(--accent)]/50 text-[var(--accent)]">
|
||||
{pinnedTagName}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* Flèche de collapse */}
|
||||
<svg
|
||||
className={`w-4 h-4 text-[var(--accent)] transition-transform duration-200 ${
|
||||
isCollapsed ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="primary" size="sm" className="bg-[var(--accent)]">
|
||||
{String(tasks.length).padStart(2, '0')}
|
||||
</Badge>
|
||||
|
||||
{/* Bouton collapse séparé pour mobile */}
|
||||
<DndContext
|
||||
id="objectives-board"
|
||||
sensors={sensors}
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<div className="bg-[var(--card)]/30 border-b border-[var(--accent)]/30">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<Card variant="column" className="border-[var(--accent)]/30 shadow-[var(--accent)]/10">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={toggleCollapse}
|
||||
className="lg:hidden p-1 hover:bg-[var(--accent)]/20 rounded transition-colors"
|
||||
aria-label={isCollapsed ? "Développer" : "Réduire"}
|
||||
className="flex items-center gap-3 hover:bg-[var(--accent)]/20 rounded-lg p-2 -m-2 transition-colors group"
|
||||
>
|
||||
<div className="w-3 h-3 bg-[var(--accent)] rounded-full animate-pulse shadow-[var(--accent)]/50 shadow-lg"></div>
|
||||
<h2 className="text-lg font-mono font-bold text-[var(--accent)] uppercase tracking-wider">
|
||||
🎯 Objectifs Principaux
|
||||
</h2>
|
||||
{pinnedTagName && (
|
||||
<Badge variant="outline" className="border-[var(--accent)]/50 text-[var(--accent)]">
|
||||
{pinnedTagName}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* Flèche de collapse */}
|
||||
<svg
|
||||
className={`w-4 h-4 text-[var(--accent)] transition-transform duration-200 ${
|
||||
isCollapsed ? 'rotate-180' : ''
|
||||
@@ -84,95 +181,101 @@ export function ObjectivesBoard({
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{!isCollapsed && (
|
||||
<CardContent className="pt-0">
|
||||
{(() => {
|
||||
// Séparer les tâches par statut
|
||||
const activeTasks = tasks.filter(task => task.status === 'todo' || task.status === 'in_progress');
|
||||
const completedTasks = tasks.filter(task => task.status === 'done');
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Colonne En cours / À faire */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 pt-2 pb-2 border-b border-[var(--accent)]/20">
|
||||
<div className="w-2 h-2 bg-[var(--primary)] rounded-full"></div>
|
||||
<h3 className="text-sm font-mono font-medium text-[var(--primary)] uppercase tracking-wider">
|
||||
En cours / À faire
|
||||
</h3>
|
||||
<div className="flex-1"></div>
|
||||
<span className="text-xs text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||
{activeTasks.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{activeTasks.length === 0 ? (
|
||||
<div className="text-center py-8 text-[var(--muted-foreground)] text-sm">
|
||||
<div className="text-2xl mb-2">🎯</div>
|
||||
Aucun objectif actif
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{activeTasks.map(task => (
|
||||
<div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200">
|
||||
<TaskCard
|
||||
task={task}
|
||||
onDelete={onDeleteTask}
|
||||
onEdit={onEditTask}
|
||||
onUpdateTitle={onUpdateTitle}
|
||||
compactView={compactView}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Colonne Terminé */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 pt-2 pb-2 border-b border-[var(--accent)]/20">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
||||
<h3 className="text-sm font-mono font-medium text-green-300 uppercase tracking-wider">
|
||||
Terminé
|
||||
</h3>
|
||||
<div className="flex-1"></div>
|
||||
<span className="text-xs text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||
{completedTasks.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{completedTasks.length === 0 ? (
|
||||
<div className="text-center py-8 text-[var(--muted-foreground)] text-sm">
|
||||
<div className="text-2xl mb-2">✅</div>
|
||||
Aucun objectif terminé
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{completedTasks.map(task => (
|
||||
<div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200 opacity-75">
|
||||
<TaskCard
|
||||
task={task}
|
||||
onDelete={onDeleteTask}
|
||||
onEdit={onEditTask}
|
||||
onUpdateTitle={onUpdateTitle}
|
||||
compactView={compactView}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="primary" size="sm" className="bg-[var(--accent)]">
|
||||
{String(tasks.length).padStart(2, '0')}
|
||||
</Badge>
|
||||
|
||||
{/* Bouton collapse séparé pour mobile */}
|
||||
<button
|
||||
onClick={toggleCollapse}
|
||||
className="lg:hidden p-1 hover:bg-[var(--accent)]/20 rounded transition-colors"
|
||||
aria-label={isCollapsed ? "Développer" : "Réduire"}
|
||||
>
|
||||
<svg
|
||||
className={`w-4 h-4 text-[var(--accent)] transition-transform duration-200 ${
|
||||
isCollapsed ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{!isCollapsed && (
|
||||
<CardContent className="pt-0">
|
||||
{(() => {
|
||||
// Séparer les tâches par statut
|
||||
const inProgressTasks = tasks.filter(task => task.status === 'in_progress');
|
||||
const todoTasks = tasks.filter(task => task.status === 'todo' || task.status === 'backlog');
|
||||
const completedTasks = tasks.filter(task => task.status === 'done');
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<DroppableColumn
|
||||
status="todo"
|
||||
tasks={todoTasks}
|
||||
title="À faire"
|
||||
color="bg-[var(--primary)]"
|
||||
icon="📋"
|
||||
onDeleteTask={onDeleteTask}
|
||||
onEditTask={onEditTask}
|
||||
onUpdateTitle={onUpdateTitle}
|
||||
compactView={compactView}
|
||||
/>
|
||||
|
||||
<DroppableColumn
|
||||
status="in_progress"
|
||||
tasks={inProgressTasks}
|
||||
title="En cours"
|
||||
color="bg-yellow-400"
|
||||
icon="🔄"
|
||||
onDeleteTask={onDeleteTask}
|
||||
onEditTask={onEditTask}
|
||||
onUpdateTitle={onUpdateTitle}
|
||||
compactView={compactView}
|
||||
/>
|
||||
|
||||
<DroppableColumn
|
||||
status="done"
|
||||
tasks={completedTasks}
|
||||
title="Terminé"
|
||||
color="bg-green-400"
|
||||
icon="✅"
|
||||
onDeleteTask={onDeleteTask}
|
||||
onEditTask={onEditTask}
|
||||
onUpdateTitle={onUpdateTitle}
|
||||
compactView={compactView}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlay pour le drag & drop */}
|
||||
<DragOverlay>
|
||||
{activeTask ? (
|
||||
<div className="rotate-3 opacity-90">
|
||||
<TaskCard
|
||||
task={activeTask}
|
||||
onDelete={undefined}
|
||||
onEdit={undefined}
|
||||
onUpdateTitle={undefined}
|
||||
compactView={compactView}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user