@adaptabletools/adaptable-cjs 23.0.0-canary.4 → 23.0.0-canary.5

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -1,13 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FreeTextColumnSettingsWizardSection = exports.isValidFreeTextColumn = exports.renderFreeTextColumnSummary = void 0;
+exports.FreeTextColumnSettingsWizardSection = exports.isValidFreeTextColumnSettings = exports.renderFreeTextColumnSettingsSummary = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const CheckBox_1 = require("../../../components/CheckBox");
@@ -17,55 +14,31 @@ const Tag_1 = require("../../../components/Tag");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
-const options = [
+const Card_1 = require("../../../components/Card");
+const Tag_2 = require("../../../components/Tag/Tag");
+const getFreeTextColumnSettingsTags_1 = require("../Utilities/getFreeTextColumnSettingsTags");
+const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
+const dataTypeOptions = [
     { value: 'number', label: 'Number' },
     { value: 'text', label: 'Text' },
     { value: 'date', label: 'Date' },
     { value: 'boolean', label: 'Boolean' },
 ];
-const renderFreeTextColumnSummary = (data) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Column Identifier: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.ColumnId })] }), data.FriendlyName ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Column Name: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FriendlyName ?? data.ColumnId })] })) : null, (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Data Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FreeTextColumnSettings.DataType })] }), data.DefaultValue !== undefined ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Default Value: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.DefaultValue })] })) : null, data.TextEditor !== undefined ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Editor Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.TextEditor })] })) : null] }));
+const renderFreeTextColumnSettingsSummary = (data) => {
+    const propertyTags = (0, getFreeTextColumnSettingsTags_1.getFreeTextColumnSettingsTags)(data.FreeTextColumnSettings);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Data Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FreeTextColumnSettings.DataType || 'Not specified' })] }), data.DefaultValue !== undefined ? ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Default Value: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: String(data.DefaultValue) })] })) : null, data.TextEditor !== undefined ? ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Editor Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.TextEditor })] })) : null, propertyTags.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2", children: (0, jsx_runtime_1.jsx)(Tag_2.TagList, { tags: propertyTags }) })) : null] }));
 };
-exports.renderFreeTextColumnSummary = renderFreeTextColumnSummary;
-const isValidFreeTextColumn = (data, api) => {
-    const columns = api.columnApi.getUIAvailableColumns();
-    if (!data.ColumnId) {
-        return 'A Column Name is required';
-    }
-    const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
-    const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
-    if (hasAlreadyExistingId) {
-        return 'A column with this Name already exists';
-    }
-    if (!data.FreeTextColumnSettings.DataType) {
+exports.renderFreeTextColumnSettingsSummary = renderFreeTextColumnSettingsSummary;
+const isValidFreeTextColumnSettings = (data) => {
+    if (!data.FreeTextColumnSettings?.DataType) {
         return 'A data type is required for the column';
     }
     return true;
 };
-exports.isValidFreeTextColumn = isValidFreeTextColumn;
+exports.isValidFreeTextColumnSettings = isValidFreeTextColumnSettings;
 const FreeTextColumnSettingsWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
-    const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
-    const inEdit = props.isEdit;
-    const validCheck = (0, exports.isValidFreeTextColumn)(data, api);
-    const ErrorMessage = validCheck === true ? null : validCheck;
-    const handleColumnIdChange = (event) => {
-        let e = event.target;
-        const ColumnId = e.value;
-        props.onChange({
-            ...data,
-            ColumnId,
-        });
-    };
-    const handleColumnNameChange = (event) => {
-        let e = event.target;
-        const ColumnName = e.value;
-        props.onChange({
-            ...data,
-            FriendlyName: ColumnName,
-        });
-    };
     const handleDataTypeChange = (DataType) => {
         const newData = {
             ...data,
@@ -80,14 +53,6 @@ const FreeTextColumnSettingsWizardSection = (props) => {
         }
         props.onChange(newData);
     };
-    const onDynamicSelectChanged = (event) => {
-        let e = event.target;
-        const TextEditor = e.value;
-        props.onChange({
-            ...data,
-            TextEditor,
-        });
-    };
     const handleDefaultValueChange = (event) => {
         let e = event.target;
         let DefaultValue = e.value;
@@ -101,9 +66,7 @@ const FreeTextColumnSettingsWizardSection = (props) => {
             DefaultValue,
         });
     };
-    const handleSpecialColumnSettingsChange = (
-    //  settings: SpecialColumnSettings
-    settings) => {
+    const handleSpecialColumnSettingsChange = (settings) => {
         props.onChange({
             ...data,
             FreeTextColumnSettings: {
@@ -112,23 +75,25 @@ const FreeTextColumnSettingsWizardSection = (props) => {
             },
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: (e) => handleColumnIdChange(e) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Header", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
-                                setColumnNameFocused(true);
-                            }, onBlur: () => {
-                                setColumnNameFocused(false);
-                            }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: (e) => handleColumnNameChange(e) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Data Type", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[500px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type-dropdown", className: "twa:w-full", items: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onValueChange: (value) => handleDataTypeChange(value) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Default Value", children: data.FreeTextColumnSettings.DataType === 'boolean' ? ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
-                                props.onChange({
-                                    ...data,
-                                    DefaultValue,
-                                });
-                            } })) : ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
-                                ? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
-                                : data.DefaultValue || '', className: "twa:w-full twa:max-w-[500px]", type: data.FreeTextColumnSettings.DataType === 'number'
-                                ? 'number'
-                                : data.FreeTextColumnSettings.DataType === 'date'
-                                    ? 'date'
-                                    : 'text', placeholder: "Enter a default value (optional)", onChange: (e) => handleDefaultValueChange(e) })) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Header Tooltip", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: data.FreeTextColumnSettings?.HeaderToolTip || '', onChange: (e) => handleSpecialColumnSettingsChange({
-                                HeaderToolTip: e.target.value,
-                            }) }) }), ' ', data.FreeTextColumnSettings.DataType == 'text' && ((0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Editor", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), className: "twa:mr-2", children: "Inline Editor" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e), children: "Large Editor" })] }))] }), ErrorMessage ? (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:my-2", children: ErrorMessage }) : null, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2", children: (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }) })] }));
+    const { Width } = data.FreeTextColumnSettings ?? {};
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "free-text-column-settings", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Data Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for values entered in this column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type-dropdown", className: "twa:max-w-[300px]", items: dataTypeOptions, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onValueChange: (value) => handleDataTypeChange(value) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Default Value" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional initial value for each cell in the column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: data.FreeTextColumnSettings.DataType === 'boolean' ? ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
+                                    props.onChange({
+                                        ...data,
+                                        DefaultValue,
+                                    });
+                                } })) : ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
+                                    ? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
+                                    : data.DefaultValue || '', className: "twa:max-w-[500px] twa:w-full", type: data.FreeTextColumnSettings.DataType === 'number'
+                                    ? 'number'
+                                    : data.FreeTextColumnSettings.DataType === 'date'
+                                        ? 'date'
+                                        : 'text', placeholder: "Enter a default value (optional)", onChange: handleDefaultValueChange })) })] }), data.FreeTextColumnSettings.DataType === 'text' ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Editor" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how text values are edited in the grid" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { value: data.TextEditor ?? 'Inline', name: "textEditor", orientation: "horizontal", onRadioChange: (TextEditor) => {
+                                    props.onChange({
+                                        ...data,
+                                        TextEditor,
+                                    });
+                                }, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-1", "data-name": "inline-editor", value: "Inline", children: "Inline Editor" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-4", "data-name": "large-editor", value: "Large", children: "Large Editor" })] }) })] })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Width" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional column width in pixels" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                                    Width: Number(e.target.value),
+                                }) }) })] }), (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange })] }) }));
 };
 exports.FreeTextColumnSettingsWizardSection = FreeTextColumnSettingsWizardSection;

package/src/View/FreeTextColumn/Wizard/FreeTextColumnWizard.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const FreeTextColumnSettingsWizardSection_1 = require("./FreeTextColumnSettingsWizardSection");
+const FreeTextColumnDefinitionWizardSection_1 = require("./FreeTextColumnDefinitionWizardSection");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const FreeTextColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FreeTextColumnRedux"));
 const react_redux_1 = require("react-redux");
@@ -26,7 +27,7 @@ const FreeTextColumnWizard = (props) => {
         return ObjectFactory_1.default.CreateEmptyFreeTextColumn(adaptable.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
     });
     const dispatch = (0, react_redux_1.useDispatch)();
-    const isEdit = props.data || props.popupParams?.action === 'Edit';
+    const isEdit = Boolean(props.data) || props.popupParams?.action === 'Edit';
     const handleFinish = () => {
         if (isEdit) {
             dispatch(FreeTextColumnRedux.FreeTextColumnEdit(freeTextColumn));
@@ -37,13 +38,19 @@ const FreeTextColumnWizard = (props) => {
         props.onFinishWizard(freeTextColumn);
     };
     return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Details',
+                details: 'Provide Free Text Column Details',
+                isValid: FreeTextColumnDefinitionWizardSection_1.isValidFreeTextColumnDefinition,
+                renderSummary: FreeTextColumnDefinitionWizardSection_1.renderFreeTextColumnDefinitionSummary,
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FreeTextColumnDefinitionWizardSection_1.FreeTextColumnDefinitionWizardSection, { isEdit: isEdit, onChange: setFreeTextColumn }) })),
+            },
             {
                 title: 'Settings',
-                details: 'Configure the Free Text Column',
-                isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumn,
-                render: () => {
-                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn }) }));
-                },
+                details: 'Specify Free Text Column Properties',
+                isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumnSettings,
+                renderSummary: FreeTextColumnSettingsWizardSection_1.renderFreeTextColumnSettingsSummary,
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: isEdit, onChange: setFreeTextColumn }) })),
             },
             {
                 details: 'Select Free Text Column Tags',
@@ -55,10 +62,7 @@ const FreeTextColumnWizard = (props) => {
             '-',
             {
                 details: 'Review the Free Text Column',
-                renderSummary: FreeTextColumnSettingsWizardSection_1.renderFreeTextColumnSummary,
-                render: () => {
-                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) }));
-                },
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
         ] }));

package/src/View/Layout/TransposedPopup.js

@@ -187,8 +187,8 @@ const TransposedPopup = (props) => {
             modules,
         }).then((adaptableApi) => {
             transposedAdaptableApiRef.current = adaptableApi;
-            adaptableApi.eventApi.on('ThemeChanged', (event) => {
-                transposedAdaptableApiRef.current?.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
+            adaptableApi.eventApi.on('ThemeSelected', (event) => {
+                transposedAdaptableApiRef.current?.themeApi.loadTheme(event.theme);
             });
         });
     }, [elevatedColumnId, adaptable]);

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -179,8 +179,7 @@ const LayoutWizard = (props) => {
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
-                isValid: RowSummarySection_1.areSummaryRowsValid,
-                details: 'Configure Row Grouping',
+                details: 'Configure Row Grouping and Display Behaviour',
                 renderSummary: () => (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSectionSummary, {}),
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }) })),
             },
@@ -194,7 +193,7 @@ const LayoutWizard = (props) => {
             {
                 title: 'Aggregations',
                 isVisible: () => layoutSupportedFeatures.TableAggregationColumns,
-                details: 'Select Column Aggregations',
+                details: 'Select Aggregation Columns and Behaviour',
                 renderSummary: () => (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSectionSummary, {}),
                 isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(AggregationsSection_1.AggregationsSection, { onChange: (layout) => {
@@ -233,6 +232,7 @@ const LayoutWizard = (props) => {
                 details: 'Configure Row Summaries',
                 renderSummary: () => (0, jsx_runtime_1.jsx)(RowSummarySection_1.RowSummarySectionSummary, {}),
                 isVisible: () => layoutSupportedFeatures.RowSummaries,
+                isValid: RowSummarySection_1.areSummaryRowsValid,
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(RowSummarySection_1.RowSummarySection, { onChange: setLayout }) })),
             },
             {

package/src/View/Layout/Wizard/sections/AggregationsSection.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { TableLayout } from '../../../../../types';
-import { validateTableLayoutAggregations } from '../../../../Aggregation/validateParameterizedAggregations';
-export declare const isAggregationsSectionValid: typeof validateTableLayoutAggregations;
+import { Layout, TableLayout } from '../../../../../types';
+export declare const isAggregationsSectionValid: (data: Layout) => true | string;
 export declare const AggregationsSectionSummary: React.FunctionComponent;
 interface AggregationsSectionProps {
     onChange: (data: TableLayout) => void;

package/src/View/Layout/Wizard/sections/AggregationsSection.js

@@ -6,11 +6,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const Tabs_1 = require("../../../../components/Tabs");
+const Card_1 = require("../../../../components/Card");
 const Tag_1 = require("../../../../components/Tag");
-const validateParameterizedAggregations_1 = require("../../../../Aggregation/validateParameterizedAggregations");
-const parameterizedAggregationHeader_1 = require("../../../../Aggregation/parameterizedAggregationHeader");
-const parameterizedAggregationWizardHelpers_1 = require("../../../../Aggregation/parameterizedAggregationWizardHelpers");
+const AggregationColumns_1 = require("../../../../AdaptableState/Common/AggregationColumns");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
@@ -20,15 +18,25 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
 const Flex_1 = require("../../../../components/Flex");
 const NewSelect_1 = require("../../../../components/NewSelect");
-const ParameterizedAggFuncPicker_1 = require("./ParameterizedAggFuncPicker");
-exports.isAggregationsSectionValid = validateParameterizedAggregations_1.validateTableLayoutAggregations;
+const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
+const isAggregationsSectionValid = (data) => {
+    const weightedAvg = data.TableAggregationColumns
+        ? (data.TableAggregationColumns || []).find(({ AggFunc }) => typeof AggFunc === 'object' &&
+            AggFunc.type === 'weightedAverage')?.AggFunc
+        : null;
+    if (weightedAvg && !weightedAvg.weightedColumnId) {
+        return 'Weighted Average requires a weight column to be selected.';
+    }
+    return true;
+};
+exports.isAggregationsSectionValid = isAggregationsSectionValid;
 const AggregationsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const entries = layout.TableAggregationColumns || [];
     let content = null;
     if (entries.length) {
-        content = ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: entries.map(({ ColumnId, AggFunc }) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, parameterizedAggregationHeader_1.getParameterizedAggregationDisplayName)(adaptable.api, AggFunc, ColumnId) }) }, ColumnId))) }));
+        content = ((0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: entries.map(({ ColumnId, AggFunc }) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: adaptable.api.columnApi.getFriendlyNameForColumnId(ColumnId), children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: typeof AggFunc === 'object' ? AggFunc.type : AggFunc }) }, ColumnId))) }));
     }
     else {
         content = (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Aggregations" });
@@ -38,7 +46,73 @@ const AggregationsSectionSummary = () => {
 exports.AggregationsSectionSummary = AggregationsSectionSummary;
 const ColumnRow = (props) => {
     const aggValue = props.layout?.TableAggregationColumns?.find((agg) => agg.ColumnId === props.column.columnId)?.AggFunc;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [props.column.friendlyName, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }), (0, jsx_runtime_1.jsx)(ParameterizedAggFuncPicker_1.ParameterizedAggFuncPicker, { column: props.column, aggValue: aggValue, aggregationColumnsMap: props.aggregationColumnsMap, numberColumns: props.numberColumns, aggregationEntries: props.layout.TableAggregationColumns || [], onChangeEntries: props.onChangeAggFunction })] }));
+    const aggFunctionNames = (0, AggregationColumns_1.getDisplayAggFuncNames)(props.column);
+    const currentAggFnName = props.aggregationColumnsMap[props.column.columnId];
+    const updateAggFunc = (fnName) => {
+        let aggCols = [...(props.layout.TableAggregationColumns || [])];
+        const AggFuncValue = fnName === WEIGHTED_AVERAGE_AGG_FN_NAME
+            ? {
+                type: 'weightedAverage',
+                weightedColumnId: null,
+            }
+            : fnName;
+        let found = false;
+        aggCols = aggCols.map(({ ColumnId, AggFunc }) => {
+            if (ColumnId === props.column.columnId) {
+                found = true;
+                return {
+                    ColumnId,
+                    AggFunc: AggFuncValue,
+                };
+            }
+            return { ColumnId, AggFunc };
+        });
+        if (!found) {
+            aggCols.push({
+                ColumnId: props.column.columnId,
+                AggFunc: AggFuncValue,
+            });
+        }
+        props.onChangeAggFunction(aggCols);
+    };
+    const updateWeightedColumn = (weightedColumnId) => {
+        let aggCols = [...(props.layout.TableAggregationColumns || [])];
+        const AggFuncValue = {
+            type: 'weightedAverage',
+            weightedColumnId: weightedColumnId,
+        };
+        let found = false;
+        aggCols = aggCols.map(({ ColumnId, AggFunc }) => {
+            if (ColumnId === props.column.columnId) {
+                found = true;
+                return {
+                    ColumnId,
+                    AggFunc: AggFuncValue,
+                };
+            }
+            return { ColumnId, AggFunc };
+        });
+        if (!found) {
+            aggCols.push({
+                ColumnId: props.column.columnId,
+                AggFunc: AggFuncValue,
+            });
+        }
+        props.onChangeAggFunction(aggCols);
+    };
+    const weightColumnId = typeof aggValue === 'object' && aggValue.type === 'weightedAverage'
+        ? aggValue.weightedColumnId
+        : null;
+    const weightColumnOptions = props.numberColumns
+        .filter((col) => col.columnId !== props.column.columnId)
+        .map((col) => ({
+        label: col.friendlyName,
+        value: col.columnId,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [props.column.friendlyName, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: props.column }), aggValue && ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:min-w-[140px] twa:ml-2", value: currentAggFnName, items: aggFunctionNames.map((fnName) => ({
+                    label: fnName,
+                    value: fnName,
+                })), onValueChange: updateAggFunc })), currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Weight" }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:min-w-[140px] twa:ml-2", placeholder: "Select Weight", value: weightColumnId, items: weightColumnOptions, onValueChange: updateWeightedColumn })] }))] }));
 };
 const AggregationsSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -48,6 +122,8 @@ const AggregationsSection = (props) => {
     const numberColumns = adaptable.api.columnApi.getNumericColumns();
     const allAggregatableColumnIds = allAggregableColumns.map((col) => col.columnId);
     (layout.TableAggregationColumns || []).forEach((agg) => {
+        // we need to also display the columns currently aggregated,
+        // even if they are not aggregatable
         if (!allAggregatableColumnIds.includes(agg.ColumnId)) {
             allAggregatableColumnIds.push(agg.ColumnId);
         }
@@ -82,29 +158,43 @@ const AggregationsSection = (props) => {
             acc[col.columnId] = col;
             return acc;
         }, {});
-        return (0, parameterizedAggregationWizardHelpers_1.buildAggregationColumnsMap)(layout.TableAggregationColumns || [], allColumnsMap);
-    }, [layout, allColumns]);
+        return (layout.TableAggregationColumns || []).reduce((acc, { ColumnId: colId, AggFunc }) => {
+            let fn = AggFunc;
+            let fnName = '';
+            if (typeof fn === 'boolean') {
+                fnName = allColumnsMap[colId].aggregationFunction;
+            }
+            if (typeof fn === 'object' && fn.type === 'weightedAverage') {
+                fnName = WEIGHTED_AVERAGE_AGG_FN_NAME;
+            }
+            else if (typeof fn === 'string') {
+                fnName = fn;
+            }
+            acc[colId] = fnName;
+            return acc;
+        }, {});
+    }, [layout]);
     const handleSuppressAggFuncInHeader = (checked) => {
         props.onChange({
             ...layout,
             SuppressAggFuncInHeader: checked,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { style: { height: '100%' }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Aggregations" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Omit Aggregation from Header', children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: 'Grand Total Row', children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[180px]", items: [
-                                            {
-                                                label: 'Off',
-                                                value: null,
-                                            },
-                                        ].concat(['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
-                                            return {
-                                                label: StringExtensions_1.default.CamelCaseToHumanText(position),
-                                                value: position,
-                                            };
-                                        })), placeholder: "Off", value: layout.GrandTotalRow, onValueChange: (value) => {
-                                            props.onChange({
-                                                ...layout,
-                                                GrandTotalRow: value,
-                                            });
-                                        } }) })] }) }), (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => ((0, jsx_runtime_1.jsx)(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.TableAggregationColumns || []).map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2 twa:overflow-hidden twa:grid twa:grid-cols-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Aggregation Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a column and an aggregation function" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0 }, showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => ((0, jsx_runtime_1.jsx)(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.TableAggregationColumns || []).map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:h-full twa:min-h-0 twa:overflow-y-auto twa:flex twa:flex-col twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Omit Aggregation from Header" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader, children: "Do not show aggregation function names in column headers" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Grand Total Row" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set position of the grand total row in the grid" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-[180px]", items: [
+                                        {
+                                            label: 'Off',
+                                            value: null,
+                                        },
+                                    ].concat(['top', 'bottom', 'pinnedTop', 'pinnedBottom'].map((position) => {
+                                        return {
+                                            label: StringExtensions_1.default.CamelCaseToHumanText(position),
+                                            value: position,
+                                        };
+                                    })), placeholder: "Off", value: layout.GrandTotalRow, onValueChange: (value) => {
+                                        props.onChange({
+                                            ...layout,
+                                            GrandTotalRow: value,
+                                        });
+                                    } }) })] })] })] }));
 };
 exports.AggregationsSection = AggregationsSection;