feat: Eintrags-Formular mit Paar-Layout und Gesperrt-Kennzeichnung
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -179,3 +179,34 @@ section.planning-section fieldset {
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Ausbaustufe 7: Formular-Paare als Einheit, gesperrte Felder erkennbar. */
|
||||
.entry-form label,
|
||||
.planning-section form label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin: 0 1.25rem 0.6rem 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.entry-form select,
|
||||
.planning-section form select {
|
||||
max-width: 14rem;
|
||||
}
|
||||
.entry-form .entry-art {
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.entry-form .entry-art > label { font-weight: bold; }
|
||||
.entry-form .entry-art .muted { margin-left: 0.5rem; }
|
||||
input:disabled, select:disabled {
|
||||
background: #e3e3e3;
|
||||
color: #8a8a8a;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
label:has(input:disabled), label:has(select:disabled) {
|
||||
opacity: 0.55;
|
||||
}
|
||||
.project-block {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@@ -133,49 +133,55 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<form hx-ext="json-form" hx-post="/api/scenarios/{{ sc.id }}/modifiers" hx-swap="none"
|
||||
<h4>Neuer Eintrag</h4>
|
||||
<form class="entry-form" hx-ext="json-form" hx-post="/api/scenarios/{{ sc.id }}/modifiers" hx-swap="none"
|
||||
data-modifiers-url="/api/scenarios/{{ sc.id }}/modifiers"
|
||||
data-planned-url="/api/scenarios/{{ sc.id }}/planned"
|
||||
hx-on::after-request="if(event.detail.successful){window.location.reload()}">
|
||||
<strong>Neuer Eintrag:</strong>
|
||||
<label>Eintragsart
|
||||
<select name="kind" data-type="str" onchange="onEntryArtChange(this)">
|
||||
{% for k in modifier_kinds %}<option value="{{ k }}">{{ k|de_label }}</option>{% endfor %}
|
||||
<option value="einmal">Einmalzahlung</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="entry-art">
|
||||
<label>Eintragsart
|
||||
<select name="kind" data-type="str" onchange="onEntryArtChange(this)">
|
||||
{% for k in modifier_kinds %}<option value="{{ k }}">{{ k|de_label }}</option>{% endfor %}
|
||||
<option value="einmal">Einmalzahlung</option>
|
||||
</select>
|
||||
</label>
|
||||
<span class="muted">— die zur Art passenden Felder werden aktiv, gesperrte Felder sind ausgegraut.</span>
|
||||
</div>
|
||||
<label>Ziel-Typ
|
||||
<select name="target_type" data-type="str" onchange="onModTargetTypeChange(this)">
|
||||
<select name="target_type" data-type="str" onchange="onModTargetTypeChange(this)" title="Für diese Eintragsart nicht relevant">
|
||||
<option value="category">Kategorie</option>
|
||||
<option value="recurring">Wiederkehrender Posten</option>
|
||||
</select>
|
||||
</label>
|
||||
<span class="mod-target-category">
|
||||
<label>Kategorie
|
||||
<select name="target_id" data-type="int">
|
||||
<select name="target_id" data-type="int" title="Für diese Eintragsart nicht relevant">
|
||||
{% for c in categories %}<option value="{{ c.id }}">{{ c.name }}</option>{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
</span>
|
||||
<span class="mod-target-recurring" style="display:none">
|
||||
<label>Posten
|
||||
<select name="target_id" data-type="int" disabled>
|
||||
<select name="target_id" data-type="int" disabled title="Für diese Eintragsart nicht relevant">
|
||||
{% for r in recurring %}<option value="{{ r.id }}">{{ r.name }}</option>{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
</span>
|
||||
<label>Wert <input type="text" name="value" data-type="amount" value="0"></label>
|
||||
<label>Endet am <input type="date" name="end_date" disabled></label>
|
||||
<label>Name <input type="text" name="name" disabled></label>
|
||||
<label>Betrag <input type="text" name="amount" data-type="amount" placeholder="5000,00" disabled></label>
|
||||
<label>Fällig am <input type="date" name="due" disabled></label>
|
||||
<label><span class="value-label">Prozentsatz (%)</span> <input type="text" name="value" data-type="amount" value="0" title="Für diese Eintragsart nicht relevant"></label>
|
||||
<label>Endet am <input type="date" name="end_date" disabled title="Für diese Eintragsart nicht relevant"></label>
|
||||
<label>Name <input type="text" name="name" disabled title="Für diese Eintragsart nicht relevant"></label>
|
||||
<label>Betrag <input type="text" name="amount" data-type="amount" placeholder="5000,00" disabled title="Für diese Eintragsart nicht relevant"></label>
|
||||
<label>Fällig am <input type="date" name="due" disabled title="Für diese Eintragsart nicht relevant"></label>
|
||||
<button type="submit">Hinzufügen</button>
|
||||
</form>
|
||||
|
||||
<form hx-post="/api/scenarios/{{ sc.id }}/project" hx-swap="none"
|
||||
hx-on::after-request="if(event.detail.successful){window.location.reload()}">
|
||||
<button type="submit">Durchrechnen</button>
|
||||
</form>
|
||||
<hr>
|
||||
<div class="project-block">
|
||||
<form hx-post="/api/scenarios/{{ sc.id }}/project" hx-swap="none"
|
||||
hx-on::after-request="if(event.detail.successful){window.location.reload()}">
|
||||
<button type="submit">Durchrechnen</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if row.result %}
|
||||
<p>
|
||||
@@ -231,6 +237,11 @@
|
||||
if (el) { el.disabled = disabled; }
|
||||
}
|
||||
setDisabled('value', !(art === 'percent' || art === 'absolute'));
|
||||
var valueLabel = form.querySelector('.value-label');
|
||||
if (valueLabel) {
|
||||
valueLabel.textContent = art === 'percent' ? 'Prozentsatz (%)'
|
||||
: art === 'absolute' ? 'Kürzung (€)' : 'Wert';
|
||||
}
|
||||
setDisabled('end_date', art !== 'ende');
|
||||
setDisabled('name', isMod);
|
||||
setDisabled('amount', isMod);
|
||||
|
||||
@@ -414,3 +414,15 @@ def test_szenarien_seite_und_nav(client, db):
|
||||
def test_szenarien_seite_braucht_login(client):
|
||||
r = client.get("/szenarien", follow_redirects=False)
|
||||
assert r.status_code in (302, 303) and r.headers["location"] == "/login"
|
||||
|
||||
|
||||
def test_neuer_eintrag_formular_struktur(client, db):
|
||||
client.post("/login", data={"username": "admin", "password": "geheim"})
|
||||
db.add(Scenario(name="UX-Test", description=""))
|
||||
db.commit()
|
||||
r = client.get("/szenarien").text
|
||||
assert 'class="entry-form"' in r
|
||||
assert 'class="entry-art"' in r # Eintragsart-Zeile
|
||||
assert 'class="value-label"' in r # dynamisches Wert-Label
|
||||
assert 'Für diese Eintragsart nicht relevant' in r # Tooltip an Umschaltfeldern
|
||||
assert '<hr' in r # Durchrechnen abgesetzt
|
||||
|
||||
Reference in New Issue
Block a user