@adaptabletools/adaptable 11.3.0 → 12.0.0-canary.2

package/src/agGrid/Adaptable.d.ts

@@ -18,6 +18,7 @@ import { SelectedRowInfo } from '../PredefinedConfig/Selection/SelectedRowInfo';
 import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
+import { AdaptableColumnType } from '../types';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
 import { LicenseService } from '../Utilities/Services/LicenseService';
@@ -61,6 +62,7 @@ export declare class Adaptable implements IAdaptable {
     embedColumnMenu: boolean;
     gridOptions: GridOptions;
     isInitialised: boolean;
+    hasAdaptableToolPanel: boolean;
     private useRowNodeLookUp;
     private abContainerElement;
     private gridContainerElement;
@@ -119,6 +121,7 @@ export declare class Adaptable implements IAdaptable {
     private initializeAgGrid;
     private isAgGridReady;
     private initAgGridContainerFromInitializedAgGrid;
+    private createAdaptableSideBarDef;
     private createStatusBars;
     getAgGridStatusPanels(): import("@ag-grid-community/all-modules").StatusPanelDef[];
     debouncedSetColumnIntoStore: import("lodash").DebouncedFunc<() => void>;
@@ -238,7 +241,7 @@ export declare class Adaptable implements IAdaptable {
         suppressMovable: boolean;
         headerTooltip: string;
         cellEditor: string | typeof AdaptableNumberEditor | typeof AdaptableDateEditor;
-        type: string[];
+        type: AdaptableColumnType[];
         valueSetter: (params: ValueSetterParams) => any;
         cellRenderer: import("@ag-grid-community/all-modules").ICellRendererFunc;
         valueGetter: (params: ValueGetterParams) => any;
@@ -281,7 +284,6 @@ export declare class Adaptable implements IAdaptable {
     setupColumnCellRenderer({ col, colId, abColumn }: ColumnSetupInfo): void;
     setupColumnTooltipValueGetter({ col, colId }: ColumnSetupInfo): void;
     setupColumnHeader({ col, abColumn }: ColumnSetupInfo): boolean;
-    getUserDefinedHeaderName(columnId: string): string;
     setupColumnFilter({ col, colDef }: ColumnSetupInfo): void;
     setupColumnFloatingFilter({ col, colDef }: ColumnSetupInfo): void;
     setupColumnValueFormatter({ col, abColumn }: ColumnSetupInfo): void;

package/src/agGrid/Adaptable.js

@@ -375,7 +375,7 @@ class Adaptable {
         // Build the default group sort comparator - will get custom sort values (but not functions) in real time
         // TODO: if  a custom 'aggFunc' property is defined (see setupColumnAggFunc()), it won't be evaluated
         if (!this.getInitialGroupOrderComparator(this.gridOptions) &&
-            this.adaptableOptions.generalOptions.autoOrderGroupedColumns) {
+            this.adaptableOptions.columnOptions.autoOrderGroupedColumns) {
             this.gridOptions.initialGroupOrderComparator =
                 this.agGridHelper.runAdaptableGroupComparerFunction();
         }
@@ -455,6 +455,13 @@ class Adaptable {
             }).then(async () => {
                 this.api.internalApi.hideLoadingScreen();
                 this.isInitialised = true;
+                this._adaptableReady = true;
+                // setTimeout(() => {
+                // this.api.eventApi.emit('AdaptableReady', {
+                //   adaptableApi: this.api,
+                //   gridOptions: this.adaptableOptions.gridOptions,
+                // });
+                // }, 0);
             });
             if (this.abContainerElement == null) {
                 this.abContainerElement = this.getAdaptableContainerElement();
@@ -519,16 +526,18 @@ class Adaptable {
             this.performAudit(data.action, data.state, data.newState);
             this.forPlugins((plugin) => plugin.onStoreEvent(eventName, data, this.adaptableStore));
             if (eventName == AdaptableStore_1.INIT_STATE) {
-                this._adaptableReady = true;
                 LoggingHelper_1.LogAdaptableInfo(`Updating obsolete configuration/state`);
                 this.adaptableModules.forEach((m) => m.updateOldConfig());
                 // call stuff here
                 // and reset state also?
                 this.forPlugins((plugin) => plugin.onAdaptableReady(this, this.adaptableOptions));
+                this._adaptableReady = true;
+                // setTimeout(() => {
                 this.api.eventApi.emit('AdaptableReady', {
                     adaptableApi: this.api,
                     gridOptions: this.adaptableOptions.gridOptions,
                 });
+                // }, 0);
             }
         });
     }
@@ -569,39 +578,19 @@ class Adaptable {
             //   this.gridOptions.components.__adaptableGroupCellRenderer = AdaptableGroupCellRenderer;
             // }
         }
-        // Create Adaptable adaptable Tool Panel
-        if (this.adaptableOptions.toolPanelOptions.showAdaptableToolPanel) {
-            if (this.gridOptions.sideBar) {
-                this.gridOptions.sideBar = this.gridOptions.sideBar || {};
-                this.gridOptions.components = this.gridOptions.components || {};
-                // https://www.ag-grid.com/javascript-grid/side-bar/
-                const sidebar = this.gridOptions.sideBar;
-                if (sidebar === true) {
-                    // Possibility 1: Sidebar is true - meaning that they want the default filter and columns, so create both:
-                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(true, true);
-                }
-                else if (sidebar === 'columns') {
-                    // Possibility 2: Sidebar is 'columns' (string) - meaning column only so create just that
-                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(false, true);
-                }
-                else if (sidebar === 'filters') {
-                    // Possibility 3: Sidebar is 'filters' (string) - meaning filters only so create just that
-                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(true, false);
-                }
-                else {
-                    // Possibilty 4: either no sidebar or they created their own; in either case, should add adaptable Tool panel
-                    const sidebarDef = this.gridOptions.sideBar;
-                    if (sidebarDef) {
-                        sidebarDef.toolPanels = sidebarDef.toolPanels || [];
-                        sidebarDef.toolPanels.push(this.agGridHelper.createAdaptableToolPanel());
-                        this.agGridHelper.orderToolPanels(sidebarDef.toolPanels);
-                    }
-                }
-                this.gridOptions.components.AdaptableToolPanel = AdaptableToolPanel_1.getAdaptableToolPanelAgGridComponent(this);
-                if (this.gridOptions.api) {
-                    this.gridOptions.api.setSideBar(this.gridOptions.sideBar);
-                }
+        const adaptableSideBarDef = this.createAdaptableSideBarDef();
+        if (!!adaptableSideBarDef) {
+            this.gridOptions.components = this.gridOptions.components || {};
+            this.gridOptions.components.AdaptableToolPanel = AdaptableToolPanel_1.getAdaptableToolPanelAgGridComponent(this);
+        }
+        if (this.agGridHelper.isSideBarDefObject(adaptableSideBarDef)) {
+            if (this.gridOptions.api) {
+                this.gridOptions.api.setSideBar(adaptableSideBarDef);
+            }
+            else {
+                this.gridOptions.sideBar = adaptableSideBarDef;
             }
+            this.hasAdaptableToolPanel = true;
         }
         this.createStatusBars();
         const checkAgGridContainer = () => {
@@ -683,6 +672,50 @@ class Adaptable {
         }
         return (this.adaptableOptions.containerOptions.agGridContainer = agGridContainer);
     }
+    createAdaptableSideBarDef() {
+        var _a;
+        if (
+        // no need to create the sidebar if it is not enabled
+        !this.gridOptions.sideBar) {
+            return;
+        }
+        if (this.gridOptions.sideBar === true) {
+            // create all tool panels with default settings
+            return {
+                toolPanels: [
+                    GeneralConstants.AGGRID_TOOLPANEL_FILTERS,
+                    GeneralConstants.AGGRID_TOOLPANEL_COLUMNS,
+                    this.agGridHelper.buildAdaptableToolPanelDef(),
+                ],
+            };
+        }
+        else if (typeof this.gridOptions.sideBar === 'string') {
+            // there is only one tool panel, and it's the adaptable one => we have to handle it
+            if (this.gridOptions.sideBar === GeneralConstants.ADAPTABLE_TOOLPANEL_ID) {
+                return {
+                    toolPanels: [this.agGridHelper.buildAdaptableToolPanelDef()],
+                };
+            }
+        }
+        else if (Array.isArray(this.gridOptions.sideBar)) {
+            if (!this.gridOptions.sideBar.includes(GeneralConstants.ADAPTABLE_TOOLPANEL_ID)) {
+                return;
+            }
+            // if it's an array, process the tool panel definitions
+            const sidebarDef = {};
+            sidebarDef.toolPanels = this.agGridHelper.mapToolPanelDefs(this.gridOptions.sideBar);
+            return sidebarDef;
+        }
+        else if (this.agGridHelper.isSideBarDefObject(this.gridOptions.sideBar)) {
+            if ((_a = this.gridOptions.sideBar.toolPanels) === null || _a === void 0 ? void 0 : _a.some((toolpanelDef) => typeof toolpanelDef !== 'string' &&
+                toolpanelDef.id === GeneralConstants.ADAPTABLE_TOOLPANEL_ID)) {
+                // return the boolean flag so that we know that we need the custom AdaptableToolPanel component
+                return true;
+            }
+            // if it's fully-fledged SideBarDef, process its tool panel definitions
+            return Object.assign(Object.assign({}, this.gridOptions.sideBar), { toolPanels: this.agGridHelper.mapToolPanelDefs(this.gridOptions.sideBar.toolPanels) });
+        }
+    }
     createStatusBars() {
         var _a, _b;
         const statusBarOptions = Object.assign({}, this.gridOptions.statusBar);
@@ -1592,7 +1625,7 @@ class Adaptable {
         // see https://www.ag-grid.com/javascript-data-grid/change-detection/#triggering-value-change-detection
         let newValue;
         let dataType = column.dataType;
-        newValue = dataType == Enums_1.DataType.Number ? Number(value) : value;
+        newValue = dataType == 'Number' ? Number(value) : value;
         if (dataType == undefined) {
             return; // no point continuing as probably a wrong  column
         }
@@ -2151,12 +2184,23 @@ class Adaptable {
         }
     }
     getColDefsForRowEditColumns() {
-        var _a;
-        if (!((_a = this.adaptableOptions.userInterfaceOptions.rowActionButtons) === null || _a === void 0 ? void 0 : _a.length)) {
+        const actionRowButtons = this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtons;
+        if (!(actionRowButtons === null || actionRowButtons === void 0 ? void 0 : actionRowButtons.length)) {
             return [];
         }
-        const editButtons = this.adaptableOptions.userInterfaceOptions.rowActionButtons
+        const editButtons = actionRowButtons
             .map((buttonName) => {
+            if (buttonName === 'create') {
+                // we need this dirty hack until ActionColumn support for custom icons is improved
+                const label = rowEditIcons_1.rowAddIcon;
+                return {
+                    label,
+                    tooltip: 'Create',
+                    onClick: () => {
+                        this.api.gridApi.openCreateRowForm();
+                    },
+                };
+            }
             if (buttonName === 'edit') {
                 // we need this dirty hack until ActionColumn support for custom icons is improved
                 const label = rowEditIcons_1.rowEditIcon;
@@ -2203,30 +2247,34 @@ class Adaptable {
             return [];
         }
         const rowEditActionColumn = {
-            columnId: 'adaptableRowEditButtons',
+            columnId: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
             actionColumnButton: editButtons,
         };
         return [
             {
                 headerName: '',
-                colId: 'adaptableRowEditButtons',
+                colId: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
                 hide: false,
                 editable: false,
                 width: editButtons.length * 42,
                 resizable: false,
+                lockVisible: true,
+                suppressColumnsToolPanel: true,
+                suppressFiltersToolPanel: true,
                 suppressMenu: true,
                 suppressMovable: true,
                 filter: false,
                 sortable: false,
                 enableRowGroup: false,
-                pinned: this.adaptableOptions.userInterfaceOptions.rowActionButtonsPosition === 'pinnedRight'
+                pinned: this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtonsPosition ===
+                    'pinnedRight'
                     ? 'right'
                     : 'left',
                 cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
                 cellRendererParams: {
                     actionColumn: rowEditActionColumn,
                 },
-                cellClass: 'adaptableRowEditButtons',
+                cellClass: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
                 type: [GeneralConstants_1.AB_SPECIAL_COLUMN, 'abColDefObject'],
             },
         ];
@@ -2709,6 +2757,7 @@ class Adaptable {
             all_modules_1.Events.EVENT_ROW_GROUP_OPENED,
             all_modules_1.Events.EVENT_COLUMN_VALUE_CHANGED,
         ];
+        // ADD filter event
         this.gridOptions.api.addGlobalListener((this.listenerGlobalColumnEventsThatTriggerAutoLayoutSave = (type) => {
             if (columnEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
                 this.debouncedSaveGridLayout();
@@ -2722,7 +2771,7 @@ class Adaptable {
             if (this.api.internalApi.isGridInPivotMode()) {
                 return;
             }
-            if (this.adaptableOptions.generalOptions.hideColumnWhenGrouped === true &&
+            if (this.adaptableOptions.columnOptions.hideColumnWhenGrouped === true &&
                 params.source !== 'api') {
                 params.columns.forEach((col) => {
                     if (col.isVisible()) {
@@ -2822,7 +2871,7 @@ class Adaptable {
             if (this.isDestroyed) {
                 return true;
             }
-            const columnFilters = this.api.filterApi.getAllColumnFilter();
+            const columnFilters = this.api.filterApi.getColumnFilters();
             const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
             const isQueryActive = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.api.queryApi.getCurrentQuery());
             return (isFilterActive ||
@@ -2853,7 +2902,7 @@ class Adaptable {
             try {
                 // we then assess filters (if running locally)
                 if (evaluateFilterOnClient) {
-                    const columnFilters = this.api.filterApi.getAllColumnFilter();
+                    const columnFilters = this.api.filterApi.getColumnFilters();
                     if (columnFilters.length > 0) {
                         for (const columnFilter of columnFilters) {
                             if (!this.api.filterApi.evaluateColumnFilter(columnFilter, node)) {
@@ -2883,7 +2932,7 @@ class Adaptable {
         this.prepareGrid();
     }
     updateColumnFilterActiveState() {
-        const columnFilters = this.api.filterApi.getAllColumnFilter();
+        const columnFilters = this.api.filterApi.getColumnFilters();
         const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
         const columnsWithActiveFilters = {};
         if (isFilterActive) {
@@ -3216,14 +3265,6 @@ class Adaptable {
         const newColumnHeader = (_b = col === null || col === void 0 ? void 0 : col.getColDef()) === null || _b === void 0 ? void 0 : _b.headerName;
         return previousColumnHeader !== newColumnHeader;
     }
-    getUserDefinedHeaderName(columnId) {
-        const column = this.gridOptions.columnApi.getColumn(columnId);
-        if (!column) {
-            return columnId;
-        }
-        const userHeaderName = this.getUserColDefProperty(column.getColId(), 'headerName');
-        return userHeaderName !== null && userHeaderName !== void 0 ? userHeaderName : StringExtensions_1.StringExtensions.CamelCaseToHumanText(column.getColDef().field);
-    }
     setupColumnFilter({ col, colDef }) {
         this.setColDefProperty(col, 'filter', () => {
             if (!colDef.filter) {
@@ -3703,7 +3744,7 @@ class Adaptable {
     }
     getRowCount() {
         return this.gridOptions.rowData
-            ? this.gridOptions.rowData.length
+            ? this.getGridData().length
             : this.gridOptions.api.getDisplayedRowCount();
     }
     getColumnCount() {
@@ -3920,7 +3961,7 @@ class Adaptable {
     checkColumnsDataTypeSet() {
         // check that we have no unknown columns - if we do then ok
         const colDefs = this.api.columnApi.getColumns();
-        if (colDefs.some((colDef) => colDef.dataType === Enums_1.DataType.Unknown)) {
+        if (colDefs.some((colDef) => colDef.dataType === 'Unknown')) {
             this.updateColumnsIntoStore();
         }
     }
@@ -4099,7 +4140,7 @@ class Adaptable {
         themeClassNamesToRemove.forEach((cssClassName) => el.classList.remove(cssClassName));
         // remove infinite table classnames
         themesToRemove.forEach((theme) => {
-            el.classList.remove(`it--theme-${theme.Name}`);
+            el.classList.remove(`infinite-${theme.Name}`);
         });
         if (this.adaptableOptions.userInterfaceOptions &&
             this.adaptableOptions.userInterfaceOptions.useCustomMacLikeScrollbars &&
@@ -4113,7 +4154,7 @@ class Adaptable {
         const newThemeClassName = GeneralConstants.THEME_STYLE + themeName;
         el.classList.add(newThemeClassName);
         // add infinite table classname for theme
-        el.classList.add(`it--theme-${themeName}`);
+        el.classList.add(`infinite-${themeName}`);
         const computedDocumentStyle = getComputedStyle(el);
         const [abLoaded, abThemeLoaded] = ['--ab-loaded', '--ab-theme-loaded'].map((variable) => {
             let val = computedDocumentStyle.getPropertyValue(variable);

package/src/agGrid/FilterWrapper.js

@@ -16,7 +16,7 @@ exports.FilterWrapperFactory = (adaptable) => {
         isFilterActive() {
             //make the small filter icon to appear when there is a filter
             return (adaptable.api.filterApi
-                .getAllColumnFilter()
+                .getColumnFilters()
                 .findIndex((x) => x.ColumnId == this.params.column.getColId()) > -1);
         }
         doesFilterPass(params) {

package/src/agGrid/agGridHelper.d.ts

@@ -1,9 +1,8 @@
 import { ColDef, Column, GridOptions, ICellRendererFunc, SideBarDef, ToolPanelDef } from '@ag-grid-community/all-modules';
 import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
-import { AdaptableColumn, AdaptableColumnGroup } from '../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableColumn, AdaptableColumnDataType, AdaptableColumnGroup } from '../PredefinedConfig/Common/AdaptableColumn';
 import { AdaptableNodeComparerFunction } from '../PredefinedConfig/Common/AdaptableComparerFunction';
-import { DataType } from '../PredefinedConfig/Common/Enums';
-import { AdaptableModule } from '../PredefinedConfig/Common/Types';
+import { AdaptableColumnType, AdaptableModule } from '../PredefinedConfig/Common/Types';
 import { IModule } from '../Strategy/Interface/IModule';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
 import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
@@ -26,9 +25,9 @@ export declare class agGridHelper {
     getCleanValue(value: string): string | undefined;
     getRenderedValue(colDef: ColDef, valueToRender: any): any;
     createAdaptableColumnFromAgGridColumn(agGridColumn: Column, colsToGroups: Record<string, AdaptableColumnGroup>): AdaptableColumn;
-    createAdaptableSideBarDefs(showFilterPanel: boolean, showColumnsPanel: boolean): SideBarDef;
-    createAdaptableToolPanel(): ToolPanelDef;
-    orderToolPanels(toolPanelDefs: (ToolPanelDef | string)[]): void;
+    buildAdaptableToolPanelDef(): ToolPanelDef;
+    isSideBarDefObject(sidebarDef: unknown): sidebarDef is SideBarDef;
+    mapToolPanelDefs(toolPanelDefs?: (ToolPanelDef | string)[]): (ToolPanelDef | string)[];
     reselectSelectedCells(): void;
     fireSelectionChangedEvent(): void;
     private isColumnReadonly;
@@ -46,8 +45,8 @@ export declare class agGridHelper {
     private isColumnGrouped;
     private isColumnSparkline;
     private getColumnDataType;
-    private getabColDefValue;
-    getAgGridDataType(dataType: DataType): string;
+    private getAbColDefValue;
+    getAgGridDataType(dataType: AdaptableColumnDataType): AdaptableColumnType;
     checkShouldClearExistingFiltersOrSearches(): void;
     runAdaptableGroupComparerFunction(): AdaptableNodeComparerFunction;
     getCurrentIPPStyle(): IPPStyle;