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 { useMemo, useState } from 'react';
|
||||
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
|
||||
import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
|
||||
import { getAllStatuses } from '@/lib/status-config';
|
||||
import {
|
||||
DndContext,
|
||||
@@ -129,14 +128,6 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Toggle de visibilité des colonnes */}
|
||||
<div className="px-6 pb-4">
|
||||
<ColumnVisibilityToggle
|
||||
hiddenStatuses={hiddenStatuses}
|
||||
onToggleStatus={toggleStatusVisibility}
|
||||
tasks={tasks}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Board tech dark */}
|
||||
<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 { getAllPriorities, getPriorityColorHex } from '@/lib/status-config';
|
||||
import { SORT_OPTIONS } from '@/lib/sort-config';
|
||||
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
|
||||
import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
|
||||
|
||||
export interface KanbanFilters {
|
||||
search?: string;
|
||||
@@ -28,6 +30,7 @@ interface KanbanFiltersProps {
|
||||
|
||||
export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps) {
|
||||
const { tags: availableTags, regularTasks } = useTasksContext();
|
||||
const { hiddenStatuses, toggleStatusVisibility } = useColumnVisibility();
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [isSortExpanded, setIsSortExpanded] = useState(false);
|
||||
const [isSwimlaneModeExpanded, setIsSwimlaneModeExpanded] = useState(false);
|
||||
@@ -385,6 +388,16 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
|
||||
)}
|
||||
</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 */}
|
||||
{activeFiltersCount > 0 && (
|
||||
<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 { useState } from 'react';
|
||||
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
|
||||
import { ColumnVisibilityToggle } from './ColumnVisibilityToggle';
|
||||
import { getAllStatuses } from '@/lib/status-config';
|
||||
import {
|
||||
DndContext,
|
||||
@@ -158,18 +157,10 @@ export function SwimlanesBase({
|
||||
</h2>
|
||||
</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 */}
|
||||
<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))` }}
|
||||
>
|
||||
{visibleStatuses.map(status => {
|
||||
|
||||
@@ -7,7 +7,7 @@ import { Badge } from '@/components/ui/Badge';
|
||||
import { TagDisplay } from '@/components/ui/TagDisplay';
|
||||
import { useTasksContext } from '@/contexts/TasksContext';
|
||||
import { useDraggable } from '@dnd-kit/core';
|
||||
import { getPriorityConfig } from '@/lib/status-config';
|
||||
import { getPriorityConfig, getPriorityColorHex } from '@/lib/status-config';
|
||||
|
||||
interface TaskCardProps {
|
||||
task: Task;
|
||||
@@ -167,7 +167,10 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
</Card>
|
||||
@@ -248,7 +251,13 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user