update design for bill_create

This commit is contained in:
2024-01-22 22:15:53 +00:00
parent ced2a1dfab
commit d11dc8d7fe
5 changed files with 99 additions and 79 deletions

View File

@@ -51,7 +51,7 @@ class BillCreateForm(forms.ModelForm):
"amount": "Betrag (EUR)", "amount": "Betrag (EUR)",
"purpose": "Verwendungszweck", "purpose": "Verwendungszweck",
"affiliation": "Abrechnungsbudget", "affiliation": "Abrechnungsbudget",
"payer": "Wie wurde die Rechnung bezahlt?", "payer": "Ursprüngliche Bezahlmethode",
"only_digital": "Ich habe nur eine digitale Rechnung.", "only_digital": "Ich habe nur eine digitale Rechnung.",
"file_field": "Rechnung hochladen (PDF)", "file_field": "Rechnung hochladen (PDF)",
"comment": "Kommentar", "comment": "Kommentar",
@@ -74,8 +74,9 @@ class BillCreateForm(forms.ModelForm):
self.fields["bill_creator"].initial = member self.fields["bill_creator"].initial = member
self.fields["bill_creator"].disabled = True self.fields["bill_creator"].disabled = True
self.fields["invoice"].placeholder = "Firmenname\nStraße\nPLZ Ort" self.fields["invoice"].placeholder = "Firmenname\nStraße\nPLZ und Ort"
self.fields["invoice"].rows = 3 self.fields["invoice"].cols = 30
self.fields["invoice"].rows = 4
# bank data fields # bank data fields
self.fields["payer"].autofocus = True self.fields["payer"].autofocus = True

View File

@@ -13,5 +13,5 @@
{% if field.field.autofocus %}autofocus{% endif %} {% if field.field.autofocus %}autofocus{% endif %}
class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
> >
<span class="ml-2 text-gray-700 dark:text-gray-200">{{ field.label }} {% if not field.field.required %}(optional){% endif %}</span> <span class="text-gray-700 dark:text-gray-200">{{ field.label }} {% if not field.field.required %}(optional){% endif %}</span>
</label> </label>

View File

@@ -1,25 +0,0 @@
<label class="block">
<span class="text-gray-700 dark:text-gray-200">{{ field.label }} {% if not field.field.required %}(optional){% endif %}</span>
{% if field.errors %}
<div class="alert alert-danger">
<div class="alert-body">{{ field.errors }}</div>
</div>
{% endif %}
<div class="flex flex-col md:flex-row gap-y-2 md:gap-y-0 md:gap-x-2">
<input
type="text"
name="{{ field.name }}"
{% if field.value %}value="{{ field.value }}"{% endif %}
{% if field.field.required %}required{% endif %}
{% if field.field.disabled %}disabled{% endif %}
{% if field.field.autofocus %}autofocus{% endif %}
class="mt-1 block w-full disabled:bg-gray-200 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
>
<a href="" class="block btn btn-primary md:flex-grow lg:flex-grow-0"><i class="fa-solid fa-plus-square my-2"></i></a>
</div>
{% if field.help_text %}
<span class="text-gray-700 dark:text-gray-200">{{ field.help_text }}</span>
{% endif %}
</label>

View File

@@ -11,6 +11,7 @@
{% if field.field.disabled %}disabled{% endif %} {% if field.field.disabled %}disabled{% endif %}
{% if field.field.autofocus %}autofocus{% endif %} {% if field.field.autofocus %}autofocus{% endif %}
{% if field.field.placeholder %}placeholder="{{ field.field.placeholder }}"{% endif %} {% if field.field.placeholder %}placeholder="{{ field.field.placeholder }}"{% endif %}
{% if field.field.cols %}cols="{{ field.field.cols }}"{% endif %}
{% if field.field.rows %}rows="{{ field.field.rows }}"{% endif %} {% if field.field.rows %}rows="{{ field.field.rows }}"{% endif %}
class="mt-1 block w-full disabled:bg-gray-200 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" class="mt-1 block w-full disabled:bg-gray-200 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
>{% if field.value %}{{ field.value }}{% endif %}</textarea> >{% if field.value %}{{ field.value }}{% endif %}</textarea>

View File

@@ -7,28 +7,51 @@
<main class="container mx-auto w-full px-4 my-8 flex-1"> <main class="container mx-auto w-full px-4 my-8 flex-1">
<h1 class="page-title">Neue Rechnung einreichen</h1> <h1 class="page-title">Neue Rechnung einreichen</h1>
<div class="w-full h-full flex-1 flex justify-center items-center"> <div class="w-full h-full flex-1 flex justify-center items-center">
<form action="" enctype="multipart/form-data" method="POST" class="w-full max-w-xs sm:max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900"> <form action="" enctype="multipart/form-data" method="POST" class="multiSectionForm max-w-2xl">
{% csrf_token %} {% csrf_token %}
{% include "baseform/non_field_errors.html" %} {% include "baseform/non_field_errors.html" %}
{% include "baseform/select.html" with field=form.bill_creator %} <section>
<h2>Bankdaten</h2>
<hr> <small>Angaben zu den Bankdaten für die Rückerstattung des Rechnungsbetrags.</small>
<span class="text-gray-700 dark:text-gray-200">Bankdaten</span>
<div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
<div class="sm:col-span-3">
{% include "baseform/select.html" with field=form.payer %} {% include "baseform/select.html" with field=form.payer %}
{% include "baseform/text_with_suggestions.html" with field=form.name_text %} </div>
<div class="sm:col-span-4">
{% include "baseform/text.html" with field=form.name_text %}
</div>
<div class="sm:col-span-3">
{% include "baseform/text.html" with field=form.iban_text %} {% include "baseform/text.html" with field=form.iban_text %}
</div>
<div class="sm:col-span-3">
{% include "baseform/text.html" with field=form.bic_text %} {% include "baseform/text.html" with field=form.bic_text %}
</div>
<div class="col-span-full">
<label>
<input type="checkbox">
<span>Bankdaten speichern.</span>
</label>
</div>
</div>
</section>
<section>
<h2>Rechnungsdetails</h2>
<small>Details zur ursprünglichen bereits bezahlten Rechnung angeben.</small>
<hr> <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
<span class="text-gray-700 dark:text-gray-200">Rechnung</span> <div class="sm:col-span-4">
{% include "baseform/date.html" with field=form.date %}
{% include "baseform/textarea.html" with field=form.invoice %} {% include "baseform/textarea.html" with field=form.invoice %}
</div>
<div class="col-span-full">
{% include "baseform/text.html" with field=form.purpose %} {% include "baseform/text.html" with field=form.purpose %}
</div>
<label class="block"> <div class="sm:col-span-3">
{% include "baseform/date.html" with field=form.date %}
</div>
<div class="sm:col-span-2">
<label>
<span class="text-gray-700 dark:text-gray-200">{{ form.amount.label }}</span> <span class="text-gray-700 dark:text-gray-200">{{ form.amount.label }}</span>
{% if form.amount.errors %} {% if form.amount.errors %}
<div class="alert alert-danger"> <div class="alert alert-danger">
@@ -37,30 +60,50 @@
{% endif %} {% endif %}
<input <input
type="number" type="number"
name="amount"
value={{ form.amount.value }} value={{ form.amount.value }}
required
min="0.00" min="0.00"
step="0.01" step="0.01"
name="amount" placeholder="123,99"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
required
> >
</label> </label>
{% include "baseform/checkbox.html" with field=form.only_digital %}
{% include "baseform/file.html" with field=form.file_field %}
<hr>
<span class="text-gray-700 dark:text-gray-200">Beschlusslage</span>
{% include "baseform/select.html" with field=form.affiliation %}
{% include "baseform/text.html" with field=form.resolution_text %}
<hr>
{% include "baseform/textarea.html" with field=form.comment %}
<div class="flex flex-col-reverse sm:flex-row gap-3 justify-end pt-4 sm:pt-0">
<input type="submit" class="block btn btn-primary" value="Einreichen">
</div> </div>
<div class="col-span-full">
{% include "baseform/file.html" with field=form.file_field %}
</div>
<div class="col-span-full">
{% include "baseform/checkbox.html" with field=form.only_digital %}
</div>
</div>
</section>
<section>
<h2>Beschlusslage</h2>
<small>Informationen zur Beschlusslage dieser Rechnung.</small>
<div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
<div class="sm:col-span-3">
{% include "baseform/select.html" with field=form.affiliation %}
</div>
<div class="sm:col-span-3">
{% include "baseform/text.html" with field=form.resolution_text %}
</div>
</div>
</section>
<section>
<h2>Kommentar</h2>
<small>Erfordert etwas zusätzlichen Erklärungsbedarf oder sollen nachträglich Informationen bearbeitet werden?</small>
<div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
<div class="col-span-full">
{% include "baseform/textarea.html" with field=form.comment %}
</div>
</div>
</section>
<section class="flex justify-end">
<button type="submit" class="btn btn-primary w-full sm:w-auto" value="Einreichen">Rechnung einreichen</button>
</section>
</form> </form>
</div> </div>
</main> </main>