687d02ff3a
- Added `ColumnHeader`, `EmptyState`, and `DropZone` components to improve the Kanban UI structure and user experience. - Refactored `KanbanColumn` to utilize the new components, enhancing readability and maintainability. - Updated `Card` component to support flexible props for shadow, border, and background, allowing for better customization across the application. - Adjusted `SwimlanesBase` to incorporate the new `ColumnHeader` for consistent column representation.
79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import { Task, TaskStatus } from '@/lib/types';
|
|
import { TaskCard } from './TaskCard';
|
|
import { QuickAddTask } from './QuickAddTask';
|
|
import { Card, CardHeader, CardContent, ColumnHeader, EmptyState, DropZone } from '@/components/ui';
|
|
import { CreateTaskData } from '@/clients/tasks-client';
|
|
import { useState } from 'react';
|
|
import { useDroppable } from '@dnd-kit/core';
|
|
import { getStatusConfig, getTechStyle } from '@/lib/status-config';
|
|
|
|
interface KanbanColumnProps {
|
|
id: TaskStatus;
|
|
tasks: Task[];
|
|
onCreateTask?: (data: CreateTaskData) => Promise<void>;
|
|
onEditTask?: (task: Task) => void;
|
|
compactView?: boolean;
|
|
}
|
|
|
|
export function KanbanColumn({ id, tasks, onCreateTask, onEditTask, compactView = false }: KanbanColumnProps) {
|
|
const [showQuickAdd, setShowQuickAdd] = useState(false);
|
|
|
|
// Configuration de la zone droppable
|
|
const { setNodeRef, isOver } = useDroppable({
|
|
id: id,
|
|
});
|
|
|
|
// Récupération de la config du statut
|
|
const statusConfig = getStatusConfig(id);
|
|
const style = getTechStyle(statusConfig.color);
|
|
|
|
return (
|
|
<div className="flex-shrink-0 w-72 md:w-72 lg:w-80 h-full">
|
|
<DropZone ref={setNodeRef} isOver={isOver}>
|
|
<Card variant="column" className="h-full flex flex-col">
|
|
<CardHeader className="pb-4">
|
|
<ColumnHeader
|
|
title={statusConfig.label}
|
|
icon={statusConfig.icon}
|
|
count={tasks.length}
|
|
color={style.accent.replace('text-', '')}
|
|
accentColor={style.accent}
|
|
borderColor={style.border}
|
|
showAddButton={!!onCreateTask}
|
|
onAddClick={() => setShowQuickAdd(true)}
|
|
/>
|
|
</CardHeader>
|
|
|
|
<CardContent className="flex-1 p-4 h-[calc(100vh-220px)] overflow-y-auto">
|
|
<div className="space-y-3">
|
|
{/* Quick Add Task */}
|
|
{showQuickAdd && onCreateTask && (
|
|
<QuickAddTask
|
|
status={id}
|
|
onSubmit={async (data) => {
|
|
await onCreateTask(data);
|
|
// Ne pas fermer automatiquement pour permettre la création en série
|
|
}}
|
|
onCancel={() => setShowQuickAdd(false)}
|
|
/>
|
|
)}
|
|
|
|
{tasks.length === 0 && !showQuickAdd ? (
|
|
<EmptyState
|
|
icon={statusConfig.icon}
|
|
accentColor={style.accent}
|
|
borderColor={style.border}
|
|
/>
|
|
) : (
|
|
tasks.map((task) => (
|
|
<TaskCard key={task.id} task={task} onEdit={onEditTask} compactView={compactView} />
|
|
))
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</DropZone>
|
|
</div>
|
|
);
|
|
}
|