298 lines
13 KiB
TypeScript
298 lines
13 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import Shell from "../../components/shell";
|
|
import LogoImg from "../../components/logo-img";
|
|
import { validateVoucher } from "@/lib/vouchers";
|
|
import { ALLOWED_REMINDER_DAYS, DEFAULT_REMINDER_DAYS } from "@/lib/reminders";
|
|
import type { LogoCandidate } from "@/lib/logo";
|
|
|
|
// Erweiterbar für Task 5 (Kontakte): zusätzliches Feld contactIds + <ContactSelect />
|
|
// ohne bestehende Felder anzufassen — Felder als Konfiguration belassen.
|
|
const FIELDS = [
|
|
{ name: "name", label: "Name", type: "text", placeholder: "z. B. Therme Erding" },
|
|
{ name: "anbieter", label: "Anbieter", type: "text", placeholder: "z. B. Therme Erding" },
|
|
{ name: "wertCents", label: "Wert (Cent)", type: "number", placeholder: "5000" },
|
|
{ name: "restCents", label: "Rest (Cent, leer = Wert)", type: "number", placeholder: "" },
|
|
{ name: "ablaufdatum", label: "Ablaufdatum", type: "date", placeholder: "" },
|
|
{ name: "codeText", label: "Code", type: "text", placeholder: "Code oder Nummer" },
|
|
{ name: "kategorie", label: "Kategorie", type: "text", placeholder: "z. B. Erlebnis" },
|
|
{ name: "notiz", label: "Notiz", type: "text", placeholder: "Optionale Notiz" },
|
|
] as const;
|
|
|
|
const inputClass =
|
|
"mt-1.5 h-11 w-full rounded-field border border-line bg-white px-3.5 text-sm text-ink placeholder:text-muted/60";
|
|
|
|
export default function NewVoucherPage() {
|
|
const router = useRouter();
|
|
const [values, setValues] = useState<Record<string, string>>({});
|
|
const [errors, setErrors] = useState<string[]>([]);
|
|
const [serverError, setServerError] = useState("");
|
|
const [contacts, setContacts] = useState<{ id: number; name: string }[]>([]);
|
|
const [contactIds, setContactIds] = useState<number[]>([]);
|
|
const [members, setMembers] = useState<{ id: number; name: string }[]>([]);
|
|
const [memberId, setMemberId] = useState("");
|
|
const [reminderDays, setReminderDays] = useState<number[]>([...DEFAULT_REMINDER_DAYS]);
|
|
const [candidates, setCandidates] = useState<LogoCandidate[]>([]);
|
|
const [logoSearching, setLogoSearching] = useState(false);
|
|
const [logoError, setLogoError] = useState("");
|
|
const [logoSearched, setLogoSearched] = useState(false);
|
|
const [selectedLogo, setSelectedLogo] = useState<LogoCandidate | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetch("/api/contacts")
|
|
.then((r) => (r.ok ? r.json() : []))
|
|
.then(setContacts)
|
|
.catch(() => {});
|
|
fetch("/api/members")
|
|
.then((r) => (r.ok ? r.json() : []))
|
|
.then(setMembers)
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
function set(name: string, value: string) {
|
|
setValues((v) => ({ ...v, [name]: value }));
|
|
}
|
|
|
|
function toggleDay(day: number) {
|
|
setReminderDays((days) => (days.includes(day) ? days.filter((d) => d !== day) : [...days, day].sort((a, b) => b - a)));
|
|
}
|
|
|
|
async function searchLogos() {
|
|
const q = (values.anbieter ?? "").trim();
|
|
if (!q) {
|
|
setLogoError("Bitte zuerst einen Anbieter eintragen.");
|
|
return;
|
|
}
|
|
setLogoSearching(true);
|
|
setLogoError("");
|
|
setLogoSearched(false);
|
|
try {
|
|
const res = await fetch(`/api/logos/search?q=${encodeURIComponent(q)}`);
|
|
const data = await res.json().catch(() => null);
|
|
if (!res.ok) {
|
|
setLogoError(data?.error ?? "Suche fehlgeschlagen");
|
|
setCandidates([]);
|
|
} else {
|
|
setCandidates(Array.isArray(data) ? data : []);
|
|
if (!Array.isArray(data) || data.length === 0) setLogoError("Kein Logo gefunden.");
|
|
}
|
|
} catch {
|
|
setLogoError("Suche fehlgeschlagen");
|
|
setCandidates([]);
|
|
} finally {
|
|
setLogoSearching(false);
|
|
setLogoSearched(true);
|
|
}
|
|
}
|
|
|
|
async function onSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
const wertCents = Number(values.wertCents);
|
|
const restRaw = values.restCents;
|
|
const input = {
|
|
name: values.name ?? "",
|
|
anbieter: values.anbieter ?? "",
|
|
wertCents,
|
|
restCents: restRaw === undefined || restRaw === "" ? wertCents : Number(restRaw),
|
|
ablaufdatum: values.ablaufdatum || null,
|
|
codeText: values.codeText || null,
|
|
kategorie: values.kategorie || null,
|
|
notiz: values.notiz || null,
|
|
};
|
|
const errs = validateVoucher(input);
|
|
setErrors(errs);
|
|
if (errs.length) return;
|
|
const res = await fetch("/api/vouchers", {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({ ...input, contactIds, reminderDays, providerDomain: selectedLogo?.domain ?? null, memberId: memberId === "" ? null : Number(memberId) }),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
setErrors(data.errors ?? []);
|
|
setServerError(data.errors ? "" : "Speichern fehlgeschlagen");
|
|
return;
|
|
}
|
|
const created = await res.json();
|
|
router.push(`/vouchers/${created.id}`);
|
|
}
|
|
|
|
return (
|
|
<Shell>
|
|
<Link href="/" className="text-sm font-medium text-muted hover:text-ink">
|
|
← Zurück
|
|
</Link>
|
|
<h1 className="mt-2 text-2xl font-semibold tracking-tight">Gutschein anlegen</h1>
|
|
<p className="mt-1 text-sm text-muted">Alle Angaben lassen sich später noch ändern.</p>
|
|
<form onSubmit={onSubmit} className="mt-5 rounded-card border border-line bg-white p-5 sm:p-6" noValidate>
|
|
<div className="mb-4">
|
|
<label htmlFor="memberId" className="block text-[13px] font-semibold">
|
|
Angelegt von
|
|
</label>
|
|
{members.length === 0 ? (
|
|
<p className="mt-1.5 text-[13px] text-muted">
|
|
Noch keine Haushaltsmitglieder. Lege sie unter <Link href="/settings" className="font-semibold text-brand-700 underline">Einstellungen</Link> an.
|
|
</p>
|
|
) : (
|
|
<select
|
|
id="memberId"
|
|
value={memberId}
|
|
onChange={(e) => setMemberId(e.target.value)}
|
|
className={`${inputClass} appearance-none`}
|
|
>
|
|
<option value="">Nicht erfasst</option>
|
|
{members.map((m) => (
|
|
<option key={m.id} value={m.id}>
|
|
{m.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{FIELDS.map((f) => (
|
|
<div key={f.name} className={f.name === "notiz" ? "sm:col-span-2" : undefined}>
|
|
<label htmlFor={f.name} className="block text-[13px] font-semibold">
|
|
{f.label}
|
|
</label>
|
|
<input
|
|
id={f.name}
|
|
name={f.name}
|
|
type={f.type}
|
|
value={values[f.name] ?? ""}
|
|
placeholder={f.placeholder || undefined}
|
|
onChange={(e) => set(f.name, e.target.value)}
|
|
aria-invalid={errors.includes(f.name)}
|
|
className={`${inputClass} ${errors.includes(f.name) ? "border-danger" : ""}`}
|
|
/>
|
|
{errors.includes(f.name) && (
|
|
<p className="mt-1 text-[13px] font-medium text-danger">Bitte prüfe dieses Feld.</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-4 rounded-field bg-wash p-4">
|
|
<h2 className="text-[13px] font-semibold">Anbieterlogo</h2>
|
|
{selectedLogo ? (
|
|
<div className="mt-2 flex items-center gap-3">
|
|
<LogoImg logoUrl={selectedLogo.logoUrl} name={selectedLogo.name} />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-semibold">{selectedLogo.name}</p>
|
|
<p className="truncate text-[13px] text-muted">{selectedLogo.domain}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedLogo(null)}
|
|
className="shrink-0 rounded-field border border-line bg-white px-3 py-1.5 text-[13px] font-medium hover:text-danger"
|
|
>
|
|
Entfernen
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<p className="mt-0.5 text-[13px] text-muted">Logo anhand des Anbieternamens suchen und bestätigen.</p>
|
|
<button
|
|
type="button"
|
|
onClick={searchLogos}
|
|
disabled={logoSearching}
|
|
className="mt-2 h-10 rounded-field border border-line bg-white px-4 text-sm font-semibold transition-colors hover:border-brand-600 hover:text-brand-700 disabled:opacity-60"
|
|
>
|
|
{logoSearching ? "Sucht …" : "Logo suchen"}
|
|
</button>
|
|
{logoError && <p role="alert" className="mt-2 text-[13px] font-medium text-danger">{logoError}</p>}
|
|
{logoSearched && !logoError && candidates.length > 0 && (
|
|
<ul className="mt-2 grid gap-1.5">
|
|
{candidates.map((c) => (
|
|
<li key={c.domain}>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedLogo(c);
|
|
setCandidates([]);
|
|
setLogoSearched(false);
|
|
}}
|
|
className="flex w-full items-center gap-3 rounded-[10px] px-2 py-1.5 text-left transition-colors hover:bg-white"
|
|
>
|
|
<LogoImg logoUrl={c.logoUrl} name={c.name} size={36} />
|
|
<span className="min-w-0">
|
|
<span className="block truncate text-sm font-semibold">{c.name}</span>
|
|
<span className="block truncate text-[13px] text-muted">{c.domain}</span>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
<fieldset className="mt-4">
|
|
<legend className="text-[13px] font-semibold">Erinnerung (Tage vorher)</legend>
|
|
<p className="mt-0.5 text-[13px] text-muted">Nichts ausgewählt bedeutet keine Erinnerung.</p>
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
{ALLOWED_REMINDER_DAYS.map((day) => {
|
|
const checked = reminderDays.includes(day);
|
|
return (
|
|
<label
|
|
key={day}
|
|
className={`flex cursor-pointer items-center gap-2 rounded-full border px-3.5 py-2 text-sm font-medium transition-colors ${
|
|
checked ? "border-brand-700 bg-brand-600 text-white" : "border-line bg-white hover:border-brand-600"
|
|
}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={() => toggleDay(day)}
|
|
className="sr-only"
|
|
/>
|
|
{day} {day === 1 ? "Tag" : "Tage"}
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
</fieldset>
|
|
<section id="kontakte" aria-label="Empfänger" className="mt-4 rounded-field bg-wash p-4">
|
|
<h2 className="text-[13px] font-semibold">Empfänger</h2>
|
|
<p className="mt-0.5 text-[13px] text-muted">Wer soll an diesen Gutschein erinnert werden?</p>
|
|
{contacts.length === 0 ? (
|
|
<p className="mt-2 text-[13px] text-muted">
|
|
Noch keine Kontakte. Lege sie unter <Link href="/contacts" className="font-semibold text-brand-700 underline">Kontakte</Link> an.
|
|
</p>
|
|
) : (
|
|
<ul className="mt-2 grid gap-1.5">
|
|
{contacts.map((c) => (
|
|
<li key={c.id}>
|
|
<label className="flex cursor-pointer items-center gap-2.5 rounded-lg px-1 py-1 text-sm hover:bg-white">
|
|
<input
|
|
type="checkbox"
|
|
checked={contactIds.includes(c.id)}
|
|
onChange={(e) =>
|
|
setContactIds((ids) => (e.target.checked ? [...ids, c.id] : ids.filter((x) => x !== c.id)))
|
|
}
|
|
className="h-4 w-4 accent-brand-700"
|
|
/>
|
|
{c.name}
|
|
</label>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
{serverError && (
|
|
<p role="alert" className="mt-4 rounded-field bg-danger/10 px-3.5 py-2.5 text-sm font-medium text-danger">
|
|
{serverError}
|
|
</p>
|
|
)}
|
|
<button
|
|
type="submit"
|
|
className="mt-5 h-12 w-full rounded-field bg-brand-600 text-sm font-semibold text-white transition-colors hover:bg-brand-700 active:scale-[0.99] sm:w-auto sm:px-8"
|
|
>
|
|
Speichern
|
|
</button>
|
|
</form>
|
|
</Shell>
|
|
);
|
|
}
|