florian.wildeandClaude Opus 5
0212dad2bf
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>
97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|