1 files changed, 128 insertions, 0 deletions
diff --git a/templates/payment/table.html b/templates/payment/table.html
new file mode 100644
index 0000000..19b56b4
--- /dev/null
+++ b/templates/payment/table.html
@@ -0,0 +1,128 @@
+{% import "macros/paging.html" as paging %}
+
+{% extends "base.html" %}
+
+{% block title %}
+  Paiements
+{% endblock title %}
+
+{% 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 %}
+      </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 }}"
+          />
+          <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 %}
+      </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
+      ),
+      page=page,
+      max_page=max_page
+    ) }}
+
+  {% endif %}
+{% endblock main %}