bin/finance/app/templates/transactions.html

{% extends "base.html" %}
{% block title %}Buchungen – Finanzberatung{% endblock %}
{% block content %}
<h1>Buchungen</h1>

<form class="filter-form" method="get" action="/buchungen">
  <label>Konto
    <select name="account_id">
      <option value="">alle</option>
      {% for a in accounts %}
      <option value="{{ a.id }}" {% if filters.account_id == a.id %}selected{% endif %}>{{ a.name }}</option>
      {% endfor %}
    </select>
  </label>
  <label>Von
    <input type="date" name="date_from" value="{{ filters.date_from.isoformat() if filters.date_from else '' }}">
  </label>
  <label>Bis
    <input type="date" name="date_to" value="{{ filters.date_to.isoformat() if filters.date_to else '' }}">
  </label>
  <label>Kategorie
    <select name="category_id">
      <option value="">alle</option>
      {% for c in categories %}
      <option value="{{ c.id }}" {% if filters.category_id == c.id %}selected{% endif %}>{{ c.name }}</option>
      {% endfor %}
    </select>
  </label>
  <label>Suche
    <input type="text" name="q" value="{{ filters.q }}" placeholder="Verwendungszweck / Empfänger">
  </label>
  <label>Status
    <select name="status">
      {% for s in ("confirmed", "draft") %}
      <option value="{{ s }}" {% if filters.status == s %}selected{% endif %}>{{ s }}</option>
      {% endfor %}
    </select>
  </label>
  <button type="submit">Filtern</button>
</form>

<table>
  <thead>
    <tr>
      <th>Datum</th><th>Konto</th><th>Verwendungszweck</th><th>Empfänger/Zahler</th>
      <th>Betrag</th><th>Kategorie</th><th></th>
    </tr>
  </thead>
  <tbody>
    {% for tx in transactions %}
    <tr>
      <td>{{ tx.booking_date.strftime('%d.%m.%Y') }}</td>
      <td>{{ account_names.get(tx.account_id, tx.account_id) }}</td>
      <td>{{ tx.purpose }}</td>
      <td>{{ tx.counterparty }}</td>
      <td class="{{ 'neg' if tx.amount < 0 else '' }}">{{ '%.2f'|format(tx.amount) }} €</td>
      <td>
        <select name="category_id" data-type="int" hx-ext="json-form"
                hx-patch="/api/transactions/{{ tx.id }}" hx-trigger="change" hx-swap="none">
          <option value="">–</option>
          {% for c in categories %}
          <option value="{{ c.id }}" {% if tx.category_id == c.id %}selected{% endif %}>{{ c.name }}</option>
          {% endfor %}
        </select>
      </td>
      <td>
        <details>
          <summary>Regel erzeugen</summary>
          <form hx-ext="json-form" hx-post="/api/category-rules" hx-swap="none"
                hx-on::after-request="if(event.detail.successful){this.closest('details').open=false}">
            <input type="hidden" name="pattern" value="{{ tx.counterparty }}">
            <label>Kategorie
              <select name="category_id" data-type="int" required>
                {% for c in categories %}
                <option value="{{ c.id }}" {% if tx.category_id == c.id %}selected{% endif %}>{{ c.name }}</option>
                {% endfor %}
              </select>
            </label>
            <button type="submit">Regel speichern</button>
          </form>
        </details>
      </td>
    </tr>
    {% else %}
    <tr><td colspan="7">Keine Buchungen gefunden.</td></tr>
    {% endfor %}
  </tbody>
</table>

<fieldset>
  <legend>Buchung manuell erfassen</legend>
  <form hx-ext="json-form" hx-post="/api/transactions" hx-swap="none"
        hx-on::after-request="if(event.detail.successful){this.reset(); window.location.reload()}">
    <label>Konto
      <select name="account_id" data-type="int" required>
        {% for a in accounts %}
        <option value="{{ a.id }}">{{ a.name }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Buchungsdatum
      <input type="date" name="booking_date" required>
    </label>
    <label>Betrag
      <input type="text" name="amount" placeholder="-12.50" required>
    </label>
    <label>Verwendungszweck
      <input type="text" name="purpose">
    </label>
    <label>Empfänger/Zahler
      <input type="text" name="counterparty">
    </label>
    <button type="submit">Buchung speichern</button>
  </form>
</fieldset>

<script>
  // Minimale JSON-Kodierung für htmx-Formulare/Selects, die gegen die JSON-APIs
  // (POST/PATCH /api/...) senden. Felder mit data-type="int" werden als Zahl
  // kodiert, leere Werte als null, alles andere bleibt String.
  htmx.defineExtension('json-form', {
    onEvent: function (name, evt) {
      if (name === 'htmx:configRequest') {
        evt.detail.headers['Content-Type'] = 'application/json';
      }
    },
    encodeParameters: function (xhr, parameters, elt) {
      var out = {};
      for (var k in parameters) {
        var v = parameters[k];
        var field = elt.matches && elt.matches('[name="' + k + '"]')
          ? elt
          : elt.querySelector('[name="' + k + '"]');
        var kind = field && field.dataset ? field.dataset.type : null;
        if (v === '') {
          out[k] = null;
        } else if (kind === 'int') {
          out[k] = parseInt(v, 10);
        } else {
          out[k] = v;
        }
      }
      xhr.overrideMimeType('text/json');
      return JSON.stringify(out);
    }
  });
</script>
{% endblock %}