diff --git a/src/components/kanban/KanbanFilters.tsx b/src/components/kanban/KanbanFilters.tsx index e360266..dac6644 100644 --- a/src/components/kanban/KanbanFilters.tsx +++ b/src/components/kanban/KanbanFilters.tsx @@ -6,13 +6,15 @@ import { TaskPriority, TaskStatus } from '@/lib/types'; import { Button } from '@/components/ui/Button'; import { Input } from '@/components/ui/Input'; import { useTasksContext } from '@/contexts/TasksContext'; -import { getAllPriorities, getPriorityColorHex } from '@/lib/status-config'; import { SORT_OPTIONS } from '@/lib/sort-config'; import { useUserPreferences } from '@/contexts/UserPreferencesContext'; -import { ColumnVisibilityToggle } from './ColumnVisibilityToggle'; import { useIsMobile } from '@/hooks/useIsMobile'; import { JiraFilters } from './filters/JiraFilters'; import { TfsFilters } from './filters/TfsFilters'; +import { PriorityFilters } from './filters/PriorityFilters'; +import { TagFilters } from './filters/TagFilters'; +import { GeneralFilters } from './filters/GeneralFilters'; +import { ColumnFilters } from './filters/ColumnFilters'; export interface KanbanFilters { search?: string; @@ -44,7 +46,7 @@ interface KanbanFiltersProps { } export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsHiddenStatuses, onToggleStatusVisibility }: KanbanFiltersProps) { - const { tags: availableTags, regularTasks, activeFiltersCount } = useTasksContext(); + const { regularTasks, activeFiltersCount } = useTasksContext(); const { preferences, toggleColumnVisibility } = useUserPreferences(); // Utiliser les props si disponibles, sinon utiliser le context @@ -197,41 +199,6 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH }); }; - - // Calculer les compteurs pour les priorités - const priorityCounts = useMemo(() => { - const counts: Record = {}; - getAllPriorities().forEach(priority => { - counts[priority.key] = regularTasks.filter(task => task.priority === priority.key).length; - }); - return counts; - }, [regularTasks]); - - // Calculer les compteurs pour les tags - const tagCounts = useMemo(() => { - const counts: Record = {}; - availableTags.forEach(tag => { - counts[tag.name] = regularTasks.filter(task => task.tags?.includes(tag.name)).length; - }); - return counts; - }, [regularTasks, availableTags]); - - const priorityOptions = getAllPriorities().map(priorityConfig => ({ - value: priorityConfig.key, - label: priorityConfig.label, - color: priorityConfig.color, - count: priorityCounts[priorityConfig.key] || 0 - })); - - // Trier les tags par nombre d'utilisation (décroissant) - const sortedTags = useMemo(() => { - return [...availableTags].sort((a, b) => { - const countA = tagCounts[a.name] || 0; - const countB = tagCounts[b.name] || 0; - return countB - countA; // Décroissant - }); - }, [availableTags, tagCounts]); - return (
@@ -339,110 +306,47 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH {/* Filtres étendus */}
- {/* Grille responsive pour les filtres principaux */} -
- {/* Filtres par priorité */} -
- -
- {priorityOptions.filter(priority => priority.count > 0).map((priority) => ( - - ))} -
+ {/* Layout optimisé : 3 colonnes avec Tags très large à droite */} +
+ {/* Colonne 1 : Priorités + Généraux */} +
+ + +
- {/* Filtres par tags */} - {availableTags.length > 0 && ( -
- -
- {sortedTags.filter(tag => (tagCounts[tag.name] || 0) > 0).map((tag) => ( - - ))} -
-
- )} -
+ {/* Colonne 2 : Tags - Espace restant maximum */} + - {/* Filtres généraux */} -
- -
- -
-
- - {/* Filtres Jira */} - - - {/* Filtres TFS */} - - - {/* Visibilité des colonnes */} -
- +
+ + {/* Deuxième ligne : TFS et Jira côte à côte */} +
+ {/* Filtres TFS */} + + + {/* Filtres Jira */} +
diff --git a/src/components/kanban/filters/ColumnFilters.tsx b/src/components/kanban/filters/ColumnFilters.tsx new file mode 100644 index 0000000..17abdac --- /dev/null +++ b/src/components/kanban/filters/ColumnFilters.tsx @@ -0,0 +1,39 @@ +'use client'; + +import { TaskStatus, Task } from '@/lib/types'; +import { getAllStatuses } from '@/lib/status-config'; + +interface ColumnFiltersProps { + hiddenStatuses: Set; + onToggleStatus: (status: TaskStatus) => void; + tasks: Task[]; +} + +export function ColumnFilters({ hiddenStatuses, onToggleStatus, tasks }: ColumnFiltersProps) { + return ( +
+ +
+ {getAllStatuses().map(statusConfig => { + const statusCount = tasks.filter(task => task.status === statusConfig.key).length; + return ( + + ); + })} +
+
+ ); +} diff --git a/src/components/kanban/filters/GeneralFilters.tsx b/src/components/kanban/filters/GeneralFilters.tsx new file mode 100644 index 0000000..98532d6 --- /dev/null +++ b/src/components/kanban/filters/GeneralFilters.tsx @@ -0,0 +1,37 @@ +'use client'; + +interface GeneralFiltersProps { + showWithDueDate?: boolean; + onDueDateFilterToggle: () => void; +} + +export function GeneralFilters({ showWithDueDate = false, onDueDateFilterToggle }: GeneralFiltersProps) { + return ( +
+ +
+ +
+
+ ); +} diff --git a/src/components/kanban/filters/PriorityFilters.tsx b/src/components/kanban/filters/PriorityFilters.tsx new file mode 100644 index 0000000..38d0524 --- /dev/null +++ b/src/components/kanban/filters/PriorityFilters.tsx @@ -0,0 +1,58 @@ +'use client'; + +import { useMemo } from 'react'; +import { TaskPriority } from '@/lib/types'; +import { useTasksContext } from '@/contexts/TasksContext'; +import { getAllPriorities, getPriorityColorHex } from '@/lib/status-config'; + +interface PriorityFiltersProps { + selectedPriorities?: TaskPriority[]; + onPriorityToggle: (priority: TaskPriority) => void; +} + +export function PriorityFilters({ selectedPriorities = [], onPriorityToggle }: PriorityFiltersProps) { + const { regularTasks } = useTasksContext(); + + // Calculer les compteurs pour les priorités + const priorityCounts = useMemo(() => { + const counts: Record = {}; + getAllPriorities().forEach(priority => { + counts[priority.key] = regularTasks.filter(task => task.priority === priority.key).length; + }); + return counts; + }, [regularTasks]); + + const priorityOptions = getAllPriorities().map(priorityConfig => ({ + value: priorityConfig.key, + label: priorityConfig.label, + color: priorityConfig.color, + count: priorityCounts[priorityConfig.key] || 0 + })); + + return ( +
+ +
+ {priorityOptions.filter(priority => priority.count > 0).map((priority) => ( + + ))} +
+
+ ); +} diff --git a/src/components/kanban/filters/TagFilters.tsx b/src/components/kanban/filters/TagFilters.tsx new file mode 100644 index 0000000..d447ae5 --- /dev/null +++ b/src/components/kanban/filters/TagFilters.tsx @@ -0,0 +1,62 @@ +'use client'; + +import { useMemo } from 'react'; +import { useTasksContext } from '@/contexts/TasksContext'; + +interface TagFiltersProps { + selectedTags?: string[]; + onTagToggle: (tagName: string) => void; +} + +export function TagFilters({ selectedTags = [], onTagToggle }: TagFiltersProps) { + const { tags: availableTags, regularTasks } = useTasksContext(); + + // Calculer les compteurs pour les tags + const tagCounts = useMemo(() => { + const counts: Record = {}; + availableTags.forEach(tag => { + counts[tag.name] = regularTasks.filter(task => task.tags?.includes(tag.name)).length; + }); + return counts; + }, [regularTasks, availableTags]); + + // Trier les tags par nombre d'utilisation (décroissant) + const sortedTags = useMemo(() => { + return [...availableTags].sort((a, b) => { + const countA = tagCounts[a.name] || 0; + const countB = tagCounts[b.name] || 0; + return countB - countA; // Décroissant + }); + }, [availableTags, tagCounts]); + + if (availableTags.length === 0) { + return null; + } + + return ( +
+ +
+ {sortedTags.filter(tag => (tagCounts[tag.name] || 0) > 0).map((tag) => ( + + ))} +
+
+ ); +}