hamid zarghami
98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
import { useMemo, useState, type FC } from "react";
|
|
import AddNewColumn from "./components/AddNewColumn";
|
|
import Column from "./components/Column";
|
|
import HeaderWorkspace from "./components/HeaderWorkspace";
|
|
import TaskDetailModal from "./components/task-detail/TaskDetailModal";
|
|
import tasksData from "./data/tasks.json";
|
|
import type { Task, WorkspaceData } from "./types";
|
|
import { reorderColumns } from "./utils/reorderColumns";
|
|
import { reorderTasks } from "./utils/reorderTasks";
|
|
|
|
const Workspace: FC = () => {
|
|
const [columns, setColumns] = useState(
|
|
(tasksData as WorkspaceData).columns,
|
|
);
|
|
const [tasks, setTasks] = useState<Task[]>(tasksData.tasks as Task[]);
|
|
const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
|
|
const [draggedColumnId, setDraggedColumnId] = useState<string | null>(null);
|
|
const [selectedTask, setSelectedTask] = useState<Task | null>(null);
|
|
|
|
const tasksByColumn = useMemo(() => {
|
|
return columns.reduce<Record<string, Task[]>>((acc, column) => {
|
|
acc[column.id] = tasks
|
|
.filter((task) => task.columnId === column.id)
|
|
.sort((a, b) => a.order - b.order);
|
|
return acc;
|
|
}, {});
|
|
}, [columns, tasks]);
|
|
|
|
const handleDragStart = (taskId: string) => {
|
|
setDraggedTaskId(taskId);
|
|
};
|
|
|
|
const handleDragEnd = () => {
|
|
setDraggedTaskId(null);
|
|
};
|
|
|
|
const handleDrop = (columnId: string, index: number) => {
|
|
if (!draggedTaskId) return;
|
|
setTasks((prev) => reorderTasks(prev, draggedTaskId, columnId, index));
|
|
setDraggedTaskId(null);
|
|
};
|
|
|
|
const handleColumnDragStart = (columnId: string) => {
|
|
setDraggedColumnId(columnId);
|
|
};
|
|
|
|
const handleColumnDragEnd = () => {
|
|
setDraggedColumnId(null);
|
|
};
|
|
|
|
const handleColumnDrop = (overColumnId: string) => {
|
|
if (!draggedColumnId || draggedColumnId === overColumnId) return;
|
|
setColumns((prev) => reorderColumns(prev, draggedColumnId, overColumnId));
|
|
setDraggedColumnId(null);
|
|
};
|
|
|
|
const selectedTaskColumn = selectedTask
|
|
? columns.find((column) => column.id === selectedTask.columnId)
|
|
: null;
|
|
|
|
return (
|
|
<div className="bg-[#01347A] h-full rounded-none xl:rounded-[32px] overflow-hidden flex flex-col">
|
|
<HeaderWorkspace />
|
|
<div className="flex-1 min-h-0 overflow-x-auto overflow-y-hidden overscroll-x-contain">
|
|
<div className="flex gap-3 sm:gap-4 xl:gap-7 px-3 sm:px-4 xl:px-8 pt-4 xl:pt-6 pb-4 xl:pb-6 h-full items-start w-max min-w-full">
|
|
{columns.map((column) => (
|
|
<Column
|
|
key={column.id}
|
|
column={column}
|
|
tasks={tasksByColumn[column.id] ?? []}
|
|
draggedTaskId={draggedTaskId}
|
|
draggedColumnId={draggedColumnId}
|
|
onDragStart={handleDragStart}
|
|
onDragEnd={handleDragEnd}
|
|
onDrop={handleDrop}
|
|
onColumnDragStart={handleColumnDragStart}
|
|
onColumnDragEnd={handleColumnDragEnd}
|
|
onColumnDrop={handleColumnDrop}
|
|
onTaskClick={setSelectedTask}
|
|
/>
|
|
))}
|
|
|
|
<AddNewColumn />
|
|
</div>
|
|
</div>
|
|
|
|
<TaskDetailModal
|
|
open={selectedTask !== null}
|
|
task={selectedTask}
|
|
statusLabel={selectedTaskColumn?.title ?? ""}
|
|
onClose={() => setSelectedTask(null)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Workspace;
|