From 64cc665f78cfa42296d19ec003a6353c3f771d0f Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sun, 14 Sep 2025 08:56:41 +0200
Subject: [PATCH] feat: add task editing and title updating features -
 Introduced `onEditTask` and `onUpdateTitle` props in `KanbanBoard`,
 `KanbanColumn`, and `TaskCard` components for enhanced task management. -
 Implemented editing functionality in `TaskCard` to allow users to update task
 titles directly. - Added `EditTaskForm` in `KanbanBoardContainer` to handle
 task editing state and submission. - Updated `TasksService` to ensure all
 task properties can be modified during updates.

---
 components/forms/EditTaskForm.tsx    | 259 +++++++++++++++++++++++++++
 components/kanban/Board.tsx          |   6 +-
 components/kanban/BoardContainer.tsx |  47 ++++-
 components/kanban/Column.tsx         |   6 +-
 components/kanban/TaskCard.tsx       |  86 ++++++++-
 services/tasks.ts                    |   6 +-
 6 files changed, 394 insertions(+), 16 deletions(-)
 create mode 100644 components/forms/EditTaskForm.tsx

diff --git a/components/forms/EditTaskForm.tsx b/components/forms/EditTaskForm.tsx
new file mode 100644
index 0000000..5dc2634
--- /dev/null
+++ b/components/forms/EditTaskForm.tsx
@@ -0,0 +1,259 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+import { Task, TaskPriority, TaskStatus } from '@/lib/types';
+import { UpdateTaskData } from '@/clients/tasks-client';
+
+interface EditTaskFormProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: UpdateTaskData) => Promise<void>;
+  task: Task | null;
+  loading?: boolean;
+}
+
+export function EditTaskForm({ isOpen, onClose, onSubmit, task, loading = false }: EditTaskFormProps) {
+  const [formData, setFormData] = useState<Omit<UpdateTaskData, 'taskId'>>({
+    title: '',
+    description: '',
+    status: 'todo' as TaskStatus,
+    priority: 'medium' as TaskPriority,
+    tags: [],
+    dueDate: undefined
+  });
+
+  const [tagInput, setTagInput] = useState('');
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  // Pré-remplir le formulaire quand la tâche change
+  useEffect(() => {
+    if (task) {
+      setFormData({
+        title: task.title,
+        description: task.description || '',
+        status: task.status,
+        priority: task.priority,
+        tags: task.tags || [],
+        dueDate: task.dueDate ? new Date(task.dueDate) : undefined
+      });
+    }
+  }, [task]);
+
+  const validateForm = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.title?.trim()) {
+      newErrors.title = 'Le titre est requis';
+    }
+
+    if (formData.title && formData.title.length > 200) {
+      newErrors.title = 'Le titre ne peut pas dépasser 200 caractères';
+    }
+
+    if (formData.description && formData.description.length > 1000) {
+      newErrors.description = 'La description ne peut pas dépasser 1000 caractères';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!validateForm() || !task) return;
+
+    try {
+      await onSubmit({
+        taskId: task.id,
+        ...formData
+      });
+      handleClose();
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour:', error);
+    }
+  };
+
+  const handleClose = () => {
+    setTagInput('');
+    setErrors({});
+    onClose();
+  };
+
+  const addTag = () => {
+    const tag = tagInput.trim();
+    if (tag && !formData.tags?.includes(tag)) {
+      setFormData(prev => ({
+        ...prev,
+        tags: [...(prev.tags || []), tag]
+      }));
+      setTagInput('');
+    }
+  };
+
+  const removeTag = (tagToRemove: string) => {
+    setFormData(prev => ({
+      ...prev,
+      tags: prev.tags?.filter((tag: string) => tag !== tagToRemove) || []
+    }));
+  };
+
+  const handleTagKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      addTag();
+    }
+  };
+
+  if (!task) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} title="Modifier la tâche" size="lg">
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Titre */}
+        <Input
+          label="Titre *"
+          value={formData.title}
+          onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+          placeholder="Titre de la tâche..."
+          error={errors.title}
+          disabled={loading}
+        />
+
+        {/* Description */}
+        <div className="space-y-2">
+          <label className="block text-sm font-mono font-medium text-slate-300 uppercase tracking-wider">
+            Description
+          </label>
+          <textarea
+            value={formData.description}
+            onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+            placeholder="Description détaillée..."
+            rows={4}
+            disabled={loading}
+            className="w-full px-3 py-2 bg-slate-800/50 border border-slate-700/50 rounded-lg text-slate-100 font-mono text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 hover:border-slate-600/50 transition-all duration-200 backdrop-blur-sm resize-none"
+          />
+          {errors.description && (
+            <p className="text-xs font-mono text-red-400 flex items-center gap-1">
+              <span className="text-red-500">⚠</span>
+              {errors.description}
+            </p>
+          )}
+        </div>
+
+        {/* Priorité et Statut */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <label className="block text-sm font-mono font-medium text-slate-300 uppercase tracking-wider">
+              Priorité
+            </label>
+            <select
+              value={formData.priority}
+              onChange={(e) => setFormData(prev => ({ ...prev, priority: e.target.value as TaskPriority }))}
+              disabled={loading}
+              className="w-full px-3 py-2 bg-slate-800/50 border border-slate-700/50 rounded-lg text-slate-100 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 hover:border-slate-600/50 transition-all duration-200 backdrop-blur-sm"
+            >
+              <option value="low">Faible</option>
+              <option value="medium">Moyenne</option>
+              <option value="high">Élevée</option>
+              <option value="urgent">Urgente</option>
+            </select>
+          </div>
+
+          <div className="space-y-2">
+            <label className="block text-sm font-mono font-medium text-slate-300 uppercase tracking-wider">
+              Statut
+            </label>
+            <select
+              value={formData.status}
+              onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value as TaskStatus }))}
+              disabled={loading}
+              className="w-full px-3 py-2 bg-slate-800/50 border border-slate-700/50 rounded-lg text-slate-100 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500/50 hover:border-slate-600/50 transition-all duration-200 backdrop-blur-sm"
+            >
+              <option value="todo">À faire</option>
+              <option value="in_progress">En cours</option>
+              <option value="done">Terminé</option>
+              <option value="cancelled">Annulé</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Date d'échéance */}
+        <Input
+          label="Date d'échéance"
+          type="datetime-local"
+          value={formData.dueDate ? new Date(formData.dueDate.getTime() - formData.dueDate.getTimezoneOffset() * 60000).toISOString().slice(0, 16) : ''}
+          onChange={(e) => setFormData(prev => ({ 
+            ...prev, 
+            dueDate: e.target.value ? new Date(e.target.value) : undefined 
+          }))}
+          disabled={loading}
+        />
+
+        {/* Tags */}
+        <div className="space-y-3">
+          <label className="block text-sm font-mono font-medium text-slate-300 uppercase tracking-wider">
+            Tags
+          </label>
+          
+          <div className="flex gap-2">
+            <Input
+              value={tagInput}
+              onChange={(e) => setTagInput(e.target.value)}
+              onKeyPress={handleTagKeyPress}
+              placeholder="Ajouter un tag..."
+              disabled={loading}
+              className="flex-1"
+            />
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={addTag}
+              disabled={!tagInput.trim() || loading}
+            >
+              Ajouter
+            </Button>
+          </div>
+
+          {formData.tags && formData.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {formData.tags.map((tag: string, index: number) => (
+                <Badge
+                  key={index}
+                  variant="primary"
+                  className="cursor-pointer hover:bg-red-950/50 hover:text-red-300 hover:border-red-500/30 transition-colors"
+                  onClick={() => removeTag(tag)}
+                >
+                  {tag} ✕
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-4 border-t border-slate-700/50">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={handleClose}
+            disabled={loading}
+          >
+            Annuler
+          </Button>
+          <Button
+            type="submit"
+            variant="primary"
+            disabled={loading}
+          >
+            {loading ? 'Mise à jour...' : 'Mettre à jour'}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
diff --git a/components/kanban/Board.tsx b/components/kanban/Board.tsx
index 3464ac7..db3948b 100644
--- a/components/kanban/Board.tsx
+++ b/components/kanban/Board.tsx
@@ -11,10 +11,12 @@ interface KanbanBoardProps {
   tasks: Task[];
   onCreateTask?: (data: CreateTaskData) => Promise<Task | null>;
   onDeleteTask?: (taskId: string) => Promise<void>;
+  onEditTask?: (task: Task) => void;
+  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
   loading?: boolean;
 }
 
-export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, loading = false }: KanbanBoardProps) {
+export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, loading = false }: KanbanBoardProps) {
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   // Organiser les tâches par statut
   const tasksByStatus = useMemo(() => {
@@ -101,6 +103,8 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, loading = false
             tasks={column.tasks}
             onCreateTask={onCreateTask ? handleCreateTask : undefined}
             onDeleteTask={onDeleteTask}
+            onEditTask={onEditTask}
+            onUpdateTitle={onUpdateTitle}
           />
         ))}
       </div>
diff --git a/components/kanban/BoardContainer.tsx b/components/kanban/BoardContainer.tsx
index 7051eea..475f3ce 100644
--- a/components/kanban/BoardContainer.tsx
+++ b/components/kanban/BoardContainer.tsx
@@ -1,8 +1,11 @@
 'use client';
 
+import { useState } from 'react';
 import { KanbanBoard } from './Board';
+import { EditTaskForm } from '@/components/forms/EditTaskForm';
 import { useTasks } from '@/hooks/useTasks';
 import { Task } from '@/lib/types';
+import { UpdateTaskData } from '@/clients/tasks-client';
 
 interface BoardContainerProps {
   initialTasks: Task[];
@@ -16,17 +19,47 @@ interface BoardContainerProps {
 }
 
 export function KanbanBoardContainer({ initialTasks, initialStats }: BoardContainerProps) {
-  const { tasks, loading, createTask, deleteTask } = useTasks(
+  const { tasks, loading, createTask, deleteTask, updateTask } = useTasks(
     { limit: 20 }, 
     { tasks: initialTasks, stats: initialStats }
   );
 
+  const [editingTask, setEditingTask] = useState<Task | null>(null);
+
+  const handleEditTask = (task: Task) => {
+    setEditingTask(task);
+  };
+
+  const handleUpdateTask = async (data: UpdateTaskData) => {
+    await updateTask(data);
+    setEditingTask(null);
+  };
+
+  const handleUpdateTitle = async (taskId: string, newTitle: string) => {
+    await updateTask({
+      taskId,
+      title: newTitle
+    });
+  };
+
   return (
-    <KanbanBoard 
-      tasks={tasks}
-      onCreateTask={createTask}
-      onDeleteTask={deleteTask}
-      loading={loading}
-    />
+    <>
+      <KanbanBoard 
+        tasks={tasks}
+        onCreateTask={createTask}
+        onDeleteTask={deleteTask}
+        onEditTask={handleEditTask}
+        onUpdateTitle={handleUpdateTitle}
+        loading={loading}
+      />
+      
+      <EditTaskForm
+        isOpen={!!editingTask}
+        onClose={() => setEditingTask(null)}
+        onSubmit={handleUpdateTask}
+        task={editingTask}
+        loading={loading}
+      />
+    </>
   );
 }
diff --git a/components/kanban/Column.tsx b/components/kanban/Column.tsx
index ba31429..dd74129 100644
--- a/components/kanban/Column.tsx
+++ b/components/kanban/Column.tsx
@@ -13,9 +13,11 @@ interface KanbanColumnProps {
   tasks: Task[];
   onCreateTask?: (data: CreateTaskData) => Promise<void>;
   onDeleteTask?: (taskId: string) => Promise<void>;
+  onEditTask?: (task: Task) => void;
+  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
 }
 
-export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTask }: KanbanColumnProps) {
+export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle }: KanbanColumnProps) {
   const [showQuickAdd, setShowQuickAdd] = useState(false);
   // Couleurs tech/cyberpunk
   const techStyles = {
@@ -111,7 +113,7 @@ export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTa
               </div>
             ) : (
               tasks.map((task) => (
-                <TaskCard key={task.id} task={task} onDelete={onDeleteTask} />
+                <TaskCard key={task.id} task={task} onDelete={onDeleteTask} onEdit={onEditTask} onUpdateTitle={onUpdateTitle} />
               ))
             )}
           </div>
diff --git a/components/kanban/TaskCard.tsx b/components/kanban/TaskCard.tsx
index 91ba08d..192c66b 100644
--- a/components/kanban/TaskCard.tsx
+++ b/components/kanban/TaskCard.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { Task } from '@/lib/types';
 import { formatDistanceToNow } from 'date-fns';
 import { fr } from 'date-fns/locale';
@@ -7,9 +8,18 @@ import { Badge } from '@/components/ui/Badge';
 interface TaskCardProps {
   task: Task;
   onDelete?: (taskId: string) => Promise<void>;
+  onEdit?: (task: Task) => void;
+  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
 }
 
-export function TaskCard({ task, onDelete }: TaskCardProps) {
+export function TaskCard({ task, onDelete, onEdit, onUpdateTitle }: TaskCardProps) {
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editTitle, setEditTitle] = useState(task.title);
+
+  // Mettre à jour le titre local quand la tâche change
+  useEffect(() => {
+    setEditTitle(task.title);
+  }, [task.title]);
   const handleDelete = async (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -17,6 +27,45 @@ export function TaskCard({ task, onDelete }: TaskCardProps) {
       await onDelete(task.id);
     }
   };
+
+  const handleEdit = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (onEdit) {
+      onEdit(task);
+    }
+  };
+
+  const handleTitleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (onUpdateTitle) {
+      setIsEditingTitle(true);
+    }
+  };
+
+  const handleTitleSave = async () => {
+    const trimmedTitle = editTitle.trim();
+    if (trimmedTitle && trimmedTitle !== task.title && onUpdateTitle) {
+      await onUpdateTitle(task.id, trimmedTitle);
+    }
+    setIsEditingTitle(false);
+  };
+
+  const handleTitleCancel = () => {
+    setEditTitle(task.title);
+    setIsEditingTitle(false);
+  };
+
+  const handleTitleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleTitleSave();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      handleTitleCancel();
+    }
+  };
   // Extraire les emojis du titre pour les afficher comme tags visuels
   const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu;
   const emojis = task.title.match(emojiRegex) || [];
@@ -37,11 +86,38 @@ export function TaskCard({ task, onDelete }: TaskCardProps) {
           </div>
         )}
         
-        <h4 className="font-mono text-sm font-medium text-slate-100 leading-tight line-clamp-2 flex-1">
-          {titleWithoutEmojis}
-        </h4>
+        {isEditingTitle ? (
+          <input
+            type="text"
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            onKeyDown={handleTitleKeyPress}
+            onBlur={handleTitleSave}
+            autoFocus
+            className="flex-1 bg-transparent border-none outline-none text-slate-100 font-mono text-sm font-medium leading-tight"
+          />
+        ) : (
+          <h4 
+            className="font-mono text-sm font-medium text-slate-100 leading-tight line-clamp-2 flex-1 cursor-pointer hover:text-cyan-300 transition-colors"
+            onClick={handleTitleClick}
+            title={onUpdateTitle ? "Cliquer pour éditer" : undefined}
+          >
+            {titleWithoutEmojis}
+          </h4>
+        )}
         
-        <div className="flex items-center gap-2 flex-shrink-0">
+        <div className="flex items-center gap-1 flex-shrink-0">
+          {/* Bouton d'édition discret */}
+          {onEdit && (
+            <button
+              onClick={handleEdit}
+              className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-blue-900/50 hover:bg-blue-800/80 border border-blue-500/30 hover:border-blue-400/50 flex items-center justify-center transition-all duration-200 text-blue-400 hover:text-blue-300 text-xs"
+              title="Modifier la tâche"
+            >
+              ✎
+            </button>
+          )}
+          
           {/* Bouton de suppression discret */}
           {onDelete && (
             <button
diff --git a/services/tasks.ts b/services/tasks.ts
index f9c0da7..98ce7cf 100644
--- a/services/tasks.ts
+++ b/services/tasks.ts
@@ -96,7 +96,11 @@ export class TasksService {
 
     // Logique métier : si on marque comme terminé, on ajoute la date
     const updateData: Prisma.TaskUpdateInput = {
-      ...updates,
+      title: updates.title,
+      description: updates.description,
+      status: updates.status,
+      priority: updates.priority,
+      dueDate: updates.dueDate,
       updatedAt: new Date()
     };