@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
50 lines (49 loc) • 6.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ColumnTag, Tag } from '../../../../components/Tag';
import { useAdaptable } from '../../../AdaptableContext';
import { ValueSelector } from '../../../Components/ValueSelector';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import { getLayoutWizardInitialExpandedCardId, isPivotColumnsSectionConfigured, } from './layoutWizardAccordionHelpers';
import { columnFilter } from './Utilities';
import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
import { Box, Flex } from '../../../../components/Flex';
import { CheckBox } from '../../../../components/CheckBox';
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';
import { ColumnSortingWizardCard } from './SortSection';
import { getTableColumnsSortingSummaryValues } from '../../../../Strategy/Utilities/Layout/columnsSummaryHelpers';
import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
export const PivotColumnsSectionSummary = (props) => {
const adaptable = useAdaptable();
const { data: contextLayout } = useOnePageAdaptableWizardContext();
const layout = props.layout ?? contextLayout;
const sortValues = getTableColumnsSortingSummaryValues(layout, adaptable.api);
return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: "Pivot Columns" }), _jsx(Flex, { flexDirection: "row", flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (_jsx(ColumnTag, { children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : (_jsx(Tag, { children: "No Pivot Columns Defined" })) })] }), sortValues.length ? (_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-xs twa:font-medium twa:mb-1", children: "Sorting" }), renderSummaryStringTags(sortValues)] })) : null] }));
};
export const PivotColumnsSection = (props) => {
const adaptable = useAdaptable();
const { data: layout } = useOnePageAdaptableWizardContext();
const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
const sortedPivotColumns = React.useMemo(() => {
return ArrayExtensions.sortArrayWithOrder(allPivotColumns.map((col) => col.columnId), layout.PivotColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
}, [layout, allPivotColumns, adaptable]);
const handleColumnsChange = (columnIds) => {
props.onChange({
...layout,
PivotColumns: columnIds,
});
};
const persistPivotResultOrder = !!layout.PivotResultColumnsOrder;
const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
const initialExpandedCardId = getLayoutWizardInitialExpandedCardId(props.layoutWizardMode, 'pivot-columns', isPivotColumnsSectionConfigured(layout));
const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId);
return (_jsxs(Box, { className: getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), children: [_jsx(CollapsibleWizardCard, { ...bindCard('pivot-columns', { fillAvailable: true }), surface: "panel", "data-name": "pivot-columns", title: "Pivot Columns", help: "Select and order the columns used as pivot columns", collapsedHelp: "", compactSummary: renderCompactColumnTags(layout.PivotColumns ?? [], (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' }), summary: layout.PivotColumns?.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: layout.PivotColumns.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 ", children: _jsx(Card, { shadow: false, className: "twa:h-full", children: _jsx(Card.Body, { 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-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: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }) }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('pivot-result-columns'), surface: "panel", "data-name": "pivot-result-columns", title: "Pivot Result Columns", help: "Configure how dynamically created pivot result columns are stored in the Layout", collapsedHelp: "How dynamically created pivot result columns are stored in the Layout", compactSummary: _jsx(Tag, { children: persistPivotResultOrder ? 'Persist order' : 'Do not persist order' }), summary: _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: persistPivotResultOrder ? 'Persist order' : 'Do not persist order' }) }), children: _jsx(CheckBox, { checked: persistPivotResultOrder, onChange: (checked) => {
props.onChange({
...layout,
PivotResultColumnsOrder: checked,
});
}, children: "Persist order of pivot result columns" }) }), layoutSupportedFeatures.ColumnSorts ? (_jsx(ColumnSortingWizardCard, { layout: layout, onChange: props.onChange, bindCard: bindCard, title: "Column Sorting", cardId: "column-sorting", "data-name": "pivot-column-sorting" })) : null] }));
};