1597f0fea1
- Integrated `useColumnVisibility` hook for managing column visibility states. - Added `ColumnVisibilityToggle` component to both `KanbanBoard` and `SwimlanesBoard` for user control over visible columns. - Updated rendering logic to filter and display only visible columns, enhancing user experience and task organization.
36 lines
909 B
TypeScript
36 lines
909 B
TypeScript
import { useState } from 'react';
|
|
import { TaskStatus } from '@/lib/types';
|
|
|
|
export function useColumnVisibility(initialHidden: TaskStatus[] = []) {
|
|
const [hiddenStatuses, setHiddenStatuses] = useState<Set<TaskStatus>>(
|
|
new Set(initialHidden)
|
|
);
|
|
|
|
const toggleStatusVisibility = (status: TaskStatus) => {
|
|
setHiddenStatuses(prev => {
|
|
const newSet = new Set(prev);
|
|
if (newSet.has(status)) {
|
|
newSet.delete(status);
|
|
} else {
|
|
newSet.add(status);
|
|
}
|
|
return newSet;
|
|
});
|
|
};
|
|
|
|
const getVisibleStatuses = <T extends { id: TaskStatus }>(statuses: T[]): T[] => {
|
|
return statuses.filter(status => !hiddenStatuses.has(status.id));
|
|
};
|
|
|
|
const isStatusVisible = (status: TaskStatus): boolean => {
|
|
return !hiddenStatuses.has(status);
|
|
};
|
|
|
|
return {
|
|
hiddenStatuses,
|
|
toggleStatusVisibility,
|
|
getVisibleStatuses,
|
|
isStatusVisible
|
|
};
|
|
}
|