From 34150d8d45c0cfb8126c55dcd541bf48bd6d7c01 Mon Sep 17 00:00:00 2001
From: patrick <patrick@perlbach24.de>
Date: Fri, 4 Sep 2026 23:14:27 +0200
Subject: [PATCH] Objektliste: gleiches zweispaltiges Layout mit Suche wie
 Materialliste
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 frontend/src/pages/admin/ObjektSection.tsx | 29 ++++++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/admin/ObjektSection.tsx b/frontend/src/pages/admin/ObjektSection.tsx
index fd69f57..14ec3fe 100644
--- a/frontend/src/pages/admin/ObjektSection.tsx
+++ b/frontend/src/pages/admin/ObjektSection.tsx
@@ -43,6 +43,7 @@ export function ObjektSection({
   const [gezogenVonId, setGezogenVonId] = useState<number | "">("");
   const [kopplungBearbeitenId, setKopplungBearbeitenId] = useState<number | null>(null);
   const [kopplungAuswahl, setKopplungAuswahl] = useState<number | "">("");
+  const [suche, setSuche] = useState("");
 
   async function codeVorschlagen() {
     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 (
     <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 && (
-      <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 ? (
           <p className="text-muted">
             Keine aktive Vorlage vorhanden – erst Excel-Import oder Vorlage per API anlegen.
@@ -234,10 +244,18 @@ export function ObjektSection({
       </div>
       )}
 
-      <div className="card">
-        {objekte.length > 0 && (
+      <div style={{ flex: "1 1 0%", minWidth: 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">
-            {objekte.map((o) => (
+            {gefilterteObjekte.map((o) => (
               <li key={o.id}>
                 <div className="row-between" style={{ padding: "0.4rem 0" }}>
                   <span>
@@ -345,6 +363,7 @@ export function ObjektSection({
           </ul>
         )}
       </div>
+      </div>
     </section>
   );
 }