@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
178 lines (177 loc) • 9.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormatColumnWizard = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const rebass_1 = require("rebass");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const Helper_1 = require("../../../Utilities/Helpers/Helper");
const FormatColumnScopeWizardSection_1 = require("./FormatColumnScopeWizardSection");
const FormatColumnStyleWizardSection_1 = require("./FormatColumnStyleWizardSection");
const FormatColumnFormatWizardSection_1 = require("./FormatColumnFormatWizardSection");
const AdaptableContext_1 = require("../../AdaptableContext");
const FormatColumnSettingsWizardSection_1 = require("./FormatColumnSettingsWizardSection");
const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
const react_redux_1 = require("react-redux");
const FormatColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FormatColumnRedux"));
const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
const Utilities_1 = require("../../Components/EntityRulesEditor/Utilities");
const FormatColumnRuleWizardSection_1 = require("./FormatColumnRuleWizardSection");
const constants_1 = require("./constants");
const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
const FormatColumnTargetWizardSection_1 = require("./FormatColumnTargetWizardSection");
const adjustDisplayFormat = (fc, api) => {
const formatColumn = { ...fc };
let formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
if (formatColumn.Target === 'columnHeader') {
// Column Headers are always text
formatDataType = 'text';
}
if (!formatDataType && formatColumn.DisplayFormat) {
formatColumn.DisplayFormat = undefined;
}
if ((!formatColumn.DisplayFormat || formatColumn.DisplayFormat.Formatter !== 'NumberFormatter') &&
formatDataType === 'number') {
formatColumn.DisplayFormat = {
Formatter: 'NumberFormatter',
Options: {},
};
}
if ((!formatColumn.DisplayFormat || formatColumn.DisplayFormat.Formatter !== 'DateFormatter') &&
formatDataType === 'date') {
formatColumn.DisplayFormat = {
Formatter: 'DateFormatter',
Options: {},
};
}
if ((!formatColumn.DisplayFormat || formatColumn.DisplayFormat.Formatter !== 'StringFormatter') &&
formatDataType === 'text') {
formatColumn.DisplayFormat = {
Formatter: 'StringFormatter',
Options: {},
};
}
return formatColumn;
};
const adjustFormatColumn = (formatColumn, api) => {
formatColumn = adjustDisplayFormat(formatColumn, api);
return formatColumn;
};
function FormatColumnWizard(props) {
const { api } = (0, AdaptableContext_1.useAdaptable)();
const data = props.data ?? props.popupParams?.value;
const [formatColumn, doSetFormatColumn] = (0, react_1.useState)(() => {
let formatColumn = data ? (0, Helper_1.cloneObject)(data) : ObjectFactory_1.default.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 = (0, react_redux_1.useDispatch)();
const handleFinish = () => {
if (formatColumn?.DisplayFormat?.Options &&
(0, ObjectExtensions_1.isObjectEmpty)(formatColumn?.DisplayFormat?.Options)) {
delete formatColumn.DisplayFormat;
}
if (formatColumn.Style && (0, ObjectExtensions_1.isObjectEmpty)(formatColumn.Style)) {
delete formatColumn.Style;
}
if (data) {
dispatch(FormatColumnRedux.FormatColumnEdit(formatColumn));
}
else {
dispatch(FormatColumnRedux.FormatColumnAdd(formatColumn));
}
props.onFinishWizard(formatColumn);
};
return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
{
title: 'Scope',
details: 'Select which Columns will be formatted',
isValid: NewScopeComponent_1.isScopeValid,
renderSummary: FormatColumnScopeWizardSection_1.renderFormatColumnScopeSummary,
render: () => {
return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
React.createElement(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
},
},
{
title: 'Target',
details: 'Select which Columns Elements will be formatted',
renderSummary: FormatColumnTargetWizardSection_1.renderFormatColumnTargetSummary,
render: () => {
return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
React.createElement(FormatColumnTargetWizardSection_1.FormatColumnTargetWizardSection, { onChange: setFormatColumn })));
},
},
{
isValid: (abObject, api, context) => {
if (!abObject.Rule) {
return true;
}
return (0, Utilities_1.isAdaptableRuleValid)(abObject, api, context);
},
title: 'Condition',
details: 'Build a Rule when the Format Column should be applied',
render: () => {
return (React.createElement(FormatColumnRuleWizardSection_1.FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
},
},
{
title: 'Style',
details: 'Create a Style',
isValid: FormatColumnStyleWizardSection_1.isFormatColumnStyleValid,
renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleWizardSummary,
render: () => {
return (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(FormatColumnStyleWizardSection_1.FormatColumnStyleWizardSection, { onChange: setFormatColumn })));
},
},
{
title: 'Display Format',
details: 'Provide a Display Format',
renderSummary: (data) => (0, FormatColumnFormatWizardSection_1.renderFormatColumnFormatSummary)(data),
render: () => {
return React.createElement(FormatColumnFormatWizardSection_1.FormatColumnFormatWizardSection, { onChange: setFormatColumn });
},
},
{
title: 'Settings',
details: 'Set Additional Properties',
renderSummary: FormatColumnSettingsWizardSection_1.renderFormatColumnSettingsSummary,
render: () => {
return (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(FormatColumnSettingsWizardSection_1.FormatColumnSettingsWizardSection, { onChange: setFormatColumn })));
},
},
{
details: 'Select Format Column Tags',
title: 'Tags',
isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
render: () => (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFormatColumn }))),
renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
},
'-',
{
details: 'Review the Format Column',
render: () => {
return (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
},
title: 'Summary',
},
] }));
}
exports.FormatColumnWizard = FormatColumnWizard;