@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
181 lines (180 loc) • 8.65 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useState } from 'react';
import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
import { cloneObject } from '../../../Utilities/Helpers/Helper';
import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnScopeWizardSection';
import { FormatColumnStyleWizardSection, isFormatColumnStyleValid, renderFormatColumnStyleSummary, } from './FormatColumnStyleWizardSection';
import { FormatColumnFormatWizardSection, getFormatDisplayTypeForScope, renderFormatColumnFormatSummary, } from './FormatColumnFormatWizardSection';
import { useAdaptable } from '../../AdaptableContext';
import { FormatColumnSettingsWizardSection, renderFormatColumnSettingsSummary, } from './FormatColumnSettingsWizardSection';
import { useSelector } from 'react-redux';
import { isScopeValid } from '../../Components/NewScopeComponent';
import ObjectFactory from '../../../Utilities/ObjectFactory';
import { useDispatch } from 'react-redux';
import * as FormatColumnRedux from '../../../Redux/ActionsReducers/FormatColumnRedux';
import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
import { FormatColumnRuleWizardSection, renderFormatColumnConditionSummary, } from './FormatColumnRuleWizardSection';
import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
import { isObjectEmpty } from '../../../Utilities/Extensions/ObjectExtensions';
import { isAdaptableNumericFormatPreset } from '../../../AdaptableState/Common/AdaptableFormatPresets';
import { Box } from '../../../components/Flex';
import { FormatColumnPreviewSummaryCard } from './FormatColumnPreview';
const adjustDisplayFormat = (fc, api) => {
const formatColumn = { ...fc };
let formatDataType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
if (!formatColumn.RowScope) {
formatColumn.RowScope = {
ExcludeDataRows: false,
ExcludeGroupRows: false,
ExcludeSummaryRows: false,
ExcludeTotalRows: false,
};
}
if (!formatColumn.Target) {
formatColumn.Target = 'cell';
}
if (formatColumn.Target === 'columnHeader') {
formatDataType = 'text';
}
if (!formatDataType && formatColumn.DisplayFormat) {
formatColumn.DisplayFormat = undefined;
}
const resolvedFormatter = isAdaptableNumericFormatPreset(formatColumn.DisplayFormat)
? 'NumberFormatter'
: formatColumn.DisplayFormat?.Formatter;
if (resolvedFormatter !== 'NumberFormatter' && formatDataType === 'number') {
formatColumn.DisplayFormat = {
Formatter: 'NumberFormatter',
Options: {},
};
}
if (resolvedFormatter !== 'DateFormatter' && formatDataType === 'date') {
formatColumn.DisplayFormat = {
Formatter: 'DateFormatter',
Options: {},
};
}
if (resolvedFormatter !== 'StringFormatter' && formatDataType === 'text') {
formatColumn.DisplayFormat = {
Formatter: 'StringFormatter',
Options: {},
};
}
return formatColumn;
};
const adjustFormatColumn = (formatColumn, api) => {
formatColumn = adjustDisplayFormat(formatColumn, api);
return formatColumn;
};
export function FormatColumnWizard(props) {
const { api } = useAdaptable();
const allFormatColumns = useSelector((state) => state.FormatColumn?.FormatColumns ?? []);
const data = props.data ?? props.popupParams?.value;
const [formatColumn, doSetFormatColumn] = useState(() => {
let formatColumn = data ? cloneObject(data) : ObjectFactory.CreateEmptyFormatColumn();
formatColumn.Scope = formatColumn.Scope ?? {
ColumnIds: [],
};
if (props.popupParams?.action === 'New' && props.popupParams?.column) {
formatColumn.Scope = {
ColumnIds: [props.popupParams?.column.columnId],
};
}
formatColumn = adjustFormatColumn(formatColumn, api);
return formatColumn;
});
const setFormatColumn = React.useCallback((formatColumn) => {
doSetFormatColumn(adjustFormatColumn(formatColumn, api));
}, []);
const dispatch = useDispatch();
const handleFinish = () => {
const df = formatColumn?.DisplayFormat;
if (df && !isAdaptableNumericFormatPreset(df) && df.Options && isObjectEmpty(df.Options)) {
delete formatColumn.DisplayFormat;
}
if (formatColumn.Style && isObjectEmpty(formatColumn.Style)) {
delete formatColumn.Style;
}
if (data) {
dispatch(FormatColumnRedux.FormatColumnEdit(formatColumn));
}
else {
dispatch(FormatColumnRedux.FormatColumnAdd(formatColumn));
}
props.onFinishWizard(formatColumn);
};
return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
{
title: 'Settings',
details: 'Enter Name and other Properties',
isValid: (formatColumnData) => {
if (!formatColumnData.Name) {
return 'Format Column Name cannot be blank';
}
if (allFormatColumns.some((fc) => fc.Name === formatColumnData.Name && fc.Uuid !== formatColumnData.Uuid)) {
return 'A Format Column already exists with that name';
}
return true;
},
renderSummary: renderFormatColumnSettingsSummary,
render: () => {
return _jsx(FormatColumnSettingsWizardSection, { onChange: setFormatColumn });
},
},
{
title: 'Scope',
details: 'Select which Columns and Rows will be formatted',
isValid: isScopeValid,
renderSummary: renderFormatColumnScopeSummary,
render: () => _jsx(FormatColumnScopeWizardSection, { onChange: setFormatColumn }),
},
{
isValid: (abObject, api, context) => {
if (!abObject.Rule) {
return true;
}
return isAdaptableRuleValid(abObject, api, context);
},
title: 'Condition',
details: 'Build a Rule when the Format Column should be applied',
renderSummary: renderFormatColumnConditionSummary,
render: () => {
return (_jsx(FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
},
},
{
title: 'Style',
details: 'Create a Style',
isValid: isFormatColumnStyleValid,
renderSummary: renderFormatColumnStyleSummary,
render: () => {
return (_jsx(Box, { className: "twa:p-2", children: _jsx(FormatColumnStyleWizardSection, { onChange: setFormatColumn }) }));
},
},
{
title: 'Display Format',
details: 'Provide a Display Format',
renderSummary: (data) => renderFormatColumnFormatSummary(data),
render: () => {
return _jsx(FormatColumnFormatWizardSection, { onChange: setFormatColumn });
},
},
{
details: 'Select Format Column Tags',
title: 'Tags',
isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setFormatColumn }) })),
renderSummary: renderObjectTagsSummary,
},
'-',
{
details: 'Review the Format Column',
render: () => {
return (_jsxs(Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: [_jsx(OnePageWizardSummary, {}), _jsx(FormatColumnPreviewSummaryCard, {})] }));
},
title: 'Summary',
},
] }));
}