Scarriffle/certain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Konto-Auswahl mit Symbol und Farbe

Browse Source 
Das native <select> zeigte nur den Namen im Systemstil. Bei einem Dutzend
Konten erkennt man seines am Symbol deutlich schneller – und beim Import
sieht man sofort, ob man in das gemeinte Konto liest.

Neue Komponente AccountSelect nach dem Muster von CategorySelect, mit
denselben Klassen und per Portal gerendert. Eingesetzt beim Import, in
Filter und Formular der Buchungen sowie beim Zielkonto eines Uebertrags.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Guido
2026-08-21 20:42:14 +02:00
co-authored by Claude Opus 5
parent 6390f7c325
commit 78835d1e40
3 changed files with 148 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/Import.jsx
+3 -3
View File
@@ -5,6 +5,7 @@ import { useSettings } from "../settings";
import { useConfirm } from "../confirm";
import { useToast } from "../toast";
import Icon from "../components/Icon";
import AccountSelect from "../components/AccountSelect";
import CategorySelect from "../components/CategorySelect";
import DataTable from "../components/DataTable";
import { gruppenFuer } from "../kategorien";
@@ -387,9 +388,8 @@ export default function Import() {
<div className="row">
<label className="grow">
<span>{t("import.account")}</span>
<select value={accountId} onChange={(e) => setAccountId(e.target.value)}>
{accounts.map((a) => <option key={a.id} value={a.id}>{a.name} ({a.currency})</option>)}
</select>
<AccountSelect accounts={accounts} value={accountId}
onChange={(id) => setAccountId(id != null ? String(id) : "")} />
</label>
<label className="grow">
<span>{t("import.file")}</span>
web/src/pages/Transactions.jsx
+12 -14
View File
@@ -8,6 +8,7 @@ import Icon from "../components/Icon";
import IconChip from "../components/IconChip";
import Money from "../components/Money";
import Modal from "../components/Modal";
import AccountSelect from "../components/AccountSelect";
import CategorySelect from "../components/CategorySelect";
import DataTable from "../components/DataTable";
import { gruppenFuer } from "../kategorien";
@@ -269,10 +270,11 @@ export default function Transactions() {
) : (
<>
<div className="card filter-bar">
<select value={filter.account_id} onChange={(e) => setFilter({ ...filter, account_id: e.target.value })}>
<option value="">{t("transactions.allAccounts")}</option>
{accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
</select>
<AccountSelect accounts={accounts} value={filter.account_id} allowNone
noneLabel={t("transactions.allAccounts")}
placeholder={t("transactions.allAccounts")} showCurrency={false}
minWidth={190}
onChange={(id) => setFilter({ ...filter, account_id: id != null ? String(id) : "" })} />
<select value={filter.type} onChange={(e) => setFilter({ ...filter, type: e.target.value })}>
<option value="">{t("transactions.allTypes")}</option>
<option value="expense">{t("transactions.expense")}</option>
@@ -318,10 +320,8 @@ export default function Transactions() {
<div className="row">
<label className="grow">
<span>{form.type === "transfer" ? t("transactions.fromAccount") : t("transactions.account")}</span>
<select value={form.account_id} onChange={(e) => setForm({ ...form, account_id: e.target.value })} required>
<option value="" disabled>—</option>
{accounts.map((a) => <option key={a.id} value={a.id}>{a.name} ({a.currency})</option>)}
</select>
<AccountSelect accounts={accounts} value={form.account_id}
onChange={(id) => setForm({ ...form, account_id: id != null ? String(id) : "" })} />
</label>
<label style={{ minWidth: 150 }}>
<span>{t("transactions.date")}</span>
@@ -332,12 +332,10 @@ export default function Transactions() {
{form.type === "transfer" ? (
<label>
<span>{t("transactions.toAccount")}</span>
<select value={form.to_account_id} onChange={(e) => setForm({ ...form, to_account_id: e.target.value })} required>
<option value="" disabled>—</option>
{accounts.filter((a) => String(a.id) !== form.account_id).map((a) => (
<option key={a.id} value={a.id}>{a.name} ({a.currency})</option>
))}
</select>
<AccountSelect
accounts={accounts.filter((a) => String(a.id) !== form.account_id)}
value={form.to_account_id}
onChange={(id) => setForm({ ...form, to_account_id: id != null ? String(id) : "" })} />
</label>
) : (
<label>