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.

3 files changed, 140 insertions, 128 deletions

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 %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a
         class="g-Link g-Media__Large"
@@ -29,61 +29,67 @@
         <div class="g-Form__Error">{{ error }}</div>
       {% endif %}
 
-      <label class="g-Form__Label" for="amount">Montant</label>
-      <input
-        name="amount"
-        type="number"
-        class="g-Form__Input"
-        id="amount"
-        value="{{ form.amount | default(value="") }}"
-        required
-        {% if not form %} autofocus {% endif %}
-      />
+      <label class="g-Form__Label">
+        Montant
+        <input
+          name="amount"
+          type="number"
+          class="g-Form__Input"
+          value="{{ form.amount | default(value="") }}"
+          required
+          {% if not form %} autofocus {% endif %}
+        />
+      </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 month_index = form.month | default(value="" ~ current_month) %}
 
-      <label class="g-Form__Label" for="month">Mois</label>
-      <select name="month" id="month" class="g-Form__Select" required>
-        {% for month in months %}
-          <option
-            value="{{ loop.index }}"
-            {% if "" ~ loop.index == month_index %}
-              selected
-            {% endif %}
-          >
-            {{ month }}
-          </option>
-        {% endfor %}
-      </select>
+      <label class="g-Form__Label">
+        Mois
+        <select name="month" class="g-Form__Select" required>
+          {% for month in months %}
+            <option
+              value="{{ loop.index }}"
+              {% if "" ~ loop.index == month_index %}
+                selected
+              {% endif %}
+            >
+              {{ month }}
+            </option>
+          {% endfor %}
+        </select>
+      </label>
 
-      <label class="g-Form__Label" for="year">Année</label>
-      <input
-        name="year"
-        type="number"
-        class="g-Form__Input"
-        id="year"
-        value="{{ form.year | default(value=now() | date(format="%Y")) }}"
-        required
-      />
+      <label class="g-Form__Label">
+        Année
+        <input
+          name="year"
+          type="number"
+          class="g-Form__Input"
+          value="{{ form.year | default(value=now() | date(format="%Y")) }}"
+          required
+        />
+      </label>
 
       <div>
         <input class="g-Button__Validate" type="submit" value="Créer" />
       </div>
     </form>
-  </div>
+  </section>
 
 {% 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 %}
 
-  <div class="g-Paragraph g-Payments__Header">
+  <section class="g-Section">
+
+    {% if not incomes %}
+      <div class="g-Table__NoResults">
+        Il n’y a aucun revenu.
+      </div>
+    {% endif %}
+
     <a
-      class="g-Button__Validate"
+      class="g-Paragraph g-Button__Validate"
       href="/income?page={{ page | default(value=1) }}"
     >
-      Nouveau
+      Ajouter un revenu
     </a>
-  </div>
 
-  {% if not incomes %}
+    {% if incomes %}
+      <div class="g-Table">
+        <div class="g-Table__Row g-Table__Row--Header">
+          <span class="g-Table__Cell">Montant</span>
+          <span class="g-Table__Cell">Personne</span>
+          <span class="g-Table__Cell">Mois</span>
+        </div>
+        {% for income in incomes %}
+          <a
+            class="g-Table__Row {% if highlight == income.id %} g-Table__Row--Highlight {% endif %}"
+            href="/income/{{ income.id }}?page={{ page | default(value=1) }}"
+          >
+            <span class="g-Table__Cell g-Table__NumericCell">
+              {{ income.amount | euros() }}
+            </span>
+            <span class="g-Table__Cell">{{ income.user }}</span>
+            <span class="g-Table__Cell">{{ income.date }}</span>
+          </a>
+        {% endfor %}
+      </div>
 
-    <div class="g-Payments__NoResults">
-      Il n’y a aucun revenu.
-    </div>
+      {{ paging::paging(
+        url="/incomes",
+        page=page,
+        max_page=max_page
+      ) }}
+    {% endif %}
 
-  {% else %}
+  </section>
 
-    <div class="g-Table">
-      <div class="g-Table__Row g-Table__Row--Header">
-        <span class="g-Table__Cell">Montant</span>
-        <span class="g-Table__Cell">Personne</span>
-        <span class="g-Table__Cell">Mois</span>
-      </div>
-      {% for income in incomes %}
-        <a
-          class="g-Table__Row {% if highlight == income.id %} g-Table__Row--Highlight {% endif %}"
-          href="/income/{{ income.id }}?page={{ page | default(value=1) }}"
-        >
-          <span class="g-Table__Cell g-Table__NumericCell">
-            {{ income.amount | euros() }}
-          </span>
-          <span class="g-Table__Cell">{{ income.user }}</span>
-          <span class="g-Table__Cell">{{ income.date }}</span>
-        </a>
-      {% endfor %}
-    </div>
-
-    {{ 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 %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a
         class="g-Link g-Media__Large"
@@ -33,53 +33,59 @@
       >
         <h1 class="g-H1">Modification</h1>
 
-        <label class="g-Form__Label" for="amount">Montant</label>
-        <input
-          name="amount"
-          type="number"
-          class="g-Form__Input"
-          id="amount"
-          value="{{ form.amount | default(value=income.amount) }}"
-          required
-        />
+        <label class="g-Form__Label">
+          Montant
+          <input
+            name="amount"
+            type="number"
+            class="g-Form__Input"
+            value="{{ form.amount | default(value=income.amount) }}"
+            required
+          />
+        </label>
 
         {% set user_id = form.user_id | default(value="" ~ income.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 month_index = form.month | default(value="" ~ income.month) %}
 
-        <label class="g-Form__Label" for="month">Mois</label>
-        <select name="month" id="month" class="g-Form__Select" required>
-          {% for month in months %}
-            <option
-              value="{{ loop.index }}"
-              {% if "" ~ loop.index == month_index %} selected {% endif %}
-            >
-              {{ month }}
-            </option>
-          {% endfor %}
-        </select>
-
-        <label class="g-Form__Label" for="year">Année</label>
-        <input
-          name="year"
-          type="number"
-          class="g-Form__Input"
-          id="year"
-          value="{{ form.year | default(value=income.year) }}"
-          required
-        />
+        <label class="g-Form__Label">
+          Mois
+          <select name="month" class="g-Form__Select" required>
+            {% for month in months %}
+              <option
+                value="{{ loop.index }}"
+                {% if "" ~ loop.index == month_index %} selected {% endif %}
+              >
+                {{ month }}
+              </option>
+            {% endfor %}
+          </select>
+        </label>
+
+        <label class="g-Form__Label">
+          Année
+          <input
+            name="year"
+            type="number"
+            class="g-Form__Input"
+            value="{{ form.year | default(value=income.year) }}"
+            required
+          />
+        </label>
 
         <div>
           <input class="g-Button__Validate" type="submit" value="Modifier" />
@@ -99,19 +105,18 @@
             utilisée.
           </p>
         {% else %}
-          <label class="g-Form__Label" for="remove-input">
+          <label class="g-Form__Label">
             Veuillez recopier le montant du revenu : « {{ income.amount }} ».
+            <input name="remove-input" class="g-Form__Input" data-name="{{ income.amount }}" />
           </label>
 
-          <input name="remove-input" class="g-Form__Input" id="remove-input" data-name="{{ income.amount }}" />
-
           <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>
         {% endif %}
       </form>
 
     {% endif %}
-  </div>
+  </section>
 
 {% endblock main %}