feat: integrate task creation functionality in HomePageClient and Kanban components

- Added task creation modal in HomePageClient with state management for visibility.
- Implemented `handleCreateTask` function to handle task submissions.
- Updated Kanban components to accept `onCreateTask` prop for task creation, ensuring consistent task management across the application.
- Removed unused task creation UI elements from Kanban components to streamline the interface.
This commit is contained in:
Julien Froidefond
2025-09-15 21:39:56 +02:00
parent 44df8c89b8
commit c6a9e87329
6 changed files with 82 additions and 126 deletions

View File

@@ -2,8 +2,6 @@
import { Task, TaskStatus } from '@/lib/types';
import { KanbanColumn } from './Column';
import { Button } from '@/components/ui/Button';
import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
import { CreateTaskData } from '@/clients/tasks-client';
import { useMemo, useState } from 'react';
import { useColumnVisibility } from '@/hooks/useColumnVisibility';
@@ -21,18 +19,16 @@ import { TaskCard } from './TaskCard';
interface KanbanBoardProps {
tasks: Task[];
onCreateTask?: (data: CreateTaskData) => Promise<Task | null>;
onCreateTask?: (data: CreateTaskData) => Promise<void>;
onDeleteTask?: (taskId: string) => Promise<void>;
onEditTask?: (task: Task) => void;
onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
onUpdateStatus?: (taskId: string, newStatus: TaskStatus) => Promise<void>;
loading?: boolean;
compactView?: boolean;
visibleStatuses?: TaskStatus[];
}
export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, onUpdateStatus, loading = false, compactView = false, visibleStatuses }: KanbanBoardProps) {
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onUpdateTitle, onUpdateStatus, compactView = false, visibleStatuses }: KanbanBoardProps) {
const [activeTask, setActiveTask] = useState<Task | null>(null);
// Gestion de la visibilité des colonnes (utilise les props si disponibles)
@@ -72,11 +68,6 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
allColumns.filter(column => visibleStatuses.includes(column.id)) :
getVisibleStatuses(allColumns);
const handleCreateTask = async (data: CreateTaskData) => {
if (onCreateTask) {
await onCreateTask(data);
}
};
// Gestion du début du drag
const handleDragStart = (event: DragStartEvent) => {
@@ -111,25 +102,8 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
onDragEnd={handleDragEnd}
>
<div className="h-full flex flex-col bg-[var(--background)]">
{/* Header avec bouton nouvelle tâche */}
<div className="flex justify-between items-center p-6 pb-0">
<div className="flex items-center gap-3">
<div className="w-2 h-2 bg-[var(--primary)] rounded-full animate-pulse"></div>
<h2 className="text-lg font-mono font-bold text-[var(--foreground)] uppercase tracking-wider">
Kanban Board
</h2>
</div>
{onCreateTask && (
<Button
variant="primary"
onClick={() => setIsCreateModalOpen(true)}
disabled={loading}
>
+ Nouvelle tâche
</Button>
)}
</div>
{/* Espacement supérieur */}
<div className="pt-4"></div>
{/* Board tech dark */}
@@ -139,7 +113,7 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
key={column.id}
id={column.id}
tasks={column.tasks}
onCreateTask={onCreateTask ? handleCreateTask : undefined}
onCreateTask={onCreateTask}
onDeleteTask={onDeleteTask}
onEditTask={onEditTask}
onUpdateTitle={onUpdateTitle}
@@ -148,15 +122,6 @@ export function KanbanBoard({ tasks, onCreateTask, onDeleteTask, onEditTask, onU
))}
</div>
{/* Modal de création */}
{onCreateTask && (
<CreateTaskForm
isOpen={isCreateModalOpen}
onClose={() => setIsCreateModalOpen(false)}
onSubmit={handleCreateTask}
loading={loading}
/>
)}
</div>
{/* Overlay pour le drag & drop */}