@adaptabletools/adaptable-cjs 19.2.3 → 20.0.0-canary.0

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

@@ -21,36 +21,41 @@ const CheckBox_1 = require("../../../../components/CheckBox");
 const Helper_1 = require("../../../../Utilities/Helpers/Helper");
 const ColumnLabels_1 = require("../Components/ColumnLabels");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
+const ColumnApiImpl_1 = require("../../../../Api/Implementation/ColumnApiImpl");
+const ReorderDraggable_1 = require("../../../Components/ReorderDraggable");
+const AdaptableFormControlTextClear_1 = require("../../../Components/Forms/AdaptableFormControlTextClear");
+const sortColumnIdsByOrder_1 = require("../../../../layout-manager/src/sortColumnIdsByOrder");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const PropertyOrderText = (props) => (React.createElement(rebass_1.Text, { fontWeight: 600, fontSize: 2 }, props.children));
 const ColumnsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const rowHeight = 40;
     const headerHeight = 40;
-    const tableHeight = headerHeight + (0, Helper_1.clamp)(rowHeight * layout.Columns.length, 100, 360);
+    const ColumnIds = layout.TableColumns || layout.PivotColumns || [];
+    const tableHeight = headerHeight + (0, Helper_1.clamp)(rowHeight * ColumnIds.length, 100, 360);
     const data = React.useMemo(() => {
-        return layout.Columns.map((columnId) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            if (adaptable.api.columnApi.isAutoPivotColumn(columnId) ||
+        return ColumnIds.map((columnId) => {
+            if (adaptable.api.columnApi.isPivotResultColumn(columnId) ||
                 adaptable.api.columnApi.isAutoRowGroupColumn(columnId)) {
                 return null;
             }
-            const friendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(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];
-            let agg = (_e = layout.AggregationColumns) === null || _e === void 0 ? void 0 : _e[columnId];
+            const friendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout);
+            const header = layout.ColumnHeaders?.[columnId] ?? '';
+            const columnWidth = layout.ColumnWidths?.[columnId];
+            const columnPinning = layout.ColumnPinning?.[columnId];
+            let agg = (layout.TableAggregationColumns || []).find((agg) => agg.ColumnId === columnId)?.AggFunc;
             agg = typeof agg === 'object' ? agg.type : agg;
-            const sortIndex = ((_f = layout === null || layout === void 0 ? void 0 : layout.ColumnSorts) !== null && _f !== void 0 ? _f : []).findIndex((sort) => sort.ColumnId === columnId);
+            const sortIndex = (layout?.ColumnSorts ?? []).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,
+                    sort: layout.ColumnSorts[sortIndex]?.SortOrder ?? 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);
+            let grouping = layout.RowGroupedColumns?.indexOf?.(columnId);
             grouping = grouping != -1 ? grouping + 1 : null;
-            const filter = (_l = layout.ColumnFilters) === null || _l === void 0 ? void 0 : _l.find((colFilter) => colFilter.ColumnId === columnId);
+            const filter = layout.ColumnFilters?.find((colFilter) => colFilter.ColumnId === columnId);
             return {
                 columnId,
                 agg,
@@ -78,14 +83,13 @@ const ColumnsSectionSummary = () => {
                 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)) {
+                    if (!params.data?.sortOrder?.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(icons_1.Icon, { name: params.data?.sortOrder?.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 : '')));
+                        React.createElement(PropertyOrderText, null, params.data?.sortOrder?.index ?? '')));
                 },
             },
             filter: {
@@ -94,8 +98,7 @@ const ColumnsSectionSummary = () => {
                 align: 'center',
                 minWidth: 50,
                 render: (params) => {
-                    var _a;
-                    if (!((_a = params.data) === null || _a === void 0 ? void 0 : _a.filter)) {
+                    if (!params.data?.filter) {
                         return React.createElement(React.Fragment, null);
                     }
                     return React.createElement(CheckBox_1.CheckBox, { checked: true });
@@ -107,13 +110,12 @@ const ColumnsSectionSummary = () => {
                 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)));
+                        React.createElement(PropertyOrderText, null, params.data?.grouping)));
                 },
             },
         };
@@ -134,14 +136,13 @@ const ColumnsSectionSummary = () => {
 };
 exports.ColumnsSectionSummary = ColumnsSectionSummary;
 const ColumnRow = (props) => {
-    var _a, _b, _c, _d;
     const [isExpanded, setIsExpanded] = React.useState(false);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    // headers
-    const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(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 : initialHeader;
+    const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
+    const isRowGroupColumn = adaptable.api.columnApi.isAutoRowGroupColumn(props.column.columnId);
+    const customHeader = props.layout.ColumnHeaders?.[props.column.columnId] ?? initialHeader;
     // column pinning
-    const columnPinning = ((_c = props.layout.PinnedColumnsMap) === null || _c === void 0 ? void 0 : _c[props.column.columnId]) || 'None';
+    const columnPinning = props.layout.ColumnPinning?.[props.column.columnId] || 'None';
     const pinningOptions = [
         { value: 'None', label: 'None', onClick: () => props.onPinChange(props.column.columnId, null) },
         {
@@ -155,13 +156,20 @@ const ColumnRow = (props) => {
             onClick: () => props.onPinChange(props.column.columnId, 'right'),
         },
     ];
-    // behaviour
-    const behaviourHeader = 'Column ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviours');
+    const { column } = props;
     // width
-    const columnWidth = (_d = props.layout.ColumnWidthMap) === null || _d === void 0 ? void 0 : _d[props.column.columnId];
+    const columnWidth = props.layout.ColumnWidths?.[column.columnId];
+    const visible = (props.layout.TableColumns.includes(column.columnId) &&
+        props.layout.ColumnVisibility?.[column.columnId] !== false) ||
+        isRowGroupColumn;
     return (React.createElement(rebass_1.Box, { "data-name": props.column.columnId, 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),
+            React.createElement(CheckBox_1.CheckBox, { "data-name": column.columnId, onChange: (checked) => {
+                    props.onColumnVisibilityChange(column.columnId, checked);
+                }, disabled: column.hideable === false || isRowGroupColumn, onClick: (event) => {
+                    event.stopPropagation();
+                }, checked: visible }),
+            React.createElement(rebass_1.Flex, { ml: 2, mr: 2, alignItems: "center", "data-name": "column-label" }, 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 },
                 "Column Group: ",
                 props.column.columnGroup.friendlyName)) : null,
@@ -190,31 +198,151 @@ const ColumnRow = (props) => {
 const ColumnsSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const allColumns = adaptable.api.columnApi.getStandardColumns();
-    const sortedColumns = React.useMemo(() => {
-        return ArrayExtensions_1.default.sortArrayWithOrder(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(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.getColumnWithColumnId(colId))) !== null && _a !== void 0 ? _a : [];
-        const newColumns = (_b = columnIds.map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId))) !== null && _b !== void 0 ? _b : [];
+    const [searchInputValue, setSearchInputValue] = React.useState('');
+    // we don't want to rely on all the columns from the Grid itself
+    // since the "Row Groups" section of the editor can determine a change
+    // which is not reflected into AG Grid until we hit finish
+    //
+    // so we only rely on non-generated columns, which are the same
+    const allColumns = adaptable.api.columnApi.getUIAvailableColumns().filter((col) => {
+        return !col.isGeneratedRowGroupColumn;
+    });
+    // however, changes in RowGroupedColumns done in the previous step
+    // are reflected into the layout, so we use the latest layout.RowGroupedColumns
+    // to create new columns
+    if (layout.RowGroupedColumns) {
+        if (layout.RowGroupDisplayType === 'single') {
+            allColumns.unshift((0, ColumnApiImpl_1.generateAutoRowGroupSingleColumn)());
+        }
+        else {
+            [...layout.RowGroupedColumns].reverse().forEach((col) => {
+                const groupCol = (0, ColumnApiImpl_1.generateAutoRowGroupColumnForColumn)(adaptable.api.columnApi.getColumnWithColumnId(col));
+                allColumns.unshift(groupCol);
+            });
+        }
+    }
+    if (adaptable.api.gridApi.isTreeDataGrid()) {
+        allColumns.unshift((0, ColumnApiImpl_1.generateAutoTreeSingleColumn)());
+    }
+    const colIdToCol = allColumns.reduce((acc, col) => {
+        if (col) {
+            acc[col.columnId] = col;
+        }
+        return acc;
+    }, {});
+    const TableColumns = layout.TableColumns;
+    const ColumnOrderAllColumns = ArrayExtensions_1.default.sortArrayWithOrder(allColumns.map((col) => col.columnId), TableColumns, { sortUnorderedItems: false }).map((colId) => colIdToCol[colId]);
+    const currentOrder = searchInputValue
+        ? ColumnOrderAllColumns.filter((col) => {
+            return (0, Utilities_1.columnFilter)(col, searchInputValue);
+        })
+        : ColumnOrderAllColumns;
+    const handleColumnsChange = (newColumns) => {
+        if (searchInputValue) {
+            // there's a search in-place
+            // so the current `newColumns` does not actually contain all the columns
+            // so we need to recompute it
+            const newOrder = (0, sortColumnIdsByOrder_1.sortColumnIdsByOrder)(
+            // given those are all the columns
+            ColumnOrderAllColumns.map((col) => col.columnId), 
+            // we want to sort them to have this new order
+            // - this sorting will leave all ids not found in this new order untouched
+            newColumns.map((col) => col.columnId));
+            // so basically we now have the correct order, with all columns
+            newColumns = newOrder.map((colId) => colIdToCol[colId]);
+        }
+        const oldColumns = ColumnOrderAllColumns;
+        const columnIds = newColumns.map((col) => col.columnId);
         if (!(0, AdaptableColumn_1.isValidOrderForColumnGroups)({ oldColumns, newColumns })) {
             return;
         }
-        props.onChange(Object.assign(Object.assign({}, layout), { Columns: columnIds }));
+        const ColumnVisibility = { ...layout.ColumnVisibility };
+        const columnOrderSet = new Set(TableColumns);
+        columnIds.forEach((colId) => {
+            if (!columnOrderSet.has(colId)) {
+                ColumnVisibility[colId] = false;
+            }
+        });
+        props.onChange({
+            ...layout,
+            TableColumns: columnIds,
+            ColumnVisibility,
+        });
+    };
+    const handleColumnVisibilityChange = (columnId, visible) => {
+        const ColumnVisibility = { ...layout.ColumnVisibility };
+        let TableColumns = [...layout.TableColumns];
+        if (visible) {
+            delete ColumnVisibility[columnId];
+        }
+        else {
+            ColumnVisibility[columnId] = false;
+        }
+        const columnIds = ColumnOrderAllColumns.map((col) => col.columnId);
+        const idsToIndexes = new Map(columnIds.map((colId, index) => [colId, index]));
+        const columnOrderSet = new Set(TableColumns);
+        if (!columnOrderSet.has(columnId)) {
+            TableColumns = columnIds.filter((colId) => {
+                const isCurrent = columnOrderSet.has(colId);
+                if (isCurrent) {
+                    return true;
+                }
+                // include all columns past the current column order
+                // that reach until the index of the currently checked column
+                const shouldInclude = idsToIndexes.get(colId) <= idsToIndexes.get(columnId);
+                if (shouldInclude) {
+                    if (colId !== columnId && visible) {
+                        // this is a column that's between the current column order limit
+                        // and the currently checked column
+                        // so we need to include it in order
+                        // but make it invisible
+                        ColumnVisibility[colId] = false;
+                    }
+                }
+                return shouldInclude;
+            });
+        }
+        props.onChange({
+            ...layout,
+            TableColumns: TableColumns,
+            ColumnVisibility,
+        });
+    };
+    const handlePinChange = (columnId, pinning) => {
+        props.onChange({
+            ...layout,
+            ColumnPinning: {
+                ...layout.ColumnPinning,
+                [columnId]: pinning,
+            },
+        });
+    };
+    const handleColumnNameChange = (columnId, headerName) => {
+        props.onChange({
+            ...layout,
+            ColumnHeaders: {
+                ...layout.ColumnHeaders,
+                [columnId]: headerName,
+            },
+        });
     };
     const handleColumnWidthChange = (columnId, width) => {
-        props.onChange(Object.assign(Object.assign({}, layout), { ColumnWidthMap: Object.assign(Object.assign({}, layout.ColumnWidthMap), { [columnId]: width }) }));
+        props.onChange({
+            ...layout,
+            ColumnWidths: {
+                ...layout.ColumnWidths,
+                [columnId]: width,
+            },
+        });
     };
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+    const visibleIds = layout.TableColumns.filter((colId) => {
+        return layout.ColumnVisibility?.[colId] !== false;
+    });
+    const toLabel = (colId) => adaptable.api.columnApi.getFriendlyNameForColumnId(colId, layout);
+    const toIdentifier = (colId) => colId;
+    return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs_1.Tabs.Content, null,
+        React.createElement(Tabs_1.Tabs.Content, { style: { overflow: 'hidden' } },
             React.createElement(rebass_1.Flex, { mt: 2, mb: 3 },
                 React.createElement(ColumnLabels_1.ColumnLabels, { flexDirection: "row", showBoth: false, labels: {
                         Sortable: 'Sortable',
@@ -224,8 +352,41 @@ const ColumnsSection = (props) => {
                         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: () => {
+            React.createElement(rebass_1.Flex, { mb: 1, alignItems: "center", flexDirection: "row" },
+                React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { border: 0, margin: 3, width: '100%' } }),
+                React.createElement(rebass_1.Box, { flex: 1 })),
+            React.createElement(HelpBlock_1.default, { mb: 1, fontSize: 2, display: 'flex', "data-name": "column-help", alignItems: 'center' },
+                React.createElement(rebass_1.Box, null,
+                    React.createElement(icons_1.NaturallySizedIcon, { name: "info" })),
+                React.createElement(rebass_1.Text, { ml: 1 }, "Expand each Column to set Width, Pinnning and a custom Header")),
+            React.createElement(ReorderDraggable_1.ReorderDraggable, { toIdentifier: (option) => `${option.columnId}`, order: currentOrder, renderOption: (option) => {
+                    return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
+                }, onChange: handleColumnsChange }),
+            (0, ValueSelector_1.renderSelectionSection)({
+                options: visibleIds,
+                value: visibleIds,
+                toLabel,
+                toIdentifier,
+                isOptionDisabled: (colId) => adaptable.api.columnApi.isAutoRowGroupColumn(colId) ||
+                    adaptable.api.columnApi.getColumnWithColumnId(colId)?.hideable === false,
+                xSelectedLabel: () => {
                     return `Selected Columns:`;
-                }, onChange: handleColumnsChange }))));
+                },
+                noSelectionLabel: `No Columns Selected`,
+                onChange: handleColumnsChange,
+                onSelectAll: () => {
+                    props.onChange({
+                        ...layout,
+                        ColumnVisibility: {},
+                        TableColumns: ColumnOrderAllColumns.map((col) => col.columnId),
+                    });
+                },
+                onClear: () => {
+                    handleColumnsChange([]);
+                },
+                onClearOption: (colId) => {
+                    handleColumnVisibilityChange(colId, false);
+                },
+            }))));
 };
 exports.ColumnsSection = ColumnsSection;

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

@@ -4,19 +4,18 @@ exports.FilterSection = exports.FilterSectionSummary = exports.isColumnFiltersVa
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
+const getLayoutFilterViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems");
 const ModuleConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/ModuleConstants"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
 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 PredicateEditor_1 = require("../../../Components/PredicateEditor/PredicateEditor");
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const ColumnSelector_1 = require("../../../Components/Selectors/ColumnSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const LayoutColumnFilter_1 = require("../../../Components/ColumnFilter/LayoutColumnFilter");
 const isColumnFiltersValid = (layout) => {
-    var _a, _b;
-    const invalidColumnFilters = (_b = ((_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.filter((columnFilter) => { var _a; return !((_a = columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
+    const invalidColumnFilters = (layout.ColumnFilters ?? [])?.filter((columnFilter) => !columnFilter?.Predicates[0]?.PredicateId);
     if (invalidColumnFilters.length > 0) {
         return 'Please select a Predicate for each Column Filter';
     }
@@ -31,52 +30,51 @@ const FilterSectionSummary = () => {
 };
 exports.FilterSectionSummary = FilterSectionSummary;
 const FilterSection = (props) => {
-    var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.ColumnFilterModuleId);
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const layoutFilters = (_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [];
+    const layoutFilters = layout.ColumnFilters ?? [];
     const handleDelete = React.useCallback((columnFilter) => {
-        props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: layoutFilters.filter((layoutFilter) => layoutFilter.ColumnId !== columnFilter.ColumnId) }));
+        props.onChange({
+            ...layout,
+            ColumnFilters: layoutFilters.filter((layoutFilter) => layoutFilter.ColumnId !== columnFilter.ColumnId),
+        });
     }, [layout]);
-    const handlePredicateEdit = React.useCallback((predicate, columnFilter) => {
-        props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId
-                ? Object.assign(Object.assign({}, columnFilter), { Predicate: predicate }) : layoutFilter) }));
+    const handlePredicateEdit = React.useCallback((columnFilter) => {
+        props.onChange({
+            ...layout,
+            ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId ? { ...columnFilter } : layoutFilter),
+        });
     }, [layout.ColumnFilters]);
-    const columnsOptions = React.useMemo(() => adaptable.api.columnApi
-        .getFilterableColumns()
-        .filter((abColumn) => {
-        var _a;
-        return !((_a = layout.ColumnFilters) === null || _a === void 0 ? void 0 : _a.some((columnFilter) => abColumn.columnId === columnFilter.ColumnId));
-    })
-        .map(({ columnId }) => ({
-        label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId),
-        value: columnId,
-    })), [layout, layoutFilters]);
     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,
             React.createElement(FormLayout_1.default, { mb: 2 },
                 React.createElement(FormLayout_1.FormRow, { label: "Add Column Filter" },
                     React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select Column to create Filter", onChange: (option) => {
-                            props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
+                            props.onChange({
+                                ...layout,
+                                ColumnFilters: [
                                     ...layoutFilters,
                                     {
                                         ColumnId: option,
-                                        Predicate: null,
+                                        Predicates: [],
                                     },
-                                ] }));
+                                ],
+                            });
                         } }))),
-            (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
-                const predicateDefs = adaptable.api.columnFilterApi.getFilterPredicateDefsForColumnId(columnFilter.ColumnId);
+            layoutFilters?.length > 0 && (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
                 const items = [
                     ...filterModule.toView(columnFilter).items,
                     {
                         name: 'Column Filter',
-                        view: (React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnFilter.ColumnId, predicate: columnFilter.Predicate, predicateDefs: predicateDefs, onChange: (predicate) => handlePredicateEdit(predicate, columnFilter), onClear: () => handlePredicateEdit(null, columnFilter) })),
+                        view: (React.createElement(LayoutColumnFilter_1.LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
+                                handlePredicateEdit(columnFilter);
+                            } })),
                     },
                 ];
                 return (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
-            }))))));
+            }))),
+            ' ')));
 };
 exports.FilterSection = FilterSection;

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

@@ -4,7 +4,6 @@ exports.GridFilterSection = exports.GridFilterSectionSummary = exports.isGridFil
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const Tabs_1 = require("../../../../components/Tabs");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../../components/Tag");
@@ -12,10 +11,8 @@ const ExpressionEditor_1 = require("../../../../components/ExpressionEditor");
 const ModuleConstants_1 = require("../../../../Utilities/Constants/ModuleConstants");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
 const useGridFilterOptionsForExpressionEditor_1 = require("../../../GridFilter/useGridFilterOptionsForExpressionEditor");
-const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const isGridFiltersValid = (layout, api) => {
-    var _a;
-    const expression = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression;
+    const expression = layout?.GridFilter?.Expression;
     if (StringExtensions_1.default.IsNullOrEmpty(expression)) {
         return true;
     }
@@ -24,23 +21,24 @@ const isGridFiltersValid = (layout, api) => {
 };
 exports.isGridFiltersValid = isGridFiltersValid;
 const GridFilterSectionSummary = () => {
-    var _a, _b;
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Box, null, React.createElement(Tag_1.Tag, { mb: 1, mr: 1 }, (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : 'No Grid Filter')));
+    return (React.createElement(rebass_1.Box, null, React.createElement(Tag_1.Tag, { mb: 1, mr: 1 }, layout?.GridFilter?.Expression ?? 'No Grid Filter')));
 };
 exports.GridFilterSectionSummary = GridFilterSectionSummary;
 const GridFilterSection = (props) => {
-    var _a, _b;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const expressionEditorProps = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
-    const expressionEditorContent = (React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '', onChange: (expression) => {
-            props.onChange(Object.assign(Object.assign({}, layout), { GridFilter: Object.assign(Object.assign({}, layout.GridFilter), { Expression: expression }) }));
-        }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })));
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Grid Filter"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(Panel_1.default, null, expressionEditorContent))));
+    const expressionEditorContent = (React.createElement(ExpressionEditor_1.ExpressionEditor, { ...expressionEditorProps, allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: layout?.GridFilter?.Expression ?? '', onChange: (expression) => {
+            props.onChange({
+                ...layout,
+                GridFilter: {
+                    ...layout.GridFilter,
+                    Expression: expression,
+                },
+            });
+        }, initialData: initialData, columns: api.columnApi.getQueryableColumns().filter((c) => !c.isGeneratedPivotResultColumn), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }));
+    return React.createElement("div", null, expressionEditorContent);
 };
 exports.GridFilterSection = GridFilterSection;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Layout, PivotLayout } from '../../../../../types';
+export declare const isAggregationsSectionValid: (data: Layout) => true | string;
+export declare const PivotAggregationsSectionSummary: React.FunctionComponent;
+interface PivotAggregationsSectionProps {
+    onChange: (data: PivotLayout) => void;
+}
+export declare const PivotAggregationsSection: React.FunctionComponent<PivotAggregationsSectionProps>;
+export {};