Bulk commit: Stand ende 22.01.
This commit is contained in:
@@ -1,287 +1,159 @@
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanOverlay } from '@/components/ui/kanban'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { GripVertical } from 'lucide-react'
|
||||
|
||||
import KanbanColumn from '@/features/Kanban/components/KanbanColumn'
|
||||
import Kanban from '@/features/Kanban/components/Kanban'
|
||||
import KanbanCard from '@/features/Kanban/components/KanbanCard'
|
||||
import KanbanDropzone from '@/features/Kanban/components/KanbanDropzone'
|
||||
import { useState } from 'react'
|
||||
|
||||
export const Route = createFileRoute('/_sidebar/kanban')({
|
||||
component: RouteComponent,
|
||||
beforeLoad: () => {
|
||||
return {
|
||||
breadcrumb: 'Kanban',
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const kanbanboard = {
|
||||
columns: [
|
||||
{
|
||||
name: 'Todo',
|
||||
itemCount: 5,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
id: 0,
|
||||
name: 'Backlog'
|
||||
},
|
||||
{
|
||||
name: 'Doing',
|
||||
itemCount: 6,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
id: 1,
|
||||
name: 'Todo'
|
||||
},
|
||||
{
|
||||
name: 'Done',
|
||||
itemCount: 20,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
id: 2,
|
||||
name: 'Doing'
|
||||
},
|
||||
{
|
||||
name: 'Todo',
|
||||
itemCount: 5,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
id: 3,
|
||||
name: 'Done'
|
||||
},
|
||||
{
|
||||
name: 'Doing',
|
||||
itemCount: 6,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
id: 4,
|
||||
name: 'Backlog'
|
||||
},
|
||||
{
|
||||
name: 'Done',
|
||||
itemCount: 20,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
id: 5,
|
||||
name: 'Todo'
|
||||
},
|
||||
{
|
||||
name: 'Todo',
|
||||
itemCount: 5,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
id: 6,
|
||||
name: 'Doing'
|
||||
},
|
||||
{
|
||||
name: 'Doing',
|
||||
itemCount: 6,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Done',
|
||||
itemCount: 20,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Todo',
|
||||
itemCount: 5,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Doing',
|
||||
itemCount: 6,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Done',
|
||||
itemCount: 20,
|
||||
children: [
|
||||
{
|
||||
name: 'Hello World!',
|
||||
path: 'https://google.com',
|
||||
description: 'Das ist eine Testkarte',
|
||||
labels: [
|
||||
{
|
||||
name: 'flow::7 Done',
|
||||
className: 'bg-emerald-500',
|
||||
},
|
||||
{
|
||||
name: 'Wichtig',
|
||||
className: 'bg-red-500',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
id: 7,
|
||||
name: 'Done'
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
priority: "low" | "medium" | "high";
|
||||
assignee?: string;
|
||||
dueDate?: string;
|
||||
}
|
||||
|
||||
const COLUMN_TITLES: Record<string, string> = {
|
||||
backlog: "Backlog",
|
||||
inProgress: "In Progress",
|
||||
done: "Done",
|
||||
};
|
||||
|
||||
function RouteComponent() {
|
||||
// const [columns, setColumns] = useState(kanbanboard.columns)
|
||||
|
||||
const [columns, setColumns] = useState<string[]>([
|
||||
"backlog",
|
||||
"inProgress",
|
||||
"done",
|
||||
"sprintbacl",
|
||||
"toStart",
|
||||
"notDone",
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<Kanban>
|
||||
{kanbanboard.columns.map((val) => {
|
||||
return (
|
||||
<>
|
||||
<KanbanColumn name={val.name} itemCount={val.itemCount}>
|
||||
{val.children.map((card) => {
|
||||
return <KanbanCard card={card} />
|
||||
})}
|
||||
</KanbanColumn>
|
||||
<KanbanDropzone />
|
||||
</>
|
||||
)
|
||||
})}
|
||||
<Kanban value={columns} onValueChange={setColumns} getItemValue={(c) => c.id}>
|
||||
<KanbanBoard className="flex min-w-full overflow-scroll">
|
||||
{Object.entries(columns).map(([columnValue]) => (
|
||||
<KanbanColumn key={columnValue} value={columnValue} className='min-w-md'>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-sm">
|
||||
{COLUMN_TITLES[columnValue]}
|
||||
</span>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="pointer-events-none rounded-sm"
|
||||
>
|
||||
0
|
||||
</Badge>
|
||||
</div>
|
||||
<KanbanColumnHandle asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<GripVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</KanbanColumnHandle>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 p-0.5">
|
||||
{/* List Tasks using Tanstack Query
|
||||
|
||||
{tasks.map((task) => (
|
||||
<KanbanItem key={task.id} value={task.id} asHandle asChild>
|
||||
<div className="rounded-md border bg-card p-3 shadow-xs">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="line-clamp-1 font-medium text-sm">
|
||||
{task.title}
|
||||
</span>
|
||||
<Badge
|
||||
variant={
|
||||
task.priority === "high"
|
||||
? "destructive"
|
||||
: task.priority === "medium"
|
||||
? "default"
|
||||
: "secondary"
|
||||
}
|
||||
className="pointer-events-none h-5 rounded-sm px-1.5 text-[11px] capitalize"
|
||||
>
|
||||
{task.priority}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-muted-foreground text-xs">
|
||||
{task.assignee && (
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="size-2 rounded-full bg-primary/20" />
|
||||
<span className="line-clamp-1">
|
||||
{task.assignee}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{task.dueDate && (
|
||||
<time className="text-[10px] tabular-nums">
|
||||
{task.dueDate}
|
||||
</time>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</KanbanItem>
|
||||
))}
|
||||
|
||||
*/}
|
||||
</div>
|
||||
</KanbanColumn>
|
||||
))}
|
||||
</KanbanBoard>
|
||||
<KanbanOverlay>
|
||||
<div className="size-full rounded-md bg-primary/10" />
|
||||
</KanbanOverlay>
|
||||
</Kanban>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user