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.

1 files changed, 62 insertions, 55 deletions

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 %}