feat: add pinned tag functionality and UI enhancements
- Introduced `isPinned` property to the `Tag` model for marking main objectives. - Updated `TagForm` to include a checkbox for setting tags as pinned, enhancing user interaction. - Enhanced `KanbanBoardContainer` to display pinned tasks in a dedicated `ObjectivesBoard`, improving task visibility. - Modified `KanbanFilters` to support filtering by pinned tags, streamlining task management. - Adjusted `TasksContext` to separate pinned tasks from regular tasks for better organization.
This commit is contained in:
Julien Froidefond
178
components/kanban/ObjectivesBoard.tsx
Normal file
178
components/kanban/ObjectivesBoard.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Task } from '@/lib/types';
|
||||
import { TaskCard } from './TaskCard';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
|
||||
interface ObjectivesBoardProps {
|
||||
tasks: Task[];
|
||||
onDeleteTask?: (taskId: string) => Promise<void>;
|
||||
onEditTask?: (task: Task) => void;
|
||||
onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
|
||||
compactView?: boolean;
|
||||
pinnedTagName?: string;
|
||||
}
|
||||
|
||||
export function ObjectivesBoard({
|
||||
tasks,
|
||||
onDeleteTask,
|
||||
onEditTask,
|
||||
onUpdateTitle,
|
||||
compactView = false,
|
||||
pinnedTagName = "Objectifs"
|
||||
}: ObjectivesBoardProps) {
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
|
||||
if (tasks.length === 0) {
|
||||
return null; // Ne rien afficher s'il n'y a pas d'objectifs
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-r from-purple-900/20 to-blue-900/20 border-b border-purple-500/30">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<Card className="bg-slate-800/50 border-purple-500/30 shadow-purple-500/10 shadow-lg">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||
className="flex items-center gap-3 hover:bg-purple-900/20 rounded-lg p-2 -m-2 transition-colors group"
|
||||
>
|
||||
<div className="w-3 h-3 bg-purple-400 rounded-full animate-pulse shadow-purple-400/50 shadow-lg"></div>
|
||||
<h2 className="text-lg font-mono font-bold text-purple-300 uppercase tracking-wider">
|
||||
🎯 Objectifs Principaux
|
||||
</h2>
|
||||
{pinnedTagName && (
|
||||
<Badge variant="outline" className="border-purple-400/50 text-purple-300">
|
||||
{pinnedTagName}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* Flèche de collapse */}
|
||||
<svg
|
||||
className={`w-4 h-4 text-purple-400 transition-transform duration-200 ${
|
||||
isCollapsed ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="primary" size="sm" className="bg-purple-600">
|
||||
{String(tasks.length).padStart(2, '0')}
|
||||
</Badge>
|
||||
|
||||
{/* Bouton collapse séparé pour mobile */}
|
||||
<button
|
||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||
className="lg:hidden p-1 hover:bg-purple-900/20 rounded transition-colors"
|
||||
aria-label={isCollapsed ? "Développer" : "Réduire"}
|
||||
>
|
||||
<svg
|
||||
className={`w-4 h-4 text-purple-400 transition-transform duration-200 ${
|
||||
isCollapsed ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{!isCollapsed && (
|
||||
<CardContent className="pt-0">
|
||||
{(() => {
|
||||
// Séparer les tâches par statut
|
||||
const activeTasks = tasks.filter(task => task.status === 'todo' || task.status === 'in_progress');
|
||||
const completedTasks = tasks.filter(task => task.status === 'done');
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Colonne En cours / À faire */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-purple-500/20">
|
||||
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
|
||||
<h3 className="text-sm font-mono font-medium text-blue-300 uppercase tracking-wider">
|
||||
En cours / À faire
|
||||
</h3>
|
||||
<div className="flex-1"></div>
|
||||
<span className="text-xs text-slate-400 bg-slate-800/50 px-2 py-1 rounded">
|
||||
{activeTasks.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{activeTasks.length === 0 ? (
|
||||
<div className="text-center py-8 text-slate-400 text-sm">
|
||||
<div className="text-2xl mb-2">🎯</div>
|
||||
Aucun objectif actif
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{activeTasks.map(task => (
|
||||
<div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200">
|
||||
<TaskCard
|
||||
task={task}
|
||||
onDelete={onDeleteTask}
|
||||
onEdit={onEditTask}
|
||||
onUpdateTitle={onUpdateTitle}
|
||||
compactView={compactView}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Colonne Terminé */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-purple-500/20">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
||||
<h3 className="text-sm font-mono font-medium text-green-300 uppercase tracking-wider">
|
||||
Terminé
|
||||
</h3>
|
||||
<div className="flex-1"></div>
|
||||
<span className="text-xs text-slate-400 bg-slate-800/50 px-2 py-1 rounded">
|
||||
{completedTasks.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{completedTasks.length === 0 ? (
|
||||
<div className="text-center py-8 text-slate-400 text-sm">
|
||||
<div className="text-2xl mb-2">✅</div>
|
||||
Aucun objectif terminé
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{completedTasks.map(task => (
|
||||
<div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200 opacity-75">
|
||||
<TaskCard
|
||||
task={task}
|
||||
onDelete={onDeleteTask}
|
||||
onEdit={onEditTask}
|
||||
onUpdateTitle={onUpdateTitle}
|
||||
compactView={compactView}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user