feat(ui): Fächer-Liste nach Objekttyp filterbar
Bei 22 nachgetragenen Fächern über mehrere Objekttypen war die flache Liste unübersichtlich. Nutzt das bereits vorhandene Objekttyp-Dropdown (zum Anlegen) auch als Filter für die Liste darunter, statt ein zusätzliches Element einzuführen. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
This commit is contained in:
@@ -48,6 +48,8 @@ export function FachSection({ objekttypen, faecher, onGeaendert, onFehler }: Pro
|
||||
return objekttypen.find((o) => o.id === id)?.name ?? `#${id}`;
|
||||
}
|
||||
|
||||
const angezeigteFaecher = objekttypId === "" ? faecher : faecher.filter((f) => f.objekttyp_id === objekttypId);
|
||||
|
||||
return (
|
||||
<section className="section">
|
||||
<h2>Fächer je Objekttyp</h2>
|
||||
@@ -79,12 +81,13 @@ export function FachSection({ objekttypen, faecher, onGeaendert, onFehler }: Pro
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{faecher.length > 0 && (
|
||||
{angezeigteFaecher.length > 0 && (
|
||||
<ul className="card-list">
|
||||
{faecher.map((f) => (
|
||||
{angezeigteFaecher.map((f) => (
|
||||
<li key={f.id} className="row-between" style={{ padding: "0.4rem 0" }}>
|
||||
<span>
|
||||
{f.name} <span className="text-muted">({objekttypName(f.objekttyp_id)})</span>
|
||||
{f.name}
|
||||
{objekttypId === "" && <span className="text-muted"> ({objekttypName(f.objekttyp_id)})</span>}
|
||||
</span>
|
||||
<button className="btn btn-danger" onClick={() => loeschen(f.id)}>
|
||||
Löschen
|
||||
@@ -93,6 +96,9 @@ export function FachSection({ objekttypen, faecher, onGeaendert, onFehler }: Pro
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{objekttypId !== "" && angezeigteFaecher.length === 0 && (
|
||||
<p className="text-muted">Noch keine Fächer für diesen Objekttyp.</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user