feat: Tabellen per Spaltenkopf sortierbar (A11-T4)
Neues static/sort.js sortiert Tabellen clientseitig per Klick auf den Spaltenkopf (⇅/▲/▼): Datum TT.MM.JJJJ, deutsche Zahlen/Beträge, sonst Text (Intl.Collator 'de'). Sortierwert optional per td[data-sort] (Punkt-Dezimal/ISO) überschreibbar, th[data-nosort] bekommt keinen Button, table[data-sort-mode="server"] wird übersprungen (Buchungen sortiert serverseitig, folgt in Task 5). Bearbeiten-/Tilgungsplan- Zeilen (tr[data-sort-follow]) wandern mit ihrer Vorzeile mit. Initialisierung über htmx.onLoad, greift auch bei nachgeladenen Fragmenten. Templates entsprechend annotiert (Planung, Szenarien, Admin, Index, Salden, Import-Liste, Buchungen); Salden-Gesamtzeile dafür in ein tfoot verschoben. test_gui.py::test_gui_zeigt_deutsche_betragsformate angepasst, da das neue machinenlesbare data-sort-Attribut bewusst Punkt-Dezimal führt (Interface-Konvention) - die Prüfung auf deutsches Format im sichtbaren Text bleibt bestehen. JS-Unit-/DOM-Tests unter tests/js (node --test, DOM-Teil optional via jsdom), pytest-Wrapper skip ohne node (Fable-Gate führt sie per Podman aus). Suite: 248 passed, 3 skipped (vorher 242/2). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,134 @@
|
||||
/* Tabellensortierung per Spaltenkopf (Ausbaustufe 11).
|
||||
*
|
||||
* Jede Tabelle mit <thead> bekommt je Spaltenkopf mit Text einen Button
|
||||
* (⇅ unsortiert, ▲ aufsteigend, ▼ absteigend). Ausnahmen: th[data-nosort],
|
||||
* table[data-sort-mode="server"] (z.B. /buchungen, sortiert serverseitig).
|
||||
* Sortierwert: td[data-sort] (Zahl Punkt-dezimal / ISO-Datum) oder der
|
||||
* angezeigte Text (Datum TT.MM.JJJJ, deutscher Betrag 1.234,56, sonst Text).
|
||||
* Leere Werte und „–" stehen in beiden Richtungen am Ende. Zeilen mit
|
||||
* data-sort-follow (Bearbeiten-/Tilgungsplan-Zeilen) wandern mit ihrer
|
||||
* Vorzeile. Nur <tbody> wird sortiert, <tfoot> bleibt unberührt.
|
||||
* Initialisierung über htmx.onLoad - greift auch bei nachgeladenen Fragmenten.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var DE_DATE = /^(\d{2})\.(\d{2})\.(\d{4})$/;
|
||||
var DE_NUMBER = /^-?(\d{1,3}(\.\d{3})+|\d+)(,\d+)?$/;
|
||||
var PLAIN_NUMBER = /^-?\d+(\.\d+)?$/;
|
||||
var ICON = { none: '⇅', asc: '▲', desc: '▼' };
|
||||
var collator = new Intl.Collator('de', { sensitivity: 'base', numeric: true });
|
||||
|
||||
function sortKey(raw, fromDataSort) {
|
||||
var text = String(raw == null ? '' : raw).trim();
|
||||
if (text === '' || text === '–' || text === '-') { return null; }
|
||||
if (fromDataSort && PLAIN_NUMBER.test(text)) {
|
||||
return { kind: 'number', value: parseFloat(text), text: text };
|
||||
}
|
||||
var m = DE_DATE.exec(text);
|
||||
if (m) { return { kind: 'date', value: parseInt(m[3] + m[2] + m[1], 10), text: text }; }
|
||||
var num = text.replace(/\s*[€%]$/, '').replace(/\s/g, '');
|
||||
if (DE_NUMBER.test(num)) {
|
||||
return { kind: 'number', value: parseFloat(num.replace(/\./g, '').replace(',', '.')), text: text };
|
||||
}
|
||||
return { kind: 'text', value: text, text: text };
|
||||
}
|
||||
|
||||
function columnKind(keys) {
|
||||
var kind = null;
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
if (!keys[i]) { continue; }
|
||||
if (kind === null) { kind = keys[i].kind; } else if (kind !== keys[i].kind) { return 'text'; }
|
||||
}
|
||||
return kind || 'text';
|
||||
}
|
||||
|
||||
function sortItems(items, dir) {
|
||||
var kind = columnKind(items.map(function (it) { return it.key; }));
|
||||
var sign = dir === 'desc' ? -1 : 1;
|
||||
return items.slice().sort(function (a, b) {
|
||||
if (!a.key || !b.key) {
|
||||
if (a.key) { return -1; }
|
||||
if (b.key) { return 1; }
|
||||
return a.index - b.index;
|
||||
}
|
||||
var c = kind === 'text' ? collator.compare(a.key.text, b.key.text)
|
||||
: a.key.value - b.key.value;
|
||||
return c !== 0 ? sign * c : a.index - b.index;
|
||||
});
|
||||
}
|
||||
|
||||
function groupRows(rows, isFollow) {
|
||||
var groups = [];
|
||||
rows.forEach(function (row) {
|
||||
if (isFollow(row) && groups.length) { groups[groups.length - 1].push(row); }
|
||||
else { groups.push([row]); }
|
||||
});
|
||||
return groups;
|
||||
}
|
||||
|
||||
function sortTable(table, col, dir) {
|
||||
var tbody = table.tBodies[0];
|
||||
if (!tbody) { return; }
|
||||
var groups = groupRows(Array.prototype.slice.call(tbody.rows), function (r) {
|
||||
return r.hasAttribute('data-sort-follow');
|
||||
});
|
||||
var items = groups.map(function (g, i) {
|
||||
var cell = g[0].cells[col];
|
||||
var key = null;
|
||||
if (cell && cell.colSpan === 1) {
|
||||
key = cell.hasAttribute('data-sort')
|
||||
? sortKey(cell.getAttribute('data-sort'), true)
|
||||
: sortKey(cell.textContent, false);
|
||||
}
|
||||
return { key: key, index: i, rows: g };
|
||||
});
|
||||
sortItems(items, dir).forEach(function (it) {
|
||||
it.rows.forEach(function (r) { tbody.appendChild(r); });
|
||||
});
|
||||
}
|
||||
|
||||
function initTable(table) {
|
||||
if (table.hasAttribute('data-sort-init') || !table.tHead || !table.tHead.rows.length
|
||||
|| table.getAttribute('data-sort-mode') === 'server') { return; }
|
||||
table.setAttribute('data-sort-init', '');
|
||||
var doc = table.ownerDocument;
|
||||
Array.prototype.forEach.call(table.tHead.rows[0].cells, function (th) {
|
||||
var label = th.textContent.trim();
|
||||
if (!label || th.hasAttribute('data-nosort')) { return; }
|
||||
var btn = doc.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'sort-btn';
|
||||
btn.textContent = ICON.none;
|
||||
btn.setAttribute('aria-label', 'Nach ' + label + ' sortieren');
|
||||
btn.addEventListener('click', function () {
|
||||
var dir = btn.getAttribute('data-dir') === 'asc' ? 'desc' : 'asc';
|
||||
Array.prototype.forEach.call(table.tHead.querySelectorAll('.sort-btn'), function (b) {
|
||||
b.removeAttribute('data-dir');
|
||||
b.classList.remove('active');
|
||||
b.textContent = ICON.none;
|
||||
});
|
||||
btn.setAttribute('data-dir', dir);
|
||||
btn.classList.add('active');
|
||||
btn.textContent = ICON[dir];
|
||||
sortTable(table, th.cellIndex, dir);
|
||||
});
|
||||
th.appendChild(doc.createTextNode(' '));
|
||||
th.appendChild(btn);
|
||||
});
|
||||
}
|
||||
|
||||
function init(root) {
|
||||
if (!root || !root.querySelectorAll) { return; }
|
||||
if (root.tagName === 'TABLE') { initTable(root); }
|
||||
Array.prototype.forEach.call(root.querySelectorAll('table'), initTable);
|
||||
}
|
||||
|
||||
var api = { sortKey: sortKey, columnKind: columnKind, sortItems: sortItems,
|
||||
groupRows: groupRows, sortTable: sortTable, initTable: initTable, init: init };
|
||||
if (typeof module !== 'undefined' && module.exports) { module.exports = api; }
|
||||
if (typeof window !== 'undefined') {
|
||||
window.FBSort = api;
|
||||
if (window.htmx) { window.htmx.onLoad(init); }
|
||||
}
|
||||
})();
|
||||
@@ -210,3 +210,19 @@ label:has(input:disabled), label:has(select:disabled) {
|
||||
.project-block {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Sortier-Buttons in Spaltenköpfen (Ausbaustufe 11, static/sort.js). */
|
||||
.sort-btn {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0 0.2rem;
|
||||
margin: 0;
|
||||
font-size: 0.8em;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sort-btn.active {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<tr>
|
||||
<td>{{ s.filename }}</td>
|
||||
<td>{{ s.bank }}</td>
|
||||
<td>
|
||||
<td data-sort="{{ s.period_start.isoformat() if s.period_start else '' }}">
|
||||
{% if s.period_start and s.period_end %}
|
||||
{{ s.period_start.strftime('%d.%m.%Y') }} – {{ s.period_end.strftime('%d.%m.%Y') }}
|
||||
{% endif %}
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
<td>{{ c.name }}</td>
|
||||
<td><button type="button" onclick="toggleEdit('cat', {{ c.id }}, true)">Bearbeiten</button></td>
|
||||
</tr>
|
||||
<tr id="cat-edit-{{ c.id }}" hidden>
|
||||
<tr id="cat-edit-{{ c.id }}" hidden data-sort-follow>
|
||||
<td colspan="2">
|
||||
<form hx-ext="json-form" hx-patch="/api/categories/{{ c.id }}" hx-swap="none"
|
||||
hx-on::after-request="if(event.detail.successful){window.location.reload()}">
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<title>{% block title %}Finanzberatung{% endblock %}</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
<script src="/static/sort.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Konto</th><th>Bank</th><th>Saldo</th><th>Anker</th>
|
||||
<th>Umbenennen</th><th>Anker pflegen</th>
|
||||
<th data-nosort>Umbenennen</th><th data-nosort>Anker pflegen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -26,8 +26,8 @@
|
||||
<tr>
|
||||
<td class="account">{{ account.name }}</td>
|
||||
<td>{{ account.bank }}</td>
|
||||
<td class="{{ 'neg' if balance < 0 else '' }}">{{ balance|eur }} €</td>
|
||||
<td>
|
||||
<td class="{{ 'neg' if balance < 0 else '' }}" data-sort="{{ balance }}">{{ balance|eur }} €</td>
|
||||
<td data-sort="{{ account.anchor_date.isoformat() if account.anchor_date is not none else '' }}">
|
||||
{% if account.anchor_date is not none and account.anchor_balance is not none %}
|
||||
Anker: {{ account.anchor_balance|eur }} € am {{ account.anchor_date.strftime('%d.%m.%Y') }}
|
||||
{% else %}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
{% for r in recurring %}
|
||||
<tr id="rec-row-{{ r.id }}">
|
||||
<td>{{ r.name }}</td>
|
||||
<td class="{{ 'neg' if r.amount < 0 else '' }}">{{ r.amount|eur }} €</td>
|
||||
<td class="{{ 'neg' if r.amount < 0 else '' }}" data-sort="{{ r.amount }}">{{ r.amount|eur }} €</td>
|
||||
<td>{{ r.rhythm|de_label }}</td>
|
||||
<td>{{ r.due_day }}</td>
|
||||
<td>{{ r.start_date.strftime('%d.%m.%Y') if r.start_date else '–' }}</td>
|
||||
@@ -28,7 +28,7 @@
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="rec-edit-{{ r.id }}" hidden>
|
||||
<tr id="rec-edit-{{ r.id }}" hidden data-sort-follow>
|
||||
<td colspan="8">
|
||||
<form hx-ext="json-form" hx-patch="/api/recurring/{{ r.id }}" hx-swap="none"
|
||||
hx-on::after-request="if(event.detail.successful){window.location.reload()}">
|
||||
@@ -94,7 +94,7 @@
|
||||
{% for s in suggestions %}
|
||||
<tr>
|
||||
<td>{{ s.name }}</td>
|
||||
<td class="{{ 'neg' if s.amount < 0 else '' }}">
|
||||
<td class="{{ 'neg' if s.amount < 0 else '' }}" data-sort="{{ s.amount }}">
|
||||
{{ s.amount|eur }} €
|
||||
{% if s.hinweis %}<span class="muted">{{ s.hinweis }}</span>{% endif %}
|
||||
</td>
|
||||
@@ -134,7 +134,7 @@
|
||||
{% for p in planned %}
|
||||
<tr id="pln-row-{{ p.id }}">
|
||||
<td>{{ p.name }}</td>
|
||||
<td class="{{ 'neg' if p.amount < 0 else '' }}">{{ p.amount|eur }} €</td>
|
||||
<td class="{{ 'neg' if p.amount < 0 else '' }}" data-sort="{{ p.amount }}">{{ p.amount|eur }} €</td>
|
||||
<td>{{ p.due.strftime('%d.%m.%Y') }}</td>
|
||||
<td>{{ category_names.get(p.category_id, '–') }}</td>
|
||||
<td>
|
||||
@@ -146,7 +146,7 @@
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="pln-edit-{{ p.id }}" hidden>
|
||||
<tr id="pln-edit-{{ p.id }}" hidden data-sort-follow>
|
||||
<td colspan="5">
|
||||
<form hx-ext="json-form" hx-patch="/api/planned/{{ p.id }}" hx-swap="none"
|
||||
hx-on::after-request="if(event.detail.successful){window.location.reload()}">
|
||||
@@ -198,9 +198,9 @@
|
||||
{% for l in loans %}
|
||||
<tr id="loan-row-{{ l.id }}">
|
||||
<td>{{ l.name }}</td>
|
||||
<td>{{ l.principal|eur }} €</td>
|
||||
<td data-sort="{{ l.principal }}">{{ l.principal|eur }} €</td>
|
||||
<td>{{ l.annual_rate_pct|eur }} %</td>
|
||||
<td>{{ l.term_months }} Monate</td>
|
||||
<td data-sort="{{ l.term_months }}">{{ l.term_months }} Monate</td>
|
||||
<td>{{ l.payout_date.strftime('%d.%m.%Y') }}</td>
|
||||
<td>{{ l.repayment_type|de_label }}</td>
|
||||
<td>
|
||||
@@ -214,7 +214,7 @@
|
||||
</tr>
|
||||
<!-- Hinweis: eine Kredit-Aenderung veraendert den Tilgungsplan; danach
|
||||
muessen betroffene Szenarien neu durchgerechnet werden. -->
|
||||
<tr id="loan-edit-{{ l.id }}" hidden>
|
||||
<tr id="loan-edit-{{ l.id }}" hidden data-sort-follow>
|
||||
<td colspan="7">
|
||||
<form hx-ext="json-form" hx-patch="/api/loans/{{ l.id }}" hx-swap="none"
|
||||
hx-on::after-request="if(event.detail.successful){window.location.reload()}">
|
||||
@@ -233,7 +233,7 @@
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr id="loan-plan-{{ l.id }}" data-sort-follow>
|
||||
<td colspan="7">
|
||||
<details ontoggle="if(this.open){loadLoanSchedule({{ l.id }})}">
|
||||
<summary>Tilgungsplan</summary>
|
||||
|
||||
@@ -22,11 +22,13 @@
|
||||
{% else %}
|
||||
<tr><td colspan="2">Keine Konten angelegt.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="total-row">
|
||||
<td><strong>Gesamt</strong></td>
|
||||
<td class="amount {{ 'neg' if total < 0 else '' }}"><strong>{{ total|eur }} €</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<h2>Monatsanfangs-Übersicht</h2>
|
||||
@@ -46,7 +48,7 @@
|
||||
<tbody>
|
||||
{% for row in months %}
|
||||
<tr data-month="{{ row['month'].isoformat() }}">
|
||||
<td>{{ row['month'].strftime('%m.%Y') }}</td>
|
||||
<td data-sort="{{ row['month'].isoformat() }}">{{ row['month'].strftime('%m.%Y') }}</td>
|
||||
{% for account, value in row['values'] %}
|
||||
<td class="amount {{ 'neg' if value < 0 else '' }}">{{ value|eur }} €</td>
|
||||
{% endfor %}
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mod-edit-{{ m.id }}" hidden>
|
||||
<tr id="mod-edit-{{ m.id }}" hidden data-sort-follow>
|
||||
<td colspan="5">
|
||||
<form hx-ext="json-form" hx-patch="/api/scenarios/{{ sc.id }}/modifiers/{{ m.id }}" hx-swap="none"
|
||||
hx-on::after-request="if(event.detail.successful){window.location.reload()}">
|
||||
@@ -117,7 +117,7 @@
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="spi-edit-{{ sp.id }}" hidden>
|
||||
<tr id="spi-edit-{{ sp.id }}" hidden data-sort-follow>
|
||||
<td colspan="5">
|
||||
<form hx-ext="json-form" hx-patch="/api/scenarios/{{ sc.id }}/planned/{{ sp.id }}" hx-swap="none"
|
||||
hx-on::after-request="if(event.detail.successful){window.location.reload()}">
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
<button type="submit">Filtern</button>
|
||||
</form>
|
||||
|
||||
<table>
|
||||
<table data-sort-mode="server">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datum</th><th>Konto</th><th>Verwendungszweck</th><th>Empfänger/Zahler</th>
|
||||
|
||||
Reference in New Issue
Block a user