@adaptabletools/adaptable 12.0.8 → 12.1.0-canary.1

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

@@ -3,18 +3,132 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const AdaptableWizard_1 = require("../../Wizard/AdaptableWizard");
-const LayoutEditorWizard_1 = require("./LayoutEditorWizard");
-class LayoutWizard extends React.Component {
-    render() {
-        let layouts = this.props.configEntities;
-        return (React.createElement(AdaptableWizard_1.AdaptableWizard, { style: { maxWidth: '', height: '80vh' }, moduleInfo: this.props.moduleInfo, modalContainer: this.props.modalContainer, api: this.props.api, showStepsLegend: false, closeText: "CANCEL", closeTooltip: "Cancel changes and close Layout Editor", steps: [
-                {
-                    StepName: 'Layout Editor',
-                    Index: 0,
-                    Element: (React.createElement(LayoutEditorWizard_1.LayoutEditorWizard, { api: this.props.api, Layouts: layouts, moduleInfo: this.props.moduleInfo })),
+const react_1 = require("react");
+const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const SettingsSection_1 = require("./sections/SettingsSection");
+const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const react_redux_1 = require("react-redux");
+const ColumnsSection_1 = require("./sections/ColumnsSection");
+const PivotColumnsSection_1 = require("./sections/PivotColumnsSection");
+const RowGroupingSection_1 = require("./sections/RowGroupingSection");
+const AggregationsSection_1 = require("./sections/AggregationsSection");
+const SortSection_1 = require("./sections/SortSection");
+const FilterSection_1 = require("./sections/FilterSection");
+const LayoutWizard = (props) => {
+    var _a, _b;
+    const dispatch = react_redux_1.useDispatch();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const allLayouts = adaptable.api.layoutApi.getAllLayout();
+    const initialLayout = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
+    const [layout, setLayout] = react_1.useState(() => {
+        var _a;
+        if (initialLayout) {
+            const preparedLayout = Helper_1.cloneObject(initialLayout);
+            if (((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Clone') {
+                preparedLayout.Name = '';
+            }
+            return preparedLayout;
+        }
+        return ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
+    });
+    const handleFinish = () => {
+        var _a;
+        let action = (_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action;
+        if (!action) {
+            action = initialLayout ? 'Edit' : 'New';
+        }
+        switch (action) {
+            case 'Edit':
+                const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
+                dispatch(LayoutRedux.LayoutSave(layout));
+                if (currentLayout.Uuid === layout.Uuid) {
+                    dispatch(LayoutRedux.LayoutSelect(layout.Name));
+                }
+                break;
+            case 'Clone':
+                const clonedLayout = Object.assign({}, layout);
+                delete clonedLayout.Uuid;
+                dispatch(LayoutRedux.LayoutAdd(clonedLayout));
+                dispatch(LayoutRedux.LayoutSelect(clonedLayout.Name));
+                break;
+            case 'New':
+                dispatch(LayoutRedux.LayoutAdd(layout));
+                dispatch(LayoutRedux.LayoutSelect(layout.Name));
+        }
+        props.onFinishWizard(layout);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Settings',
+                details: 'Configure Layout',
+                isValid: () => {
+                    if (!layout.Name) {
+                        return 'Layout name cannot be blank';
+                    }
+                    if (allLayouts.some((layoutItem) => layoutItem.Name === layout.Name && layoutItem.Uuid !== layout.Uuid)) {
+                        return 'A Layout already exists with that name';
+                    }
+                    return true;
                 },
-            ], data: this.props.editedAdaptableObject, stepStartIndex: this.props.wizardStartIndex, onHide: () => this.props.onCloseWizard(), onFinish: () => this.props.onFinishWizard(), canFinishWizard: () => this.props.canFinishWizard() }));
-    }
-}
+                renderSummary: () => React.createElement(SettingsSection_1.SettingsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
+            {
+                title: 'Columns',
+                details: 'Select Columns',
+                isVisible: () => !(layout === null || layout === void 0 ? void 0 : layout.EnablePivot),
+                renderSummary: () => React.createElement(ColumnsSection_1.ColumnsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(ColumnsSection_1.ColumnsSection, { onChange: setLayout }))),
+            },
+            {
+                title: 'Pivot Columns',
+                details: 'Select Pivot Columns',
+                isVisible: () => layout === null || layout === void 0 ? void 0 : layout.EnablePivot,
+                renderSummary: () => React.createElement(PivotColumnsSection_1.PivotColumnsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
+            {
+                title: 'Row Groups',
+                details: 'Configure Row Grouping',
+                renderSummary: () => React.createElement(RowGroupingSection_1.RowGroupingSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }))),
+            },
+            {
+                title: 'Aggregations',
+                details: 'Select Column Aggregations',
+                renderSummary: () => React.createElement(AggregationsSection_1.AggregationsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(AggregationsSection_1.AggregationsSection, { onChange: setLayout }))),
+            },
+            {
+                title: 'Sort',
+                renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
+                details: 'Configure Column Sorts',
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
+            {
+                title: 'Filters',
+                details: 'Column Filters',
+                renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
+            '-',
+            {
+                details: 'Review your Layout',
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
+                title: 'Summary',
+            },
+        ] }));
+};
 exports.LayoutWizard = LayoutWizard;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const AggregationsSectionSummary: React.FunctionComponent;
+interface AggregationsSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const AggregationsSection: React.FunctionComponent<AggregationsSectionProps>;
+export {};

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

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AggregationsSection = exports.AggregationsSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Utilities_1 = require("./Utilities");
+const AggregationsSectionSummary = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const aggregations = layout.AggregationColumns;
+    const entires = Object.entries(aggregations !== null && aggregations !== void 0 ? aggregations : {});
+    let content = null;
+    if (entires.length) {
+        content = (React.createElement(FormLayout_1.default, null, entires.map(([columnId, aggregation]) => (React.createElement(FormLayout_1.FormRow, { key: columnId, label: adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId) },
+            React.createElement(Tag_1.Tag, null, aggregation))))));
+    }
+    else {
+        content = React.createElement(Tag_1.Tag, null, "No Aggregations");
+    }
+    return React.createElement(rebass_1.Box, null, content);
+};
+exports.AggregationsSectionSummary = AggregationsSectionSummary;
+const ColumnRow = (props) => {
+    var _a, _b;
+    const aggValue = (_b = (_a = props.layout) === null || _a === void 0 ? void 0 : _a.AggregationColumns) === null || _b === void 0 ? void 0 : _b[props.column.columnId];
+    const aggOptions = props.column.availableAggregationFunctions.map((fnName) => {
+        return {
+            label: fnName,
+            onClick: () => {
+                const aggCols = Object.assign({}, props.layout.AggregationColumns);
+                if (!aggCols) {
+                    return;
+                }
+                aggCols[props.column.columnId] = fnName;
+                props.onChangeAggFunction(aggCols);
+            },
+        };
+    });
+    return (React.createElement(rebass_1.Box, null,
+        props.column.friendlyName,
+        aggValue && (React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggOptions, ml: 2 }, props.aggregationColumnsMap[props.column.columnId]))));
+};
+const AggregationsSection = (props) => {
+    var _a, _b;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const allAggregableColumns = adaptable.api.columnApi.getAggregetableColumns();
+    const allColumns = adaptable.api.columnApi.getColumns();
+    const sortedAggregableColumns = React.useMemo(() => {
+        var _a, _b;
+        return sortWithOrder_1.sortWithOrderArray(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+    }, [layout, allAggregableColumns]);
+    const handleColumnsSelectionChange = React.useCallback((columnIds) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { AggregationColumns: columnIds.reduce((acc, colId) => {
+                var _a, _b;
+                acc[colId] =
+                    (_b = (_a = layout.AggregationColumns) === null || _a === void 0 ? void 0 : _a[colId]) !== null && _b !== void 0 ? _b : adaptable.api.columnApi.getDefaultAggFunc(colId);
+                return acc;
+            }, {}) }));
+    }, [layout]);
+    const handleAggregationChange = React.useCallback((aggFunctions) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { AggregationColumns: aggFunctions }));
+    }, [layout]);
+    const aggregationColumnsMap = React.useMemo(() => {
+        const allColumnsMap = allColumns.reduce((acc, col) => {
+            acc[col.columnId] = col;
+            return acc;
+        }, {});
+        return Object.keys(layout.AggregationColumns || {}).reduce((acc, colId) => {
+            var _a;
+            let fn = (_a = layout.AggregationColumns) === null || _a === void 0 ? void 0 : _a[colId];
+            if (typeof fn === 'boolean') {
+                fn = allColumnsMap[colId].aggregationFunction;
+            }
+            acc[colId] = fn;
+            return acc;
+        }, {});
+    }, [layout]);
+    const handleSuppressAggFuncInHeader = (checked) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { SuppressAggFuncInHeader: checked }));
+    };
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Columns Aggregations"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Flex, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Suppress Aggregation Function in Header"))),
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (column) => (React.createElement(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap })), options: sortedAggregableColumns, value: (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], allowReorder: () => false, xSelectedLabel: () => {
+                    return `Active aggregations:`;
+                }, onChange: handleColumnsSelectionChange }))));
+};
+exports.AggregationsSection = AggregationsSection;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const ColumnsSectionSummary: React.FunctionComponent;
+interface ColumnsSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const ColumnsSection: React.FunctionComponent<ColumnsSectionProps>;
+export {};

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

@@ -0,0 +1,226 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnsSection = exports.ColumnsSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const InfiniteTable_1 = require("../../../../components/InfiniteTable");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const AdaptableColumn_1 = require("../../../../PredefinedConfig/Common/AdaptableColumn");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const ColumnLabels_1 = require("../LayoutEditor/ColumnLabels");
+const Utilities_1 = require("./Utilities");
+const lodash_1 = require("lodash");
+const icons_1 = require("../../../../components/icons");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const PropertyOrderText = (props) => (React.createElement(rebass_1.Text, { fontWeight: 600, fontSize: 2 }, props.children));
+const ColumnsSectionSummary = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const rowHeight = 40;
+    const headerHeight = 40;
+    const tableHeight = headerHeight + lodash_1.clamp(rowHeight * layout.Columns.length, 100, 360);
+    const data = React.useMemo(() => {
+        return layout.Columns.map((columnId) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            const friendlyName = adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId);
+            const header = (_b = (_a = layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[columnId]) !== null && _b !== void 0 ? _b : '';
+            const columnWidth = (_c = layout.ColumnWidthMap) === null || _c === void 0 ? void 0 : _c[columnId];
+            const columnPinning = (_d = layout.PinnedColumnsMap) === null || _d === void 0 ? void 0 : _d[columnId];
+            const agg = (_e = layout.AggregationColumns) === null || _e === void 0 ? void 0 : _e[columnId];
+            const sortIndex = ((_f = layout === null || layout === void 0 ? void 0 : layout.ColumnSorts) !== null && _f !== void 0 ? _f : []).findIndex((sort) => sort.ColumnId === columnId);
+            const sortOrder = sortIndex != -1
+                ? {
+                    index: sortIndex + 1,
+                    sort: (_h = (_g = layout.ColumnSorts[sortIndex]) === null || _g === void 0 ? void 0 : _g.SortOrder) !== null && _h !== void 0 ? _h : null,
+                }
+                : {};
+            let grouping = (_k = (_j = layout.RowGroupedColumns) === null || _j === void 0 ? void 0 : _j.indexOf) === null || _k === void 0 ? void 0 : _k.call(_j, columnId);
+            grouping = grouping != -1 ? grouping + 1 : null;
+            const filter = (_l = layout.ColumnFilters) === null || _l === void 0 ? void 0 : _l.find((colFilter) => colFilter.ColumnId === columnId);
+            return {
+                columnId,
+                agg,
+                friendlyName,
+                header,
+                columnWidth,
+                columnPinning,
+                sortOrder,
+                grouping,
+                filter,
+            };
+        });
+    }, [layout]);
+    const columns = React.useMemo(() => {
+        return {
+            name: { header: 'Name', field: 'friendlyName', minWidth: 100 },
+            header: { header: 'Header', field: 'header', minWidth: 120 },
+            colId: { header: 'ID', field: 'columnId' },
+            agg: { header: 'Agg', field: 'agg', minWidth: 70 },
+            width: { header: 'Width', field: 'columnWidth', minWidth: 70 },
+            pin: { header: 'Pin', field: 'columnPinning', minWidth: 80 },
+            sort: {
+                header: 'Sort',
+                field: 'sortOrder',
+                minWidth: 50,
+                align: 'center',
+                render: (params) => {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    if (!((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.sortOrder) === null || _b === void 0 ? void 0 : _b.sort)) {
+                        return React.createElement(React.Fragment, null);
+                    }
+                    return (React.createElement(rebass_1.Flex, null,
+                        React.createElement(icons_1.Icon, { name: ((_d = (_c = params.data) === null || _c === void 0 ? void 0 : _c.sortOrder) === null || _d === void 0 ? void 0 : _d.sort) === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
+                        ' ',
+                        React.createElement(PropertyOrderText, null, (_g = (_f = (_e = params.data) === null || _e === void 0 ? void 0 : _e.sortOrder) === null || _f === void 0 ? void 0 : _f.index) !== null && _g !== void 0 ? _g : '')));
+                },
+            },
+            filter: {
+                header: 'Filter',
+                field: 'filter',
+                align: 'center',
+                minWidth: 50,
+                render: (params) => {
+                    var _a;
+                    if (!((_a = params.data) === null || _a === void 0 ? void 0 : _a.filter)) {
+                        return React.createElement(React.Fragment, null);
+                    }
+                    return React.createElement(CheckBox_1.CheckBox, { checked: true });
+                },
+            },
+            group: {
+                header: 'Group',
+                minWidth: 50,
+                field: 'columnGroupping',
+                align: 'center',
+                render: (params) => {
+                    var _a;
+                    if (!params.data.grouping) {
+                        return React.createElement(React.Fragment, null);
+                    }
+                    return (React.createElement(rebass_1.Flex, null,
+                        React.createElement(CheckBox_1.CheckBox, { margin: 0, mr: 1, checked: true }),
+                        React.createElement(PropertyOrderText, null, (_a = params.data) === null || _a === void 0 ? void 0 : _a.grouping)));
+                },
+            },
+        };
+    }, []);
+    const tableDOMProps = {
+        style: {
+            height: '100%',
+            minWidth: '10rem',
+            minHeight: tableHeight,
+        },
+    };
+    return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "columnId" },
+        React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+                default: {
+                    defaultFlex: 1,
+                },
+            }, rowHeight: rowHeight, domProps: tableDOMProps, columns: columns })));
+};
+exports.ColumnsSectionSummary = ColumnsSectionSummary;
+const ColumnRow = (props) => {
+    var _a, _b, _c, _d;
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    const adaptable = AdaptableContext_1.useAdaptable();
+    // headers
+    const initialHeader = adaptable.api.columnApi.getFriendlyNameFromColumnId(props.column.columnId);
+    const customHeader = (_b = (_a = props.layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[props.column.columnId]) !== null && _b !== void 0 ? _b : '';
+    // column pinning
+    const columnPinning = ((_c = props.layout.PinnedColumnsMap) === null || _c === void 0 ? void 0 : _c[props.column.columnId]) || 'None';
+    const pinningOptions = [
+        { value: 'None', label: 'None', onClick: () => props.onPinChange(props.column.columnId, null) },
+        {
+            value: 'left',
+            label: 'Left',
+            onClick: () => props.onPinChange(props.column.columnId, 'left'),
+        },
+        {
+            value: 'right',
+            label: 'Right',
+            onClick: () => props.onPinChange(props.column.columnId, 'right'),
+        },
+    ];
+    // behaviour
+    const behaviourHeader = 'Column ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviours');
+    // width
+    const columnWidth = (_d = props.layout.ColumnWidthMap) === null || _d === void 0 ? void 0 : _d[props.column.columnId];
+    return (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow" },
+        React.createElement(rebass_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header", mt: 1, mb: 1, onClick: () => setIsExpanded(!isExpanded) },
+            React.createElement(rebass_1.Flex, { mr: 2, alignItems: "center" }, initialHeader),
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
+                "Group: ",
+                props.column.columnGroup.friendlyName)) : null,
+            React.createElement(rebass_1.Flex, { mr: 2 },
+                React.createElement(ColumnLabels_1.ColumnLabels, { showTitle: false, sortable: props.column.sortable, filterable: props.column.filterable, pivotable: props.column.pivotable, moveable: props.column.moveable, groupable: props.column.groupable, aggregatable: props.column.aggregatable })),
+            React.createElement(rebass_1.Box, { flex: 1 }),
+            React.createElement(SimpleButton_1.default, { ml: 10, padding: 0, iconSize: 24, variant: "text", onClick: () => setIsExpanded(!isExpanded), icon: isExpanded ? 'triangle-up' : 'triangle-down' })),
+        isExpanded && (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
+            React.createElement(rebass_1.Flex, { mb: 2 },
+                React.createElement(FormLayout_1.default, { width: "100%", mr: 3 },
+                    React.createElement(FormLayout_1.FormRow, { label: "Column ID" },
+                        React.createElement(Tag_1.Tag, null, props.column.friendlyName)),
+                    React.createElement(FormLayout_1.FormRow, { label: "Header" },
+                        React.createElement(Input_1.default, { className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
+                                props.onColumnNameChange(props.column.columnId, event.target.value);
+                            }, value: customHeader })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Width" },
+                        React.createElement(Input_1.default, { className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", onChange: (event) => {
+                                let value = parseFloat(event.target.value);
+                                value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                props.onColumnWidthChange(props.column.columnId, value);
+                            }, value: columnWidth })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Pinning" },
+                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
+};
+const ColumnsSection = (props) => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const allColumns = adaptable.api.columnApi.getColumns();
+    const sortedColumns = React.useMemo(() => {
+        return sortWithOrder_1.sortWithOrderArray(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+    }, [layout, allColumns]);
+    const handlePinChange = (columnId, pinning) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { PinnedColumnsMap: Object.assign(Object.assign({}, layout.PinnedColumnsMap), { [columnId]: pinning }) }));
+    };
+    const handleColumnNameChange = (columnId, headerName) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { ColumnHeadersMap: Object.assign(Object.assign({}, layout.ColumnHeadersMap), { [columnId]: headerName }) }));
+    };
+    const handleColumnsChange = (columnIds) => {
+        var _a, _b;
+        const oldColumns = (_a = layout.Columns.map((colId) => adaptable.api.columnApi.getColumnFromId(colId))) !== null && _a !== void 0 ? _a : [];
+        const newColumns = (_b = columnIds.map((colId) => adaptable.api.columnApi.getColumnFromId(colId))) !== null && _b !== void 0 ? _b : [];
+        if (!AdaptableColumn_1.isValidOrderForColumnGroups({ oldColumns, newColumns })) {
+            return;
+        }
+        props.onChange(Object.assign(Object.assign({}, layout), { Columns: columnIds }));
+    };
+    const handleColumnWidthChange = (columnId, width) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { ColumnWidthMap: Object.assign(Object.assign({}, layout.ColumnWidthMap), { [columnId]: width }) }));
+    };
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Flex, { mt: 2, mb: 3 },
+                React.createElement(ColumnLabels_1.ColumnLabels, { flexDirection: "row", showBoth: false, labels: {
+                        Sortable: 'Sortable',
+                        Filterable: 'Filterable',
+                        Aggregatable: 'Shows Aggregations',
+                        Groupable: 'Groupable',
+                        Moveable: 'Moveable',
+                        Pivotable: 'Pivotable',
+                    }, sortable: true, filterable: true, moveable: true, pivotable: true, groupable: true, aggregatable: true })),
+            React.createElement(ValueSelector_1.ValueSelector, { showSelectedOnlyPosition: "top", showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (option) => (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onPinChange: handlePinChange, layout: layout, column: option })), options: sortedColumns, value: layout.Columns, allowReorder: true, xSelectedLabel: () => {
+                    return `Selected Columns:`;
+                }, onChange: handleColumnsChange }))));
+};
+exports.ColumnsSection = ColumnsSection;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const FilterSectionSummary: React.FunctionComponent;
+interface FilterSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const FilterSection: React.FunctionComponent<FilterSectionProps>;
+export {};

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterSection = exports.FilterSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ModuleConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/ModuleConstants"));
+const Tabs_1 = require("../../../../components/Tabs");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const AdaptableObjectList_1 = require("../../../Components/AdaptableObjectList/AdaptableObjectList");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const getLayoutFilterViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems");
+const Tag_1 = require("../../../../components/Tag");
+const FilterSectionSummary = () => {
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const fitlerViewItems = getLayoutFilterViewItems_1.getLayoutFilterViewItems(layout, adaptable.api);
+    return (React.createElement(rebass_1.Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag_1.Tag, null, "No Filters"))));
+};
+exports.FilterSectionSummary = FilterSectionSummary;
+const FilterSection = (props) => {
+    var _a;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.FilterModuleId);
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const layoutFilters = (_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [];
+    const handleDelete = React.useCallback((columnFilter) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: layoutFilters.filter((layoutFilter) => layoutFilter.ColumnId !== columnFilter.ColumnId) }));
+    }, [layout]);
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column Filters"),
+        React.createElement(Tabs_1.Tabs.Content, null, (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) ? (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { abObject: columnFilter, entityType: "Filter", showActions: true, showEditButton: false, items: filterModule.toView(columnFilter).items, onDelete: () => handleDelete(columnFilter) }))))) : (React.createElement(rebass_1.Box, null,
+            React.createElement(Tag_1.Tag, null, "No Column Filters are applied. Filters are set using the grid."))))));
+};
+exports.FilterSection = FilterSection;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Layout } from '../../../../types';
+export declare const PivotColumnsSectionSummary: React.FunctionComponent;
+interface PivotColumnsSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const PivotColumnsSection: React.FunctionComponent<PivotColumnsSectionProps>;
+export {};

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotColumnsSection = exports.PivotColumnsSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Utilities_1 = require("./Utilities");
+const PivotColumnsSectionSummary = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    return (React.createElement(rebass_1.Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, layout.PivotColumns.length ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Column Pivoting"))));
+};
+exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
+const PivotColumnsSection = (props) => {
+    var _a;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
+    const sortedPivotColumns = React.useMemo(() => {
+        var _a;
+        return sortWithOrder_1.sortWithOrderArray(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+    }, [layout, allPivotColumns]);
+    const handleColumnsChange = (columnIds) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { PivotColumns: columnIds }));
+    };
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Pivot Columns"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedPivotColumns, value: (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], allowReorder: true, xSelectedLabel: () => {
+                    return `Selected Columns:`;
+                }, onChange: handleColumnsChange }))));
+};
+exports.PivotColumnsSection = PivotColumnsSection;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const RowGroupingSectionSummary: React.FunctionComponent;
+interface RowGroupingSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const RowGroupingSection: React.FunctionComponent<RowGroupingSectionProps>;
+export {};