@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
96 lines (95 loc) • 9.78 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { getLayoutWizardInitialExpandedCardId, isRowGroupingSectionConfigured, } from './layoutWizardAccordionHelpers';
import { columnFilter } from './Utilities';
import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
import { RadioGroup } from '../../../../components/Radio';
import { ColumnTag, Tag } from '../../../../components/Tag';
import { useAdaptable } from '../../../AdaptableContext';
import { ValueSelector } from '../../../Components/ValueSelector';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
import { TypeRadio } from '../../../Wizard/TypeRadio';
import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
import { Card } from '../../../../components/Card';
import { Box, Flex } from '../../../../components/Flex';
import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
import { getRowGroupBehaviorLabel, getRowGroupDisplayTypeLabel, } from '../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers';
import { TableRowGroupSummaryTags } from '../../../Wizard/rowGroupSummaryTags';
export { getRowGroupBehaviorDescription, getRowGroupBehaviorLabel, getRowGroupDisplayTypeDescription, getRowGroupDisplayTypeLabel, } from '../../../../Strategy/Utilities/Layout/rowGroupSummaryHelpers';
export const RowGroupingSectionSummary = (props) => {
const adaptable = useAdaptable();
const { data: contextLayout } = useOnePageAdaptableWizardContext();
const layout = props.layout ?? contextLayout;
if (adaptable.api.gridApi.isTreeDataGrid()) {
return (_jsx(Flex, { flexDirection: "row", children: _jsx(Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
}
return _jsx(TableRowGroupSummaryTags, { layout: layout, api: adaptable.api });
};
export const RowGroupBehaviorSection = (props) => {
const { layout, onChange } = props;
return (_jsxs(RadioGroup, { orientation: "vertical", value: layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed', onRadioChange: (RowGroupDefaultBehavior) => {
const newLayout = {
...layout,
RowGroupValues: {
RowGroupDefaultBehavior,
},
};
if (newLayout.RowGroupValues.RowGroupDefaultBehavior === 'collapsed' ||
newLayout.RowGroupValues.RowGroupDefaultBehavior === 'expanded') {
newLayout.RowGroupValues.ExceptionGroupKeys = [];
}
onChange(newLayout);
}, children: [_jsx(TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "All Grouped Rows are always collapsed" }), _jsx(TypeRadio, { value: "always-expanded", text: "All Expanded", description: "All Grouped Rows are always expanded" }), _jsx(TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "All Grouped Rows expanded, other than those collapsed when Layout last displayed" }), _jsx(TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "All Grouped Rows collapsed, other than those expanded when Layout last displayed" })] }));
};
const RowGroupDisplayTypeSection = ({ layout, onChange }) => {
const adaptable = useAdaptable();
return (_jsxs(RadioGroup, { orientation: "vertical", value: layout.RowGroupDisplayType ?? 'single', onRadioChange: (RowGroupDisplayType) => {
let newLayout = {
...layout,
RowGroupDisplayType,
};
if (RowGroupDisplayType === 'single') {
newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
}
else if (RowGroupDisplayType === 'multi') {
newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
}
else {
newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId) &&
!adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
}
onChange(newLayout);
}, children: [_jsx(TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), _jsx(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }), _jsx(TypeRadio, { value: "groupRows", text: "Full Width Group Rows", description: "Row groups display as full-width rows (no group column and no aggregations)" })] }));
};
export const RowGroupingSection = (props) => {
const adaptable = useAdaptable();
const { data: layout } = useOnePageAdaptableWizardContext();
const rowGroupsText = 'Grouped Rows ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
const sortedGroupableColumns = React.useMemo(() => {
return ArrayExtensions.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.RowGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
}, [layout, allGroupableColumns]);
if (adaptable.api.gridApi.isTreeDataGrid()) {
return (_jsx(Flex, { flexDirection: "row", children: _jsx(Tag, { children: "Row Grouping is not available in Tree Grids" }) }));
}
const onChange = (layout) => {
props.onChange(normalizeLayout(layout));
};
const handleColumnsChange = (columnIds) => {
const newLayout = {
...layout,
RowGroupedColumns: columnIds,
};
if (!newLayout.RowGroupValues) {
newLayout.RowGroupValues = {
RowGroupDefaultBehavior: 'always-collapsed',
};
}
onChange(newLayout);
};
const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'columns', isRowGroupingSectionConfigured(layout));
const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "row-grouped-columns", title: "Row Grouped Columns", help: "Select and order Columns used in Row Grouping", collapsedHelp: "", compactSummary: renderCompactColumnTags(layout.RowGroupedColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.RowGroupedColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.RowGroupedColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:flex twa:flex-col twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:flex twa:flex-col", children: _jsx(Card.Body, { children: _jsx(ValueSelector, { compact: true, showFilterInput: true, filter: columnFilter, filterPlaceholder: "Search Columns...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, hideShowSelectedOnly: true, optionLayout: "label-beside-checkbox", toggleSelectionOnRowClick: true, optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:truncate", children: option.friendlyName ?? option.columnId }), _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('display-type'), surface: "panel", "data-name": "row-group-display-type", title: "Group Display Type", help: "Choose how Row Grouped Columns display in the grid", collapsedHelp: "How Row Grouped Columns display in the grid", compactSummary: _jsx(Tag, { children: getRowGroupDisplayTypeLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupDisplayTypeLabel(layout) }) }), children: _jsx(RowGroupDisplayTypeSection, { layout: layout, onChange: onChange }) }), _jsx(CollapsibleWizardCard, { ...bindCard('behavior'), surface: "panel", "data-name": "row-group-behavior", title: rowGroupsText, help: "Set Grouped Rows expanded / collapsed behaviour when Layout opens", collapsedHelp: "Grouped Rows expanded / collapsed behaviour when Layout opens", compactSummary: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: getRowGroupBehaviorLabel(layout) }) }), children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] }));
};