@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
61 lines (60 loc) • 4.37 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { ColumnTag, Tag } from '../../../components/Tag';
import { NewColumnSelector } from '../../Components/ColumnSelector';
import { WIZARD_COLUMN_LIST_OPTION_CLASS_RELAXED } from '../../Components/wizardColumnListStyles';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Box, Flex } from '../../../components/Flex';
import Input from '../../../components/Input';
import { Card } from '../../../components/Card';
export const renderCustomSortColumn = (data, api) => {
return (_jsxs(Box, { className: "twa:text-2 twa:py-2 twa:pr-2", children: [_jsxs(Tag, { className: "twa:mr-2", children: ["Name: ", data.Name] }), _jsxs(ColumnTag, { children: ["Column: ", api.columnApi.getFriendlyNameForColumnId(data.ColumnId)] })] }));
};
export const isValidCustomSortColumn = (data, allCustomSorts) => {
if (!data.Name) {
return 'A name is required.';
}
if (allCustomSorts.some((customSort) => customSort.Name === data.Name && customSort.Uuid !== data.Uuid)) {
return 'A Custom Sort with this name already exists.';
}
if (!data.ColumnId) {
return 'Please select a column for the Custom Sort.';
}
return true;
};
export const CustomSortColumnWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const sortableCols = React.useMemo(() => {
const sortableColumns = api.columnApi.getSortableColumns();
const customSorts = api.customSortApi.getCustomSorts();
const columnSortComparers = api.optionsApi.getCustomSortOptions().customSortComparers || [];
const usedColumnIds = [
...customSorts.map((customSort) => customSort.ColumnId),
...columnSortComparers.map((comparer) => api.columnScopeApi.getColumnIdsInScope(comparer.scope)),
];
return sortableColumns.filter((column) => {
if (api.customSortApi.internalApi.columnHasCustomSortComparer(column.columnId)) {
return false;
}
if (!props.isNew && column.columnId === data?.ColumnId) {
return true;
}
return usedColumnIds.every((usedColumnId) => {
return column.columnId !== usedColumnId;
});
});
}, []);
const onNameChange = (event) => {
props.onChange({
...data,
Name: event.target.value,
});
};
return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0", children: [_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:shrink-0", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Custom Sort" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { className: "twa:max-w-[300px] twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }) }), _jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20 twa:shrink-0", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Select the column to apply the Custom Sort to" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:px-2 twa:pb-2 twa:flex twa:flex-col", children: _jsx(NewColumnSelector, { compactColumnList: true, className: "twa:h-full", optionClassName: WIZARD_COLUMN_LIST_OPTION_CLASS_RELAXED, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
props.onChange({
...data,
SortedValues: [],
ColumnId: ids[0],
});
}, allowReorder: false }) })] })] }));
};