Web: Filter und Sortierung der Tabellen bleiben erhalten

Bisher gingen Filter + Sortierung beim Navigieren (Produkt -> zurueck) verloren.
Jetzt werden sie wie Spaltenreihenfolge/-breiten je Tabelle im Browser
gespeichert (Sets als Arrays serialisiert) und bleiben bis "Filter loeschen"
bzw. bis man anders sortiert. Gilt automatisch fuer alle DataTable-Tabellen.
"Spalten zuruecksetzen" laesst Filter/Sortierung unangetastet.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-28 11:45:49 +02:00
parent 31137cd884
commit 03c0f4043d

View File

@@ -39,8 +39,22 @@ export default function DataTable({
return [...saved, ...rest]; return [...saved, ...rest];
}); });
const [widths, setWidths] = useState(() => loadPersisted(id).widths || {}); const [widths, setWidths] = useState(() => loadPersisted(id).widths || {});
const [filters, setFilters] = useState({}); // { key: { text, values:Set|null } } // Filter + Sortierung bleiben erhalten (localStorage je Tabelle), bis man
const [sort, setSort] = useState(null); // { key, dir } // „Filter löschen" drückt oder anders sortiert auch nach Navigieren/Neuladen.
// Beim Speichern werden Sets zu Arrays; beim Laden zurück zu Sets.
const [filters, setFilters] = useState(() => {
const saved = loadPersisted(id).filters || {};
const out = {};
for (const [k, v] of Object.entries(saved)) {
if (!colByKey[k] || !v) continue;
out[k] = { text: v.text || "", values: Array.isArray(v.values) ? new Set(v.values) : null };
}
return out;
}); // { key: { text, values:Set|null } }
const [sort, setSort] = useState(() => {
const s = loadPersisted(id).sort;
return s && s.key && colByKey[s.key] ? s : null;
}); // { key, dir }
const [filterShown, setFilterShown] = useState(true); const [filterShown, setFilterShown] = useState(true);
const [openFilter, setOpenFilter] = useState(null); const [openFilter, setOpenFilter] = useState(null);
const [collapsed, setCollapsed] = useState(() => new Set()); const [collapsed, setCollapsed] = useState(() => new Set());
@@ -50,8 +64,15 @@ export default function DataTable({
const [chooserOpen, setChooserOpen] = useState(false); const [chooserOpen, setChooserOpen] = useState(false);
useEffect(() => { useEffect(() => {
savePersisted(id, { order, widths, hidden: [...hidden] }); // Nur echte Einschränkungen sichern (leerer Text + values=null = kein Filter);
}, [id, order, widths, hidden]); // Sets werden zu Arrays serialisiert.
const filtersSer = {};
for (const [k, v] of Object.entries(filters)) {
if (!v || (!v.text && v.values == null)) continue;
filtersSer[k] = { text: v.text || "", values: v.values ? [...v.values] : null };
}
savePersisted(id, { order, widths, hidden: [...hidden], filters: filtersSer, sort });
}, [id, order, widths, hidden, filters, sort]);
// Containerbreite messen, damit die grow-Spalte den Rest füllt. // Containerbreite messen, damit die grow-Spalte den Rest füllt.
const wrapRef = useRef(null); const wrapRef = useRef(null);
@@ -260,10 +281,11 @@ export default function DataTable({
} }
function resetColumns() { function resetColumns() {
// Nur Spalten (Reihenfolge/Breiten/Sichtbarkeit) zurücksetzen Filter und
// Sortierung bleiben; der Speicher-Effekt schreibt den neuen Stand.
setOrder(columns.map((c) => c.key)); setOrder(columns.map((c) => c.key));
setWidths({}); setWidths({});
setHidden(new Set()); setHidden(new Set());
savePersisted(id, {});
} }
return ( return (