@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
84 lines (83 loc) • 7.44 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import SimpleButton from '../../../../components/SimpleButton';
import { Card } from '../../../../components/Card';
import { ColumnTag, Tag } from '../../../../components/Tag';
import { getLayoutSortViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutSortViewItems';
import { useAdaptable } from '../../../AdaptableContext';
import { ValueSelector } from '../../../Components/ValueSelector';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import { columnFilter } from './Utilities';
import { cn } from '../../../../lib/utils';
import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from './layoutWizardColumns';
import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
import { Box, Flex } from '../../../../components/Flex';
import { CollapsibleWizardCard, } from '../../../Wizard/CollapsibleWizardCard';
export const SortSectionSummary = () => {
const { data: layout } = useOnePageAdaptableWizardContext();
const adaptable = useAdaptable();
const sortViewItems = getLayoutSortViewItems(layout, adaptable.api);
return (_jsx(Box, { children: sortViewItems.values.length ? (sortViewItems.values.map((value) => (_jsx(ColumnTag, { className: "twa:mb-1 twa:mr-1", children: value }, value)))) : (_jsx(Tag, { children: "No Sorts" })) }));
};
const getColumnSortOrder = (layout, columnId) => (layout.ColumnSorts ?? []).find((sort) => sort.ColumnId === columnId)?.SortOrder;
const SortDirectionButton = (props) => {
const icon = props.sortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
const sortTooltip = props.sortOrder === 'Asc' ? 'Ascending (A to Z)' : 'Descending (Z to A)';
return (_jsx(SimpleButton, { className: cn('twa:flex twa:items-center twa:justify-center twa:m-1 twa:p-1', props.compact ? 'twa:min-h-7 twa:min-w-7 twa:p-0' : 'twa:shrink-0'), tooltip: sortTooltip, onClick: (event) => {
event.stopPropagation();
props.onSortChange(props.columnId, props.sortOrder === 'Asc' ? 'Desc' : 'Asc');
}, variant: props.compact ? 'outlined' : 'raised', tone: props.compact ? 'none' : undefined, iconSize: props.compact ? 16 : undefined, icon: icon }));
};
const SortColumnRow = (props) => {
const sortOrder = getColumnSortOrder(props.layout, props.column.columnId);
return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Box, { className: props.compact ? 'twa:truncate' : undefined, children: props.column.friendlyName ?? props.column.columnId }), sortOrder ? (_jsx(SortDirectionButton, { compact: props.compact, columnId: props.column.columnId, sortOrder: sortOrder, onSortChange: props.onSortChange })) : null, _jsx(ColumnGroupTag, { column: props.column })] }));
};
const SORT_VALUE_SELECTOR_OPTION_CLASS = 'twa:!py-1.5 twa:!px-2 twa:min-h-[2.5rem]';
export const buildColumnSortingSummary = (layout, adaptable) => {
const sortViewItems = getLayoutSortViewItems(layout, adaptable.api);
if (!sortViewItems.values.length) {
return _jsx(Tag, { children: "No sorts" });
}
return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: sortViewItems.values.map((value) => (_jsx(ColumnTag, { children: value }, value))) }));
};
export const ColumnSortingWizardCard = (props) => {
const title = props.title ?? 'Sorting';
const cardId = props.cardId ?? 'sorting';
const dataName = props['data-name'] ?? 'column-sorting';
const fillWhenExpanded = props.fillWhenExpanded ?? true;
const adaptable = useAdaptable();
const allSortableColumns = adaptable.api.columnApi.getSortableColumns();
const sortedSortColumns = React.useMemo(() => {
return ArrayExtensions.sortArrayWithOrder(allSortableColumns.map((col) => col.columnId), (props.layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
}, [props.layout, allSortableColumns, adaptable]);
const handleColumnsSelectionChange = React.useCallback((columnIds) => {
props.onChange({
...props.layout,
ColumnSorts: (columnIds || []).map((columnId) => {
const SortOrder = props.layout.ColumnSorts?.find((sort) => sort.ColumnId === columnId)?.SortOrder ??
'Asc';
return {
ColumnId: columnId,
SortOrder: SortOrder,
};
}),
});
}, [props.layout, props.onChange]);
const handleSortChange = React.useCallback((columnId, SortOrder) => {
props.onChange({
...props.layout,
ColumnSorts: props.layout.ColumnSorts?.map((sort) => {
if (sort.ColumnId === columnId) {
return {
...sort,
SortOrder: SortOrder,
};
}
return sort;
}),
});
}, [props.layout, props.onChange]);
const sortViewItems = getLayoutSortViewItems(props.layout, adaptable.api);
return (_jsx(CollapsibleWizardCard, { ...props.bindCard(cardId, { fillAvailable: fillWhenExpanded }), surface: "panel", "data-name": dataName, title: title, help: "Select columns to sort and set their order. Drag to change sort priority.", collapsedHelp: "", compactSummary: sortViewItems.values.length ? (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [sortViewItems.values.slice(0, 2).map((value) => (_jsx(ColumnTag, { className: "twa:shrink-0", children: value }, value))), sortViewItems.values.length > 2 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", sortViewItems.values.length - 2] })) : null] })) : ('No sorts'), summary: buildColumnSortingSummary(props.layout, adaptable), 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": "sorting-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, toggleSelectionOnRowClick: true, optionClassName: SORT_VALUE_SELECTOR_OPTION_CLASS, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, optionLayout: "label-beside-checkbox", toListLabel: (column) => (_jsx(SortColumnRow, { compact: true, column: column, layout: props.layout, onSortChange: handleSortChange })), options: sortedSortColumns, value: (props.layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) }) }) }) }));
};