@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
69 lines (68 loc) • 4.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useMemo } from 'react';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import Input from '../../../components/Input';
import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
import { getCalculatedColumnSettingsTags } from '../Utilities/getCalculatedColumnSettingsTags';
import { Box, Flex } from '../../../components/Flex';
import { TagList } from '../../../components/Tag/Tag';
import { SingleSelect } from '../../../components/NewSelect';
import { Card } from '../../../components/Card';
export const renderCalculatedColumnSettingsSummary = (data) => {
const options = getCalculatedColumnSettingsTags(data.CalculatedColumnSettings);
return _jsx(TagList, { tags: options });
};
export const isValidCalculatedColumnSettings = (data) => {
if (!data.CalculatedColumnSettings?.DataType) {
return 'Please select a data type (could not be inferred from the expression)';
}
return true;
};
export const CalculatedColumnSettingsWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const calculatedColumnExpressionService = useMemo(() => api.internalApi.getCalculatedColumnExpressionService(), []);
const handleDataTypeChange = (dataType) => {
const aggregatable = dataType == 'number' ? data.CalculatedColumnSettings?.Aggregatable : false;
props.onChange({
...data,
CalculatedColumnSettings: {
...data.CalculatedColumnSettings,
DataType: dataType,
Aggregatable: aggregatable,
},
});
};
const validCheck = isValidCalculatedColumnSettings(data);
const ErrorMessage = validCheck === true ? null : validCheck;
const { DataType: dataType } = data.CalculatedColumnSettings ?? {};
const { Width } = data.CalculatedColumnSettings ?? {};
const handleSpecialColumnSettingsChange = (settings) => {
props.onChange({
...data,
CalculatedColumnSettings: {
...data.CalculatedColumnSettings,
...settings,
},
});
};
React.useEffect(() => {
if (!dataType) {
const computedDataType = calculatedColumnExpressionService.getCalculatedColumnDataType(data.Query);
handleSpecialColumnSettingsChange({
...data?.CalculatedColumnSettings,
DataType: computedDataType,
});
}
}, []);
const options = [
{ value: 'number', label: 'Number' },
{ value: 'text', label: 'Text' },
{ value: 'date', label: 'Date' },
{ value: 'boolean', label: 'Boolean' },
{ value: 'numberArray', label: 'NumberArray' },
];
return (_jsx(Box, { "data-name": 'calculated-column-settings', children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Data Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for the Calculated Column values" })] }), _jsxs(Card.Body, { className: "twa:p-1 twa:gap-1", children: [_jsx(SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value), className: "twa:max-w-[300px]" }), ErrorMessage ? (_jsx(Box, { className: "twa:text-2 twa:text-destructive", children: ErrorMessage })) : null] })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Width" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional Column Width in pixels" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
Width: Number(e.target.value),
}) }) })] }), _jsx(SpecialColumnSettingsWizardStep, { isEditable: false, settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })] }) }));
};