feat: complete tag management and UI integration

- Marked multiple tasks as completed in TODO.md related to tag management features. - Replaced manual tag input with `TagInput` component in `CreateTaskForm`, `EditTaskForm`, and `QuickAddTask` for better UX. - Updated `TaskCard` to display tags using `TagDisplay` with color support. - Enhanced `TasksService` to manage task-tag relationships with CRUD operations. - Integrated tag management into the global context for better accessibility across components.
2025-09-14 16:44:22 +02:00
parent edbd82e8ac
commit c5a7d16425
27 changed files with 2055 additions and 224 deletions
--- a/src/app/api/tags/[id]/route.ts
+++ b/src/app/api/tags/[id]/route.ts
@@ -0,0 +1,144 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { tagsService } from '@/services/tags';
+
+/**
+ * GET /api/tags/[id] - Récupère un tag par son ID
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const tag = await tagsService.getTagById(params.id);
+
+    if (!tag) {
+      return NextResponse.json(
+        { error: 'Tag non trouvé' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json({
+      data: tag,
+      message: 'Tag récupéré avec succès'
+    });
+
+  } catch (error) {
+    console.error('Erreur lors de la récupération du tag:', error);
+    return NextResponse.json(
+      { 
+        error: 'Erreur lors de la récupération du tag',
+        message: error instanceof Error ? error.message : 'Erreur inconnue'
+      },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * PATCH /api/tags/[id] - Met à jour un tag
+ */
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const body = await request.json();
+    const { name, color } = body;
+
+    // Validation
+    if (name !== undefined && (typeof name !== 'string' || !name.trim())) {
+      return NextResponse.json(
+        { error: 'Le nom du tag doit être une chaîne non vide' },
+        { status: 400 }
+      );
+    }
+
+    if (color !== undefined && (typeof color !== 'string' || !/^#[0-9A-F]{6}$/i.test(color))) {
+      return NextResponse.json(
+        { error: 'La couleur doit être au format hexadécimal (#RRGGBB)' },
+        { status: 400 }
+      );
+    }
+
+    const tag = await tagsService.updateTag(params.id, { name, color });
+
+    if (!tag) {
+      return NextResponse.json(
+        { error: 'Tag non trouvé' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json({
+      data: tag,
+      message: 'Tag mis à jour avec succès'
+    });
+
+  } catch (error) {
+    console.error('Erreur lors de la mise à jour du tag:', error);
+    
+    if (error instanceof Error && error.message.includes('non trouvé')) {
+      return NextResponse.json(
+        { error: error.message },
+        { status: 404 }
+      );
+    }
+
+    if (error instanceof Error && error.message.includes('existe déjà')) {
+      return NextResponse.json(
+        { error: error.message },
+        { status: 409 }
+      );
+    }
+
+    return NextResponse.json(
+      { 
+        error: 'Erreur lors de la mise à jour du tag',
+        message: error instanceof Error ? error.message : 'Erreur inconnue'
+      },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * DELETE /api/tags/[id] - Supprime un tag
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    await tagsService.deleteTag(params.id);
+
+    return NextResponse.json({
+      message: 'Tag supprimé avec succès'
+    });
+
+  } catch (error) {
+    console.error('Erreur lors de la suppression du tag:', error);
+    
+    if (error instanceof Error && error.message.includes('non trouvé')) {
+      return NextResponse.json(
+        { error: error.message },
+        { status: 404 }
+      );
+    }
+
+    if (error instanceof Error && error.message.includes('utilisé par')) {
+      return NextResponse.json(
+        { error: error.message },
+        { status: 409 }
+      );
+    }
+
+    return NextResponse.json(
+      { 
+        error: 'Erreur lors de la suppression du tag',
+        message: error instanceof Error ? error.message : 'Erreur inconnue'
+      },
+      { status: 500 }
+    );
+  }
+}
--- a/src/app/api/tags/route.ts
+++ b/src/app/api/tags/route.ts
@@ -0,0 +1,100 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { tagsService } from '@/services/tags';
+
+/**
+ * GET /api/tags - Récupère tous les tags ou recherche par query
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const query = searchParams.get('q');
+    const popular = searchParams.get('popular');
+    const limit = parseInt(searchParams.get('limit') || '10');
+
+    let tags;
+
+    if (popular === 'true') {
+      // Récupérer les tags les plus utilisés
+      tags = await tagsService.getPopularTags(limit);
+    } else if (query) {
+      // Recherche par nom (pour autocomplete)
+      tags = await tagsService.searchTags(query, limit);
+    } else {
+      // Récupérer tous les tags
+      tags = await tagsService.getTags();
+    }
+
+    return NextResponse.json({
+      data: tags,
+      message: 'Tags récupérés avec succès'
+    });
+
+  } catch (error) {
+    console.error('Erreur lors de la récupération des tags:', error);
+    return NextResponse.json(
+      { 
+        error: 'Erreur lors de la récupération des tags',
+        message: error instanceof Error ? error.message : 'Erreur inconnue'
+      },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * POST /api/tags - Crée un nouveau tag
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { name, color } = body;
+
+    // Validation
+    if (!name || typeof name !== 'string') {
+      return NextResponse.json(
+        { error: 'Le nom du tag est requis' },
+        { status: 400 }
+      );
+    }
+
+    if (!color || typeof color !== 'string') {
+      return NextResponse.json(
+        { error: 'La couleur du tag est requise' },
+        { status: 400 }
+      );
+    }
+
+    // Validation du format couleur (hex)
+    if (!/^#[0-9A-F]{6}$/i.test(color)) {
+      return NextResponse.json(
+        { error: 'La couleur doit être au format hexadécimal (#RRGGBB)' },
+        { status: 400 }
+      );
+    }
+
+    const tag = await tagsService.createTag({ name, color });
+
+    return NextResponse.json({
+      data: tag,
+      message: 'Tag créé avec succès'
+    }, { status: 201 });
+
+  } catch (error) {
+    console.error('Erreur lors de la création du tag:', error);
+    
+    if (error instanceof Error && error.message.includes('existe déjà')) {
+      return NextResponse.json(
+        { error: error.message },
+        { status: 409 }
+      );
+    }
+
+    return NextResponse.json(
+      { 
+        error: 'Erreur lors de la création du tag',
+        message: error instanceof Error ? error.message : 'Erreur inconnue'
+      },
+      { status: 500 }
+    );
+  }
+}