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, 129 insertions, 130 deletions

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