ah-admin/Mieterportal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.30: Wohnungsformular einspaltig mit Abschnitten

Browse Source
This commit is contained in:
ah-admin
2026-10-04 18:09:26 +02:00
parent 662676a992
commit aa6f97df5f
2 changed files with 34 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Bestand.tsx
+29 -51
View File
@@ -233,7 +233,7 @@ function WohnungDialog({ wohnung, gebaeude, festesHaus }: { wohnung?: Unit; geba
</Button>
)}
</DialogTrigger>
<DialogContent>
<DialogContent className="max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>
{bearbeiten
@@ -244,7 +244,7 @@ function WohnungDialog({ wohnung, gebaeude, festesHaus }: { wohnung?: Unit; geba
</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div className="grid gap-4 sm:grid-cols-2">
<Abschnitt titel="Zuordnung">
<div className="space-y-1.5">
<Label>Haus</Label>
<Select value={building} onValueChange={waehleHaus} disabled={Boolean(festesHaus)}>
@@ -255,50 +255,13 @@ function WohnungDialog({ wohnung, gebaeude, festesHaus }: { wohnung?: Unit; geba
))}
</SelectContent>
</Select>
{festesHaus && <p className="text-xs text-slate-400">Die Wohnung gehört fest zu diesem Haus.</p>}
{festesHaus && <p className="text-xs text-slate-400 dark:text-slate-500">Die Wohnung gehört fest zu diesem Haus.</p>}
</div>
<div className="space-y-1.5">
<Label htmlFor="w-nr">Wohnungsnummer</Label>
<Input id="w-nr" placeholder="z. B. 12" value={number} onChange={(e) => setNumber(e.target.value)} />
</div>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-1.5">
<Label htmlFor="w-etage">Etage</Label>
<Input id="w-etage" inputMode="numeric" placeholder="0 = Erdgeschoss" value={floor} onChange={(e) => setFloor(e.target.value)} />
</div>
<div className="space-y-1.5">
<Label htmlFor="w-qm">Wohnfläche (m²)</Label>
<Input id="w-qm" inputMode="decimal" placeholder="z. B. 68,5" value={size} onChange={(e) => setSize(e.target.value)} />
</div>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-1.5">
<Label htmlFor="w-kalt">Kaltmiete (€)</Label>
<Input id="w-kalt" inputMode="decimal" placeholder="z. B. 520" value={coldRent} onChange={(e) => setColdRent(e.target.value)} />
</div>
<div className="space-y-1.5">
<Label htmlFor="w-warm">Warmmiete (€)</Label>
<Input id="w-warm" inputMode="decimal" placeholder="z. B. 690" value={warmRent} onChange={(e) => setWarmRent(e.target.value)} />
</div>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-1.5">
<Label htmlFor="w-mieter">Mieter (Name)</Label>
<Input id="w-mieter" placeholder="leer = frei" value={tenant} onChange={(e) => setTenant(e.target.value)} />
</div>
<div className="space-y-1.5">
<Label>Status</Label>
<Select value={status} onValueChange={(v) => setStatus(v as 'vermietet' | 'frei')}>
<SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="vermietet">vermietet</SelectItem>
<SelectItem value="frei">frei</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<Feld id="w-nr" label="Wohnungsnummer" placeholder="z. B. 12" value={number} onChange={(e) => setNumber(e.target.value)} />
</Abschnitt>
<Abschnitt titel="Ausstattung">
<Feld id="w-etage" label="Etage" hint="0 = Erdgeschoss, negative Werte = Keller" inputMode="numeric" placeholder="z. B. 1" value={floor} onChange={(e) => setFloor(e.target.value)} />
<Feld id="w-qm" label="Wohnfläche (m²)" inputMode="decimal" placeholder="z. B. 68,5" value={size} onChange={(e) => setSize(e.target.value)} />
<div className="space-y-1.5">
<Label>Heizungsart</Label>
<Select value={heizungsart || '__keine'} onValueChange={(v) => setHeizungsart(v === '__keine' ? '' : v)}>
@@ -310,13 +273,28 @@ function WohnungDialog({ wohnung, gebaeude, festesHaus }: { wohnung?: Unit; geba
))}
</SelectContent>
</Select>
{!bearbeiten && (
<p className="text-xs text-slate-400 dark:text-slate-500">
Wird bei Neuanlage automatisch aus dem Haus übernommen.
</p>
)}
<p className="text-xs text-slate-400 dark:text-slate-500">
Optional{!bearbeiten && ' – wird bei Neuanlage automatisch aus dem Haus übernommen'}.
</p>
</div>
</div>
</Abschnitt>
<Abschnitt titel="Miete">
<Feld id="w-kalt" label="Kaltmiete (€)" inputMode="decimal" placeholder="z. B. 520" value={coldRent} onChange={(e) => setColdRent(e.target.value)} />
<Feld id="w-warm" label="Warmmiete (€)" inputMode="decimal" placeholder="z. B. 690" value={warmRent} onChange={(e) => setWarmRent(e.target.value)} />
</Abschnitt>
<Abschnitt titel="Mieter">
<Feld id="w-mieter" label="Mieter (Name)" hint="Leer lassen, solange die Wohnung frei ist" placeholder="z. B. Anna Berger" value={tenant} onChange={(e) => setTenant(e.target.value)} />
<div className="space-y-1.5">
<Label>Status</Label>
<Select value={status} onValueChange={(v) => setStatus(v as 'vermietet' | 'frei')}>
<SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="vermietet">vermietet</SelectItem>
<SelectItem value="frei">frei</SelectItem>
</SelectContent>
</Select>
</div>
</Abschnitt>
{fehler && (
<div className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-950 dark:text-red-300" role="alert">
{fehler}