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:
@@ -39,8 +39,22 @@ export default function DataTable({
|
||||
return [...saved, ...rest];
|
||||
});
|
||||
const [widths, setWidths] = useState(() => loadPersisted(id).widths || {});
|
||||
const [filters, setFilters] = useState({}); // { key: { text, values:Set|null } }
|
||||
const [sort, setSort] = useState(null); // { key, dir }
|
||||
// Filter + Sortierung bleiben erhalten (localStorage je Tabelle), bis man
|
||||
// „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 [openFilter, setOpenFilter] = useState(null);
|
||||
const [collapsed, setCollapsed] = useState(() => new Set());
|
||||
@@ -50,8 +64,15 @@ export default function DataTable({
|
||||
const [chooserOpen, setChooserOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
savePersisted(id, { order, widths, hidden: [...hidden] });
|
||||
}, [id, order, widths, hidden]);
|
||||
// Nur echte Einschränkungen sichern (leerer Text + values=null = kein Filter);
|
||||
// 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.
|
||||
const wrapRef = useRef(null);
|
||||
@@ -260,10 +281,11 @@ export default function DataTable({
|
||||
}
|
||||
|
||||
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));
|
||||
setWidths({});
|
||||
setHidden(new Set());
|
||||
savePersisted(id, {});
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user