diff --git a/web/src/finance.css b/web/src/finance.css index 7759517..4572320 100644 --- a/web/src/finance.css +++ b/web/src/finance.css @@ -1308,18 +1308,10 @@ tr.row-dup { } } -/* Kategorie-Auswahl in einer Tabellenzeile. Sie steht dort, wo bisher nur der - Name der Kategorie stand – also klein und gedeckelt, nicht über die ganze - (wachsende) Spalte. */ -.zeilen-kategorie { - max-width: 240px; - margin-top: 2px; -} -.zeilen-kategorie .catsel-btn { +/* Kategorie-Auswahl in einer Tabellenzeile: eigene Spalte, also volle + Zellenbreite – aber ohne den Abstand, den sie im Formular unter ihrer + Beschriftung braucht. Der verschöbe sie gegen die übrigen Zellen. */ +.datatable td .catsel-btn { margin-top: 0; - padding: 3px 6px; - font-size: 0.8rem; -} -.zeilen-kategorie .catsel-value { - font-weight: 500; + padding: 4px 8px; } diff --git a/web/src/locales/de.json b/web/src/locales/de.json index 2a06b91..875de1d 100644 --- a/web/src/locales/de.json +++ b/web/src/locales/de.json @@ -253,7 +253,8 @@ "amountRequired": "Bitte einen Betrag eingeben.", "accountRequired": "Bitte ein Konto wählen.", "budgetAsSavings": "Als Sparen ins Budget zählen", - "budgetCategory": "Budget-Kategorie" + "budgetCategory": "Budget-Kategorie", + "subject": "Buchung" }, "budget": { "title": "Budget", diff --git a/web/src/locales/en.json b/web/src/locales/en.json index be5cf6d..a69858a 100644 --- a/web/src/locales/en.json +++ b/web/src/locales/en.json @@ -253,7 +253,8 @@ "amountRequired": "Please enter an amount.", "accountRequired": "Please choose an account.", "budgetAsSavings": "Count as savings in the budget", - "budgetCategory": "Budget category" + "budgetCategory": "Budget category", + "subject": "Subject" }, "budget": { "title": "Budget", diff --git a/web/src/pages/Transactions.jsx b/web/src/pages/Transactions.jsx index c7f091c..135fe2b 100644 --- a/web/src/pages/Transactions.jsx +++ b/web/src/pages/Transactions.jsx @@ -234,7 +234,10 @@ export default function Transactions() { icon: cat?.icon || "more-horizontal", color: cat?.color || "#6b7480", title: zweck || cat?.name || t("transactions.uncategorized"), - sub: zweck ? (cat?.name || t("transactions.uncategorized")) : "", + // Der Verwendungszweck, falls er neben dem Empfänger noch etwas sagt. + // Die Kategorie steht in ihrer eigenen Spalte. + sub: tx.payee && tx.description && tx.description !== tx.payee + ? tx.description : "", }; } @@ -245,7 +248,8 @@ export default function Transactions() { render: (tx) => {formatDate(tx.date)}, }, { - key: "category", header: t("transactions.category"), grow: true, min: 200, + // Wofür die Zahlung war – danach sucht man in der Liste. + key: "text", header: t("transactions.subject"), grow: true, min: 220, filterText: (tx) => rowLabel(tx).title, sortValue: (tx) => rowLabel(tx).title, render: (tx) => { @@ -255,21 +259,7 @@ export default function Transactions() {
{l.title}
- {/* Die Kategorie direkt in der Zeile ändern – dafür musste man - vorher jede Buchung einzeln zum Bearbeiten öffnen. Ein - Übertrag bekommt keine, dort bleibt der Text stehen. */} - {tx.type === "transfer" ? ( - l.sub &&
{l.sub}
- ) : ( -
- kategorieSetzen(tx, id)} - placeholder={t("transactions.uncategorized")} - /> -
- )} + {l.sub &&
{l.sub}
} {/* Verknüpft heisst: zählt nicht als Ausgabe oder Einnahme. Ohne das Gegenkonto sagt „Übertrag" nichts. */} {links[String(tx.id)] && ( @@ -284,6 +274,26 @@ export default function Transactions() { ); }, }, + { + // Eigene Spalte, damit die Auswahl in der Zeile steht und nicht unter dem + // Text – gestapelt wurden die Zeilen hoch und die Spalte ausgefranst. + key: "category", header: t("transactions.category"), width: 210, + filterText: (tx) => (tx.category_id ? categoryById[tx.category_id]?.name : "") || "", + sortValue: (tx) => (tx.category_id ? categoryById[tx.category_id]?.name : "") || "", + render: (tx) => ( + // Ein Übertrag bekommt keine Kategorie – er ordnet kein Geld ein. + tx.type === "transfer" ? ( + — + ) : ( + kategorieSetzen(tx, id)} + placeholder={t("transactions.uncategorized")} + /> + ) + ), + }, { key: "account", header: t("transactions.account"), width: 150, filterText: (tx) => accountById[tx.account_id]?.name || "", @@ -353,7 +363,7 @@ export default function Transactions() {
tx.id} empty={t("transactions.empty")}