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:
Julien Froidefond
2025-09-15 10:17:36 +02:00
parent 631da57ea2
commit 05cd099cf4
7 changed files with 495 additions and 288 deletions

View 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}
/>
);
}