feat: enhance Kanban components with visibleStatuses prop

- Added `visibleStatuses` prop to `KanbanBoard`, `PrioritySwimlanesBoard`, `SwimlanesBase`, and `SwimlanesBoard` for improved column visibility control.
- Updated `KanbanBoardContainer` to derive `visibleStatuses` from `useColumnVisibility`, allowing dynamic filtering of displayed statuses.
- Refactored `KanbanFilters` to accept `hiddenStatuses` and `onToggleStatusVisibility` props, enabling better integration with column visibility management.
- Cleaned up visibility logic across components to ensure consistent behavior and user experience.
This commit is contained in:
Julien Froidefond
2025-09-15 11:05:11 +02:00
parent 2f18c08b55
commit 1a21f9b88b
6 changed files with 47 additions and 20 deletions

View File

@@ -79,6 +79,7 @@ interface SwimlanesBaseProps {
onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
compactView?: boolean;
visibleStatuses?: TaskStatus[];
}
export function SwimlanesBase({
@@ -89,16 +90,17 @@ export function SwimlanesBase({
onEditTask,
onUpdateTitle,
onUpdateStatus,
compactView = false
compactView = false,
visibleStatuses
}: SwimlanesBaseProps) {
const [activeTask, setActiveTask] = useState<Task | null>(null);
const [collapsedSwimlanes, setCollapsedSwimlanes] = useState<Set<string>>(new Set());
// Gestion de la visibilité des colonnes
const { hiddenStatuses, toggleStatusVisibility, getVisibleStatuses } = useColumnVisibility();
const { getVisibleStatuses } = useColumnVisibility();
const allStatuses = getAllStatuses();
const visibleStatuses = getVisibleStatuses(allStatuses.map(s => ({ id: s.key })))
.map(s => s.id);
const statusesToShow = visibleStatuses ||
getVisibleStatuses(allStatuses.map(s => ({ id: s.key }))).map(s => s.id);
// Configuration des sensors pour le drag & drop
const sensors = useSensors(
@@ -161,9 +163,9 @@ export function SwimlanesBase({
{/* Headers des colonnes visibles */}
<div
className={`grid gap-4 px-6 py-4 ml-8`}
style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, minmax(0, 1fr))` }}
style={{ gridTemplateColumns: `repeat(${statusesToShow.length}, minmax(0, 1fr))` }}
>
{visibleStatuses.map(status => {
{statusesToShow.map(status => {
const statusConfig = allStatuses.find(s => s.key === status);
return (
<div key={status} className="text-center">
@@ -214,9 +216,9 @@ export function SwimlanesBase({
{!isCollapsed && (
<div
className={`grid gap-4 p-4`}
style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, minmax(0, 1fr))` }}
style={{ gridTemplateColumns: `repeat(${statusesToShow.length}, minmax(0, 1fr))` }}
>
{visibleStatuses.map(status => {
{statusesToShow.map(status => {
const statusTasks = swimlane.tasks.filter(task => task.status === status);
return (