Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Kategorie-Elternwahl als aufklappbarer Baum statt "— —"-Select

Browse Source 
Die uebergeordnete Kategorie wird nicht mehr ueber ein <select> mit
"— —"-Einrueckung gewaehlt, sondern ueber einen aufklappbaren Baum-Picker
(CategorySelect): echte Einrueckung, Aeste per Pfeil auf-/zuklappbar wie in der
Liste. Das Menue haengt per Portal am <body>, damit der horizontal scrollende
Tabellenrahmen es nicht abschneidet. Ersetzt beide Stellen (Zeilen-Elternwahl
und Anlege-Formular); die kompakten Knoepfe machen die Zeile schmaler, sodass
die Tabelle nicht mehr seitwaerts ueber den Block hinauslaeuft.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-26 11:44:03 +02:00
parent 914118e33a
commit f35126cb7b
3 changed files with 200 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/pages/Categories.jsx
View File

@@ -5,6 +5,7 @@ import { useAuth } from "../auth";
import Icon from "../components/Icon";
import { asTree } from "../categoryTree";
import { FIELD_TYPES, fieldTypeLabel } from "../fields";
import CategorySelect from "../components/CategorySelect";
const MODUS = { food: "Lebensmittel", object: "Gegenstand" };
@@ -199,15 +200,11 @@ export default function Categories() {
</td>
<td data-label="Übergeordnet">
{isAdmin ? (
<select value={c.parent_id ?? ""} style={{ marginTop: 0, minWidth: 150 }}
onChange={(e) => patch(c, {
parent_id: e.target.value === "" ? null : Number(e.target.value),
})}>
<option value="">– oberste Ebene –</option>
{parentOptions.map((o) => (
<option key={o.id} value={o.id}>{"— ".repeat(o.depth)}{o.name}</option>
))}
</select>
<CategorySelect
value={c.parent_id ?? null}
nodes={parentOptions}
onChange={(pid) => patch(c, { parent_id: pid })}
/>
) : (
<span className="muted">{c.parent_id ? nameById[c.parent_id] : "–"}</span>
)}
@@ -246,15 +243,11 @@ export default function Categories() {
</label>
<label>
Untergeordnet (optional)
<select value={form.parent_id}
onChange={(e) => setForm({ ...form, parent_id: e.target.value })}>
<option value="">– oberste Ebene –</option>
{tree.map((c) => (
<option key={c.id} value={c.id}>
{"— ".repeat(c.depth)}{c.name}
</option>
))}
</select>
<CategorySelect
value={form.parent_id === "" ? null : Number(form.parent_id)}
nodes={tree}
onChange={(pid) => setForm({ ...form, parent_id: pid == null ? "" : String(pid) })}
/>
</label>
<label>
Verwaltungsart