Files
towercontrol/components/kanban/BoardContainer.tsx
Julien Froidefond 1a21f9b88b 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.
2025-09-15 11:05:11 +02:00

129 lines
3.9 KiB
TypeScript

'use client';
import { useState } from 'react';
import { KanbanBoard } from './Board';
import { SwimlanesBoard } from './SwimlanesBoard';
import { PrioritySwimlanesBoard } from './PrioritySwimlanesBoard';
import { ObjectivesBoard } from './ObjectivesBoard';
import { KanbanFilters } from './KanbanFilters';
import { EditTaskForm } from '@/components/forms/EditTaskForm';
import { useTasksContext } from '@/contexts/TasksContext';
import { Task, TaskStatus } from '@/lib/types';
import { UpdateTaskData } from '@/clients/tasks-client';
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
import { getAllStatuses } from '@/lib/status-config';
export function KanbanBoardContainer() {
const {
filteredTasks,
pinnedTasks,
loading,
createTask,
deleteTask,
updateTask,
updateTaskOptimistic,
kanbanFilters,
setKanbanFilters,
tags
} = useTasksContext();
const { hiddenStatuses, toggleStatusVisibility, getVisibleStatuses } = useColumnVisibility();
const allStatuses = getAllStatuses();
const visibleStatuses = getVisibleStatuses(allStatuses.map(s => ({ id: s.key }))).map(s => s.id);
const [editingTask, setEditingTask] = useState<Task | null>(null);
const handleEditTask = (task: Task) => {
setEditingTask(task);
};
const handleUpdateTask = async (data: UpdateTaskData) => {
await updateTask(data);
setEditingTask(null);
};
const handleUpdateTitle = async (taskId: string, newTitle: string) => {
await updateTask({
taskId,
title: newTitle
});
};
const handleUpdateStatus = async (taskId: string, newStatus: TaskStatus) => {
// Utiliser la mise à jour optimiste pour le drag & drop
await updateTaskOptimistic({
taskId,
status: newStatus
});
};
// Obtenir le nom du tag épinglé pour l'affichage
const pinnedTagName = tags.find(tag => tag.isPinned)?.name;
return (
<>
<KanbanFilters
filters={kanbanFilters}
onFiltersChange={setKanbanFilters}
hiddenStatuses={hiddenStatuses}
onToggleStatusVisibility={toggleStatusVisibility}
/>
{/* Section Objectifs Principaux */}
{pinnedTasks.length > 0 && (
<ObjectivesBoard
tasks={pinnedTasks}
onDeleteTask={deleteTask}
onEditTask={handleEditTask}
onUpdateTitle={handleUpdateTitle}
compactView={kanbanFilters.compactView}
pinnedTagName={pinnedTagName}
/>
)}
{kanbanFilters.swimlanesByTags ? (
kanbanFilters.swimlanesMode === 'priority' ? (
<PrioritySwimlanesBoard
tasks={filteredTasks}
onDeleteTask={deleteTask}
onEditTask={handleEditTask}
onUpdateTitle={handleUpdateTitle}
onUpdateStatus={handleUpdateStatus}
compactView={kanbanFilters.compactView}
visibleStatuses={visibleStatuses}
/>
) : (
<SwimlanesBoard
tasks={filteredTasks}
onDeleteTask={deleteTask}
onEditTask={handleEditTask}
onUpdateTitle={handleUpdateTitle}
onUpdateStatus={handleUpdateStatus}
compactView={kanbanFilters.compactView}
visibleStatuses={visibleStatuses}
/>
)
) : (
<KanbanBoard
tasks={filteredTasks}
onCreateTask={createTask}
onDeleteTask={deleteTask}
onEditTask={handleEditTask}
onUpdateTitle={handleUpdateTitle}
onUpdateStatus={handleUpdateStatus}
loading={loading}
compactView={kanbanFilters.compactView}
visibleStatuses={visibleStatuses}
/>
)}
<EditTaskForm
isOpen={!!editingTask}
onClose={() => setEditingTask(null)}
onSubmit={handleUpdateTask}
task={editingTask}
loading={loading}
/>
</>
);
}