@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
111 lines (110 loc) • 7.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RowGroupingSection = exports.RowGroupBehaviorSection = exports.RowGroupingSectionSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const FormLayout_1 = tslib_1.__importDefault(require("../../../../components/FormLayout"));
const Utilities_1 = require("./Utilities");
const Radio_1 = require("../../../../components/Radio");
const Tabs_1 = require("../../../../components/Tabs");
const Tag_1 = require("../../../../components/Tag");
const AdaptableContext_1 = require("../../../AdaptableContext");
const ValueSelector_1 = require("../../../Components/ValueSelector");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
const LayoutHelpers_1 = require("../../../../Api/Implementation/LayoutHelpers");
const TypeRadio_1 = require("../../../Wizard/TypeRadio");
const RowGroupingSectionSummary = () => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
if (adaptable.api.gridApi.isTreeDataGrid()) {
return (React.createElement(rebass_1.Box, { display: 'flex', flexDirection: 'row' },
React.createElement(Tag_1.Tag, null, "Row Grouping is not available in Tree Grids")));
}
return (React.createElement(rebass_1.Box, { display: 'flex', flexDirection: 'row' }, layout.RowGroupedColumns?.length ? (layout.RowGroupedColumns.map((columnId) => {
return (React.createElement(rebass_1.Box, { key: columnId, mb: 2, mr: 2 },
React.createElement(Tag_1.Tag, null, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))));
})) : (React.createElement(Tag_1.Tag, null, "No Row Grouping"))));
};
exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
const RowGroupBehaviorSection = (props) => {
const { layout, onChange } = props;
return (React.createElement(FormLayout_1.default, null,
React.createElement(Radio_1.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);
} },
React.createElement(TypeRadio_1.TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Layout opens with all Grouped Rows always collapsed" }),
React.createElement(TypeRadio_1.TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Layout opens with all Grouped Rows always expanded" }),
React.createElement(TypeRadio_1.TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "Layout opens with all Grouped rows expanded, other than those collapsed when Layout last displayed" }),
React.createElement(TypeRadio_1.TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "Layout opens with all Grouped rows collapsed, other than those expanded when Layout last displayed" }))));
};
exports.RowGroupBehaviorSection = RowGroupBehaviorSection;
const RowGroupingSection = (props) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
if (adaptable.api.gridApi.isTreeDataGrid()) {
return (React.createElement(rebass_1.Box, { display: 'flex', flexDirection: 'row' },
React.createElement(Tag_1.Tag, null, "Row Grouping is not available in Tree Grids")));
}
const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
const sortedGroupableColumns = React.useMemo(() => {
return ArrayExtensions_1.default.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.RowGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
}, [layout, allGroupableColumns]);
const onChange = (layout) => {
props.onChange((0, LayoutHelpers_1.normalizeLayout)(layout));
};
const handleColumnsChange = (columnIds) => {
const newLayout = {
...layout,
RowGroupedColumns: columnIds,
};
if (!newLayout.RowGroupValues) {
newLayout.RowGroupValues = {
RowGroupDefaultBehavior: 'always-collapsed',
};
}
onChange(newLayout);
};
return (React.createElement(rebass_1.Box, { style: { height: '100%' } },
React.createElement(Tabs_1.Tabs, null,
React.createElement(Tabs_1.Tabs.Tab, null, "Group Display Type"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(FormLayout_1.default, null,
React.createElement(Radio_1.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 {
newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
}
onChange(newLayout);
} },
React.createElement(TypeRadio_1.TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }),
React.createElement(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Columns displays in its own, separate, Column" }))))),
React.createElement(Tabs_1.Tabs, { mt: 2 },
React.createElement(Tabs_1.Tabs.Tab, null, "Row Grouped Columns"),
React.createElement(Tabs_1.Tabs.Tab, null, rowGroupsText),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, xSelectedLabel: () => {
return `Selected Columns:`;
}, onChange: handleColumnsChange })),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange })))));
};
exports.RowGroupingSection = RowGroupingSection;