@adaptabletools/adaptable 12.0.9 → 12.1.0-canary.0

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 {};

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowGroupingSection = exports.RowGroupingSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Utilities_1 = require("./Utilities");
+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 RowGroupingSectionSummary = () => {
+    var _a;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    return (React.createElement(rebass_1.Box, null, ((_a = layout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.RowGroupedColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Row Grouping"))));
+};
+exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
+const RowGroupingSection = (props) => {
+    var _a, _b, _c;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
+    const sortedGroupableColumns = React.useMemo(() => {
+        var _a;
+        return sortWithOrder_1.sortWithOrderArray(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+    }, [layout, allGroupableColumns]);
+    const handleColumnsChange = (columnIds) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { RowGroupedColumns: columnIds }));
+    };
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Grouped Rows"),
+        ((_a = layout.ExpandedRowGroupValues) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(Tabs_1.Tabs.Tab, null, "Expanded Rows"),
+        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: sortedGroupableColumns, value: (_b = layout.RowGroupedColumns) !== null && _b !== void 0 ? _b : [], allowReorder: true, xSelectedLabel: () => {
+                    return `Selected Columns:`;
+                }, onChange: handleColumnsChange })),
+        ((_c = layout.ExpandedRowGroupValues) === null || _c === void 0 ? void 0 : _c.length) && (React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Box, { backgroundColor: "var(--ab-color-defaultbackground)" },
+                React.createElement(FormLayout_1.default, { p: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: "Values" }, layout.ExpandedRowGroupValues.map((value, index) => (React.createElement(Tag_1.Tag, { mb: 2, mr: 2, key: index }, value))))))))));
+};
+exports.RowGroupingSection = RowGroupingSection;

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

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

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsSection = exports.SettingsSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const SettingsSectionSummary = () => {
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(Tag_1.Tag, { mr: 2 },
+            "Layout Name: ",
+            layout.Name),
+        React.createElement(Tag_1.Tag, { mr: 2 },
+            "Pivot Layout: ",
+            layout.EnablePivot ? 'Yes' : 'No'),
+        React.createElement(Tag_1.Tag, { mr: 2 },
+            "Suppress Aggregation Function in Header: ",
+            layout.SuppressAggFuncInHeader ? 'Yes' : 'No')));
+};
+exports.SettingsSectionSummary = SettingsSectionSummary;
+const SettingsSection = (props) => {
+    var _a;
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const onNameChange = (event) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { Name: event.target.value }));
+    };
+    const handlePivotChange = (checked) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { EnablePivot: checked }));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs_1.Tabs, { mb: 3 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, { width: "100%", style: { maxWidth: 300 } },
+                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                            React.createElement(Input_1.default, { width: "100%", "data-name": "layout-name", onChange: onNameChange, value: (_a = layout === null || layout === void 0 ? void 0 : layout.Name) !== null && _a !== void 0 ? _a : '' })))))),
+        React.createElement(Tabs_1.Tabs, { mb: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Grid Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    React.createElement(Radio_1.default, { onClick: () => handlePivotChange(false), checked: !Boolean(layout.EnablePivot) }, "Table"),
+                    React.createElement(Radio_1.default, { onClick: () => handlePivotChange(true), checked: Boolean(layout.EnablePivot) }, "Pivot"))))));
+};
+exports.SettingsSection = SettingsSection;

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

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

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortSection = exports.SortSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const getLayoutSortViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutSortViewItems");
+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 SortSectionSummary = () => {
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const sortViewItems = getLayoutSortViewItems_1.getLayoutSortViewItems(layout, adaptable.api);
+    return (React.createElement(rebass_1.Box, null, sortViewItems.values.length ? (sortViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag_1.Tag, null, "No Sorts"))));
+};
+exports.SortSectionSummary = SortSectionSummary;
+const ColumnRow = (props) => {
+    var _a, _b, _c;
+    const SortOrder = (_c = ((_b = (_a = props.layout) === null || _a === void 0 ? void 0 : _a.ColumnSorts) !== null && _b !== void 0 ? _b : []).find((sort) => sort.ColumnId === props.column.columnId)) === null || _c === void 0 ? void 0 : _c.SortOrder;
+    const icon = SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
+    return (React.createElement(rebass_1.Box, null,
+        props.column.friendlyName,
+        SortOrder && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
+};
+const SortSection = (props) => {
+    var _a;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const allSortableColumns = adaptable.api.columnApi.getSortableColumns().filter((column) => {
+        // filter out columns that are not in the layout
+        return layout.Columns.includes(column.columnId);
+    });
+    const sortedSortColumns = React.useMemo(() => {
+        var _a;
+        return sortWithOrder_1.sortWithOrderArray(allSortableColumns.map((col) => col.columnId), ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+    }, [layout, allSortableColumns]);
+    const handleColumnsSelectionChange = React.useCallback((columnIds) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { ColumnSorts: (columnIds || []).map((columnId) => {
+                var _a, _b, _c;
+                const SortOrder = (_c = (_b = (_a = layout.ColumnSorts) === null || _a === void 0 ? void 0 : _a.find((sort) => sort.ColumnId === columnId)) === null || _b === void 0 ? void 0 : _b.SortOrder) !== null && _c !== void 0 ? _c : 'Asc';
+                return {
+                    ColumnId: columnId,
+                    SortOrder: SortOrder,
+                };
+            }) }));
+    }, [layout]);
+    const handleSortChange = React.useCallback((columnId, SortOrder) => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, layout), { ColumnSorts: (_a = layout.ColumnSorts) === null || _a === void 0 ? void 0 : _a.map((sort) => {
+                if (sort.ColumnId === columnId) {
+                    return Object.assign(Object.assign({}, sort), { SortOrder: SortOrder });
+                }
+                return sort;
+            }) }));
+    }, [layout]);
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column Sorts"),
+        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; }, toListLabel: (column) => (React.createElement(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), allowReorder: () => true, xSelectedLabel: () => {
+                    return `Active aggregations:`;
+                }, onChange: handleColumnsSelectionChange }))));
+};
+exports.SortSection = SortSection;