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.
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { TaskStatus } from '@/lib/types';
|
|
|
|
interface ColumnVisibilityToggleProps {
|
|
statuses: { id: TaskStatus; title: string; color: string }[];
|
|
hiddenStatuses: Set<TaskStatus>;
|
|
onToggleStatus: (status: TaskStatus) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function ColumnVisibilityToggle({
|
|
statuses,
|
|
hiddenStatuses,
|
|
onToggleStatus,
|
|
className = ""
|
|
}: ColumnVisibilityToggleProps) {
|
|
return (
|
|
<div className={`flex items-center gap-2 ${className}`}>
|
|
<span className="text-sm font-mono font-medium text-slate-400">
|
|
Colonnes :
|
|
</span>
|
|
{statuses.map(status => (
|
|
<button
|
|
key={status.id}
|
|
onClick={() => onToggleStatus(status.id)}
|
|
className={`px-3 py-1 rounded-lg text-xs font-mono font-medium transition-colors ${
|
|
hiddenStatuses.has(status.id)
|
|
? 'bg-slate-700/50 text-slate-500 hover:bg-slate-700'
|
|
: 'bg-blue-600/20 text-blue-300 border border-blue-500/30 hover:bg-blue-600/30'
|
|
}`}
|
|
title={hiddenStatuses.has(status.id) ? `Afficher ${status.title}` : `Masquer ${status.title}`}
|
|
>
|
|
{hiddenStatuses.has(status.id) ? '👁️🗨️' : '👁️'} {status.title}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|