feat: add compact view feature to Kanban components

- Introduced `compactView` prop in `KanbanBoard`, `KanbanColumn`, and `TaskCard` for a streamlined task display.
- Updated `KanbanFilters` to include a toggle for compact view, enhancing user experience.
- Adjusted rendering logic in `TaskCard` to conditionally display task details based on the compact view state.
This commit is contained in:
Julien Froidefond
2025-09-14 21:37:33 +02:00
parent c1844cfb71
commit ef3ee1bdbf
5 changed files with 118 additions and 6 deletions

View File

@@ -16,9 +16,10 @@ interface KanbanColumnProps {
onDeleteTask?: (taskId: string) => Promise<void>;
onEditTask?: (task: Task) => void;
onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
compactView?: boolean;
}
export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle }: KanbanColumnProps) {
export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, compactView = false }: KanbanColumnProps) {
const [showQuickAdd, setShowQuickAdd] = useState(false);
// Configuration de la zone droppable
@@ -125,7 +126,7 @@ export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTa
</div>
) : (
tasks.map((task) => (
<TaskCard key={task.id} task={task} onDelete={onDeleteTask} onEdit={onEditTask} onUpdateTitle={onUpdateTitle} />
<TaskCard key={task.id} task={task} onDelete={onDeleteTask} onEdit={onEditTask} onUpdateTitle={onUpdateTitle} compactView={compactView} />
))
)}
</div>