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:
@@ -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 (
|
||||
|
||||
Reference in New Issue
Block a user