feat: add swimlanes view toggle to Kanban board

- Introduced `swimlanesByTags` filter in `KanbanFilters` to toggle between swimlanes and standard Kanban view.
- Updated `BoardContainer` to conditionally render `SwimlanesBoard` or `KanbanBoard` based on the selected filter.
- Enhanced UI with a button to switch views, improving task organization and user experience.
This commit is contained in:
Julien Froidefond
2025-09-14 21:53:42 +02:00
parent 7927b0aec2
commit c4f68bb00c
3 changed files with 208 additions and 10 deletions

View File

@@ -12,6 +12,7 @@ export interface KanbanFilters {
priorities?: TaskPriority[];
showCompleted?: boolean;
compactView?: boolean;
swimlanesByTags?: boolean;
}
interface KanbanFiltersProps {
@@ -58,6 +59,13 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
});
};
const handleSwimlanesToggle = () => {
onFiltersChange({
...filters,
swimlanesByTags: !filters.swimlanesByTags
});
};
const handleClearFilters = () => {
onFiltersChange({});
};
@@ -86,6 +94,28 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
/>
</div>
{/* Bouton swimlanes par tags */}
<Button
variant={filters.swimlanesByTags ? "primary" : "ghost"}
onClick={handleSwimlanesToggle}
className="flex items-center gap-2"
title={filters.swimlanesByTags ? "Vue normale" : "Lignes par tags"}
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
{filters.swimlanesByTags ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
)}
</svg>
{filters.swimlanesByTags ? 'Normal' : 'Swimlanes'}
</Button>
{/* Bouton vue compacte */}
<Button
variant={filters.compactView ? "primary" : "ghost"}