Mehrsprachige Oberfläche + lokalisierte Gericht-/Bereichsnamen
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'.
This commit is contained in:
+125
-24
@@ -5,31 +5,44 @@
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { createClient } from "@/lib/supabase/client";
|
||||
import { formatMessage } from "@/lib/i18n/shared";
|
||||
import { localized } from "@/lib/types";
|
||||
import type { CodeItem } from "@/lib/types";
|
||||
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
|
||||
|
||||
export default function CodeListManager({
|
||||
table,
|
||||
title,
|
||||
codeLabel,
|
||||
}: {
|
||||
table: "allergens" | "additives";
|
||||
title: string;
|
||||
codeLabel: string;
|
||||
}) {
|
||||
const supabase = useMemo(() => createClient(), []);
|
||||
const dict = useDict();
|
||||
const locale = useLocale();
|
||||
const title =
|
||||
table === "allergens" ? dict.codeList.allergensTitle : dict.codeList.additivesTitle;
|
||||
const codeLabel =
|
||||
table === "allergens"
|
||||
? dict.codeList.allergenCodeLabel
|
||||
: dict.codeList.additiveCodeLabel;
|
||||
|
||||
const [items, setItems] = useState<CodeItem[]>([]);
|
||||
const [editing, setEditing] = useState<{
|
||||
original: string | null; // code vor der Bearbeitung, null = neu
|
||||
code: string;
|
||||
name: string;
|
||||
nameEn: string;
|
||||
namePl: string;
|
||||
} | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [translateState, setTranslateState] = useState<
|
||||
"idle" | "busy" | "done" | "unavailable"
|
||||
>("idle");
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const { data, error } = await supabase.from(table).select("*").order("sort");
|
||||
if (error) setError(`Laden fehlgeschlagen: ${error.message}`);
|
||||
if (error) setError(formatMessage(dict.codeList.loadError, { message: error.message }));
|
||||
else setItems(data as CodeItem[]);
|
||||
}, [supabase, table]);
|
||||
}, [supabase, table, dict]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
@@ -42,24 +55,30 @@ export default function CodeListManager({
|
||||
const code = editing.code.trim();
|
||||
const name = editing.name.trim();
|
||||
if (!code || !name) return;
|
||||
const payload = {
|
||||
code,
|
||||
name,
|
||||
name_en: editing.nameEn.trim() || null,
|
||||
name_pl: editing.namePl.trim() || null,
|
||||
};
|
||||
|
||||
let dbError;
|
||||
if (editing.original) {
|
||||
({ error: dbError } = await supabase
|
||||
.from(table)
|
||||
.update({ code, name })
|
||||
.update(payload)
|
||||
.eq("code", editing.original));
|
||||
} else {
|
||||
const maxSort = items.reduce((m, i) => Math.max(m, i.sort), 0);
|
||||
({ error: dbError } = await supabase
|
||||
.from(table)
|
||||
.insert({ code, name, sort: maxSort + 1 }));
|
||||
.insert({ ...payload, sort: maxSort + 1 }));
|
||||
}
|
||||
if (dbError) {
|
||||
setError(
|
||||
/duplicate key/i.test(dbError.message)
|
||||
? `Das Kürzel „${code}“ existiert bereits.`
|
||||
: `Speichern fehlgeschlagen: ${dbError.message}`
|
||||
? formatMessage(dict.codeList.duplicateCode, { code })
|
||||
: formatMessage(dict.codeList.saveError, { message: dbError.message })
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -68,13 +87,48 @@ export default function CodeListManager({
|
||||
}
|
||||
|
||||
async function remove(item: CodeItem) {
|
||||
if (!window.confirm(`„${item.code} – ${item.name}“ wirklich löschen?`))
|
||||
if (
|
||||
!window.confirm(
|
||||
formatMessage(dict.codeList.confirmDelete, { code: item.code, name: item.name })
|
||||
)
|
||||
)
|
||||
return;
|
||||
const { error } = await supabase.from(table).delete().eq("code", item.code);
|
||||
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
|
||||
if (error)
|
||||
setError(formatMessage(dict.codeList.deleteError, { message: error.message }));
|
||||
await load();
|
||||
}
|
||||
|
||||
async function autoTranslate() {
|
||||
if (!editing || !editing.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,
|
||||
id: editing.original,
|
||||
text: editing.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;
|
||||
}
|
||||
setEditing((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");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="card">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
@@ -84,9 +138,12 @@ export default function CodeListManager({
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-add"
|
||||
onClick={() => setEditing({ original: null, code: "", name: "" })}
|
||||
onClick={() => {
|
||||
setEditing({ original: null, code: "", name: "", nameEn: "", namePl: "" });
|
||||
setTranslateState("idle");
|
||||
}}
|
||||
>
|
||||
Hinzufügen
|
||||
{dict.common.add}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -108,7 +165,7 @@ export default function CodeListManager({
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="label">Bezeichnung</label>
|
||||
<label className="label">{dict.codeList.nameLabel}</label>
|
||||
<input
|
||||
className="input"
|
||||
value={editing.name}
|
||||
@@ -116,16 +173,56 @@ export default function CodeListManager({
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="label">{dict.dishManager.nameEnLabel}</label>
|
||||
<input
|
||||
className="input"
|
||||
value={editing.nameEn}
|
||||
onChange={(e) => setEditing({ ...editing, nameEn: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="label">{dict.dishManager.namePlLabel}</label>
|
||||
<input
|
||||
className="input"
|
||||
value={editing.namePl}
|
||||
onChange={(e) => setEditing({ ...editing, namePl: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-neutral"
|
||||
onClick={autoTranslate}
|
||||
disabled={translateState === "busy" || !editing.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>
|
||||
<div className="flex gap-2">
|
||||
<button type="submit" className="btn btn-add">
|
||||
Speichern
|
||||
{dict.common.save}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-neutral"
|
||||
onClick={() => setEditing(null)}
|
||||
>
|
||||
Abbrechen
|
||||
{dict.common.cancel}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -135,32 +232,36 @@ export default function CodeListManager({
|
||||
{items.map((item) => (
|
||||
<li key={item.code} className="flex items-center gap-2 py-1.5 text-sm">
|
||||
<span className="mr-auto">
|
||||
<span className="font-semibold">{item.code}</span> – {item.name}
|
||||
<span className="font-semibold">{item.code}</span> –{" "}
|
||||
{localized(item, locale)}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() =>
|
||||
onClick={() => {
|
||||
setEditing({
|
||||
original: item.code,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
})
|
||||
}
|
||||
nameEn: item.name_en ?? "",
|
||||
namePl: item.name_pl ?? "",
|
||||
});
|
||||
setTranslateState("idle");
|
||||
}}
|
||||
>
|
||||
Bearbeiten
|
||||
{dict.common.edit}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-del"
|
||||
onClick={() => remove(item)}
|
||||
>
|
||||
Löschen
|
||||
{dict.common.delete}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{items.length === 0 && (
|
||||
<li className="py-2 text-gray-500 text-sm">Keine Einträge.</li>
|
||||
<li className="py-2 text-gray-500 text-sm">{dict.codeList.empty}</li>
|
||||
)}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user