Sepearted board view
This commit is contained in:
+2
-178
@@ -1,183 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useEffect, useState } from "react";
|
import BoardView from "@/components/view/board/BoardView";
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
CardContent,
|
|
||||||
CardFooter,
|
|
||||||
CardDescription,
|
|
||||||
} from "@/components/ui/card";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Trash } from "lucide-react";
|
|
||||||
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
|
||||||
import { Color, getColor } from "@/lib/ui/color";
|
|
||||||
|
|
||||||
type Task = {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
description?: string;
|
|
||||||
tags?: { name: string; color: Color }[];
|
|
||||||
};
|
|
||||||
|
|
||||||
const columnLabels: Record<string, string> = {
|
|
||||||
todo: "To do",
|
|
||||||
inprogress: "In progress",
|
|
||||||
done: "Done",
|
|
||||||
};
|
|
||||||
|
|
||||||
const id = (prefix = "t") =>
|
|
||||||
`${prefix}_${Math.random().toString(36).slice(2, 9)}`;
|
|
||||||
|
|
||||||
export default function Workspace() {
|
export default function Workspace() {
|
||||||
const [columns, setColumns] = useState<Record<string, Task[]>>({
|
return <BoardView />;
|
||||||
todo: [],
|
|
||||||
inprogress: [],
|
|
||||||
done: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setColumns({
|
|
||||||
todo: [
|
|
||||||
{ id: id(), title: "Buy groceries" },
|
|
||||||
{ id: id(), title: "Plan sprint" },
|
|
||||||
],
|
|
||||||
inprogress: [
|
|
||||||
{
|
|
||||||
id: id(),
|
|
||||||
title: "Build header",
|
|
||||||
description: "A simple description",
|
|
||||||
tags: [
|
|
||||||
{ name: "Website", color: "pink" },
|
|
||||||
{ name: "Development", color: "blue" },
|
|
||||||
{ name: "API", color: "green" },
|
|
||||||
{ name: "App", color: "purple" },
|
|
||||||
{ name: "Rust", color: "orange" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
done: [{ id: id(), title: "Set up repo" }],
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const [mounted, setMounted] = useState(false);
|
|
||||||
useEffect(() => setMounted(true), []);
|
|
||||||
|
|
||||||
if (!mounted) return null;
|
|
||||||
|
|
||||||
function onDragEnd(result: any) {
|
|
||||||
const { source, destination } = result;
|
|
||||||
if (!destination) return;
|
|
||||||
|
|
||||||
const sourceCol = source.droppableId;
|
|
||||||
const destCol = destination.droppableId;
|
|
||||||
|
|
||||||
if (sourceCol === destCol) {
|
|
||||||
const items = Array.from(columns[sourceCol]);
|
|
||||||
const [moved] = items.splice(source.index, 1);
|
|
||||||
items.splice(destination.index, 0, moved);
|
|
||||||
setColumns({ ...columns, [sourceCol]: items });
|
|
||||||
} else {
|
|
||||||
const sourceItems = Array.from(columns[sourceCol]);
|
|
||||||
const destItems = Array.from(columns[destCol]);
|
|
||||||
const [moved] = sourceItems.splice(source.index, 1);
|
|
||||||
destItems.splice(destination.index, 0, moved);
|
|
||||||
setColumns({
|
|
||||||
...columns,
|
|
||||||
[sourceCol]: sourceItems,
|
|
||||||
[destCol]: destItems,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6 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((colKey) => (
|
|
||||||
<Droppable key={colKey} droppableId={colKey}>
|
|
||||||
{(provided) => (
|
|
||||||
<Card
|
|
||||||
ref={provided.innerRef}
|
|
||||||
{...provided.droppableProps}
|
|
||||||
className="min-h-[220px] bg-background"
|
|
||||||
>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center justify-between">
|
|
||||||
<span>{columnLabels[colKey]}</span>
|
|
||||||
<span className="text-sm text-muted-foreground">
|
|
||||||
{columns[colKey].length}
|
|
||||||
</span>
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
{columns[colKey].map((task, index) => (
|
|
||||||
<Draggable
|
|
||||||
key={task.id}
|
|
||||||
draggableId={task.id}
|
|
||||||
index={index}
|
|
||||||
>
|
|
||||||
{(provided) => (
|
|
||||||
<Card
|
|
||||||
ref={provided.innerRef}
|
|
||||||
{...provided.draggableProps}
|
|
||||||
{...provided.dragHandleProps}
|
|
||||||
className="bg-background"
|
|
||||||
>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>{task.title}</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
{task.description}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-wrap gap-2 overflow-hidden">
|
|
||||||
{task.tags?.map((tag, i) => (
|
|
||||||
<span
|
|
||||||
key={tag.name}
|
|
||||||
style={getColor(tag.color)}
|
|
||||||
className="inline-flex items-center py-0.5 px-1.5 rounded-sm max-w-full truncate"
|
|
||||||
>
|
|
||||||
{tag.name}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</Draggable>
|
|
||||||
))}
|
|
||||||
{provided.placeholder}
|
|
||||||
{columns[colKey].length === 0 && (
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
No tasks
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<div className="flex justify-between w-full items-center">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
const t: Task = { id: id(), title: "New task" };
|
|
||||||
setColumns((c) => ({
|
|
||||||
...c,
|
|
||||||
[colKey]: [...c[colKey], t],
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
className="ml-auto"
|
|
||||||
>
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</Droppable>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</DragDropContext>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,163 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
||||||
|
import { Color, getColor } from "@/lib/ui/color";
|
||||||
|
import { PlusIcon } from "lucide-react";
|
||||||
|
|
||||||
|
type Task = {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
tags?: { name: string; color: Color }[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const columnLabels: Record<string, string> = {
|
||||||
|
todo: "To do",
|
||||||
|
inprogress: "In progress",
|
||||||
|
done: "Done",
|
||||||
|
};
|
||||||
|
|
||||||
|
const id = (prefix = "t") =>
|
||||||
|
`${prefix}_${Math.random().toString(36).slice(2, 9)}`;
|
||||||
|
|
||||||
|
export default function BoardView() {
|
||||||
|
const [columns, setColumns] = useState<Record<string, Task[]>>({
|
||||||
|
todo: [
|
||||||
|
{ id: id(), title: "Buy groceries" },
|
||||||
|
{ id: id(), title: "Plan sprint" },
|
||||||
|
],
|
||||||
|
inprogress: [
|
||||||
|
{
|
||||||
|
id: id(),
|
||||||
|
title: "Build header",
|
||||||
|
description: "A simple description",
|
||||||
|
tags: [
|
||||||
|
{ name: "Website", color: "pink" },
|
||||||
|
{ name: "Development", color: "blue" },
|
||||||
|
{ name: "API", color: "green" },
|
||||||
|
{ name: "App", color: "purple" },
|
||||||
|
{ name: "Rust", color: "orange" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
done: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
function onDragEnd(result: any) {
|
||||||
|
const { source, destination } = result;
|
||||||
|
if (!destination) return;
|
||||||
|
|
||||||
|
const sourceCol = source.droppableId;
|
||||||
|
const destCol = destination.droppableId;
|
||||||
|
|
||||||
|
if (sourceCol === destCol) {
|
||||||
|
const items = Array.from(columns[sourceCol]);
|
||||||
|
const [moved] = items.splice(source.index, 1);
|
||||||
|
items.splice(destination.index, 0, moved);
|
||||||
|
setColumns({ ...columns, [sourceCol]: items });
|
||||||
|
} else {
|
||||||
|
const sourceItems = Array.from(columns[sourceCol]);
|
||||||
|
const destItems = Array.from(columns[destCol]);
|
||||||
|
const [moved] = sourceItems.splice(source.index, 1);
|
||||||
|
destItems.splice(destination.index, 0, moved);
|
||||||
|
setColumns({
|
||||||
|
...columns,
|
||||||
|
[sourceCol]: sourceItems,
|
||||||
|
[destCol]: destItems,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6 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((colKey) => (
|
||||||
|
<Droppable key={colKey} droppableId={colKey}>
|
||||||
|
{(provided) => (
|
||||||
|
<Card
|
||||||
|
ref={provided.innerRef}
|
||||||
|
{...provided.droppableProps}
|
||||||
|
className="min-h-[170px] bg-background"
|
||||||
|
>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center justify-between">
|
||||||
|
<span>{columnLabels[colKey]}</span>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="ml-auto"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
const t: Task = { id: id(), title: "New task" };
|
||||||
|
setColumns((c) => ({
|
||||||
|
...c,
|
||||||
|
[colKey]: [...c[colKey], t],
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PlusIcon />
|
||||||
|
</Button>
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
{columns[colKey].map((task, index) => (
|
||||||
|
<Draggable
|
||||||
|
key={task.id}
|
||||||
|
draggableId={task.id}
|
||||||
|
index={index}
|
||||||
|
>
|
||||||
|
{(provided) => (
|
||||||
|
<Card
|
||||||
|
ref={provided.innerRef}
|
||||||
|
{...provided.draggableProps}
|
||||||
|
{...provided.dragHandleProps}
|
||||||
|
className="bg-background"
|
||||||
|
>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>{task.title}</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
{task.description}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-wrap gap-2 overflow-hidden">
|
||||||
|
{task.tags?.map((tag, i) => (
|
||||||
|
<span
|
||||||
|
key={tag.name}
|
||||||
|
style={getColor(tag.color)}
|
||||||
|
className="inline-flex items-center py-0.5 px-1.5 rounded-sm max-w-full truncate"
|
||||||
|
>
|
||||||
|
{tag.name}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</Draggable>
|
||||||
|
))}
|
||||||
|
{provided.placeholder}
|
||||||
|
{columns[colKey].length === 0 && (
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
No tasks
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</Droppable>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</DragDropContext>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user