feat(vorlagen): Editor, Liste und Versionsgeschichte (#24)

2026-09-25 08:23:22 +00:00
parent d8d5444e9f
commit e3d80e5982
65 changed files with 5454 additions and 103 deletions
@@ -0,0 +1,94 @@
+"use client";
+
+import { useActionState } from "react";
+import { Button } from "@/components/ui/button";
+import { vorlageBearbeitenAktion, type AktionsErgebnis } from "@/server/actions/vorlagen";
+
+const FELD =
+  "min-h-11 rounded-karte border border-linie bg-grund px-3 text-sm text-text outline-none focus-visible:border-akzent";
+
+/**
+ * Kopfdaten einer Vorlage: Name, Beschreibung, Kategorie, Schlagworte, Kunde.
+ *
+ * Sie haengen an der Vorlage, nicht an einer Version — deshalb lassen sie sich
+ * jederzeit aendern, auch wenn die neueste Version veroeffentlicht ist. Ein
+ * Tippfehler im Namen soll keine neue Version kosten, und die Schritte, auf die
+ * ein Lauf verweist, bleiben davon unberuehrt.
+ */
+export function VorlageKopfdaten({
+  vorlage,
+  kunden,
+}: {
+  vorlage: {
+    readonly id: string;
+    readonly name: string;
+    readonly beschreibung: string | null;
+    readonly kategorie: string | null;
+    readonly schlagworte: readonly string[];
+    readonly kundeId: string | null;
+  };
+  kunden: readonly { id: string; name: string }[];
+}) {
+  const [ergebnis, aktion, laeuft] = useActionState<AktionsErgebnis, FormData>(vorlageBearbeitenAktion, {});
+
+  return (
+    <form action={aktion} className="flex flex-col gap-4">
+      <input type="hidden" name="vorlageId" value={vorlage.id} />
+      <label className="flex flex-col gap-1.5 text-sm">
+        <span className="text-nebentext">Name</span>
+        <input name="name" required defaultValue={vorlage.name} className={FELD} />
+      </label>
+      <label className="flex flex-col gap-1.5 text-sm">
+        <span className="text-nebentext">Beschreibung</span>
+        <textarea
+          name="beschreibung"
+          rows={2}
+          defaultValue={vorlage.beschreibung ?? ""}
+          className={`${FELD} py-2`}
+        />
+      </label>
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="flex flex-col gap-1.5 text-sm">
+          <span className="text-nebentext">Kategorie</span>
+          <input name="kategorie" defaultValue={vorlage.kategorie ?? ""} className={FELD} />
+        </label>
+        <label className="flex flex-col gap-1.5 text-sm">
+          <span className="text-nebentext">Schlagworte, mit Komma getrennt</span>
+          <input name="schlagworte" defaultValue={vorlage.schlagworte.join(", ")} className={FELD} />
+        </label>
+      </div>
+      {kunden.length > 0 ? (
+        <label className="flex flex-col gap-1.5 text-sm">
+          <span className="text-nebentext">Nur für einen Kunden</span>
+          <select name="kundeId" defaultValue={vorlage.kundeId ?? ""} className={FELD}>
+            <option value="">für alle Kunden</option>
+            {kunden.map((kunde) => (
+              <option key={kunde.id} value={kunde.id}>
+                {kunde.name}
+              </option>
+            ))}
+          </select>
+        </label>
+      ) : null}
+
+      {ergebnis.fehler ? (
+        <p role="alert" className="text-sm text-fehler">
+          {ergebnis.fehler}
+        </p>
+      ) : null}
+      {ergebnis.erfolg ? (
+        <p role="status" className="text-sm text-erledigt">
+          {ergebnis.erfolg}
+        </p>
+      ) : null}
+
+      <Button
+        type="submit"
+        disabled={laeuft}
+        className="h-11 self-start rounded-pille px-5 text-sm font-semibold"
+      >
+        {laeuft ? "Wird gespeichert …" : "Kopfdaten speichern"}
+      </Button>
+    </form>
+  );
+}