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];
|
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 (
|
||||||
|
|||||||
Reference in New Issue
Block a user