diff options
Diffstat (limited to 'templates/payment')
-rw-r--r-- | templates/payment/create.html | 93 | ||||
-rw-r--r-- | templates/payment/table.html | 259 | ||||
-rw-r--r-- | templates/payment/update.html | 117 |
3 files changed, 240 insertions, 229 deletions
diff --git a/templates/payment/create.html b/templates/payment/create.html index 5bae767..8defad3 100644 --- a/templates/payment/create.html +++ b/templates/payment/create.html @@ -6,7 +6,7 @@ {% block main %} - <div> + <section class="g-Section"> <p class="g-Paragraph"> <a class="g-Link g-Media__Large" @@ -34,47 +34,51 @@ <div class="g-Form__Error">{{ error }}</div> {% endif %} - <label class="g-Form__Label" for="name">Nom</label> - <input - name="name" - class="g-Form__Input" - id="name" - value="{{ form.name | default(value="") }}" - required - {% if not form %} autofocus {% endif %} - /> + <label class="g-Form__Label"> + Nom + <input + name="name" + class="g-Form__Input" + value="{{ form.name | default(value="") }}" + required + {% if not form %} autofocus {% endif %} + /> + </label> - <label class="g-Form__Label" for="cost">Coût</label> - <input - name="cost" - type="number" - class="g-Form__Input" - id="cost" - value="{{ form.cost | default(value="") }}" - required - /> + <label class="g-Form__Label"> + Coût + <input + name="cost" + type="number" + class="g-Form__Input" + value="{{ form.cost | default(value="") }}" + required + /> + </label> {% set user_id = form.user_id | default(value="" ~ connected_user.id) %} - <label class="g-Form__Label" for="user_id">Personne</label> - <select name="user_id" id="user_id" class="g-Form__Select" required> - {% for user in users %} - <option - value="{{ user.id }}" - {% if "" ~ user.id == user_id %} - selected - {% endif %} - > - {{ user.name }} - </option> - {% endfor %} - </select> + <label class="g-Form__Label"> + Personne + <select name="user_id" class="g-Form__Select" required> + {% for user in users %} + <option + value="{{ user.id }}" + {% if "" ~ user.id == user_id %} + selected + {% endif %} + > + {{ user.name }} + </option> + {% endfor %} + </select> + </label> {% set category_id = form.category_id | default(value="") %} - <label class="g-Form__Label" for="category_id"> + <label class="g-Form__Label"> Catégorie - <select name="category_id" id="category_id" class="g-Form__Select" required> + <select name="category_id" class="g-Form__Select" required> {% for category in categories %} <option value="{{ category.id }}" @@ -90,15 +94,16 @@ {% set date = form.date | default(value=now() | date(format="%Y-%m-%d")) %} {% if query.frequency != "Monthly" %} - <label class="g-Form__Label" for="date">Date</label> - <input - name="date" - type="date" - class="g-Form__Input" - id="date" - value="{{ date }}" - required - /> + <label class="g-Form__Label"> + Date + <input + name="date" + type="date" + class="g-Form__Input" + value="{{ date }}" + required + /> + </label> {% else %} <input name="date" @@ -117,6 +122,6 @@ <input class="g-Button__Validate" type="submit" value="Créer" /> </div> </form> - </div> + </section> {% endblock main %} diff --git a/templates/payment/table.html b/templates/payment/table.html index 5234e05..da15b22 100644 --- a/templates/payment/table.html +++ b/templates/payment/table.html @@ -8,139 +8,138 @@ {% block main %} - <div class="g-Paragraph g-Payments__Header"> - <div class="g-Payments__FrequenciesAndSearch"> - <div class="g-Payments__Frequencies"> - {% if query.frequency == "Monthly" %} - <a - class="g-Payments__Frequency g-Link" - href="/{{ payments_params(frequency="Punctual") }}" - > - Ponctuels - </a> - / - <span class="g-Payments__Frequency g-Payments__Frequency--Selected"> - Mensuels - </span> - {% else %} - <span class="g-Payments__Frequency g-Payments__Frequency--Selected"> - Ponctuels - </span> - / - <a - class="g-Payments__Frequency g-Link" - href="/{{ payments_params(frequency="Monthly") }}" - > - Mensuels - </a> - {% endif %} + <aside class="g-Aside"> + <form action="/" method="GET" class="g-Payments__Filters"> + <label class="g-Form__Label"> + Fréquence + <select name="frequency" class="g-Form__Select"> + <option value="Punctual" {% if query.frequency == "Punctual" %} selected {% endif %}> + Ponctuelle + </option> + <option value="Monthly" {% if query.frequency == "Monthly" %} selected {% endif %}> + Mensuelle + </option> + </select> + </label> + + <label class="g-Form__Label"> + Recherche + <input + type="search" + name="search" + class="g-Form__Input" + value="{{ query.search }}" + /> + </label> + + <label class="g-Form__Label"> + Catégorie + <select name="category" class="g-Form__Select"> + <option selected disabled hidden></option> + {% for category in categories %} + <option + value="{{ category.id }}" + style="color: {{ category.color }}" + {% if category.id == query.category %} selected {% endif %} + > + {{ category.name }} + </option> + {% endfor %} + </select> + </label> + + <input type="submit" class="g-Button__Validate" value="Rechercher"> + </form> + </aside> + + <section class="g-Section"> + {% if not payments %} + + <div class="g-Payments__NoResults"> + Aucun paiement ne correspond à votre recherche. </div> - {% if query.frequency != "Monthly" %} - <form action="/" method="GET" class="g-Payments__Search"> - <input - type="search" - name="search" - class="g-Form__Input g-Payments__SearchInput" - value="{{ query.search }}" - /> - - <label class="g-Form__Label"> - Catégorie - <select name="category" class="g-Form__Select"> - <option disabled selected value></option> - {% for category in categories %} - <option - value="{{ category.id }}" - style="color: {{ category.color }}" - {% if category.id == query.category %} selected {% endif %} - > - {{ category.name }} - </option> - {% endfor %} - </select> - </label> - - <input type="submit" class="g-Button__Search" value="🔍"> - </form> - {% endif %} - </div> - - <a - class="g-Button__Validate g-Payments__New" - href="/payment{{ payments_params( - page=query.page, - search=query.search, - frequency=query.frequency - ) }}" - > - Nouveau - </a> - </div> - - {% if not payments %} - - <div class="g-Payments__NoResults"> - Aucun paiement ne correspond à votre recherche. - </div> - - {% else %} - - <div class="g-Paragraph"> - {{ count | numeric }} paiement{{ count | pluralize }} comptabilisant {{ total_cost | euros() }}. - </div> - - <div class="g-Table"> - <div class="g-Table__Row g-Table__Row--Header"> - <span class="g-Table__Cell">Nom</span> - <span class="g-Table__Cell">Coût</span> - <span class="g-Table__Cell">Personne</span> - <span class="g-Media__Large g-Table__Cell">Catégorie</span> - {% if query.frequency != "Monthly" %} - <span class="g-Table__Cell">Date</span> - {% endif %} + <a + class="g-Button__Validate g-Payments__New" + href="/payment{{ payments_params( + page=query.page, + search=query.search, + frequency=query.frequency + ) }}" + > + Nouveau + </a> + + {% else %} + + <div class="g-Paragraph"> + {{ count | numeric }} paiement{{ count | pluralize }} comptabilisant {{ total_cost | euros() }}. </div> - {% for payment in payments %} - <a - class="g-Table__Row {% if query.highlight == payment.id %} g-Table__Row--Highlight {% endif %}" - href="/payment/{{ payment.id }}{{ payments_params( - page=query.page, - search=query.search, - frequency=query.frequency - ) }}" - > - <span class="g-Table__Cell">{{ payment.name }}</span> - <span class=" - g-Table__Cell - g-Table__NumericCell - {% if payment.cost < 0 %} g-Payments__Refund {% endif %} - "> - {{ payment.cost | euros() }} - </span> - <span class="g-Table__Cell">{{ payment.user }}</span> - <span class="g-Table__Cell g-Media__Large"> - <span style="color: {{ payment.category_color }}"> - {{ payment.category_name }} - </span> - </span> + + <a + class="g-Paragraph g-Button__Validate g-Payments__New" + href="/payment{{ payments_params( + page=query.page, + search=query.search, + frequency=query.frequency + ) }}" + > + Ajouter un paiement + </a> + + <div class="g-Table"> + <div class="g-Table__Row g-Table__Row--Header"> + <span class="g-Table__Cell">Nom</span> + <span class="g-Table__Cell">Coût</span> + <span class="g-Table__Cell">Personne</span> + <span class="g-Media__Large g-Table__Cell">Catégorie</span> {% if query.frequency != "Monthly" %} - <span class="g-Table__Cell"> - {{ payment.date }} - </span> + <span class="g-Table__Cell">Date</span> {% endif %} - </a> - {% endfor %} - </div> - - {{ paging::paging( - url="/" ~ payments_params( - search=query.search, - frequency=query.frequency, - category=query.category - ), - page=page, - max_page=max_page - ) }} - - {% endif %} + </div> + {% for payment in payments %} + <a + class="g-Table__Row {% if query.highlight == payment.id %} g-Table__Row--Highlight {% endif %}" + href="/payment/{{ payment.id }}{{ payments_params( + page=query.page, + search=query.search, + frequency=query.frequency + ) }}" + > + <span class="g-Table__Cell">{{ payment.name }}</span> + <span class=" + g-Table__Cell + g-Table__NumericCell + {% if payment.cost < 0 %} g-Payments__Refund {% endif %} + "> + {{ payment.cost | euros() }} + </span> + <span class="g-Table__Cell">{{ payment.user }}</span> + <span class="g-Table__Cell g-Media__Large"> + <span style="color: {{ payment.category_color }}"> + {{ payment.category_name }} + </span> + </span> + {% if query.frequency != "Monthly" %} + <span class="g-Table__Cell"> + {{ payment.date }} + </span> + {% endif %} + </a> + {% endfor %} + </div> + + {{ paging::paging( + url="/" ~ payments_params( + search=query.search, + frequency=query.frequency, + category=query.category + ), + page=page, + max_page=max_page + ) }} + + {% endif %} + </section> + {% endblock main %} diff --git a/templates/payment/update.html b/templates/payment/update.html index 25e6915..4e244f4 100644 --- a/templates/payment/update.html +++ b/templates/payment/update.html @@ -6,7 +6,7 @@ {% block main %} - <div> + <section class="g-Section"> <p class="g-Paragraph"> <a class="g-Link g-Media__Large" @@ -42,66 +42,73 @@ > <h1 class="g-H1">Modification</h1> - <label class="g-Form__Label" for="name">Nom</label> - <input - name="name" - class="g-Form__Input" - id="name" - value="{{ form.name | default(value=payment.name) }}" - required - /> - - <label class="g-Form__Label" for="cost">Coût</label> - <input - name="cost" - type="number" - class="g-Form__Input" - id="cost" - value="{{ form.cost | default(value=payment.cost) }}" - required - /> + <label class="g-Form__Label"> + Nom + <input + name="name" + class="g-Form__Input" + value="{{ form.name | default(value=payment.name) }}" + required + /> + </label> + + <label class="g-Form__Label"> + Coût + <input + name="cost" + type="number" + class="g-Form__Input" + value="{{ form.cost | default(value=payment.cost) }}" + required + /> + </label> {% set user_id = form.user_id | default(value="" ~ payment.user_id) %} - <label class="g-Form__Label" for="user_id">Personne</label> - <select name="user_id" id="user_id" class="g-Form__Select" required> - {% for user in users %} - <option - value="{{ user.id }}" - {% if "" ~ user.id == user_id %} selected {% endif %} - > - {{ user.name }} - </option> - {% endfor %} - </select> + <label class="g-Form__Label"> + Personne + <select name="user_id" class="g-Form__Select" required> + {% for user in users %} + <option + value="{{ user.id }}" + {% if "" ~ user.id == user_id %} selected {% endif %} + > + {{ user.name }} + </option> + {% endfor %} + </select> + </label> {% set category_id = form.category_id | default(value="" ~ payment.category_id) %} - <label class="g-Form__Label" for="category_id">Catégorie</label> - <select name="category_id" id="category_id" class="g-Form__Select" required> - {% for category in categories %} - <option - value="{{ category.id }}" - style="color: {{ category.color }}" - {% if "" ~ category.id == category_id %} selected {% endif %} - > - {{ category.name }} - </option> - {% endfor %} - </select> + <label class="g-Form__Label"> + Catégorie + <select name="category_id" class="g-Form__Select" required> + {% for category in categories %} + <option + value="{{ category.id }}" + style="color: {{ category.color }}" + {% if "" ~ category.id == category_id %} selected {% endif %} + > + {{ category.name }} + </option> + {% endfor %} + </select> + </label> {% set date = form.date | default(value=payment.date) %} {% if payment.frequency == "Punctual" %} - <label class="g-Form__Label" for="date">Date</label> - <input - name="date" - type="date" - class="g-Form__Input" - id="date" - value="{{ date }}" - required - /> + <label class="g-Form__Label"> + Date + <input + name="date" + type="date" + class="g-Form__Input" + value="{{ date }}" + required + /> + </label> {% else %} <input name="date" @@ -127,18 +134,18 @@ > <h1 class="g-H1">Suppression</h1> - <label class="g-Form__Label" for="remove-input"> + <label class="g-Form__Label"> Veuillez recopier le nom du paiement : « {{ payment.name }} ». + <input name="remove-input" class="g-Form__Input" data-name="{{ payment.name }}" /> </label> - <input name="remove-input" class="g-Form__Input" id="remove-input" data-name="{{ payment.name }}" /> <div> - <input class="g-Button__Danger" type="submit" value="Supprimer" id="remove-button" disabled /> + <input id="remove-button"class="g-Button__Danger" type="submit" value="Supprimer" disabled /> </div> </form> {% endif %} - </div> + </section> {% endblock main %} |