feat: Schlagwörter je Kategorie + auf-/zuklappbares Kategorie-Dropdown
- Manuelle Schlagwörter je Kategorie (Popup mit Chips, Doppelklick zum Bearbeiten) - Treffer über Empfänger ODER Verwendungszweck; längstes Schlagwort gewinnt; Kind-Filter (Ausgabe/Einnahme); wirken nur bei künftigen Importen - Lernende Korrektur-Erkennung: ab 5 Anwendungen und >= 1/3 Korrekturen erscheint eine Prüf-Meldung in den Einstellungen (Behalten/Entfernen) - Neue CategorySelect-Komponente (Baum + Suche, per Portal) ersetzt die nativen optgroup-Selects in Buchungen und Import-Prüfansicht - Migration 0006 (source/applied_count/overridden_count/confirmed, match_field any) - Endpunkte, i18n DE/EN, Tests (test_keywords: 7 neu, gesamt 27 grün) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Guido
Claude Opus 4.8
@@ -0,0 +1,198 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Icon from "./Icon";
|
||||
import IconChip from "./IconChip";
|
||||
|
||||
// Auf-/zuklappbares Kategorie-Dropdown (Gruppe -> Kategorien als Baum) mit
|
||||
// Suchfeld. Ersetzt das native <select> mit optgroup, das die oberste Gruppe
|
||||
// abgesetzt wirken ließ. Das Panel wird per Portal mit fester Position gerendert,
|
||||
// damit es in scrollbaren Tabellen (Import-Prüfansicht) nicht abgeschnitten wird.
|
||||
export default function CategorySelect({
|
||||
groups = [],
|
||||
value,
|
||||
onChange,
|
||||
allowNone = false,
|
||||
noneLabel = "—",
|
||||
placeholder = "—",
|
||||
minWidth = 0,
|
||||
disabled = false,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const selectedId = value === "" || value == null ? null : Number(value);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [q, setQ] = useState("");
|
||||
const [collapsed, setCollapsed] = useState(() => new Set());
|
||||
const [pos, setPos] = useState(null);
|
||||
|
||||
const btnRef = useRef(null);
|
||||
const panelRef = useRef(null);
|
||||
const searchRef = useRef(null);
|
||||
|
||||
const byId = useMemo(() => {
|
||||
const m = {};
|
||||
for (const g of groups) for (const c of g.categories) m[c.id] = c;
|
||||
return m;
|
||||
}, [groups]);
|
||||
const sel = selectedId != null ? byId[selectedId] : null;
|
||||
|
||||
function computePos() {
|
||||
const el = btnRef.current;
|
||||
if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
const width = Math.max(r.width, 260);
|
||||
const spaceBelow = window.innerHeight - r.bottom;
|
||||
const spaceAbove = r.top;
|
||||
const desired = 340;
|
||||
let top;
|
||||
let maxHeight;
|
||||
if (spaceBelow >= 220 || spaceBelow >= spaceAbove) {
|
||||
maxHeight = Math.min(desired, spaceBelow - 10);
|
||||
top = r.bottom + 4;
|
||||
} else {
|
||||
maxHeight = Math.min(desired, spaceAbove - 10);
|
||||
top = r.top - 4 - maxHeight;
|
||||
}
|
||||
let left = r.left;
|
||||
if (left + width > window.innerWidth - 8) left = window.innerWidth - 8 - width;
|
||||
if (left < 8) left = 8;
|
||||
setPos({ left, top, width, maxHeight });
|
||||
}
|
||||
|
||||
function openPanel() {
|
||||
if (disabled) return;
|
||||
computePos();
|
||||
setQ("");
|
||||
setOpen(true);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return undefined;
|
||||
searchRef.current?.focus();
|
||||
const onDown = (e) => {
|
||||
if (panelRef.current?.contains(e.target) || btnRef.current?.contains(e.target)) return;
|
||||
setOpen(false);
|
||||
};
|
||||
const onKey = (e) => e.key === "Escape" && setOpen(false);
|
||||
const onScrollResize = () => setOpen(false);
|
||||
document.addEventListener("mousedown", onDown);
|
||||
document.addEventListener("keydown", onKey);
|
||||
// capture=true: fängt auch das Scrollen innerhalb der Tabelle ab.
|
||||
window.addEventListener("scroll", onScrollResize, true);
|
||||
window.addEventListener("resize", onScrollResize);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onDown);
|
||||
document.removeEventListener("keydown", onKey);
|
||||
window.removeEventListener("scroll", onScrollResize, true);
|
||||
window.removeEventListener("resize", onScrollResize);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
function choose(id) {
|
||||
onChange(id);
|
||||
setOpen(false);
|
||||
}
|
||||
function toggleGroup(id) {
|
||||
setCollapsed((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.has(id) ? next.delete(id) : next.add(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
const ql = q.trim().toLowerCase();
|
||||
|
||||
return (
|
||||
<div className="catsel" style={{ minWidth }}>
|
||||
<button
|
||||
type="button"
|
||||
ref={btnRef}
|
||||
className={`catsel-btn${open ? " open" : ""}`}
|
||||
onClick={() => (open ? setOpen(false) : openPanel())}
|
||||
disabled={disabled}
|
||||
>
|
||||
{sel ? (
|
||||
<span className="catsel-value">
|
||||
<IconChip name={sel.icon} color={sel.color} size={22} />
|
||||
<span className="ellipsis">{sel.name}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="catsel-value muted ellipsis">{placeholder}</span>
|
||||
)}
|
||||
<Icon name="chevron-down" size={15} className="catsel-caret" />
|
||||
</button>
|
||||
|
||||
{open &&
|
||||
pos &&
|
||||
createPortal(
|
||||
<div
|
||||
ref={panelRef}
|
||||
className="catsel-panel"
|
||||
style={{ left: pos.left, top: pos.top, width: pos.width, maxHeight: pos.maxHeight }}
|
||||
>
|
||||
<div className="catsel-search">
|
||||
<Icon name="search" size={14} />
|
||||
<input
|
||||
ref={searchRef}
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
placeholder={t("categories.searchPlaceholder")}
|
||||
/>
|
||||
</div>
|
||||
<div className="catsel-list">
|
||||
{allowNone && (
|
||||
<button
|
||||
type="button"
|
||||
className={`catsel-opt${selectedId == null ? " selected" : ""}`}
|
||||
onClick={() => choose(null)}
|
||||
>
|
||||
<span className="muted ellipsis">{noneLabel}</span>
|
||||
{selectedId == null && <Icon name="check" size={15} className="catsel-check" />}
|
||||
</button>
|
||||
)}
|
||||
{groups.map((g) => {
|
||||
const cats = ql
|
||||
? g.categories.filter((c) => c.name.toLowerCase().includes(ql))
|
||||
: g.categories;
|
||||
if (ql && cats.length === 0) return null;
|
||||
const isCollapsed = !ql && collapsed.has(g.id);
|
||||
return (
|
||||
<div className="catsel-group" key={g.id}>
|
||||
<button
|
||||
type="button"
|
||||
className="catsel-group-head"
|
||||
onClick={() => toggleGroup(g.id)}
|
||||
>
|
||||
<Icon
|
||||
name="chevron-down"
|
||||
size={14}
|
||||
className={`catsel-gchev${isCollapsed ? " collapsed" : ""}`}
|
||||
/>
|
||||
<IconChip name={g.icon} color={g.color} size={18} />
|
||||
<span className="ellipsis">{g.name}</span>
|
||||
</button>
|
||||
{!isCollapsed &&
|
||||
cats.map((c) => (
|
||||
<button
|
||||
type="button"
|
||||
key={c.id}
|
||||
className={`catsel-opt${selectedId === c.id ? " selected" : ""}`}
|
||||
onClick={() => choose(c.id)}
|
||||
>
|
||||
<IconChip name={c.icon} color={c.color} size={20} />
|
||||
<span className="ellipsis">{c.name}</span>
|
||||
{selectedId === c.id && <Icon name="check" size={15} className="catsel-check" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{groups.length === 0 && <div className="catsel-empty muted small">{t("categories.emptyGroup")}</div>}
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user