122 lines
3.9 KiB
TypeScript
122 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
|
import { PlusIcon } from "lucide-react";
|
|
import { SetState, Task } from "@/lib/types";
|
|
import BoardTask from "./Task";
|
|
import { Color } from "@/lib/ui/color";
|
|
|
|
const columnLabels: Record<string, string> = {
|
|
todo: "To do",
|
|
inprogress: "In progress",
|
|
done: "Done",
|
|
};
|
|
|
|
export default function BoardView({
|
|
tags,
|
|
tasks,
|
|
setTasks,
|
|
createTask,
|
|
}: {
|
|
tags: Record<string, { color: Color; name: string }>;
|
|
tasks: Task[];
|
|
setTasks: SetState<Task[]>;
|
|
createTask: (status: string) => void;
|
|
}) {
|
|
function onDragEnd(result: any) {
|
|
const { draggableId, source, destination } = result;
|
|
if (!destination) return;
|
|
|
|
setTasks((tasks) => {
|
|
const taskIndex = tasks.findIndex((task) => task.id === draggableId);
|
|
const task = tasks[taskIndex];
|
|
tasks.splice(taskIndex, 1);
|
|
|
|
const destinationGroupStartIndex = tasks.findIndex(
|
|
(t) => t.status === destination.droppableId
|
|
);
|
|
|
|
const insertIndex =
|
|
destinationGroupStartIndex === -1
|
|
? tasks.length
|
|
: destinationGroupStartIndex + destination.index;
|
|
|
|
tasks.splice(insertIndex, 0, {
|
|
...task,
|
|
status: destination.droppableId,
|
|
});
|
|
|
|
return tasks;
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="w-full h-full flex flex-col gap-6">
|
|
<DragDropContext onDragEnd={onDragEnd}>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
|
|
{Object.keys(columnLabels).map((status) => (
|
|
<Droppable key={status} droppableId={status}>
|
|
{(provided) => (
|
|
<Card
|
|
ref={provided.innerRef}
|
|
{...provided.droppableProps}
|
|
className="bg-background"
|
|
>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center justify-between">
|
|
<span>{columnLabels[status]}</span>
|
|
<Button
|
|
size="sm"
|
|
className="ml-auto"
|
|
variant="outline"
|
|
onClick={() => createTask(status)}
|
|
>
|
|
<PlusIcon />
|
|
</Button>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col gap-3">
|
|
{tasks
|
|
.filter((task) => task.status === status)
|
|
.map((task, index) => (
|
|
<Draggable
|
|
key={task.id}
|
|
draggableId={task.id}
|
|
index={index}
|
|
>
|
|
{(provided) => (
|
|
<BoardTask
|
|
setTask={(t) =>
|
|
setTasks((cols) =>
|
|
cols.map((c) => (c.id === t.id ? t : c))
|
|
)
|
|
}
|
|
provided={provided}
|
|
task={task}
|
|
tags={tags}
|
|
/>
|
|
)}
|
|
</Draggable>
|
|
))}
|
|
{provided.placeholder}
|
|
{tasks.filter((task) => task.status === status).length ===
|
|
0 && (
|
|
<p className="text-sm text-muted-foreground">
|
|
No tasks
|
|
</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</Droppable>
|
|
))}
|
|
</div>
|
|
</DragDropContext>
|
|
</div>
|
|
);
|
|
}
|