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 [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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user