From 8ccd762bfc3d7da2716749d709cf5cc216882a23 Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 10 Oct 2021 18:20:57 +0200 Subject: Search payments by categories explicitely It was already possible to search by categories in the full text input, but it could have matched other fields as well. Explicitely add a select to search by categories. Also put the search form in a left aside. The mobile view is not done for the moment. --- assets/main.css | 92 +++++++-------- assets/main.js | 34 +++++- src/db/payments.rs | 5 +- templates/balance.html | 2 +- templates/base.html | 116 +++++++++--------- templates/category/create.html | 44 +++---- templates/category/table.html | 49 ++++---- templates/category/update.html | 49 ++++---- templates/income/create.html | 96 ++++++++------- templates/income/table.html | 73 ++++++------ templates/income/update.html | 99 ++++++++-------- templates/login.html | 14 ++- templates/payment/create.html | 93 ++++++++------- templates/payment/table.html | 259 ++++++++++++++++++++--------------------- templates/payment/update.html | 117 ++++++++++--------- templates/statistics.html | 10 +- 16 files changed, 597 insertions(+), 555 deletions(-) diff --git a/assets/main.css b/assets/main.css index 4c286da..6a0be98 100644 --- a/assets/main.css +++ b/assets/main.css @@ -7,6 +7,7 @@ --color-green: #9FD2A5; --color-blue: #6CA2A4; --color-gray: #EEEEEE; + --color-gray-light: #F8F8F8; --color-yellow: #FFF09E; /* Sizes */ @@ -25,9 +26,9 @@ /* Reset */ -html { box-sizing: border-box; } +html { box-sizing: border-box; height: 100%; } *, *:before, *:after { box-sizing: inherit; } -body { margin: 0; } +body { margin: 0; height: 100%; } p { margin: 0; } a { color: inherit; text-decoration: none; } h1 { font-size: inherit; font-weight: normal; margin: 0; } @@ -62,9 +63,6 @@ body { .g-Header { width: 100%; -} - -.g-Header__Primary { display: flex; align-items: center; justify-content: space-between; @@ -92,37 +90,52 @@ body { text-decoration: underline; } -.g-Header__Secondary { +.g-Nav { + width: 100%; display: flex; background-color: var(--color-red); color: white; overflow-y: auto; } -.g-Header__Link { +.g-Nav__Link { padding: var(--size-mouse) var(--size-dog); } -.g-Header__Link:hover { +.g-Nav__Link:hover { background-color: var(--color-brown); } -.g-Header__Link:focus { +.g-Nav__Link:focus { background-color: var(--color-brown); } -.g-Header__Link--Current { +.g-Nav__Link--Current { background-color: var(--color-brown); } .g-Main { + display: flex; + width: 100%; + height: 100%; + overflow-x: hidden; +} + +.g-Aside { + height: 100%; display: flex; flex-direction: column; - align-items: center; + background-color: var(--color-gray-light); + border-right: 2px solid #DDDDDD; + padding: var(--size-horse) var(--size-bear); +} + +.g-Section { + display: flex; width: 100%; - padding: 0 var(--size-bear); + flex-direction: column; + align-items: center; margin: var(--size-horse) 0; - overflow-x: hidden; } .g-Title { @@ -229,10 +242,11 @@ body { .g-Form__Label { margin-bottom: var(--size-mouse); + position: relative; } .g-Form__Input { - margin-bottom: var(--size-lion); + margin: var(--size-mouse) 0 var(--size-lion); background-color: white; border: 1px solid black; height: var(--size-camel); @@ -245,7 +259,7 @@ body { } .g-Form__Select { - margin-bottom: var(--size-lion); + margin: var(--size-mouse) 0 var(--size-lion); background-color: white; border: 1px solid black; height: var(--size-camel); @@ -253,6 +267,13 @@ body { width: 100%; } +.g-Form__ResetSelect { + cursor: pointer; + position: absolute; + top: -3px; + right: 0; +} + .g-Form__Error { color: var(--color-red); text-align: center; @@ -261,18 +282,6 @@ body { /* Buttons */ -.g-Button__Search { - cursor: pointer; - background-color: var(--color-gray); - color: white; - border: none; - height: var(--size-camel); - padding: 0 var(--size-dog); - border-top: 1px solid black; - border-right: 1px solid black; - border-bottom: 1px solid black; -} - .g-Button__Validate { display: flex; align-items: center; @@ -338,33 +347,9 @@ body { } } -.g-Payments__FrequenciesAndSearch { - display: flex; - align-items: center; -} - -.g-Payments__Search { - display: flex; - margin: 0 var(--size-bear) 0 0; -} - -.g-Payments__SearchInput { - margin-bottom: 0; - width: 150px; -} - -.g-Payments__Frequencies { +.g-Payments__Filters { display: flex; - margin: 0 var(--size-dog); -} - -.g-Payments__Frequency { - margin: 0 var(--size-mouse); -} - -.g-Payments__Frequency--Selected { - color: var(--color-red); - font-weight: bold; + flex-direction: column; } @media screen and (max-width: 500px) { @@ -383,6 +368,7 @@ body { background-color: var(--color-green); border-radius: var(--size-bee); color: white; + padding: var(--size-bee); margin-bottom: var(--size-bear); text-align: center; } diff --git a/assets/main.js b/assets/main.js index aee4862..3dd4b6e 100644 --- a/assets/main.js +++ b/assets/main.js @@ -6,6 +6,10 @@ if (path == '/login') { trim_inputs_on_blur() +} else if (path == '/') { // Payment table + + allow_select_reset() + } else if (path == '/payment') { // Payment creation trim_inputs_on_blur() @@ -53,10 +57,34 @@ function trim_inputs_on_blur() { }) } +function allow_select_reset() { + document.querySelectorAll('select').forEach(select => { + const canBeReset = Array.from(select.options).find(option => option.disabled) + if (canBeReset) { + const button = document.createElement('input') + button.type = 'button' + button.value = 'Effacer' + button.className = 'g-Form__ResetSelect' + button.onclick = function() { + select.selectedIndex = 0 + } + if (select.selectedIndex === 0) { + button.style = 'visibility: hidden' + } + select.onchange = function() { + button.style = 'visibility: visible' + } + select.parentNode.appendChild(button) + } + }) +} + function control_remove_button() { - const removeInput = document.getElementById('remove-input') + const removeInput = document.getElementsByName('remove-input')[0] const removeButton = document.getElementById('remove-button') + console.log(removeInput, removeButton) + if (removeInput && removeButton) { removeInput.addEventListener('input', () => { if (removeInput.value.trim() == removeInput.getAttribute('data-name')) { @@ -69,8 +97,8 @@ function control_remove_button() { } function auto_fill_category() { - const name = document.getElementById('name') - const category = document.getElementById('category_id') + const name = document.getElementsByName('name')[0] + const category = document.getElementsByName('category_id')[0] function onNameChange() { const query = name.value.trim() diff --git a/src/db/payments.rs b/src/db/payments.rs index 624ba9f..3b85dab 100644 --- a/src/db/payments.rs +++ b/src/db/payments.rs @@ -133,7 +133,6 @@ OFFSET ? fn search_query(search: String) -> String { let payments_name = utils::format_key_for_search("payments.name"); let users_name = utils::format_key_for_search("users.name"); - let categories_name = utils::format_key_for_search("categories.name"); search .split_ascii_whitespace() @@ -144,11 +143,10 @@ AND ( {} LIKE ? OR payments.cost LIKE ? OR {} LIKE ? - OR {} LIKE ? OR strftime('%d/%m/%Y', date) LIKE ? ) "#, - payments_name, users_name, categories_name + payments_name, users_name ) }) .collect::>() @@ -165,7 +163,6 @@ fn bind_search<'a, Row: FromRow<'a, SqliteRow>>( .bind(s.clone()) .bind(s.clone()) .bind(s.clone()) - .bind(s.clone()) }) } diff --git a/templates/balance.html b/templates/balance.html index 15da854..b97ea40 100644 --- a/templates/balance.html +++ b/templates/balance.html @@ -6,7 +6,7 @@ {% block main %} -
+
{% if exceeding_payers %}
- {% endif %} + + Statistiques + - + +{% endif %}
{% block main %}{% endblock main %} diff --git a/templates/category/create.html b/templates/category/create.html index e206898..af95e16 100644 --- a/templates/category/create.html +++ b/templates/category/create.html @@ -6,7 +6,7 @@ {% block main %} -
+

Retour aux categories @@ -22,30 +22,32 @@

{{ error }}
{% endif %} - - - - - + + +
-
+ {% endblock main %} diff --git a/templates/category/table.html b/templates/category/table.html index 896304a..ad42258 100644 --- a/templates/category/table.html +++ b/templates/category/table.html @@ -6,33 +6,36 @@ {% block main %} -
- Nouveau -
+
- {% if not categories %} + {% if not categories %} +
+ Il n’y a aucune catégorie. +
+ {% endif %} -
- Il n’y a aucune catégorie. +
+ Ajouter une catégorie
- {% else %} - -
- {% for category in categories %} - - + {% for category in categories %} + - {{ category.name }} - - - {% endfor %} -
+ + {{ category.name }} + + + {% endfor %} +
+ {% endif %} + +
- {% endif %} {% endblock main %} diff --git a/templates/category/update.html b/templates/category/update.html index a4c1481..48dda06 100644 --- a/templates/category/update.html +++ b/templates/category/update.html @@ -6,7 +6,7 @@ {% block main %} -
+

Retour aux catégories @@ -30,24 +30,26 @@ >

Modification

- - - - - + + +
@@ -67,19 +69,18 @@ utilisée.

{% else %} -
+
{% endblock main %} diff --git a/templates/income/create.html b/templates/income/create.html index b74dddd..3c899ca 100644 --- a/templates/income/create.html +++ b/templates/income/create.html @@ -6,7 +6,7 @@ {% block main %} -
+

{{ error }}

{% endif %} - - + {% set user_id = form.user_id | default(value="" ~ connected_user.id) %} - - + {% set month_index = form.month | default(value="" ~ current_month) %} - - + - - +
-
+ {% endblock main %} diff --git a/templates/income/table.html b/templates/income/table.html index efd82a7..60cd6e0 100644 --- a/templates/income/table.html +++ b/templates/income/table.html @@ -8,48 +8,49 @@ {% block main %} -
+
+ + {% if not incomes %} +
+ Il n’y a aucun revenu. +
+ {% endif %} + - Nouveau + Ajouter un revenu -
- {% if not incomes %} + {% if incomes %} +
+
+ Montant + Personne + Mois +
+ {% for income in incomes %} + + + {{ income.amount | euros() }} + + {{ income.user }} + {{ income.date }} + + {% endfor %} +
-
- Il n’y a aucun revenu. -
+ {{ paging::paging( + url="/incomes", + page=page, + max_page=max_page + ) }} + {% endif %} - {% else %} + -
-
- Montant - Personne - Mois -
- {% for income in incomes %} - - - {{ income.amount | euros() }} - - {{ income.user }} - {{ income.date }} - - {% endfor %} -
- - {{ paging::paging( - url="/incomes", - page=page, - max_page=max_page - ) }} - - {% endif %} {% endblock main %} diff --git a/templates/income/update.html b/templates/income/update.html index 6dd649a..855d5c4 100644 --- a/templates/income/update.html +++ b/templates/income/update.html @@ -6,7 +6,7 @@ {% block main %} -
+

Modification

- - + {% set user_id = form.user_id | default(value="" ~ income.user_id) %} - - + {% set month_index = form.month | default(value="" ~ income.month) %} - - - - - + + +
@@ -99,19 +105,18 @@ utilisée.

{% else %} -
+
{% endblock main %} diff --git a/templates/login.html b/templates/login.html index fd4cfe9..0c2e151 100644 --- a/templates/login.html +++ b/templates/login.html @@ -13,11 +13,15 @@
{{ error }}
{% endif %} - - - - - + + +
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 %} -
+

{{ error }}

{% endif %} - - + - - + {% set user_id = form.user_id | default(value="" ~ connected_user.id) %} - - + {% set category_id = form.category_id | default(value="") %} -
-
+ {% 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 %} -
-
-
- {% if query.frequency == "Monthly" %} - - Ponctuels - - / - - Mensuels - - {% else %} - - Ponctuels - - / - - Mensuels - - {% endif %} + + +
+ {% if not payments %} + +
+ Aucun paiement ne correspond à votre recherche.
- {% if query.frequency != "Monthly" %} -
- - - - - -
- {% endif %} -
- - - Nouveau - -
- - {% if not payments %} - -
- Aucun paiement ne correspond à votre recherche. -
- - {% else %} - -
- {{ count | numeric }} paiement{{ count | pluralize }} comptabilisant {{ total_cost | euros() }}. -
- -
-
- Nom - Coût - Personne - Catégorie - {% if query.frequency != "Monthly" %} - Date - {% endif %} + + Nouveau + + + {% else %} + +
+ {{ count | numeric }} paiement{{ count | pluralize }} comptabilisant {{ total_cost | euros() }}.
- {% for payment in payments %} - - {{ payment.name }} - - {{ payment.cost | euros() }} - - {{ payment.user }} - - - {{ payment.category_name }} - - + + + Ajouter un paiement + + +
+
+ Nom + Coût + Personne + Catégorie {% if query.frequency != "Monthly" %} - - {{ payment.date }} - + Date {% endif %} - - {% endfor %} -
- - {{ paging::paging( - url="/" ~ payments_params( - search=query.search, - frequency=query.frequency, - category=query.category - ), - page=page, - max_page=max_page - ) }} - - {% endif %} +
+ {% for payment in payments %} + + {{ payment.name }} + + {{ payment.cost | euros() }} + + {{ payment.user }} + + + {{ payment.category_name }} + + + {% if query.frequency != "Monthly" %} + + {{ payment.date }} + + {% endif %} + + {% endfor %} +
+ + {{ paging::paging( + url="/" ~ payments_params( + search=query.search, + frequency=query.frequency, + category=query.category + ), + page=page, + max_page=max_page + ) }} + + {% endif %} + + {% 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 %} -
+

Modification

- - - - - + + + {% set user_id = form.user_id | default(value="" ~ payment.user_id) %} - - + {% set category_id = form.category_id | default(value="" ~ payment.category_id) %} - - + {% set date = form.date | default(value=payment.date) %} {% if payment.frequency == "Punctual" %} - - + {% else %}

Suppression

-
+ {% endblock main %} diff --git a/templates/statistics.html b/templates/statistics.html index badbc6d..21e8fcd 100644 --- a/templates/statistics.html +++ b/templates/statistics.html @@ -6,10 +6,12 @@ {% block main %} -
- - -
+
+
+ + +
+