julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add pinned tag functionality and UI enhancements

Browse Source 
- 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
2025-09-14 22:23:55 +02:00
parent c4f68bb00c
commit a589c0cc2f
10 changed files with 309 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/forms/TagForm.tsx
View File

@@ -33,7 +33,8 @@ const PRESET_COLORS = [
export function TagForm({ isOpen, onClose, onSubmit, tag, loading = false }: TagFormProps) {
const [formData, setFormData] = useState({
name: '',
color: '#3B82F6'
color: '#3B82F6',
isPinned: false
});
const [errors, setErrors] = useState<string[]>([]);
@@ -42,12 +43,14 @@ export function TagForm({ isOpen, onClose, onSubmit, tag, loading = false }: Tag
if (tag) {
setFormData({
name: tag.name,
color: tag.color
color: tag.color,
isPinned: tag.isPinned || false
});
} else {
setFormData({
name: '',
color: TagsClient.generateRandomColor()
color: TagsClient.generateRandomColor(),
isPinned: false
});
}
setErrors([]);
@@ -166,6 +169,30 @@ export function TagForm({ isOpen, onClose, onSubmit, tag, loading = false }: Tag
</div>
</div>
{/* Objectif principal */}
<div className="space-y-2">
<label className="block text-sm font-mono font-medium text-slate-300 uppercase tracking-wider">
Type de tag
</label>
<div className="flex items-center gap-3">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={formData.isPinned}
onChange={(e) => setFormData(prev => ({ ...prev, isPinned: e.target.checked }))}
disabled={loading}
className="w-4 h-4 rounded border border-slate-600 bg-slate-800 text-purple-600 focus:ring-purple-500 focus:ring-2 disabled:cursor-not-allowed"
/>
<span className="text-sm text-slate-300">
🎯 Objectif principal
</span>
</label>
</div>
<p className="text-xs text-slate-400">
Les tâches avec ce tag apparaîtront dans la section "Objectifs Principaux" au-dessus du Kanban
</p>
</div>
{/* Erreurs */}
{errors.length > 0 && (
<div className="bg-red-900/20 border border-red-500/30 rounded-lg p-3">

20
components/kanban/BoardContainer.tsx
View File

@@ -3,6 +3,7 @@
import { useState } from 'react';
import { KanbanBoard } from './Board';
import { SwimlanesBoard } from './SwimlanesBoard';
import { ObjectivesBoard } from './ObjectivesBoard';
import { KanbanFilters } from './KanbanFilters';
import { EditTaskForm } from '@/components/forms/EditTaskForm';
import { useTasksContext } from '@/contexts/TasksContext';
@@ -12,13 +13,15 @@ import { UpdateTaskData } from '@/clients/tasks-client';
export function KanbanBoardContainer() {
const {
filteredTasks,
pinnedTasks,
loading,
createTask,
deleteTask,
updateTask,
updateTaskOptimistic,
kanbanFilters,
setKanbanFilters
setKanbanFilters,
tags
} = useTasksContext();
const [editingTask, setEditingTask] = useState<Task | null>(null);
@@ -47,6 +50,9 @@ export function KanbanBoardContainer() {
});
};
// Obtenir le nom du tag épinglé pour l'affichage
const pinnedTagName = tags.find(tag => tag.isPinned)?.name;
return (
<>
<KanbanFilters
@@ -54,6 +60,18 @@ export function KanbanBoardContainer() {
onFiltersChange={setKanbanFilters}
/>
{/* Section Objectifs Principaux */}
{pinnedTasks.length > 0 && (
<ObjectivesBoard
tasks={pinnedTasks}
onDeleteTask={deleteTask}
onEditTask={handleEditTask}
onUpdateTitle={handleUpdateTitle}
compactView={kanbanFilters.compactView}
pinnedTagName={pinnedTagName}
/>
)}
{kanbanFilters.swimlanesByTags ? (
<SwimlanesBoard
tasks={filteredTasks}

8
components/kanban/KanbanFilters.tsx
View File

@@ -13,6 +13,7 @@ export interface KanbanFilters {
showCompleted?: boolean;
compactView?: boolean;
swimlanesByTags?: boolean;
pinnedTag?: string; // Tag pour les objectifs principaux
}
interface KanbanFiltersProps {
@@ -66,6 +67,13 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
});
};
const handlePinnedTagChange = (tagName: string | undefined) => {
onFiltersChange({
...filters,
pinnedTag: tagName
});
};
const handleClearFilters = () => {
onFiltersChange({});
};

178
components/kanban/ObjectivesBoard.tsx Normal file
View 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>
);
}

1
lib/types.ts
View File

@@ -29,6 +29,7 @@ export interface Tag {
id: string;
name: string;
color: string;
isPinned?: boolean; // Tag pour objectifs principaux
}
// Interface pour les logs de synchronisation

15
prisma/migrations/20250914200338_add_pinned_tags/migration.sql Normal file
View File

@@ -0,0 +1,15 @@
-- RedefineTables
PRAGMA defer_foreign_keys=ON;
PRAGMA foreign_keys=OFF;
CREATE TABLE "new_tags" (
"id" TEXT NOT NULL PRIMARY KEY,
"name" TEXT NOT NULL,
"color" TEXT NOT NULL DEFAULT '#6b7280',
"isPinned" BOOLEAN NOT NULL DEFAULT false
);
INSERT INTO "new_tags" ("color", "id", "name") SELECT "color", "id", "name" FROM "tags";
DROP TABLE "tags";
ALTER TABLE "new_tags" RENAME TO "tags";
CREATE UNIQUE INDEX "tags_name_key" ON "tags"("name");
PRAGMA foreign_keys=ON;
PRAGMA defer_foreign_keys=OFF;

9
prisma/schema.prisma
View File

@@ -36,10 +36,11 @@ model Task {
}
model Tag {
id String @id @default(cuid())
name String @unique
color String @default("#6b7280")
taskTags TaskTag[]
id String @id @default(cuid())
name String @unique
color String @default("#6b7280")
isPinned Boolean @default(false) // Tag pour objectifs principaux
taskTags TaskTag[]
@@map("tags")
}

26
services/tags.ts
View File

@@ -24,6 +24,7 @@ export const tagsService = {
id: tag.id,
name: tag.name,
color: tag.color,
isPinned: tag.isPinned,
usage: tag._count.taskTags
}));
},
@@ -41,7 +42,8 @@ export const tagsService = {
return {
id: tag.id,
name: tag.name,
color: tag.color
color: tag.color,
isPinned: tag.isPinned
};
},
@@ -62,14 +64,15 @@ export const tagsService = {
return {
id: tag.id,
name: tag.name,
color: tag.color
color: tag.color,
isPinned: tag.isPinned
};
},
/**
* Crée un nouveau tag
*/
async createTag(data: { name: string; color: string }): Promise<Tag> {
async createTag(data: { name: string; color: string; isPinned?: boolean }): Promise<Tag> {
// Vérifier si le tag existe déjà
const existing = await this.getTagByName(data.name);
if (existing) {
@@ -79,21 +82,23 @@ export const tagsService = {
const tag = await prisma.tag.create({
data: {
name: data.name.trim(),
color: data.color
color: data.color,
isPinned: data.isPinned || false
}
});
return {
id: tag.id,
name: tag.name,
color: tag.color
color: tag.color,
isPinned: tag.isPinned
};
},
/**
* Met à jour un tag
*/
async updateTag(id: string, data: { name?: string; color?: string }): Promise<Tag | null> {
async updateTag(id: string, data: { name?: string; color?: string; isPinned?: boolean }): Promise<Tag | null> {
// Vérifier que le tag existe
const existing = await this.getTagById(id);
if (!existing) {
@@ -115,6 +120,9 @@ export const tagsService = {
if (data.color !== undefined) {
updateData.color = data.color;
}
if (data.isPinned !== undefined) {
updateData.isPinned = data.isPinned;
}
if (Object.keys(updateData).length === 0) {
return existing;
@@ -128,7 +136,8 @@ export const tagsService = {
return {
id: tag.id,
name: tag.name,
color: tag.color
color: tag.color,
isPinned: tag.isPinned
};
},
@@ -197,7 +206,8 @@ export const tagsService = {
return tags.map(tag => ({
id: tag.id,
name: tag.name,
color: tag.color
color: tag.color,
isPinned: tag.isPinned
}));
},

17
src/app/api/tags/[id]/route.ts
View File

@@ -6,10 +6,11 @@ import { tagsService } from '@/services/tags';
*/
export async function GET(
request: NextRequest,
{ params }: { params: { id: string } }
{ params }: { params: Promise<{ id: string }> }
) {
try {
const tag = await tagsService.getTagById(params.id);
const { id } = await params;
const tag = await tagsService.getTagById(id);
if (!tag) {
return NextResponse.json(
@@ -40,11 +41,12 @@ export async function GET(
*/
export async function PATCH(
request: NextRequest,
{ params }: { params: { id: string } }
{ params }: { params: Promise<{ id: string }> }
) {
try {
const { id } = await params;
const body = await request.json();
const { name, color } = body;
const { name, color, isPinned } = body;
// Validation
if (name !== undefined && (typeof name !== 'string' || !name.trim())) {
@@ -61,7 +63,7 @@ export async function PATCH(
);
}
const tag = await tagsService.updateTag(params.id, { name, color });
const tag = await tagsService.updateTag(id, { name, color, isPinned });
if (!tag) {
return NextResponse.json(
@@ -107,10 +109,11 @@ export async function PATCH(
*/
export async function DELETE(
request: NextRequest,
{ params }: { params: { id: string } }
{ params }: { params: Promise<{ id: string }> }
) {
try {
await tagsService.deleteTag(params.id);
const { id } = await params;
await tagsService.deleteTag(id);
return NextResponse.json({
message: 'Tag supprimé avec succès'

29
src/contexts/TasksContext.tsx
View File

@@ -29,6 +29,7 @@ interface TasksContextType {
kanbanFilters: KanbanFilters;
setKanbanFilters: (filters: KanbanFilters) => void;
filteredTasks: Task[];
pinnedTasks: Task[]; // Tâches avec tags épinglés (objectifs)
// Tags
tags: Tag[];
tagsLoading: boolean;
@@ -54,9 +55,28 @@ export function TasksProvider({ children, initialTasks, initialStats }: TasksPro
// État des filtres Kanban
const [kanbanFilters, setKanbanFilters] = useState<KanbanFilters>({});
// Filtrage des tâches
// Séparer les tâches épinglées (objectifs) des autres
const { pinnedTasks, regularTasks } = useMemo(() => {
const pinnedTagNames = tags.filter(tag => tag.isPinned).map(tag => tag.name);
const pinned: Task[] = [];
const regular: Task[] = [];
tasksState.tasks.forEach(task => {
const hasPinnedTag = task.tags?.some(tagName => pinnedTagNames.includes(tagName));
if (hasPinnedTag) {
pinned.push(task);
} else {
regular.push(task);
}
});
return { pinnedTasks: pinned, regularTasks: regular };
}, [tasksState.tasks, tags]);
// Filtrage des tâches régulières (pas les épinglées)
const filteredTasks = useMemo(() => {
let filtered = tasksState.tasks;
let filtered = regularTasks;
// Filtre par recherche
if (kanbanFilters.search) {
@@ -85,7 +105,7 @@ export function TasksProvider({ children, initialTasks, initialStats }: TasksPro
}
return filtered;
}, [tasksState.tasks, kanbanFilters]);
}, [regularTasks, kanbanFilters]);
const contextValue: TasksContextType = {
...tasksState,
@@ -94,7 +114,8 @@ export function TasksProvider({ children, initialTasks, initialStats }: TasksPro
tagsError,
kanbanFilters,
setKanbanFilters,
filteredTasks
filteredTasks,
pinnedTasks
};
return (