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.
This commit is contained in:
Julien Froidefond
259
components/forms/EditTaskForm.tsx
Normal file
259
components/forms/EditTaskForm.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
onEditTask={handleEditTask}
|
||||
onUpdateTitle={handleUpdateTitle}
|
||||
loading={loading}
|
||||
/>
|
||||
|
||||
<EditTaskForm
|
||||
isOpen={!!editingTask}
|
||||
onClose={() => setEditingTask(null)}
|
||||
onSubmit={handleUpdateTask}
|
||||
task={editingTask}
|
||||
loading={loading}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
{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-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>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{/* Bouton de suppression discret */}
|
||||
{onDelete && (
|
||||
<button
|
||||
|
||||
@@ -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()
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user