feat: add swimlane mode selection to KanbanFilters and BoardContainer
- Introduced `swimlanesMode` in `KanbanFilters` to toggle between 'tags' and 'priority' swimlanes. - Updated `KanbanBoardContainer` to conditionally render `PrioritySwimlanesBoard` based on the selected mode. - Enhanced UI to include dropdown for swimlane mode selection, improving user experience in task organization. - Adjusted `TasksContext` to persist swimlane mode preferences, ensuring consistent behavior across sessions.
This commit is contained in:
65
components/kanban/PrioritySwimlanesBoard.tsx
Normal file
65
components/kanban/PrioritySwimlanesBoard.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
'use client';
|
||||
|
||||
import { Task, TaskStatus } from '@/lib/types';
|
||||
import { useMemo } from 'react';
|
||||
import { getAllPriorities } from '@/lib/status-config';
|
||||
import { SwimlanesBase, SwimlaneData } from './SwimlanesBase';
|
||||
|
||||
interface PrioritySwimlanesoardProps {
|
||||
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;
|
||||
}
|
||||
|
||||
export function PrioritySwimlanesBoard({
|
||||
tasks,
|
||||
onDeleteTask,
|
||||
onEditTask,
|
||||
onUpdateTitle,
|
||||
onUpdateStatus,
|
||||
compactView = false
|
||||
}: PrioritySwimlanesoardProps) {
|
||||
|
||||
// Grouper les tâches par priorités et créer les données de swimlanes
|
||||
const swimlanesData = useMemo((): SwimlaneData[] => {
|
||||
const grouped: { [priorityKey: string]: Task[] } = {};
|
||||
|
||||
// Initialiser avec toutes les priorités
|
||||
getAllPriorities().forEach(priority => {
|
||||
grouped[priority.key] = [];
|
||||
});
|
||||
|
||||
tasks.forEach(task => {
|
||||
if (grouped[task.priority]) {
|
||||
grouped[task.priority].push(task);
|
||||
}
|
||||
});
|
||||
|
||||
// Convertir en format SwimlaneData en respectant l'ordre de priorité
|
||||
return getAllPriorities()
|
||||
.sort((a, b) => b.order - a.order) // Ordre décroissant - plus importantes en haut
|
||||
.map(priority => ({
|
||||
key: priority.key,
|
||||
label: priority.label,
|
||||
icon: priority.icon,
|
||||
color: priority.color,
|
||||
tasks: grouped[priority.key] || []
|
||||
}));
|
||||
}, [tasks]);
|
||||
|
||||
return (
|
||||
<SwimlanesBase
|
||||
tasks={tasks}
|
||||
title="Swimlanes par Priorité"
|
||||
swimlanes={swimlanesData}
|
||||
onDeleteTask={onDeleteTask}
|
||||
onEditTask={onEditTask}
|
||||
onUpdateTitle={onUpdateTitle}
|
||||
onUpdateStatus={onUpdateStatus}
|
||||
compactView={compactView}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user