florian.wilde
5c7112ecd2
Filtert die Liste bereits während des Tippens (Name, ohne Groß-/ Kleinschreibung). "Alle auswählen" bezieht sich auf die gefilterte Liste, Treffer-Hinweis bei leerem Ergebnis.
283 lines
8.6 KiB
TypeScript
283 lines
8.6 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
import { createClient } from "@/lib/supabase/client";
|
||
import { formatPrice } from "@/lib/menu";
|
||
import type { Dish } from "@/lib/types";
|
||
|
||
interface DishForm {
|
||
id: string | null; // null = neues Gericht
|
||
name: string;
|
||
price: string;
|
||
}
|
||
|
||
const EMPTY_FORM: DishForm = { id: null, name: "", price: "" };
|
||
|
||
export default function DishManager() {
|
||
const supabase = useMemo(() => createClient(), []);
|
||
const [dishes, setDishes] = useState<Dish[]>([]);
|
||
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("");
|
||
|
||
// 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 { data, error } = await supabase
|
||
.from("dishes")
|
||
.select("*")
|
||
.order("name");
|
||
if (error) setError(`Laden fehlgeschlagen: ${error.message}`);
|
||
else setDishes(data as Dish[]);
|
||
setLoading(false);
|
||
}, [supabase]);
|
||
|
||
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("Bitte einen gültigen Preis angeben, z. B. 3,50");
|
||
return;
|
||
}
|
||
const payload = { name: form.name.trim(), price };
|
||
const { error } = form.id
|
||
? await supabase.from("dishes").update(payload).eq("id", form.id)
|
||
: await supabase.from("dishes").insert(payload);
|
||
if (error) {
|
||
setError(`Speichern fehlgeschlagen: ${error.message}`);
|
||
return;
|
||
}
|
||
setForm(null);
|
||
await load();
|
||
}
|
||
|
||
async function remove(dish: Dish) {
|
||
if (
|
||
!window.confirm(
|
||
`„${dish.name}“ wirklich löschen? Das Gericht wird auch aus allen Wochenplänen entfernt.`
|
||
)
|
||
)
|
||
return;
|
||
const { error } = await supabase.from("dishes").delete().eq("id", dish.id);
|
||
if (error) setError(`Löschen fehlgeschlagen: ${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(
|
||
`${selected.size} Gericht(e) wirklich löschen? Sie werden auch aus allen Wochenplänen entfernt.`
|
||
)
|
||
)
|
||
return;
|
||
setBulkBusy(true);
|
||
setError(null);
|
||
const { error } = await supabase
|
||
.from("dishes")
|
||
.delete()
|
||
.in("id", Array.from(selected));
|
||
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
|
||
setSelected(new Set());
|
||
setBulkBusy(false);
|
||
await load();
|
||
}
|
||
|
||
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">
|
||
Gerichte
|
||
</h1>
|
||
<button
|
||
type="button"
|
||
className="btn btn-add"
|
||
onClick={() => setForm(EMPTY_FORM)}
|
||
>
|
||
Neues Gericht
|
||
</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-3">
|
||
<h2 className="font-semibold">
|
||
{form.id ? "Gericht bearbeiten" : "Neues Gericht"}
|
||
</h2>
|
||
<div>
|
||
<label className="label" htmlFor="dish-name">
|
||
Bezeichnung
|
||
</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">
|
||
Preis in €
|
||
</label>
|
||
<input
|
||
id="dish-price"
|
||
className="input"
|
||
inputMode="decimal"
|
||
placeholder="3,50"
|
||
value={form.price}
|
||
onChange={(e) => setForm({ ...form, price: e.target.value })}
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button type="submit" className="btn btn-add">
|
||
Speichern
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-neutral"
|
||
onClick={() => setForm(null)}
|
||
>
|
||
Abbrechen
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
|
||
{loading ? (
|
||
<p className="text-gray-500">Lade Gerichte…</p>
|
||
) : (
|
||
<>
|
||
{dishes.length > 0 && (
|
||
<input
|
||
type="search"
|
||
className="input mb-3"
|
||
placeholder="Gericht suchen…"
|
||
value={search}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
aria-label="Gerichte durchsuchen"
|
||
/>
|
||
)}
|
||
{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}
|
||
/>
|
||
Alle auswählen
|
||
</label>
|
||
<span className="text-gray-500">
|
||
{selected.size} ausgewählt
|
||
</span>
|
||
<button
|
||
type="button"
|
||
className="btn btn-del ml-auto"
|
||
onClick={removeSelected}
|
||
disabled={selected.size === 0 || bulkBusy}
|
||
>
|
||
Ausgewählte löschen{selected.size > 0 ? ` (${selected.size})` : ""}
|
||
</button>
|
||
</div>
|
||
)}
|
||
<ul className="divide-y divide-gray-200 border border-gray-200 rounded-md bg-white">
|
||
{visible.map((dish) => (
|
||
<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} auswählen`}
|
||
/>
|
||
<span className="mr-auto">
|
||
<span className="font-semibold">{dish.name}</span>{" "}
|
||
<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,
|
||
price: String(dish.price).replace(".", ","),
|
||
})
|
||
}
|
||
>
|
||
Bearbeiten
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-del"
|
||
onClick={() => remove(dish)}
|
||
>
|
||
Löschen
|
||
</button>
|
||
</li>
|
||
))}
|
||
{dishes.length === 0 && (
|
||
<li className="px-4 py-3 text-gray-500">
|
||
Noch keine Gerichte angelegt.
|
||
</li>
|
||
)}
|
||
{dishes.length > 0 && visible.length === 0 && (
|
||
<li className="px-4 py-3 text-gray-500">
|
||
Keine Treffer für „{search}“.
|
||
</li>
|
||
)}
|
||
</ul>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|