Redesign Destinataer create/edit form to mirror detail page layout
User requested the create form to look exactly like the detail page. Now uses the same two-column table-based card layout with matching card headers, gradient header bar, and field organization as the Stammdaten tab on the detail page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
SysAdmin Agent
@@ -5,242 +5,256 @@
|
||||
{% block title %}{{ title }} - Stiftungsverwaltung{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="h3">
|
||||
<i class="fas fa-user-plus text-primary me-2"></i>{{ title }}
|
||||
</h1>
|
||||
<div class="container-fluid px-4">
|
||||
|
||||
{# ── Header (mirrors detail page style) ── #}
|
||||
<div class="card shadow-sm mb-4 border-0" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
|
||||
<div class="card-body py-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width:56px;height:56px;font-size:1.4rem;">
|
||||
<i class="fas fa-user-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="mb-1">{{ title }}</h4>
|
||||
<div class="text-muted small">Alle Felder ausfuellen und speichern</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="fas fa-arrow-left me-1"></i>Zurueck
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<form method="post" novalidate>
|
||||
{% csrf_token %}
|
||||
|
||||
{# ── Persoenliche Informationen ── #}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-dark text-white py-2">
|
||||
<i class="fas fa-user me-2"></i>Persoenliche Informationen
|
||||
{% if form.errors %}
|
||||
<div class="alert alert-danger alert-dismissible fade show mb-3" role="alert">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>Bitte korrigieren Sie die markierten Felder.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.vorname.id_for_label }}" class="form-label">{{ form.vorname.label }} *</label>
|
||||
{% endif %}
|
||||
|
||||
<div class="row g-3">
|
||||
{# ── Left Column ── #}
|
||||
<div class="col-lg-6">
|
||||
{# Personal Data #}
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header py-2"><i class="fas fa-user me-2 text-primary"></i><strong>Persoenliche Daten</strong></div>
|
||||
<div class="card-body py-2">
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-muted" style="width:140px;">Vorname *</td>
|
||||
<td>
|
||||
{{ form.vorname }}
|
||||
{% if form.vorname.errors %}<div class="invalid-feedback d-block">{{ form.vorname.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.nachname.id_for_label }}" class="form-label">{{ form.nachname.label }} *</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Nachname *</td>
|
||||
<td>
|
||||
{{ form.nachname }}
|
||||
{% if form.nachname.errors %}<div class="invalid-feedback d-block">{{ form.nachname.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.geburtsdatum.id_for_label }}" class="form-label">{{ form.geburtsdatum.label }}</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Geburtsdatum</td>
|
||||
<td>
|
||||
{{ form.geburtsdatum }}
|
||||
{% if form.geburtsdatum.errors %}<div class="invalid-feedback d-block">{{ form.geburtsdatum.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.familienzweig.id_for_label }}" class="form-label">{{ form.familienzweig.label }}</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Familienzweig</td>
|
||||
<td>
|
||||
{{ form.familienzweig }}
|
||||
{% if form.familienzweig.errors %}<div class="invalid-feedback d-block">{{ form.familienzweig.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Kontaktinformationen ── #}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-dark text-white py-2">
|
||||
<i class="fas fa-address-book me-2"></i>Kontaktinformationen
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.email.id_for_label }}" class="form-label">{{ form.email.label }}</label>
|
||||
{{ form.email }}
|
||||
{% if form.email.errors %}<div class="invalid-feedback d-block">{{ form.email.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.telefon.id_for_label }}" class="form-label">{{ form.telefon.label }}</label>
|
||||
{{ form.telefon }}
|
||||
{% if form.telefon.errors %}<div class="invalid-feedback d-block">{{ form.telefon.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.iban.id_for_label }}" class="form-label">{{ form.iban.label }}</label>
|
||||
{{ form.iban }}
|
||||
{% if form.iban.errors %}<div class="invalid-feedback d-block">{{ form.iban.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<label for="{{ form.adresse.id_for_label }}" class="form-label">{{ form.adresse.label }}</label>
|
||||
{{ form.adresse }}
|
||||
{% if form.adresse.errors %}<div class="invalid-feedback d-block">{{ form.adresse.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Berufliche Informationen ── #}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-dark text-white py-2">
|
||||
<i class="fas fa-briefcase me-2"></i>Berufliche Informationen
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.berufsgruppe.id_for_label }}" class="form-label">{{ form.berufsgruppe.label }}</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Berufsgruppe</td>
|
||||
<td>
|
||||
{{ form.berufsgruppe }}
|
||||
{% if form.berufsgruppe.errors %}<div class="invalid-feedback d-block">{{ form.berufsgruppe.errors.0 }}</div>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.ausbildungsstand.id_for_label }}" class="form-label">{{ form.ausbildungsstand.label }}</label>
|
||||
{{ form.ausbildungsstand }}
|
||||
{% if form.ausbildungsstand.errors %}<div class="invalid-feedback d-block">{{ form.ausbildungsstand.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<label for="{{ form.institution.id_for_label }}" class="form-label">{{ form.institution.label }}</label>
|
||||
{{ form.institution }}
|
||||
{% if form.institution.errors %}<div class="invalid-feedback d-block">{{ form.institution.errors.0 }}</div>{% endif %}
|
||||
|
||||
{# Contact & Address #}
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header py-2"><i class="fas fa-address-book me-2 text-info"></i><strong>Kontakt & Adresse</strong></div>
|
||||
<div class="card-body py-2">
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-muted" style="width:140px;">E-Mail</td>
|
||||
<td>
|
||||
{{ form.email }}
|
||||
{% if form.email.errors %}<div class="invalid-feedback d-block">{{ form.email.errors.0 }}</div>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Telefon</td>
|
||||
<td>
|
||||
{{ form.telefon }}
|
||||
{% if form.telefon.errors %}<div class="invalid-feedback d-block">{{ form.telefon.errors.0 }}</div>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">IBAN</td>
|
||||
<td>
|
||||
{{ form.iban }}
|
||||
{% if form.iban.errors %}<div class="invalid-feedback d-block">{{ form.iban.errors.0 }}</div>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Strasse</td>
|
||||
<td>
|
||||
{{ form.strasse }}
|
||||
{% if form.strasse.errors %}<div class="invalid-feedback d-block">{{ form.strasse.errors.0 }}</div>{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">PLZ / Ort</td>
|
||||
<td>
|
||||
<div class="row g-2">
|
||||
<div class="col-4">{{ form.plz }}</div>
|
||||
<div class="col-8">{{ form.ort }}</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<label for="{{ form.projekt_beschreibung.id_for_label }}" class="form-label">{{ form.projekt_beschreibung.label }}</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Right Column ── #}
|
||||
<div class="col-lg-6">
|
||||
{# Financial #}
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header py-2"><i class="fas fa-euro-sign me-2 text-warning"></i><strong>Finanzen & Foerderung</strong></div>
|
||||
<div class="card-body py-2">
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-muted" style="width:180px;">Quartalsbetrag</td>
|
||||
<td>{{ form.vierteljaehrlicher_betrag }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Monatl. Bezuege</td>
|
||||
<td>{{ form.monatliche_bezuege }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Jaehrl. Einkommen</td>
|
||||
<td>{{ form.jaehrliches_einkommen }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Vermoegen</td>
|
||||
<td>{{ form.vermoegen }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Haushaltsgroesse</td>
|
||||
<td>{{ form.haushaltsgroesse }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Standardkonto</td>
|
||||
<td>{{ form.standard_konto }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Finanz. Notlage</td>
|
||||
<td>
|
||||
<div class="form-check">{{ form.finanzielle_notlage }}<label class="form-check-label" for="{{ form.finanzielle_notlage.id_for_label }}">Ja</label></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Unterstuetzung best.</td>
|
||||
<td>
|
||||
<div class="form-check">{{ form.unterstuetzung_bestaetigt }}<label class="form-check-label" for="{{ form.unterstuetzung_bestaetigt.id_for_label }}">Ja</label></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Study & Prerequisites #}
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header py-2"><i class="fas fa-graduation-cap me-2 text-secondary"></i><strong>Studium & Voraussetzungen</strong></div>
|
||||
<div class="card-body py-2">
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-muted" style="width:180px;">Abkoemmling gem. Satzung</td>
|
||||
<td>
|
||||
<div class="form-check">{{ form.ist_abkoemmling }}<label class="form-check-label" for="{{ form.ist_abkoemmling.id_for_label }}">Ja</label></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Ausbildungsstand</td>
|
||||
<td>{{ form.ausbildungsstand }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Institution</td>
|
||||
<td>{{ form.institution }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Studiennachweis erf.</td>
|
||||
<td>
|
||||
<div class="form-check">{{ form.studiennachweis_erforderlich }}<label class="form-check-label" for="{{ form.studiennachweis_erforderlich.id_for_label }}">Ja</label></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">Letzter Nachweis</td>
|
||||
<td>{{ form.letzter_studiennachweis }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Description & Notes #}
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header py-2"><i class="fas fa-sticky-note me-2 text-secondary"></i><strong>Beschreibung & Notizen</strong></div>
|
||||
<div class="card-body py-2">
|
||||
<div class="mb-2">
|
||||
<small class="text-muted">Projektbeschreibung</small>
|
||||
{{ form.projekt_beschreibung }}
|
||||
{% if form.projekt_beschreibung.errors %}<div class="invalid-feedback d-block">{{ form.projekt_beschreibung.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<small class="text-muted">Notizen</small>
|
||||
{{ form.notizen }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Finanzielle Informationen ── #}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-dark text-white py-2">
|
||||
<i class="fas fa-euro-sign me-2"></i>Finanzielle Informationen
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.jaehrliches_einkommen.id_for_label }}" class="form-label">{{ form.jaehrliches_einkommen.label }}</label>
|
||||
{{ form.jaehrliches_einkommen }}
|
||||
{% if form.jaehrliches_einkommen.errors %}<div class="invalid-feedback d-block">{{ form.jaehrliches_einkommen.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.vermoegen.id_for_label }}" class="form-label">{{ form.vermoegen.label }}</label>
|
||||
{{ form.vermoegen }}
|
||||
{% if form.vermoegen.errors %}<div class="invalid-feedback d-block">{{ form.vermoegen.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<div class="form-check">
|
||||
{{ form.finanzielle_notlage }}
|
||||
<label class="form-check-label" for="{{ form.finanzielle_notlage.id_for_label }}">{{ form.finanzielle_notlage.label }}</label>
|
||||
</div>
|
||||
{% if form.finanzielle_notlage.errors %}<div class="invalid-feedback d-block">{{ form.finanzielle_notlage.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Unterstuetzung & Auszahlung ── #}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-dark text-white py-2">
|
||||
<i class="fas fa-check-circle me-2"></i>Unterstuetzung & Auszahlung
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check">
|
||||
{{ form.ist_abkoemmling }}
|
||||
<label class="form-check-label" for="{{ form.ist_abkoemmling.id_for_label }}">{{ form.ist_abkoemmling.label }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check">
|
||||
{{ form.unterstuetzung_bestaetigt }}
|
||||
<label class="form-check-label" for="{{ form.unterstuetzung_bestaetigt.id_for_label }}">{{ form.unterstuetzung_bestaetigt.label }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.haushaltsgroesse.id_for_label }}" class="form-label">{{ form.haushaltsgroesse.label }}</label>
|
||||
{{ form.haushaltsgroesse }}
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.monatliche_bezuege.id_for_label }}" class="form-label">{{ form.monatliche_bezuege.label }}</label>
|
||||
{{ form.monatliche_bezuege }}
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.vierteljaehrlicher_betrag.id_for_label }}" class="form-label">Vierteljaehrlicher Betrag (€)</label>
|
||||
{{ form.vierteljaehrlicher_betrag }}
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.standard_konto.id_for_label }}" class="form-label">{{ form.standard_konto.label }}</label>
|
||||
{{ form.standard_konto }}
|
||||
<div class="form-text">Standardkonto fuer vierteljaehrliche Vorauszahlungen</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Studiennachweis ── #}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-dark text-white py-2">
|
||||
<i class="fas fa-graduation-cap me-2"></i>Studiennachweis
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="form-check">
|
||||
{{ form.studiennachweis_erforderlich }}
|
||||
<label class="form-check-label" for="{{ form.studiennachweis_erforderlich.id_for_label }}">{{ form.studiennachweis_erforderlich.label }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="{{ form.letzter_studiennachweis.id_for_label }}" class="form-label">{{ form.letzter_studiennachweis.label }}</label>
|
||||
{{ form.letzter_studiennachweis }}
|
||||
<div class="form-text">Stichtage: 15.03 und 15.09</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Status & Notizen ── #}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-dark text-white py-2">
|
||||
<i class="fas fa-cog me-2"></i>Status und Notizen
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-3">
|
||||
<div class="form-check">
|
||||
{{ form.aktiv }}
|
||||
<label class="form-check-label" for="{{ form.aktiv.id_for_label }}">{{ form.aktiv.label }}</label>
|
||||
</div>
|
||||
{% if form.aktiv.errors %}<div class="invalid-feedback d-block">{{ form.aktiv.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<label for="{{ form.notizen.id_for_label }}" class="form-label">{{ form.notizen.label }}</label>
|
||||
{{ form.notizen }}
|
||||
{% if form.notizen.errors %}<div class="invalid-feedback d-block">{{ form.notizen.errors.0 }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-secondary">
|
||||
<i class="fas fa-times me-2"></i>Abbrechen
|
||||
{# ── Save bar ── #}
|
||||
<div class="card shadow-sm mt-2 mb-4 border-0" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
|
||||
<div class="card-body py-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="fas fa-times me-1"></i>Abbrechen
|
||||
</a>
|
||||
<button type="submit" class="btn btn-success">
|
||||
<i class="fas fa-save me-2"></i>Speichern
|
||||
<i class="fas fa-save me-1"></i>Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
{% help_box 'destinataer_new' user %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user