continued the kita-planer

2026-05-08 14:32:14 +02:00
parent b686e714ff
commit 7aff691803
85 changed files with 9434 additions and 588 deletions
@@ -0,0 +1,142 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Loader2, Send, UploadCloud } from "lucide-react";
+import { toast } from "sonner";
+
+import { createAnnouncement } from "@/actions/announcements";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { MarkdownContent } from "@/components/markdown-content";
+
+export function NewsForm() {
+  const [isPending, startTransition] = useTransition();
+  const [sendEmail, setSendEmail] = useState(false);
+  const [content, setContent] = useState("");
+
+  function handleSubmit(formData: FormData) {
+    startTransition(async () => {
+      if (sendEmail) {
+        formData.set("sendEmail", "on");
+      }
+
+      const result = await createAnnouncement(formData);
+      if (result.error) {
+        toast.error(result.error);
+        return;
+      }
+
+      if (result.warning) {
+        toast.warning(result.warning);
+      } else {
+        toast.success("Ankündigung veröffentlicht.");
+      }
+    });
+  }
+
+  return (
+    <form action={handleSubmit} className="grid gap-5">
+      <div className="grid gap-2">
+        <Label htmlFor="news-title">Titel</Label>
+        <Input
+          id="news-title"
+          name="title"
+          placeholder="Sommerfest: Aufbau und Mitbringliste"
+          required
+        />
+      </div>
+
+      <div className="grid gap-2">
+        <Label htmlFor="news-content">Text</Label>
+        <Textarea
+          id="news-content"
+          name="content"
+          rows={10}
+          value={content}
+          onChange={(event) => setContent(event.target.value)}
+          placeholder={"## Liebe Familien,\n\nhier stehen die offiziellen Informationen..."}
+          required
+        />
+        <p className="text-xs text-muted-foreground">
+          Markdown ist aktiv. HTML wird nicht interpretiert.
+        </p>
+      </div>
+
+      {content.trim() && (
+        <div className="rounded-md border bg-muted/30 p-4 text-sm">
+          <p className="mb-3 text-xs font-semibold uppercase text-muted-foreground">
+            Vorschau
+          </p>
+          <MarkdownContent content={content} />
+        </div>
+      )}
+
+      <div className="grid gap-2">
+        <Label htmlFor="attachments">Anhänge</Label>
+        <div className="rounded-md border border-dashed bg-background p-4">
+          <Input
+            id="attachments"
+            name="attachments"
+            type="file"
+            accept=".pdf,.jpg,.jpeg,.png,application/pdf,image/jpeg,image/png"
+            multiple
+          />
+          <p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
+            <UploadCloud className="h-3.5 w-3.5" />
+            PDF, JPG und PNG bis 10 MB pro Datei.
+          </p>
+        </div>
+      </div>
+
+      <div className="rounded-md border p-4">
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="sendEmail"
+            checked={sendEmail}
+            onCheckedChange={(checked) => setSendEmail(checked === true)}
+          />
+          <Label htmlFor="sendEmail" className="cursor-pointer">
+            Auch als E-Mail versenden
+          </Label>
+        </div>
+
+        {sendEmail && (
+          <div className="mt-4 grid gap-2">
+            <Label>Empfänger</Label>
+            <Select name="audience" defaultValue="ELTERN">
+              <SelectTrigger>
+                <SelectValue placeholder="Empfänger auswählen" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="ELTERN">Eltern</SelectItem>
+                <SelectItem value="ERZIEHER">ErzieherInnen</SelectItem>
+                <SelectItem value="ALLE">Alle</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end">
+        <Button type="submit" disabled={isPending}>
+          {isPending ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Send className="h-4 w-4" />
+          )}
+          Veröffentlichen
+        </Button>
+      </div>
+    </form>
+  );
+}