feat(ui): Aufgabenbrett auf der Projektseite
Vier Spalten, Karten per Ziehen verschiebbar - zwischen den Spalten und innerhalb einer Spalte. Waehrend des Ziehens fuehrt der oertliche Zustand, danach wird die neue Ordnung als Ganzes gespeichert; scheitert das, springt das Brett auf den Serverstand zurueck. Details: - Gezogen wird am Griff links, damit ein Klick auf die Karte weiter den Dialog oeffnet. - Der Spaltenwechsel passiert schon beim Darueberziehen, nicht erst beim Ablegen - sonst wirkt das Brett traege. - Der Serverstand wird nur uebernommen, wenn gerade nicht gezogen wird, sonst spraenge die Karte mitten in der Bewegung zurueck. - Faelligkeiten faerben sich: ueberfaellig rot, heute gelb, demnaechst gedaempft. Ist "Fortschritt aus Aufgaben" eingeschaltet, wird der Regler gesperrt statt einen Wert anzubieten, der beim naechsten Aufgabenwechsel ueberschrieben wuerde - im Dialog wie im Kopfbereich. Die Projektkarte zeigt das Verhaeltnis als "3/8". Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,329 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
DndContext,
|
||||
DragOverlay,
|
||||
PointerSensor,
|
||||
TouchSensor,
|
||||
pointerWithin,
|
||||
useDroppable,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
type DragOverEvent,
|
||||
type DragStartEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import { restrictToWindowEdges } from "@dnd-kit/modifiers";
|
||||
import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { CheckSquare, Loader2, Plus } from "lucide-react";
|
||||
import type { Task, TaskStatus } from "@prisma/client";
|
||||
import { TaskCard } from "@/components/tasks/TaskCard";
|
||||
import { TaskDialog } from "@/components/tasks/TaskDialog";
|
||||
import { TASK_STATUS_META, TASK_STATUS_ORDER } from "@/lib/tasks";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Columns = Record<TaskStatus, Task[]>;
|
||||
|
||||
function group(tasks: Task[]): Columns {
|
||||
const columns = { TODO: [], DOING: [], BLOCKED: [], DONE: [] } as Columns;
|
||||
for (const task of [...tasks].sort((a, b) => a.position - b.position)) {
|
||||
columns[task.status].push(task);
|
||||
}
|
||||
return columns;
|
||||
}
|
||||
|
||||
/**
|
||||
* Aufgabenbrett eines Projekts.
|
||||
*
|
||||
* Anders als beim Projektbrett ist die Reihenfolge innerhalb einer Spalte
|
||||
* hier bedeutsam, deshalb @dnd-kit/sortable statt einfacher Ablageflaechen.
|
||||
* Waehrend des Ziehens fuehrt der oertliche Zustand, danach wird die neue
|
||||
* Ordnung als Ganzes gespeichert: je Spalte die vollstaendige Liste. Das ist
|
||||
* wiederholbar und kommt ohne Nachrechnen von Positionen im Browser aus.
|
||||
*/
|
||||
export function TaskBoard({
|
||||
projectId,
|
||||
tasks,
|
||||
progressFromTasks,
|
||||
}: {
|
||||
projectId: string;
|
||||
tasks: Task[];
|
||||
progressFromTasks: boolean;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [columns, setColumns] = useState<Columns>(() => group(tasks));
|
||||
const [activeId, setActiveId] = useState<string | null>(null);
|
||||
const [editing, setEditing] = useState<Task | null>(null);
|
||||
const [creatingIn, setCreatingIn] = useState<TaskStatus | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const dragging = useRef(false);
|
||||
|
||||
// Serverstand uebernehmen, solange nicht gerade gezogen wird – sonst
|
||||
// wuerde die Karte mitten in der Bewegung zurueckspringen.
|
||||
useEffect(() => {
|
||||
if (!dragging.current) setColumns(group(tasks));
|
||||
}, [tasks]);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
useSensor(TouchSensor, { activationConstraint: { delay: 180, tolerance: 8 } }),
|
||||
);
|
||||
|
||||
const allTasks = useMemo(() => Object.values(columns).flat(), [columns]);
|
||||
const active = activeId ? allTasks.find((task) => task.id === activeId) ?? null : null;
|
||||
const total = allTasks.length;
|
||||
const done = columns.DONE.length;
|
||||
|
||||
function containerOf(id: string): TaskStatus | null {
|
||||
if (TASK_STATUS_ORDER.includes(id as TaskStatus)) return id as TaskStatus;
|
||||
for (const status of TASK_STATUS_ORDER) {
|
||||
if (columns[status].some((task) => task.id === id)) return status;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function onDragStart(event: DragStartEvent) {
|
||||
dragging.current = true;
|
||||
setActiveId(String(event.active.id));
|
||||
}
|
||||
|
||||
/** Wechsel der Spalte passiert schon beim Darueberziehen, nicht erst beim Ablegen. */
|
||||
function onDragOver(event: DragOverEvent) {
|
||||
const activeKey = String(event.active.id);
|
||||
const overKey = event.over ? String(event.over.id) : null;
|
||||
if (!overKey) return;
|
||||
|
||||
const from = containerOf(activeKey);
|
||||
const to = containerOf(overKey);
|
||||
if (!from || !to || from === to) return;
|
||||
|
||||
setColumns((current) => {
|
||||
const moved = current[from].find((task) => task.id === activeKey);
|
||||
if (!moved) return current;
|
||||
|
||||
const targetIndex = current[to].findIndex((task) => task.id === overKey);
|
||||
const insertAt = targetIndex >= 0 ? targetIndex : current[to].length;
|
||||
|
||||
return {
|
||||
...current,
|
||||
[from]: current[from].filter((task) => task.id !== activeKey),
|
||||
[to]: [
|
||||
...current[to].slice(0, insertAt),
|
||||
{ ...moved, status: to },
|
||||
...current[to].slice(insertAt),
|
||||
],
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async function onDragEnd(event: DragEndEvent) {
|
||||
const activeKey = String(event.active.id);
|
||||
const overKey = event.over ? String(event.over.id) : null;
|
||||
|
||||
let next = columns;
|
||||
|
||||
if (overKey) {
|
||||
const container = containerOf(activeKey);
|
||||
const overContainer = containerOf(overKey);
|
||||
if (container && container === overContainer) {
|
||||
const list = columns[container];
|
||||
const oldIndex = list.findIndex((task) => task.id === activeKey);
|
||||
const newIndex = list.findIndex((task) => task.id === overKey);
|
||||
if (oldIndex >= 0 && newIndex >= 0 && oldIndex !== newIndex) {
|
||||
const reordered = [...list];
|
||||
const [moved] = reordered.splice(oldIndex, 1);
|
||||
reordered.splice(newIndex, 0, moved);
|
||||
next = { ...columns, [container]: reordered };
|
||||
setColumns(next);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setActiveId(null);
|
||||
dragging.current = false;
|
||||
await persist(next);
|
||||
}
|
||||
|
||||
async function persist(next: Columns) {
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
columns: Object.fromEntries(
|
||||
TASK_STATUS_ORDER.map((status) => [status, next[status].map((task) => task.id)]),
|
||||
),
|
||||
};
|
||||
const response = await fetch(`/api/projects/${projectId}/tasks/reorder`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!response.ok) throw new Error("failed");
|
||||
router.refresh();
|
||||
} catch {
|
||||
// Zurueck auf den Serverstand – die Bewegung war dann nur optisch.
|
||||
setColumns(group(tasks));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="glass p-5">
|
||||
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-violet-500/12 text-violet-300">
|
||||
<CheckSquare className="h-4 w-4" />
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-slate-200">
|
||||
Aufgaben
|
||||
{total > 0 ? (
|
||||
<span className="rounded-full bg-white/6 px-2 py-0.5 text-[11px] tabular-nums text-slate-400">
|
||||
{done}/{total}
|
||||
</span>
|
||||
) : null}
|
||||
{saving ? <Loader2 className="h-3 w-3 animate-spin text-slate-500" /> : null}
|
||||
</h2>
|
||||
<p className="mt-0.5 text-[11px] text-slate-500">
|
||||
{progressFromTasks
|
||||
? "Der Fortschritt des Projekts folgt diesen Aufgaben."
|
||||
: "Ziehen zum Verschieben und Sortieren."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost px-3 py-1.5 text-xs"
|
||||
onClick={() => setCreatingIn("TODO")}
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Aufgabe
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={pointerWithin}
|
||||
modifiers={[restrictToWindowEdges]}
|
||||
onDragStart={onDragStart}
|
||||
onDragOver={onDragOver}
|
||||
onDragEnd={onDragEnd}
|
||||
onDragCancel={() => {
|
||||
setActiveId(null);
|
||||
dragging.current = false;
|
||||
setColumns(group(tasks));
|
||||
}}
|
||||
>
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{TASK_STATUS_ORDER.map((status) => (
|
||||
<TaskColumn
|
||||
key={status}
|
||||
status={status}
|
||||
tasks={columns[status]}
|
||||
onAdd={() => setCreatingIn(status)}
|
||||
onEdit={setEditing}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<DragOverlay dropAnimation={{ duration: 180, easing: "cubic-bezier(0.22, 1, 0.36, 1)" }}>
|
||||
{active ? <TaskCard task={active} overlay /> : null}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
|
||||
<TaskDialog
|
||||
open={creatingIn !== null || editing !== null}
|
||||
projectId={projectId}
|
||||
task={editing}
|
||||
initialStatus={creatingIn ?? "TODO"}
|
||||
onClose={() => {
|
||||
setCreatingIn(null);
|
||||
setEditing(null);
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskColumn({
|
||||
status,
|
||||
tasks,
|
||||
onAdd,
|
||||
onEdit,
|
||||
}: {
|
||||
status: TaskStatus;
|
||||
tasks: Task[];
|
||||
onAdd: () => void;
|
||||
onEdit: (task: Task) => void;
|
||||
}) {
|
||||
const meta = TASK_STATUS_META[status];
|
||||
const { setNodeRef, isOver } = useDroppable({ id: status });
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
data-task-column={status}
|
||||
className={cn(
|
||||
"flex min-h-[8rem] flex-col rounded-xl border border-white/6 bg-black/20 p-2 transition-colors",
|
||||
isOver && "border-violet-400/40 bg-violet-500/6",
|
||||
)}
|
||||
>
|
||||
<div className="mb-2 flex items-center gap-2 px-1">
|
||||
<span
|
||||
className="h-1.5 w-1.5 rounded-full"
|
||||
style={{ backgroundColor: meta.color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">
|
||||
{meta.label}
|
||||
</h3>
|
||||
<span className="ml-auto text-[10px] tabular-nums text-slate-600">{tasks.length}</span>
|
||||
</div>
|
||||
|
||||
<SortableContext
|
||||
items={tasks.map((task) => task.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="flex flex-1 flex-col gap-1.5">
|
||||
{tasks.map((task) => (
|
||||
<SortableTask key={task.id} task={task} onEdit={onEdit} />
|
||||
))}
|
||||
{tasks.length === 0 ? (
|
||||
<p className="rounded-lg border border-dashed border-white/8 px-2 py-4 text-center text-[10px] text-slate-600">
|
||||
{isOver ? "Hier ablegen" : "leer"}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</SortableContext>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAdd}
|
||||
className="mt-1.5 flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-[11px] text-slate-600 transition-colors hover:bg-white/5 hover:text-slate-300"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
hinzufuegen
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SortableTask({ task, onEdit }: { task: Task; onEdit: (task: Task) => void }) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: task.id,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={{ transform: CSS.Translate.toString(transform), transition }}
|
||||
className={cn(isDragging && "opacity-30")}
|
||||
>
|
||||
<TaskCard task={task} onEdit={onEdit} dragHandle={{ ...attributes, ...listeners }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
"use client";
|
||||
|
||||
import { AlignLeft, CalendarClock, GripVertical } from "lucide-react";
|
||||
import type { Task } from "@prisma/client";
|
||||
import { cn, formatDate } from "@/lib/utils";
|
||||
|
||||
/** Faelligkeit einordnen: ueberfaellig, heute, demnaechst. */
|
||||
function dueTone(due: Date | string | null, done: boolean) {
|
||||
if (!due || done) return null;
|
||||
const date = new Date(due);
|
||||
if (Number.isNaN(date.getTime())) return null;
|
||||
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const target = new Date(date);
|
||||
target.setHours(0, 0, 0, 0);
|
||||
|
||||
const days = Math.round((target.getTime() - today.getTime()) / 86_400_000);
|
||||
if (days < 0) return { className: "text-rose-300", label: "ueberfaellig" };
|
||||
if (days === 0) return { className: "text-amber-300", label: "heute" };
|
||||
if (days <= 3) return { className: "text-amber-200/70", label: null };
|
||||
return { className: "text-slate-500", label: null };
|
||||
}
|
||||
|
||||
export function TaskCard({
|
||||
task,
|
||||
onEdit,
|
||||
dragHandle,
|
||||
overlay = false,
|
||||
}: {
|
||||
task: Task;
|
||||
onEdit?: (task: Task) => void;
|
||||
dragHandle?: Record<string, unknown>;
|
||||
overlay?: boolean;
|
||||
}) {
|
||||
const done = task.status === "DONE";
|
||||
const due = dueTone(task.dueDate, done);
|
||||
|
||||
return (
|
||||
<article
|
||||
className={cn(
|
||||
"group rounded-lg border border-white/8 bg-[#0b0d1c] p-2 transition-colors",
|
||||
!overlay && "hover:border-white/16",
|
||||
overlay && "rotate-2 cursor-grabbing shadow-2xl ring-1 ring-violet-400/40",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
className="mt-0.5 shrink-0 cursor-grab touch-none rounded p-0.5 text-slate-700 transition-colors hover:text-slate-400 active:cursor-grabbing"
|
||||
aria-label={`${task.title} verschieben`}
|
||||
{...dragHandle}
|
||||
>
|
||||
<GripVertical className="h-3 w-3" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onEdit?.(task)}
|
||||
disabled={!onEdit}
|
||||
className="min-w-0 flex-1 text-left"
|
||||
>
|
||||
<p
|
||||
className={cn(
|
||||
"break-words text-xs leading-snug text-slate-200",
|
||||
done && "text-slate-500 line-through",
|
||||
)}
|
||||
>
|
||||
{task.title}
|
||||
</p>
|
||||
|
||||
{(task.description || task.dueDate || task.labels.length > 0) && (
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px]">
|
||||
{task.description ? (
|
||||
<AlignLeft className="h-2.5 w-2.5 text-slate-600" aria-label="hat Beschreibung" />
|
||||
) : null}
|
||||
|
||||
{task.dueDate ? (
|
||||
<span className={cn("inline-flex items-center gap-1", due?.className)}>
|
||||
<CalendarClock className="h-2.5 w-2.5" />
|
||||
{due?.label ?? formatDate(task.dueDate)}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
{task.labels.slice(0, 3).map((label) => (
|
||||
<span key={label} className="rounded bg-white/6 px-1 py-0.5 text-slate-400">
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Loader2, Trash2 } from "lucide-react";
|
||||
import type { Task, TaskStatus } from "@prisma/client";
|
||||
import { Modal } from "@/components/ui/Modal";
|
||||
import { TASK_STATUS_META, TASK_STATUS_ORDER } from "@/lib/tasks";
|
||||
import { cn, parseTags } from "@/lib/utils";
|
||||
|
||||
/** Datum fuer <input type="date"> – ortszeitbezogen, nicht UTC. */
|
||||
function toDateInput(value: Date | string | null): string {
|
||||
if (!value) return "";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return "";
|
||||
const offset = date.getTimezoneOffset() * 60_000;
|
||||
return new Date(date.getTime() - offset).toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
export function TaskDialog({
|
||||
open,
|
||||
projectId,
|
||||
task,
|
||||
initialStatus,
|
||||
onClose,
|
||||
}: {
|
||||
open: boolean;
|
||||
projectId: string;
|
||||
task: Task | null;
|
||||
initialStatus: TaskStatus;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [status, setStatus] = useState<TaskStatus>(initialStatus);
|
||||
const [dueDate, setDueDate] = useState("");
|
||||
const [labels, setLabels] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const isEdit = Boolean(task);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setTitle(task?.title ?? "");
|
||||
setDescription(task?.description ?? "");
|
||||
setStatus(task?.status ?? initialStatus);
|
||||
setDueDate(toDateInput(task?.dueDate ?? null));
|
||||
setLabels(task?.labels.join(", ") ?? "");
|
||||
setError(null);
|
||||
}, [open, task, initialStatus]);
|
||||
|
||||
async function submit(event: React.FormEvent) {
|
||||
event.preventDefault();
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
|
||||
const body = {
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
// Ohne Uhrzeit auf Mittag legen, damit Zeitzonenverschiebungen das
|
||||
// Datum nicht auf den Vortag ziehen.
|
||||
dueDate: dueDate ? `${dueDate}T12:00:00` : null,
|
||||
labels: parseTags(labels),
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
isEdit ? `/api/tasks/${task?.id}` : `/api/projects/${projectId}/tasks`,
|
||||
{
|
||||
method: isEdit ? "PATCH" : "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
},
|
||||
);
|
||||
const payload = await response.json().catch(() => ({}));
|
||||
if (!response.ok) throw new Error(payload.error ?? "Speichern fehlgeschlagen.");
|
||||
onClose();
|
||||
router.refresh();
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : String(caught));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function remove() {
|
||||
if (!task) return;
|
||||
if (!window.confirm(`Aufgabe „${task.title}“ loeschen?`)) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const response = await fetch(`/api/tasks/${task.id}`, { method: "DELETE" });
|
||||
if (!response.ok) throw new Error("Loeschen fehlgeschlagen.");
|
||||
onClose();
|
||||
router.refresh();
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : String(caught));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
width="md"
|
||||
title={isEdit ? "Aufgabe bearbeiten" : "Neue Aufgabe"}
|
||||
description={isEdit ? undefined : "Titel genuegt – alles andere ist optional."}
|
||||
>
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div>
|
||||
<label className="field-label" htmlFor="task-title">
|
||||
Titel *
|
||||
</label>
|
||||
<input
|
||||
id="task-title"
|
||||
className="field"
|
||||
value={title}
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
required
|
||||
maxLength={200}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="field-label">Spalte</span>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
{TASK_STATUS_ORDER.map((value) => {
|
||||
const meta = TASK_STATUS_META[value];
|
||||
return (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
onClick={() => setStatus(value)}
|
||||
className={cn(
|
||||
"rounded-lg border px-2 py-2 text-xs transition-all",
|
||||
status === value
|
||||
? "border-violet-400/60 bg-violet-500/12 text-white"
|
||||
: "border-white/9 text-slate-400 hover:border-white/20",
|
||||
)}
|
||||
>
|
||||
<span className="flex items-center justify-center gap-1.5">
|
||||
<span
|
||||
className="h-1.5 w-1.5 rounded-full"
|
||||
style={{ backgroundColor: meta.color }}
|
||||
/>
|
||||
{meta.label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="field-label" htmlFor="task-description">
|
||||
Beschreibung
|
||||
</label>
|
||||
<textarea
|
||||
id="task-description"
|
||||
className="field min-h-24 resize-y font-mono text-[13px]"
|
||||
value={description}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
placeholder="Markdown wird dargestellt."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="field-label" htmlFor="task-due">
|
||||
Faellig am
|
||||
</label>
|
||||
<input
|
||||
id="task-due"
|
||||
className="field"
|
||||
type="date"
|
||||
value={dueDate}
|
||||
onChange={(event) => setDueDate(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label" htmlFor="task-labels">
|
||||
Labels (kommagetrennt)
|
||||
</label>
|
||||
<input
|
||||
id="task-labels"
|
||||
className="field"
|
||||
value={labels}
|
||||
onChange={(event) => setLabels(event.target.value)}
|
||||
placeholder="bug, ui"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center justify-between gap-2 pt-1">
|
||||
{isEdit ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger px-3 py-1.5 text-xs"
|
||||
onClick={remove}
|
||||
disabled={busy}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
Loeschen
|
||||
</button>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose} disabled={busy}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={busy || !title.trim()}>
|
||||
{busy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
||||
{isEdit ? "Speichern" : "Anlegen"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user