@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
51 lines (50 loc) • 6.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { getLayoutWizardInitialExpandedCardId, isPivotRowGroupingSectionConfigured, } from './layoutWizardAccordionHelpers';
import { columnFilter } from './Utilities';
import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
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 { RowGroupBehaviorSection, getRowGroupBehaviorLabel, } from './RowGroupingSection';
import { PivotRowGroupSummaryTags } from '../../../Wizard/rowGroupSummaryTags';
import { Box, Flex } from '../../../../components/Flex';
import { Card } from '../../../../components/Card';
import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../../Wizard/CollapsibleWizardCard';
import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
export const PivotRowGroupingSectionSummary = (props) => {
const adaptable = useAdaptable();
const { data: contextLayout } = useOnePageAdaptableWizardContext();
const layout = props.layout ?? contextLayout;
return _jsx(PivotRowGroupSummaryTags, { layout: layout, api: adaptable.api });
};
export const PivotRowGroupingSection = (props) => {
const adaptable = useAdaptable();
const { data: layout } = useOnePageAdaptableWizardContext();
const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
const sortedGroupableColumns = React.useMemo(() => {
return ArrayExtensions.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.PivotGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
}, [layout, allGroupableColumns]);
const onChange = (nextLayout) => {
props.onChange(normalizeLayout(nextLayout));
};
const handleColumnsChange = (columnIds) => {
const newLayout = {
...layout,
PivotGroupedColumns: columnIds,
};
if (!newLayout.RowGroupValues) {
newLayout.RowGroupValues = {
RowGroupDefaultBehavior: 'always-collapsed',
};
}
onChange(newLayout);
};
const rowGroupsText = 'Grouped Rows ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'columns', isPivotRowGroupingSectionConfigured(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": "pivot-row-grouped-columns", title: "Row Grouped Columns", help: "Select and order Columns used in Row Grouping", collapsedHelp: "", compactSummary: renderCompactColumnTags(layout.PivotGroupedColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.PivotGroupedColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotGroupedColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId))) })) : (_jsx(Tag, { children: "No columns" })), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-1 twa:pt-0 twa:pb-0", children: _jsx(Box, { className: "twa:flex twa:flex-col twa:gap-1.5 twa:h-full twa:overflow-hidden twa:flex-1 twa:min-h-0", "data-name": "pivot-row-grouped-columns-container", 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.PivotGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('behavior'), surface: "panel", "data-name": "pivot-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 }) })] }));
};