- 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.
129 lines
3.9 KiB
TypeScript
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}
|
|
/>
|
|
</>
|
|
);
|
|
}
|