Objektliste: gleiches zweispaltiges Layout mit Suche wie Materialliste
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user