feat: reintroduce ColumnVisibilityToggle in KanbanFilters
- Moved `ColumnVisibilityToggle` from `Board` and `SwimlanesBase` to `KanbanFilters` for better accessibility. - Updated `KanbanFilters` to manage column visibility, enhancing user control over displayed statuses. - Cleaned up unused imports and adjusted layout for improved UI consistency.
This commit is contained in:
@@ -7,7 +7,6 @@ import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
|
|||||||
import { CreateTaskData } from '@/clients/tasks-client';
|
import { CreateTaskData } from '@/clients/tasks-client';
|
||||||
import { useMemo, useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
|
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
|
||||||
import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
|
|
||||||
import { getAllStatuses } from '@/lib/status-config';
|
import { getAllStatuses } from '@/lib/status-config';
|
||||||
import {
|
import {
|
||||||
DndContext,
|
DndContext,
|
||||||
@@ -129,14 +128,6 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Toggle de visibilité des colonnes */}
|
|
||||||
<div className="px-6 pb-4">
|
|
||||||
<ColumnVisibilityToggle
|
|
||||||
hiddenStatuses={hiddenStatuses}
|
|
||||||
onToggleStatus={toggleStatusVisibility}
|
|
||||||
tasks={tasks}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Board tech dark */}
|
{/* Board tech dark */}
|
||||||
<div className="flex-1 flex gap-6 overflow-x-auto p-6">
|
<div className="flex-1 flex gap-6 overflow-x-auto p-6">
|
||||||
|
|||||||
@@ -8,6 +8,8 @@ import { Input } from '@/components/ui/Input';
|
|||||||
import { useTasksContext } from '@/contexts/TasksContext';
|
import { useTasksContext } from '@/contexts/TasksContext';
|
||||||
import { getAllPriorities, getPriorityColorHex } from '@/lib/status-config';
|
import { getAllPriorities, getPriorityColorHex } from '@/lib/status-config';
|
||||||
import { SORT_OPTIONS } from '@/lib/sort-config';
|
import { SORT_OPTIONS } from '@/lib/sort-config';
|
||||||
|
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
|
||||||
|
import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
|
||||||
|
|
||||||
export interface KanbanFilters {
|
export interface KanbanFilters {
|
||||||
search?: string;
|
search?: string;
|
||||||
@@ -28,6 +30,7 @@ interface KanbanFiltersProps {
|
|||||||
|
|
||||||
export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps) {
|
export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps) {
|
||||||
const { tags: availableTags, regularTasks } = useTasksContext();
|
const { tags: availableTags, regularTasks } = useTasksContext();
|
||||||
|
const { hiddenStatuses, toggleStatusVisibility } = useColumnVisibility();
|
||||||
const [isExpanded, setIsExpanded] = useState(false);
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
const [isSortExpanded, setIsSortExpanded] = useState(false);
|
const [isSortExpanded, setIsSortExpanded] = useState(false);
|
||||||
const [isSwimlaneModeExpanded, setIsSwimlaneModeExpanded] = useState(false);
|
const [isSwimlaneModeExpanded, setIsSwimlaneModeExpanded] = useState(false);
|
||||||
@@ -385,6 +388,16 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Visibilité des colonnes */}
|
||||||
|
<div className="col-span-full border-t border-slate-700/50 pt-6 mt-4">
|
||||||
|
<ColumnVisibilityToggle
|
||||||
|
hiddenStatuses={hiddenStatuses}
|
||||||
|
onToggleStatus={toggleStatusVisibility}
|
||||||
|
tasks={regularTasks}
|
||||||
|
className="text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Résumé des filtres actifs */}
|
{/* Résumé des filtres actifs */}
|
||||||
{activeFiltersCount > 0 && (
|
{activeFiltersCount > 0 && (
|
||||||
<div className="bg-slate-800/30 rounded-lg p-3 border border-slate-700/50">
|
<div className="bg-slate-800/30 rounded-lg p-3 border border-slate-700/50">
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { Task, TaskStatus } from '@/lib/types';
|
|||||||
import { TaskCard } from './TaskCard';
|
import { TaskCard } from './TaskCard';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
|
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
|
||||||
import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
|
|
||||||
import { getAllStatuses } from '@/lib/status-config';
|
import { getAllStatuses } from '@/lib/status-config';
|
||||||
import {
|
import {
|
||||||
DndContext,
|
DndContext,
|
||||||
@@ -158,18 +157,10 @@ export function SwimlanesBase({
|
|||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Headers des colonnes avec boutons toggle */}
|
|
||||||
<div className="flex items-center justify-between px-6 pb-4">
|
|
||||||
<ColumnVisibilityToggle
|
|
||||||
hiddenStatuses={hiddenStatuses}
|
|
||||||
onToggleStatus={toggleStatusVisibility}
|
|
||||||
tasks={tasks}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Headers des colonnes visibles */}
|
{/* Headers des colonnes visibles */}
|
||||||
<div
|
<div
|
||||||
className={`grid gap-4 px-6 pb-4 ml-8`}
|
className={`grid gap-4 px-6 py-4 ml-8`}
|
||||||
style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, minmax(0, 1fr))` }}
|
style={{ gridTemplateColumns: `repeat(${visibleStatuses.length}, minmax(0, 1fr))` }}
|
||||||
>
|
>
|
||||||
{visibleStatuses.map(status => {
|
{visibleStatuses.map(status => {
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import { Badge } from '@/components/ui/Badge';
|
|||||||
import { TagDisplay } from '@/components/ui/TagDisplay';
|
import { TagDisplay } from '@/components/ui/TagDisplay';
|
||||||
import { useTasksContext } from '@/contexts/TasksContext';
|
import { useTasksContext } from '@/contexts/TasksContext';
|
||||||
import { useDraggable } from '@dnd-kit/core';
|
import { useDraggable } from '@dnd-kit/core';
|
||||||
import { getPriorityConfig } from '@/lib/status-config';
|
import { getPriorityConfig, getPriorityColorHex } from '@/lib/status-config';
|
||||||
|
|
||||||
interface TaskCardProps {
|
interface TaskCardProps {
|
||||||
task: Task;
|
task: Task;
|
||||||
@@ -167,7 +167,10 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Indicateur de priorité compact */}
|
{/* Indicateur de priorité compact */}
|
||||||
<div className={`w-1.5 h-1.5 rounded-full bg-${getPriorityConfig(task.priority).color}-400`} />
|
<div
|
||||||
|
className="w-1.5 h-1.5 rounded-full"
|
||||||
|
style={{ backgroundColor: getPriorityColorHex(getPriorityConfig(task.priority).color) }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -248,7 +251,13 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Indicateur de priorité tech */}
|
{/* Indicateur de priorité tech */}
|
||||||
<div className={`w-2 h-2 rounded-full animate-pulse bg-${getPriorityConfig(task.priority).color}-400 shadow-${getPriorityConfig(task.priority).color}-400/50 shadow-sm`} />
|
<div
|
||||||
|
className="w-2 h-2 rounded-full animate-pulse shadow-sm"
|
||||||
|
style={{
|
||||||
|
backgroundColor: getPriorityColorHex(getPriorityConfig(task.priority).color),
|
||||||
|
boxShadow: `0 0 4px ${getPriorityColorHex(getPriorityConfig(task.priority).color)}50`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user