mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
fix(export-ui): let field groups be expanded and collapsed by hand
The accordion's open state was derived from the selection on every render, which made it fully controlled with nothing driving it. Clicking a group that had no fields selected opened it for one render and the recomputed value immediately shut it again, so such a group could only be opened by selecting something inside it — and conversely a group with a selection could not be collapsed at all. Open state is now real state with an onChange, seeded from the fields marked default rather than the live selection, so clearing every field doesn't close the groups underneath the user. Search still force-opens every group holding a match, but only as a display override — the manual state survives and returns when the search clears.
This commit is contained in:
@@ -105,14 +105,22 @@ export function ExportDialog({ opened, onClose, dataset, params }: ExportDialogP
|
||||
return out;
|
||||
}, [dataset.fields, dataset.groups, search]);
|
||||
|
||||
// Searching force-expands so matches aren't hidden inside collapsed groups.
|
||||
// Otherwise open only groups that already have something selected, which is
|
||||
// what keeps 77 fields tractable on open.
|
||||
const openGroups = search.trim()
|
||||
? [...visibleByGroup.keys()]
|
||||
: dataset.groups
|
||||
.filter((g) => dataset.fields.some((f) => f.group === g.id && selectedSet.has(f.key)))
|
||||
.map((g) => g.id);
|
||||
// Which groups are expanded. Real state, NOT derived from the selection:
|
||||
// deriving it made the accordion fully controlled with no way to change it,
|
||||
// so clicking a group that had nothing selected re-collapsed on the next
|
||||
// render and the group could only be opened by selecting a field in it.
|
||||
// Seeded from `default` (not the live selection) so clearing every field
|
||||
// doesn't slam the open groups shut underneath the user.
|
||||
const [expanded, setExpanded] = useState<string[]>(() =>
|
||||
dataset.groups
|
||||
.filter((g) => dataset.fields.some((f) => f.group === g.id && f.default))
|
||||
.map((g) => g.id),
|
||||
);
|
||||
|
||||
// Searching force-opens every group holding a match, so a hit can't hide
|
||||
// inside a collapsed section. It only overrides what is displayed — the
|
||||
// user's own expand state is untouched and returns when the search clears.
|
||||
const openGroups = search.trim() ? [...visibleByGroup.keys()] : expanded;
|
||||
|
||||
const toggleField = (key: string) =>
|
||||
setSelected((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]));
|
||||
@@ -264,7 +272,13 @@ export function ExportDialog({ opened, onClose, dataset, params }: ExportDialogP
|
||||
</Group>
|
||||
|
||||
<ScrollArea.Autosize mah={420} type="auto">
|
||||
<Accordion multiple value={openGroups} chevronPosition="left" variant="contained">
|
||||
<Accordion
|
||||
multiple
|
||||
value={openGroups}
|
||||
onChange={setExpanded}
|
||||
chevronPosition="left"
|
||||
variant="contained"
|
||||
>
|
||||
{dataset.groups.map((group) => {
|
||||
const fields = visibleByGroup.get(group.id);
|
||||
if (!fields) return null;
|
||||
|
||||
Reference in New Issue
Block a user