florian.wilde
0f20ad6527
Betrifft UI-Texte (DE/EN/PL), Route (/intern/bereiche -> /intern/essenszeiten), Code-Kommentare, Changelog und README. Fachlich unverändert (weiterhin die Tabelle/Komponente "sections"/ SectionManager im Code), da "Essenszeiten" den Zeitbezug des Features klarer ausdrückt als der bisherige Sammelbegriff.
299 lines
9.8 KiB
TypeScript
299 lines
9.8 KiB
TypeScript
"use client";
|
||
|
||
// Verwaltung der Essenszeiten (Brotzeit, Mittagessen, …):
|
||
// anlegen, umbenennen, Uhrzeit ändern, löschen, Reihenfolge anpassen.
|
||
|
||
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 { Section } from "@/lib/types";
|
||
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
|
||
|
||
interface SectionForm {
|
||
key: string | null; // null = neue Essenszeit
|
||
label: string;
|
||
labelEn: string;
|
||
labelPl: string;
|
||
timeFrom: string;
|
||
timeTo: string;
|
||
}
|
||
|
||
const EMPTY_FORM: SectionForm = {
|
||
key: null,
|
||
label: "",
|
||
labelEn: "",
|
||
labelPl: "",
|
||
timeFrom: "",
|
||
timeTo: "",
|
||
};
|
||
|
||
function splitTimeRange(range: string): { from: string; to: string } {
|
||
const [from, to] = range.split("-").map((s) => s.trim());
|
||
return { from: from ?? "", to: to ?? "" };
|
||
}
|
||
|
||
export default function SectionManager() {
|
||
const supabase = useMemo(() => createClient(), []);
|
||
const dict = useDict();
|
||
const locale = useLocale();
|
||
const [sections, setSections] = useState<Section[]>([]);
|
||
const [form, setForm] = useState<SectionForm | null>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [busy, setBusy] = useState(false);
|
||
|
||
const load = useCallback(async () => {
|
||
const { data, error } = await supabase.from("sections").select("*").order("sort");
|
||
if (error)
|
||
setError(formatMessage(dict.sectionManager.loadError, { message: error.message }));
|
||
else setSections(data as Section[]);
|
||
setLoading(false);
|
||
}, [supabase, dict]);
|
||
|
||
useEffect(() => {
|
||
load();
|
||
}, [load]);
|
||
|
||
async function save(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
if (!form) return;
|
||
setError(null);
|
||
const label = form.label.trim();
|
||
if (!label || !form.timeFrom || !form.timeTo) return;
|
||
const payload = {
|
||
label,
|
||
label_en: form.labelEn.trim() || null,
|
||
label_pl: form.labelPl.trim() || null,
|
||
time_range: `${form.timeFrom} - ${form.timeTo}`,
|
||
};
|
||
|
||
let dbError;
|
||
if (form.key) {
|
||
({ error: dbError } = await supabase
|
||
.from("sections")
|
||
.update(payload)
|
||
.eq("key", form.key));
|
||
} else {
|
||
// Frisch aus der DB lesen statt den lokalen State zu nutzen, damit
|
||
// ein veralteter Snapshot nicht zu doppelten sort-Werten führt.
|
||
const { data: maxRow } = await supabase
|
||
.from("sections")
|
||
.select("sort")
|
||
.order("sort", { ascending: false })
|
||
.limit(1)
|
||
.maybeSingle();
|
||
({ error: dbError } = await supabase
|
||
.from("sections")
|
||
.insert({ ...payload, sort: (maxRow?.sort ?? 0) + 1 }));
|
||
}
|
||
if (dbError) {
|
||
setError(formatMessage(dict.sectionManager.saveError, { message: dbError.message }));
|
||
return;
|
||
}
|
||
setForm(null);
|
||
await load();
|
||
}
|
||
|
||
async function remove(section: Section) {
|
||
if (
|
||
!window.confirm(
|
||
formatMessage(dict.sectionManager.confirmDelete, { name: section.label })
|
||
)
|
||
)
|
||
return;
|
||
const { error } = await supabase.from("sections").delete().eq("key", section.key);
|
||
if (error)
|
||
setError(formatMessage(dict.sectionManager.deleteError, { message: error.message }));
|
||
await load();
|
||
}
|
||
|
||
async function move(section: Section, direction: -1 | 1) {
|
||
const idx = sections.findIndex((s) => s.key === section.key);
|
||
const neighbor = sections[idx + direction];
|
||
if (!neighbor) return;
|
||
setBusy(true);
|
||
setError(null);
|
||
const [r1, r2] = await Promise.all([
|
||
supabase.from("sections").update({ sort: neighbor.sort }).eq("key", section.key),
|
||
supabase.from("sections").update({ sort: section.sort }).eq("key", neighbor.key),
|
||
]);
|
||
const dbError = r1.error ?? r2.error;
|
||
if (dbError)
|
||
setError(formatMessage(dict.sectionManager.saveError, { message: dbError.message }));
|
||
setBusy(false);
|
||
await load();
|
||
}
|
||
|
||
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.sectionManager.title}
|
||
</h1>
|
||
<button
|
||
type="button"
|
||
className="btn btn-add"
|
||
onClick={() => setForm(EMPTY_FORM)}
|
||
>
|
||
{dict.sectionManager.newSection}
|
||
</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.key ? dict.sectionManager.editSection : dict.sectionManager.newSection}
|
||
</h2>
|
||
<div>
|
||
<label className="label" htmlFor="section-label">
|
||
{dict.sectionManager.nameLabel}
|
||
</label>
|
||
<input
|
||
id="section-label"
|
||
className="input"
|
||
value={form.label}
|
||
onChange={(e) => setForm({ ...form, label: e.target.value })}
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
<div>
|
||
<label className="label" htmlFor="section-label-en">
|
||
{dict.sectionManager.nameEnLabel}
|
||
</label>
|
||
<input
|
||
id="section-label-en"
|
||
className="input"
|
||
value={form.labelEn}
|
||
onChange={(e) => setForm({ ...form, labelEn: e.target.value })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="label" htmlFor="section-label-pl">
|
||
{dict.sectionManager.namePlLabel}
|
||
</label>
|
||
<input
|
||
id="section-label-pl"
|
||
className="input"
|
||
value={form.labelPl}
|
||
onChange={(e) => setForm({ ...form, labelPl: e.target.value })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-3">
|
||
<div className="max-w-32">
|
||
<label className="label" htmlFor="section-time-from">
|
||
{dict.sectionManager.timeFrom}
|
||
</label>
|
||
<input
|
||
id="section-time-from"
|
||
type="time"
|
||
className="input"
|
||
value={form.timeFrom}
|
||
onChange={(e) => setForm({ ...form, timeFrom: e.target.value })}
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="max-w-32">
|
||
<label className="label" htmlFor="section-time-to">
|
||
{dict.sectionManager.timeTo}
|
||
</label>
|
||
<input
|
||
id="section-time-to"
|
||
type="time"
|
||
className="input"
|
||
value={form.timeTo}
|
||
onChange={(e) => setForm({ ...form, timeTo: e.target.value })}
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
) : (
|
||
<ul className="divide-y divide-gray-200 border border-gray-200 rounded-md bg-white">
|
||
{sections.map((section, idx) => (
|
||
<li key={section.key} className="flex items-center gap-3 px-4 py-2">
|
||
<div className="flex flex-col">
|
||
<button
|
||
type="button"
|
||
className="text-gray-400 hover:text-[var(--c-primary)] disabled:opacity-30"
|
||
onClick={() => move(section, -1)}
|
||
disabled={busy || idx === 0}
|
||
aria-label={dict.sectionManager.moveUp}
|
||
title={dict.sectionManager.moveUp}
|
||
>
|
||
▲
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="text-gray-400 hover:text-[var(--c-primary)] disabled:opacity-30"
|
||
onClick={() => move(section, 1)}
|
||
disabled={busy || idx === sections.length - 1}
|
||
aria-label={dict.sectionManager.moveDown}
|
||
title={dict.sectionManager.moveDown}
|
||
>
|
||
▼
|
||
</button>
|
||
</div>
|
||
<span className="mr-auto">
|
||
<span className="font-semibold">{localized(section, locale)}</span>{" "}
|
||
<span className="text-gray-500">– {section.time_range}</span>
|
||
</span>
|
||
<button
|
||
type="button"
|
||
className="btn btn-primary"
|
||
onClick={() => {
|
||
const { from, to } = splitTimeRange(section.time_range);
|
||
setForm({
|
||
key: section.key,
|
||
label: section.label,
|
||
labelEn: section.label_en ?? "",
|
||
labelPl: section.label_pl ?? "",
|
||
timeFrom: from,
|
||
timeTo: to,
|
||
});
|
||
}}
|
||
>
|
||
{dict.common.edit}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-del"
|
||
onClick={() => remove(section)}
|
||
>
|
||
{dict.common.delete}
|
||
</button>
|
||
</li>
|
||
))}
|
||
{sections.length === 0 && (
|
||
<li className="px-4 py-3 text-gray-500">{dict.sectionManager.empty}</li>
|
||
)}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|