1a21f9b88b
- 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.
88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { Task, TaskStatus } from '@/lib/types';
|
|
import { useMemo } from 'react';
|
|
import { useTasksContext } from '@/contexts/TasksContext';
|
|
import { SwimlanesBase, SwimlaneData } from './SwimlanesBase';
|
|
|
|
interface SwimlanesboardProps {
|
|
tasks: Task[];
|
|
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[];
|
|
}
|
|
|
|
export function SwimlanesBoard({
|
|
tasks,
|
|
onDeleteTask,
|
|
onEditTask,
|
|
onUpdateTitle,
|
|
onUpdateStatus,
|
|
compactView = false,
|
|
visibleStatuses
|
|
}: SwimlanesboardProps) {
|
|
const { tags: availableTags } = useTasksContext();
|
|
|
|
// Grouper les tâches par tags et créer les données de swimlanes
|
|
const swimlanesData = useMemo((): SwimlaneData[] => {
|
|
const grouped: { [tagName: string]: Task[] } = {};
|
|
|
|
// Ajouter une catégorie pour les tâches sans tags
|
|
grouped['Sans tag'] = [];
|
|
|
|
tasks.forEach(task => {
|
|
if (!task.tags || task.tags.length === 0) {
|
|
grouped['Sans tag'].push(task);
|
|
} else {
|
|
task.tags.forEach(tagName => {
|
|
if (!grouped[tagName]) {
|
|
grouped[tagName] = [];
|
|
}
|
|
grouped[tagName].push(task);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Convertir en format SwimlaneData et trier
|
|
return Object.entries(grouped)
|
|
.sort(([a, tasksA], [b, tasksB]) => {
|
|
// Mettre "Sans tag" à la fin
|
|
if (a === 'Sans tag') return 1;
|
|
if (b === 'Sans tag') return -1;
|
|
// Trier par nombre de tâches (décroissant)
|
|
return tasksB.length - tasksA.length;
|
|
})
|
|
.map(([tagName, tagTasks]) => {
|
|
// Obtenir la couleur du tag
|
|
const getTagColor = (name: string) => {
|
|
if (name === 'Sans tag') return '#64748b'; // slate-500
|
|
const tag = availableTags.find(t => t.name === name);
|
|
return tag?.color || '#64748b';
|
|
};
|
|
|
|
return {
|
|
key: tagName,
|
|
label: tagName,
|
|
color: getTagColor(tagName),
|
|
tasks: tagTasks
|
|
};
|
|
});
|
|
}, [tasks, availableTags]);
|
|
|
|
return (
|
|
<SwimlanesBase
|
|
tasks={tasks}
|
|
title="Swimlanes par Tag"
|
|
swimlanes={swimlanesData}
|
|
onDeleteTask={onDeleteTask}
|
|
onEditTask={onEditTask}
|
|
onUpdateTitle={onUpdateTitle}
|
|
onUpdateStatus={onUpdateStatus}
|
|
compactView={compactView}
|
|
visibleStatuses={visibleStatuses}
|
|
/>
|
|
);
|
|
} |