florian.wilde
a6165de10c
Alle Seiten und Komponenten (öffentliche Speisekarte, Login, Kantinen- und Admin-Bereich, eigenes Konto) verwenden jetzt die Wörterbücher aus lib/i18n statt fest codierter deutscher Texte. Gerichte/Bereiche/ Allergene/Zusatzstoffe zeigen den Namen zur aktuell gewählten Sprache; Gerichte- und Kennzeichnungs-Formulare bekommen Englisch-/Polnisch- Felder mit Übersetzen-Button (siehe vorherigen Commit). Datumsformat- ierung (formatDateLong) nimmt jetzt ein locale-Argument statt fix 'de-DE'.
450 lines
14 KiB
TypeScript
450 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
import { createClient } from "@/lib/supabase/client";
|
||
import { dishCodes, formatPrice } from "@/lib/menu";
|
||
import { formatMessage } from "@/lib/i18n/shared";
|
||
import { localized } from "@/lib/types";
|
||
import type { CodeItem, Dish } from "@/lib/types";
|
||
import ChipPicker from "@/components/ChipPicker";
|
||
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
|
||
|
||
interface DishForm {
|
||
id: string | null; // null = neues Gericht
|
||
name: string;
|
||
nameEn: string;
|
||
namePl: string;
|
||
price: string;
|
||
allergens: string[];
|
||
additives: string[];
|
||
}
|
||
|
||
const EMPTY_FORM: DishForm = {
|
||
id: null,
|
||
name: "",
|
||
nameEn: "",
|
||
namePl: "",
|
||
price: "",
|
||
allergens: [],
|
||
additives: [],
|
||
};
|
||
|
||
export default function DishManager() {
|
||
const supabase = useMemo(() => createClient(), []);
|
||
const dict = useDict();
|
||
const locale = useLocale();
|
||
const [dishes, setDishes] = useState<Dish[]>([]);
|
||
const [allergens, setAllergens] = useState<CodeItem[]>([]);
|
||
const [additives, setAdditives] = useState<CodeItem[]>([]);
|
||
const [form, setForm] = useState<DishForm | null>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||
const [bulkBusy, setBulkBusy] = useState(false);
|
||
const [search, setSearch] = useState("");
|
||
const [translateState, setTranslateState] = useState<
|
||
"idle" | "busy" | "done" | "unavailable"
|
||
>("idle");
|
||
|
||
// Live-Suche: filtert die Liste bereits während des Tippens
|
||
const visible = useMemo(() => {
|
||
const q = search.trim().toLowerCase();
|
||
return q ? dishes.filter((d) => d.name.toLowerCase().includes(q)) : dishes;
|
||
}, [dishes, search]);
|
||
|
||
const load = useCallback(async () => {
|
||
const [dishesRes, allergensRes, additivesRes] = await Promise.all([
|
||
supabase.from("dishes").select("*").order("name"),
|
||
supabase.from("allergens").select("*").order("sort"),
|
||
supabase.from("additives").select("*").order("sort"),
|
||
]);
|
||
const problem = dishesRes.error ?? allergensRes.error ?? additivesRes.error;
|
||
if (problem)
|
||
setError(formatMessage(dict.dishManager.loadError, { message: problem.message }));
|
||
else {
|
||
setDishes(dishesRes.data as Dish[]);
|
||
setAllergens(allergensRes.data as CodeItem[]);
|
||
setAdditives(additivesRes.data as CodeItem[]);
|
||
}
|
||
setLoading(false);
|
||
}, [supabase, dict]);
|
||
|
||
useEffect(() => {
|
||
load();
|
||
}, [load]);
|
||
|
||
async function save(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
if (!form) return;
|
||
setError(null);
|
||
const price = Number.parseFloat(form.price.replace(",", "."));
|
||
if (Number.isNaN(price) || price < 0) {
|
||
setError(dict.dishManager.invalidPrice);
|
||
return;
|
||
}
|
||
const payload = {
|
||
name: form.name.trim(),
|
||
name_en: form.nameEn.trim() || null,
|
||
name_pl: form.namePl.trim() || null,
|
||
price,
|
||
allergens: form.allergens,
|
||
additives: form.additives,
|
||
};
|
||
const { error } = form.id
|
||
? await supabase.from("dishes").update(payload).eq("id", form.id)
|
||
: await supabase.from("dishes").insert(payload);
|
||
if (error) {
|
||
setError(formatMessage(dict.dishManager.saveError, { message: error.message }));
|
||
return;
|
||
}
|
||
setForm(null);
|
||
await load();
|
||
}
|
||
|
||
async function remove(dish: Dish) {
|
||
if (
|
||
!window.confirm(
|
||
formatMessage(dict.dishManager.confirmDelete, { name: dish.name })
|
||
)
|
||
)
|
||
return;
|
||
const { error } = await supabase.from("dishes").delete().eq("id", dish.id);
|
||
if (error)
|
||
setError(formatMessage(dict.dishManager.deleteError, { message: error.message }));
|
||
setSelected((prev) => {
|
||
const next = new Set(prev);
|
||
next.delete(dish.id);
|
||
return next;
|
||
});
|
||
await load();
|
||
}
|
||
|
||
function toggleOne(id: string) {
|
||
setSelected((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(id)) next.delete(id);
|
||
else next.add(id);
|
||
return next;
|
||
});
|
||
}
|
||
|
||
// "Alle auswählen" bezieht sich auf die aktuell gefilterte Liste
|
||
function toggleAll() {
|
||
setSelected((prev) => {
|
||
const next = new Set(prev);
|
||
const everyVisibleSelected = visible.every((d) => next.has(d.id));
|
||
visible.forEach((d) =>
|
||
everyVisibleSelected ? next.delete(d.id) : next.add(d.id)
|
||
);
|
||
return next;
|
||
});
|
||
}
|
||
|
||
async function removeSelected() {
|
||
if (selected.size === 0) return;
|
||
if (
|
||
!window.confirm(
|
||
formatMessage(dict.dishManager.confirmDeleteSelected, {
|
||
count: selected.size,
|
||
})
|
||
)
|
||
)
|
||
return;
|
||
setBulkBusy(true);
|
||
setError(null);
|
||
const { error } = await supabase
|
||
.from("dishes")
|
||
.delete()
|
||
.in("id", Array.from(selected));
|
||
if (error)
|
||
setError(formatMessage(dict.dishManager.deleteError, { message: error.message }));
|
||
setSelected(new Set());
|
||
setBulkBusy(false);
|
||
await load();
|
||
}
|
||
|
||
function toggleAllergen(code: string) {
|
||
if (!form) return;
|
||
setForm({
|
||
...form,
|
||
allergens: form.allergens.includes(code)
|
||
? form.allergens.filter((c) => c !== code)
|
||
: [...form.allergens, code],
|
||
});
|
||
}
|
||
|
||
function toggleAdditive(code: string) {
|
||
if (!form) return;
|
||
setForm({
|
||
...form,
|
||
additives: form.additives.includes(code)
|
||
? form.additives.filter((c) => c !== code)
|
||
: [...form.additives, code],
|
||
});
|
||
}
|
||
|
||
async function autoTranslate() {
|
||
if (!form || !form.name.trim()) return;
|
||
setTranslateState("busy");
|
||
setError(null);
|
||
try {
|
||
const res = await fetch("/api/translate", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
table: "dishes",
|
||
id: form.id,
|
||
text: form.name.trim(),
|
||
}),
|
||
});
|
||
const data = await res.json();
|
||
if (!res.ok) throw new Error(data?.error ?? `Fehler (${res.status})`);
|
||
if (data.configured === false) {
|
||
setTranslateState("unavailable");
|
||
return;
|
||
}
|
||
setForm((prev) =>
|
||
prev ? { ...prev, nameEn: data.en ?? prev.nameEn, namePl: data.pl ?? prev.namePl } : prev
|
||
);
|
||
setTranslateState("done");
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : String(err));
|
||
setTranslateState("idle");
|
||
}
|
||
}
|
||
|
||
const allSelected =
|
||
visible.length > 0 && visible.every((d) => selected.has(d.id));
|
||
|
||
return (
|
||
<div className="max-w-3xl">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
|
||
{dict.dishManager.title}
|
||
</h1>
|
||
<button
|
||
type="button"
|
||
className="btn btn-add"
|
||
onClick={() => {
|
||
setForm(EMPTY_FORM);
|
||
setTranslateState("idle");
|
||
}}
|
||
>
|
||
{dict.dishManager.newDish}
|
||
</button>
|
||
</div>
|
||
|
||
{error && (
|
||
<p className="mb-3 text-sm text-[var(--c-del)]" role="alert">
|
||
{error}
|
||
</p>
|
||
)}
|
||
|
||
{form && (
|
||
<form onSubmit={save} className="card mb-4 space-y-4">
|
||
<h2 className="font-semibold">
|
||
{form.id ? dict.dishManager.editDish : dict.dishManager.newDish}
|
||
</h2>
|
||
<div>
|
||
<label className="label" htmlFor="dish-name">
|
||
{dict.dishManager.nameLabel}
|
||
</label>
|
||
<input
|
||
id="dish-name"
|
||
className="input"
|
||
value={form.name}
|
||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="max-w-40">
|
||
<label className="label" htmlFor="dish-price">
|
||
{dict.dishManager.priceLabel}
|
||
</label>
|
||
<input
|
||
id="dish-price"
|
||
className="input"
|
||
inputMode="decimal"
|
||
placeholder={dict.dishManager.pricePlaceholder}
|
||
value={form.price}
|
||
onChange={(e) => setForm({ ...form, price: e.target.value })}
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
<div>
|
||
<label className="label" htmlFor="dish-name-en">
|
||
{dict.dishManager.nameEnLabel}
|
||
</label>
|
||
<input
|
||
id="dish-name-en"
|
||
className="input"
|
||
value={form.nameEn}
|
||
onChange={(e) => setForm({ ...form, nameEn: e.target.value })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="label" htmlFor="dish-name-pl">
|
||
{dict.dishManager.namePlLabel}
|
||
</label>
|
||
<input
|
||
id="dish-name-pl"
|
||
className="input"
|
||
value={form.namePl}
|
||
onChange={(e) => setForm({ ...form, namePl: e.target.value })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<button
|
||
type="button"
|
||
className="btn btn-neutral"
|
||
onClick={autoTranslate}
|
||
disabled={translateState === "busy" || !form.name.trim()}
|
||
>
|
||
{translateState === "busy"
|
||
? dict.dishManager.translating
|
||
: dict.dishManager.autoTranslate}
|
||
</button>
|
||
{translateState === "done" && (
|
||
<span className="ml-2 text-sm text-green-700">
|
||
{dict.dishManager.translated}
|
||
</span>
|
||
)}
|
||
{translateState === "unavailable" && (
|
||
<span className="ml-2 text-sm text-gray-500">
|
||
{dict.dishManager.translateUnavailable}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<ChipPicker
|
||
label={dict.codeList.allergensTitle}
|
||
items={allergens}
|
||
selected={form.allergens}
|
||
onToggle={toggleAllergen}
|
||
/>
|
||
<ChipPicker
|
||
label={dict.codeList.additivesTitle}
|
||
items={additives}
|
||
selected={form.additives}
|
||
onToggle={toggleAdditive}
|
||
/>
|
||
<div className="flex gap-2">
|
||
<button type="submit" className="btn btn-add">
|
||
{dict.common.save}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-neutral"
|
||
onClick={() => setForm(null)}
|
||
>
|
||
{dict.common.cancel}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
|
||
{loading ? (
|
||
<p className="text-gray-500">{dict.common.loading}</p>
|
||
) : (
|
||
<>
|
||
{dishes.length > 0 && (
|
||
<input
|
||
type="search"
|
||
className="input mb-3"
|
||
placeholder={dict.dishManager.searchPlaceholder}
|
||
value={search}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
aria-label={dict.dishManager.searchPlaceholder}
|
||
/>
|
||
)}
|
||
{dishes.length > 0 && (
|
||
<div className="flex items-center gap-3 mb-2 text-sm">
|
||
<label className="flex items-center gap-2 cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
checked={allSelected}
|
||
onChange={toggleAll}
|
||
/>
|
||
{dict.dishManager.selectAll}
|
||
</label>
|
||
<span className="text-gray-500">
|
||
{formatMessage(dict.dishManager.selectedCount, { count: selected.size })}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
className="btn btn-del ml-auto"
|
||
onClick={removeSelected}
|
||
disabled={selected.size === 0 || bulkBusy}
|
||
>
|
||
{selected.size > 0
|
||
? formatMessage(dict.dishManager.deleteSelectedCount, {
|
||
count: selected.size,
|
||
})
|
||
: dict.dishManager.deleteSelected}
|
||
</button>
|
||
</div>
|
||
)}
|
||
<ul className="divide-y divide-gray-200 border border-gray-200 rounded-md bg-white">
|
||
{visible.map((dish) => {
|
||
const codes = dishCodes(dish);
|
||
return (
|
||
<li key={dish.id} className="flex items-center gap-3 px-4 py-2">
|
||
<input
|
||
type="checkbox"
|
||
checked={selected.has(dish.id)}
|
||
onChange={() => toggleOne(dish.id)}
|
||
aria-label={dish.name}
|
||
/>
|
||
<span className="mr-auto">
|
||
<span className="font-semibold">{localized(dish, locale)}</span>
|
||
{codes && <sup className="dish-codes">{codes}</sup>}{" "}
|
||
<span className="text-gray-500">
|
||
– {formatPrice(dish.price)}
|
||
</span>
|
||
</span>
|
||
<button
|
||
type="button"
|
||
className="btn btn-primary"
|
||
onClick={() => {
|
||
setForm({
|
||
id: dish.id,
|
||
name: dish.name,
|
||
nameEn: dish.name_en ?? "",
|
||
namePl: dish.name_pl ?? "",
|
||
price: String(dish.price).replace(".", ","),
|
||
allergens: dish.allergens ?? [],
|
||
additives: dish.additives ?? [],
|
||
});
|
||
setTranslateState("idle");
|
||
}}
|
||
>
|
||
{dict.common.edit}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-del"
|
||
onClick={() => remove(dish)}
|
||
>
|
||
{dict.common.delete}
|
||
</button>
|
||
</li>
|
||
);
|
||
})}
|
||
{dishes.length === 0 && (
|
||
<li className="px-4 py-3 text-gray-500">{dict.dishManager.empty}</li>
|
||
)}
|
||
{dishes.length > 0 && visible.length === 0 && (
|
||
<li className="px-4 py-3 text-gray-500">
|
||
{formatMessage(dict.dishManager.noResults, { query: search })}
|
||
</li>
|
||
)}
|
||
</ul>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|