Objektliste: gleiches zweispaltiges Layout mit Suche wie Materialliste
CI / backend-tests (push) Failing after 1m20s
CI / frontend-build (push) Successful in 19s

Anlegen-Formular links fix (20rem, nur Admin), Objektliste rechts mit
Suchfeld oben (Name/Code) - gleiches Muster wie MaterialSection, wächst
mit der Anzahl Objekte mit statt unsuchbare Liste zu werden.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
This commit is contained in:
2026-09-04 23:14:27 +02:00
co-authored by Claude Sonnet 5
parent f11162ebfb
commit 34150d8d45
+24 -5
View File
@@ -43,6 +43,7 @@ export function ObjektSection({
const [gezogenVonId, setGezogenVonId] = useState<number | "">(""); const [gezogenVonId, setGezogenVonId] = useState<number | "">("");
const [kopplungBearbeitenId, setKopplungBearbeitenId] = useState<number | null>(null); const [kopplungBearbeitenId, setKopplungBearbeitenId] = useState<number | null>(null);
const [kopplungAuswahl, setKopplungAuswahl] = useState<number | "">(""); const [kopplungAuswahl, setKopplungAuswahl] = useState<number | "">("");
const [suche, setSuche] = useState("");
async function codeVorschlagen() { async function codeVorschlagen() {
if (!praefix) { if (!praefix) {
@@ -154,11 +155,20 @@ export function ObjektSection({
} }
} }
const sucheNormalisiert = suche.trim().toLowerCase();
const gefilterteObjekte = sucheNormalisiert
? objekte.filter(
(o) => o.name.toLowerCase().includes(sucheNormalisiert) || o.code.toLowerCase().includes(sucheNormalisiert)
)
: objekte;
return ( return (
<section className="section"> <section className="section">
<h2>{nurPflegen ? "Objekte" : "Objekt aus Vorlage anlegen"}</h2> <h2>Objekte</h2>
<div style={{ display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "1.25rem" }}>
{!nurPflegen && ( {!nurPflegen && (
<div className="card" style={{ marginBottom: "1.25rem" }}> <div className="card" style={{ flex: "0 0 20rem", width: "20rem", boxSizing: "border-box" }}>
<h3 style={{ marginTop: 0 }}>Objekt aus Vorlage anlegen</h3>
{vorlagen.length === 0 ? ( {vorlagen.length === 0 ? (
<p className="text-muted"> <p className="text-muted">
Keine aktive Vorlage vorhanden erst Excel-Import oder Vorlage per API anlegen. Keine aktive Vorlage vorhanden erst Excel-Import oder Vorlage per API anlegen.
@@ -234,10 +244,18 @@ export function ObjektSection({
</div> </div>
)} )}
<div className="card"> <div style={{ flex: "1 1 0%", minWidth: 0 }}>
{objekte.length > 0 && ( <input
className="input input-search"
style={{ marginBottom: "1rem" }}
placeholder={`Suche in ${objekte.length} Objekten…`}
value={suche}
onChange={(e) => setSuche(e.target.value)}
/>
{gefilterteObjekte.length === 0 && <p className="text-muted">Keine Treffer.</p>}
{gefilterteObjekte.length > 0 && (
<ul className="card-list"> <ul className="card-list">
{objekte.map((o) => ( {gefilterteObjekte.map((o) => (
<li key={o.id}> <li key={o.id}>
<div className="row-between" style={{ padding: "0.4rem 0" }}> <div className="row-between" style={{ padding: "0.4rem 0" }}>
<span> <span>
@@ -345,6 +363,7 @@ export function ObjektSection({
</ul> </ul>
)} )}
</div> </div>
</div>
</section> </section>
); );
} }