Files
towercontrol/components/kanban/PrioritySwimlanesBoard.tsx
Julien Froidefond dce11e0569 feat: add task creation functionality to Kanban components
- Integrated `onCreateTask` prop into `PrioritySwimlanesBoard`, `SwimlanesBoard`, and `SwimlanesBase` for task creation support.
- Implemented quick add feature in `DroppableColumn` for streamlined task addition.
- Added modal for complete task creation in `SwimlanesBase`, enhancing user experience.
- Updated relevant components to handle loading state during task creation.
2025-09-15 11:16:32 +02:00

75 lines
2.2 KiB
TypeScript

'use client';
import { Task, TaskStatus } from '@/lib/types';
import { CreateTaskData } from '@/clients/tasks-client';
import { useMemo } from 'react';
import { getAllPriorities } from '@/lib/status-config';
import { SwimlanesBase, SwimlaneData } from './SwimlanesBase';
interface PrioritySwimlanesoardProps {
tasks: Task[];
onCreateTask?: (data: CreateTaskData) => Promise<Task | null>;
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;
visibleStatuses?: TaskStatus[];
loading?: boolean;
}
export function PrioritySwimlanesBoard({
tasks,
onCreateTask,
onDeleteTask,
onEditTask,
onUpdateTitle,
onUpdateStatus,
compactView = false,
visibleStatuses,
loading = false
}: PrioritySwimlanesoardProps) {
// Grouper les tâches par priorités et créer les données de swimlanes
const swimlanesData = useMemo((): SwimlaneData[] => {
const grouped: { [priorityKey: string]: Task[] } = {};
// Initialiser avec toutes les priorités
getAllPriorities().forEach(priority => {
grouped[priority.key] = [];
});
tasks.forEach(task => {
if (grouped[task.priority]) {
grouped[task.priority].push(task);
}
});
// Convertir en format SwimlaneData en respectant l'ordre de priorité
return getAllPriorities()
.sort((a, b) => b.order - a.order) // Ordre décroissant - plus importantes en haut
.map(priority => ({
key: priority.key,
label: priority.label,
icon: priority.icon,
color: priority.color,
tasks: grouped[priority.key] || []
}));
}, [tasks]);
return (
<SwimlanesBase
tasks={tasks}
title="Swimlanes par Priorité"
swimlanes={swimlanesData}
onCreateTask={onCreateTask}
onDeleteTask={onDeleteTask}
onEditTask={onEditTask}
onUpdateTitle={onUpdateTitle}
onUpdateStatus={onUpdateStatus}
compactView={compactView}
visibleStatuses={visibleStatuses}
loading={loading}
/>
);
}