- 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.
66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
'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[];
|
|
initialStats: {
|
|
total: number;
|
|
completed: number;
|
|
inProgress: number;
|
|
todo: number;
|
|
completionRate: number;
|
|
};
|
|
}
|
|
|
|
export function KanbanBoardContainer({ initialTasks, initialStats }: BoardContainerProps) {
|
|
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}
|
|
/>
|
|
</>
|
|
);
|
|
}
|