@adaptabletools/adaptable 11.0.0 → 11.0.2

package/src/agGrid/Adaptable.js

@@ -56,6 +56,7 @@ const publishTimestamp_1 = tslib_1.__importDefault(require("../../publishTimesta
 const MetamodelService_1 = require("../Utilities/Services/MetamodelService");
 const DocumentationLinkConstants_1 = require("../Utilities/Constants/DocumentationLinkConstants");
 const ModuleConstants_1 = require("../Utilities/Constants/ModuleConstants");
+const CheckboxRenderer_1 = require("./CheckboxRenderer");
 const tinycolor = require('tinycolor2');
 all_modules_1.ModuleRegistry.registerModules(all_modules_1.AllCommunityModules);
 const GROUP_PATH_SEPARATOR = '/';
@@ -797,6 +798,7 @@ class Adaptable {
             return;
         }
         let style = {};
+        // percent bar && do we show text
         const columnStyle = formatColumn.ColumnStyle;
         if (columnStyle) {
             const gradientStyle = columnStyle === null || columnStyle === void 0 ? void 0 : columnStyle.GradientStyle;
@@ -824,6 +826,10 @@ class Adaptable {
                 }
                 style.backgroundColor = tinycolor(cellBackColor).setAlpha(alpha).toRgbString();
             }
+            if (columnStyle.PercentBarStyle && columnStyle.PercentBarStyle.CellText) {
+                style.paddingTop = 0;
+                style.paddingBottom = 0;
+            }
         }
         else if (formatColumn.Style) {
             style = this.convertAdaptableStyleToCSS(formatColumn.Style);
@@ -1240,6 +1246,24 @@ class Adaptable {
         }
         const pivoted = !!layout.EnablePivot;
         const shouldUpdatePivoted = this.gridOptions.columnApi.isPivotMode() !== pivoted;
+        /**
+         * Pivot columns are secondary columns that are created on the fly and base
+         * their configuration on the main columns by copying that configuration.
+         * Because they copy the colDefs they might have an old copy of the colldefs.
+         * This is why when the layout is pivoted we need to set columns before pivoting is applied.
+         * e.g. {
+         *  field: 'pivot-1',
+         *  pivotValueColumn: {
+         *   colDef: {
+         *     field: 'price',
+         *     // this is a copy of the original column
+         *   }
+         * }
+         *
+         */
+        if (shouldUpdatePivoted) {
+            this.setupColumns();
+        }
         isChanged = isChanged || shouldUpdatePivoted;
         let shouldUpdateHeaders = false;
         shouldUpdateHeaders = this.setupColumnHeaderAggregations(layout);
@@ -1483,7 +1507,8 @@ class Adaptable {
         return selectedRowInfo;
     }
     setValue(dataChangedInfo) {
-        // note: because we use rownode set data value this will cause Validation to fire
+        // note: because we use RowNode.setDataValue() this will cause Validation to fire
+        // see https://www.ag-grid.com/javascript-data-grid/change-detection/#triggering-value-change-detection
         let newValue;
         let dataType = dataChangedInfo.column.dataType;
         newValue =
@@ -1520,6 +1545,10 @@ class Adaptable {
     cancelEdit() {
         this.gridOptions.api.stopEditing(true);
     }
+    isCellEditable(rowNode, column) {
+        // it's safe to rely on the AG Grid implementation because we override the colDef.editable property, which is in this case the single source of truth
+        return column === null || column === void 0 ? void 0 : column.isCellEditable(rowNode);
+    }
     getDistinctValuesForColumn(column, visibleRowsOnly, skipRowNode, permittedValues) {
         let returnValues = [];
         // this function does NOT look up for server values but actually it should...
@@ -1931,7 +1960,7 @@ class Adaptable {
             LoggingHelper_1.ConsoleLogError('ag-grid redrawRows was unable to find some row nodes. Tried to redraw row node: ', rowNode, ex);
         }
     }
-    refreshCells(rowNodes, columns, forceUpdate) {
+    refreshCells(rowNodes, columns, forceUpdate, suppressFlash = false) {
         const api = this.gridOptions.api;
         // in order to get a fresh reference to rowNodes
         // rowNodes = this.getRowNodesForPrimaryKeys(
@@ -1941,6 +1970,7 @@ class Adaptable {
             rowNodes,
             columns: columns,
             force: forceUpdate,
+            suppressFlash,
         };
         api.refreshCells(refreshCellParams);
     }
@@ -2360,24 +2390,6 @@ class Adaptable {
             this.checkColumnsDataTypeSet();
             this.setLayout();
         });
-        /**
-         * Use Case: User has started to edit a readonly cell
-         * Action1: Stop editing immediately
-         * Note: Deals only with user edits and not ticking data (not a problem)
-         */
-        this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_CELL_EDITING_STARTED, (params) => {
-            if (this.gridOptions.columnApi.isPivotMode()) {
-                return;
-            }
-            const cellEditableFn = this.adaptableOptions.editOptions.isCellEditable;
-            if (cellEditableFn) {
-                let gridCell = this.getGridCellFromRowNode(params.node, params.column.getColId());
-                let isEditable = cellEditableFn(gridCell);
-                if (!isEditable) {
-                    this.gridOptions.api.stopEditing();
-                }
-            }
-        });
         /**
          * Use Case: Entered or Left Pivot Mode
          * Action 1: Autosize pivot columns when entering pivot mode (if autosize pivot in Layout is true)
@@ -2689,6 +2701,7 @@ class Adaptable {
             this.setupColumnFilter(colSetupInfo);
             this.setupColumnFloatingFilter(colSetupInfo);
             this.setupColumnValueFormatter(colSetupInfo);
+            this.setupColumnEditable(colSetupInfo);
             this.setupColumnValueSetter(colSetupInfo);
             this.setupColumnComparator(colSetupInfo);
             this.setupColumnCellEditor(colSetupInfo);
@@ -2852,6 +2865,11 @@ class Adaptable {
         const adaptableColumn = this.api.columnApi.getColumnFromId(colId);
         const editLookUpItem = this.api.userInterfaceApi.getEditLookUpItemForColumn(adaptableColumn);
         this.setColDefProperty(col, 'cellEditor', () => {
+            var _a;
+            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(adaptableColumn);
+            if (formatColumn && !(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && ((_a = formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.CheckBoxStyle)) {
+                return CheckboxRenderer_1.CheckboxEditor;
+            }
             if (editLookUpItem) {
                 return this.isModulePresent('rich-select')
                     ? 'agRichSelectCellEditor'
@@ -2872,7 +2890,7 @@ class Adaptable {
     setupColumnCellRenderer({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellRenderer', () => {
             const formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(abColumn);
-            if (!(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && formatColumn && formatColumn.ColumnStyle) {
+            if (formatColumn && !(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && formatColumn.ColumnStyle) {
                 if (formatColumn.ColumnStyle.PercentBarStyle) {
                     return this.agGridHelper.createNumericStyleRendererFunc(formatColumn);
                 }
@@ -3019,6 +3037,23 @@ class Adaptable {
             }
         });
     }
+    setupColumnEditable({ col }) {
+        this.setColDefProperty(col, 'editable', (userValue) => {
+            // if AG Grid defines the column as NOT editable, we don't mess with it
+            if (typeof userValue === 'boolean' && userValue === false) {
+                return userValue;
+            }
+            const cellEditableFn = this.adaptableOptions.editOptions.isCellEditable;
+            if (!cellEditableFn) {
+                return userValue;
+            }
+            const editableCallback = (params) => {
+                const gridCell = this.getGridCellFromRowNode(params.node, params.column.getColId());
+                return cellEditableFn(gridCell);
+            };
+            return editableCallback;
+        });
+    }
     setupColumnValueSetter({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'valueSetter', (userValueSetter) => {
             var _a;
@@ -3027,19 +3062,14 @@ class Adaptable {
                 .filter((alertDefinition) => {
                 return this.api.scopeApi.isColumnInScope(abColumn, alertDefinition.Scope);
             });
-            const cellEditableFn = this.adaptableOptions.editOptions.isCellEditable;
             const noValidations = !preventEditAlertsForColumn.length && !((_a = this.adaptableOptions.editOptions) === null || _a === void 0 ? void 0 : _a.validateOnServer);
-            if (noValidations && !cellEditableFn) {
+            if (noValidations) {
                 return;
             }
             const valueSetter = (params) => {
                 var _a;
-                if (cellEditableFn) {
-                    let gridCell = this.getGridCellFromRowNode(params.node, params.column.getColId());
-                    let isEditable = cellEditableFn(gridCell);
-                    if (!isEditable) {
-                        return false;
-                    }
+                if (preventEditAlertsForColumn.length) {
+                    return false;
                 }
                 const field = params.column.getColDef().field;
                 if (noValidations) {
@@ -3064,10 +3094,6 @@ class Adaptable {
                     rowNode: params.node,
                     trigger: 'edit',
                 });
-                // just Prevent Edit Alerts below
-                if (!preventEditAlertsForColumn.length) {
-                    return true;
-                }
                 if (dataChangedInfo.oldValue === dataChangedInfo.newValue) {
                     return true;
                 }
@@ -3387,10 +3413,8 @@ class Adaptable {
             this.gridOptions.api.onGroupExpandedOrCollapsed();
         }
     }
-    getAgGridColumnForAdaptableColumn(abColumn) {
-        return this.gridOptions.columnApi
-            .getAllColumns()
-            .find((c) => c.getColId() === abColumn.columnId);
+    getAgGridColumnForColumnId(columnId) {
+        return this.gridOptions.columnApi.getColumn(columnId);
     }
     setRowGroupColumns(columnIds) {
         this.gridOptions.columnApi.setRowGroupColumns(columnIds);
@@ -3717,7 +3741,8 @@ class Adaptable {
         return false;
     }
     showQuickFilter() {
-        this.gridOptions.api.setFloatingFiltersHeight(null);
+        const height = this.api.internalApi.getAdaptableOptions().filterOptions.quickFilterHeight;
+        this.gridOptions.api.setFloatingFiltersHeight(height);
     }
     hideQuickFilter() {
         this.gridOptions.api.setFloatingFiltersHeight(0);

package/src/agGrid/CheckboxRenderer.d.ts

@@ -1,3 +1,10 @@
 import { ICellRendererFunc } from '@ag-grid-community/all-modules';
 import { AdaptableApi } from '../Api/AdaptableApi';
-export declare const getCheckboxRendererForColumn: (columnId: string, readOnly: boolean, api: AdaptableApi) => ICellRendererFunc;
+import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core/dist/cjs/es5/interfaces/iCellEditor';
+export declare const getCheckboxRendererForColumn: (columnId: string, isColumnReadOnly: boolean, api: AdaptableApi) => ICellRendererFunc;
+export declare class CheckboxEditor implements ICellEditorComp {
+    isCancelBeforeStart(): boolean;
+    init(params: ICellEditorParams): void;
+    getGui(): HTMLElement;
+    getValue(): any;
+}

package/src/agGrid/CheckboxRenderer.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCheckboxRendererForColumn = void 0;
-exports.getCheckboxRendererForColumn = (columnId, readOnly, api) => {
+exports.CheckboxEditor = exports.getCheckboxRendererForColumn = void 0;
+exports.getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     const CheckboxRenderer = function () {
         return '';
     };
@@ -10,7 +10,9 @@ exports.getCheckboxRendererForColumn = (columnId, readOnly, api) => {
         const inputElement = document.createElement('input');
         inputElement.type = 'checkbox';
         inputElement.checked = params.value;
-        inputElement.disabled = readOnly;
+        inputElement.disabled =
+            isColumnReadOnly ||
+                !api.internalApi.getAdaptableInstance().isCellEditable(params.node, params.column);
         this.checkedHandler = this.checkedHandler.bind(this);
         inputElement.addEventListener('click', this.checkedHandler);
         this.eGui = document.createElement('div');
@@ -29,7 +31,26 @@ exports.getCheckboxRendererForColumn = (columnId, readOnly, api) => {
         return this.eGui;
     };
     CheckboxRenderer.prototype.refresh = function () {
-        return true;
+        // by returning FALSE, AG Grid will remove the component from the DOM
+        // and (re)create a new component in its place with the new value & disabled state
+        return false;
+    };
+    CheckboxRenderer.prototype.destroy = function () {
+        var _a, _b;
+        (_b = (_a = this.eGui) === null || _a === void 0 ? void 0 : _a.firstChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.checkedHandler);
     };
     return CheckboxRenderer;
 };
+// this is just a stub editor instance, we just need the `isCancelBeforeStart()` hook
+class CheckboxEditor {
+    isCancelBeforeStart() {
+        // never show the editor, we edit it via the checkbox input element
+        return true;
+    }
+    init(params) { }
+    getGui() {
+        return undefined;
+    }
+    getValue() { }
+}
+exports.CheckboxEditor = CheckboxEditor;

package/src/agGrid/agGridHelper.d.ts

@@ -21,7 +21,7 @@ export declare class agGridHelper {
     getAgGridDarkThemeName(): string;
     setUpModules(): Map<AdaptableModule, IModule>;
     TrySetUpNodeIds(): boolean;
-    createCheckboxRendererComp(columnId: string, isReadOnly: boolean): ICellRendererFunc | undefined;
+    createCheckboxRendererComp(columnId: string, isColumnReadOnly: boolean): ICellRendererFunc | undefined;
     createNumericStyleRendererFunc(formatColumn: FormatColumn): ICellRendererFunc;
     getCleanValue(value: string): string | undefined;
     getRenderedValue(colDef: ColDef, valueToRender: any): any;

package/src/agGrid/agGridHelper.js

@@ -118,8 +118,8 @@ class agGridHelper {
         };
         return true;
     }
-    createCheckboxRendererComp(columnId, isReadOnly) {
-        return CheckboxRenderer_1.getCheckboxRendererForColumn(columnId, isReadOnly, this.adaptable.api);
+    createCheckboxRendererComp(columnId, isColumnReadOnly) {
+        return CheckboxRenderer_1.getCheckboxRendererForColumn(columnId, isColumnReadOnly, this.adaptable.api);
     }
     createNumericStyleRendererFunc(formatColumn) {
         const numericStyle = formatColumn.ColumnStyle;
@@ -331,13 +331,12 @@ class agGridHelper {
         this.adaptable.api.eventApi.emit('SelectionChanged', selectionChangedInfo);
     }
     isColumnReadonly(colDef) {
-        // currently we do not support the fact that some rows are editable and some are not
-        // if editable is a function then we return that its not readonly since we assume that some rowNode will be editable
-        // that's wrong but we ll see if we face the issue later
-        if (colDef && typeof colDef.editable === 'boolean') {
-            return !colDef.editable;
+        // if the column has conditional/dynamic editability, we assume some rows may be editable
+        if (colDef && typeof colDef.editable === 'function') {
+            return false;
         }
-        return true;
+        // otherwise we evaluate the colDef.editable property (columns are NOT editable by default)
+        return !colDef.editable;
     }
     isColumnSortable(colDef) {
         if (colDef && colDef.sortable != null) {

package/src/components/icons/calculated-column.js

@@ -4,5 +4,5 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const DefaultIcon_1 = tslib_1.__importDefault(require("./DefaultIcon"));
 exports.default = (props) => (React.createElement(DefaultIcon_1.default, Object.assign({}, props),
-    React.createElement("path", { d: "M14.67 14.4337V21.7831H9.33V14.4337H14.67ZM15.67 21.7831L20.9277 21.8072V14.4337H15.67V21.7831ZM8.33 21.7831V2.14458H3V21.7831H8.33Z", fill: "currentColor" }),
-    React.createElement("path", { d: "M19.6426 2H10.6466C9.93976 2 9.36145 2.57831 9.36145 3.28514V12.2811C9.36145 12.988 9.93976 13.5663 10.6466 13.5663H19.6426C20.3494 13.5663 20.9277 12.988 20.9277 12.2811V3.28514C20.9277 2.57831 20.3494 2 19.6426 2ZM15.8064 4.60884L16.4876 3.92771L17.3936 4.83373L18.2996 3.92771L18.9807 4.60884L18.0747 5.51486L18.9807 6.42088L18.2996 7.10201L17.3936 6.20241L16.4876 7.10843L15.8064 6.42731L16.7124 5.52128L15.8064 4.60884ZM11.4498 5.03293H14.6627V5.99679H11.4498V5.03293ZM14.8233 10.3534H13.5382V11.6386H12.5743V10.3534H11.2892V9.38956H12.5743V8.10442H13.5382V9.38956H14.8233V10.3534ZM19 11.1566H15.7871V10.1928H19V11.1566ZM19 9.5502H15.7871V8.58635H19V9.5502Z", fill: "currentColor" })));
+    React.createElement("path", { d: "M14.67 14.4337V21.7831H9.33V14.4337H14.67ZM15.67 21.7831L20.9277 21.8072V14.4337H15.67V21.7831ZM8.33 21.7831V2.14458H3V21.7831H8.33Z" }),
+    React.createElement("path", { d: "M19.6426 2H10.6466C9.93976 2 9.36145 2.57831 9.36145 3.28514V12.2811C9.36145 12.988 9.93976 13.5663 10.6466 13.5663H19.6426C20.3494 13.5663 20.9277 12.988 20.9277 12.2811V3.28514C20.9277 2.57831 20.3494 2 19.6426 2ZM15.8064 4.60884L16.4876 3.92771L17.3936 4.83373L18.2996 3.92771L18.9807 4.60884L18.0747 5.51486L18.9807 6.42088L18.2996 7.10201L17.3936 6.20241L16.4876 7.10843L15.8064 6.42731L16.7124 5.52128L15.8064 4.60884ZM11.4498 5.03293H14.6627V5.99679H11.4498V5.03293ZM14.8233 10.3534H13.5382V11.6386H12.5743V10.3534H11.2892V9.38956H12.5743V8.10442H13.5382V9.38956H14.8233V10.3534ZM19 11.1566H15.7871V10.1928H19V11.1566ZM19 9.5502H15.7871V8.58635H19V9.5502Z" })));

package/src/metamodel/adaptable.metamodel.d.ts

@@ -1421,20 +1421,20 @@ export declare const ADAPTABLE_METAMODEL: {
             description: string;
             uiLabel: string;
             isOptional: boolean;
-            reference: string;
+            reference?: undefined;
         } | {
             name: string;
             kind: string;
             description: string;
             uiLabel: string;
-            isOptional?: undefined;
-            reference?: undefined;
+            isOptional: boolean;
+            reference: string;
         } | {
             name: string;
             kind: string;
             description: string;
             uiLabel: string;
-            isOptional: boolean;
+            isOptional?: undefined;
             reference?: undefined;
         })[];
     };
@@ -1998,6 +1998,15 @@ export declare const ADAPTABLE_METAMODEL: {
             defaultValue: string;
             gridInfo?: undefined;
             reference?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional: boolean;
+            gridInfo?: undefined;
+            defaultValue?: undefined;
+            reference?: undefined;
         } | {
             name: string;
             kind: string;

package/src/metamodel/adaptable.metamodel.js

@@ -599,7 +599,7 @@ exports.ADAPTABLE_METAMODEL = {
             {
                 "name": "readOnly",
                 "kind": "boolean",
-                "description": "Is column editable",
+                "description": "Is the column editable; returns FALSE if the column has conditional/dynamic editability, assuming some rows are editable",
                 "uiLabel": "Read Only"
             },
             {
@@ -3861,6 +3861,13 @@ exports.ADAPTABLE_METAMODEL = {
         "kind": "Interface",
         "description": "Defines a Custom ToolPanel - provided by Users and contains custom content",
         "properties": [
+            {
+                "name": "buttons",
+                "kind": "unknown",
+                "description": "Optional set of buttons to show in the ToolPanel",
+                "uiLabel": "Buttons",
+                "isOptional": true
+            },
             {
                 "name": "frameworkComponent",
                 "kind": "REFERENCE",
@@ -3888,13 +3895,6 @@ exports.ADAPTABLE_METAMODEL = {
                 "description": "Title to display in Custom ToolPanel; if undefined, will default to `name` property",
                 "uiLabel": "Title",
                 "isOptional": true
-            },
-            {
-                "name": "toolPanelButtons",
-                "kind": "unknown",
-                "description": "Optional set of buttons to show in the ToolPanel",
-                "uiLabel": "Tool Panel Buttons",
-                "isOptional": true
             }
         ]
     },
@@ -5682,6 +5682,13 @@ exports.ADAPTABLE_METAMODEL = {
                 "gridInfo": "item",
                 "defaultValue": "2,000"
             },
+            {
+                "name": "quickFilterHeight",
+                "kind": "number",
+                "description": "TODO: add comment",
+                "uiLabel": "Quick Filter Height",
+                "isOptional": true
+            },
             {
                 "name": "quickFilterTrigger",
                 "kind": "unknown",
@@ -8930,7 +8937,7 @@ exports.ADAPTABLE_METAMODEL = {
             {
                 "name": "Rule",
                 "kind": "REFERENCE",
-                "description": "(Optional) Boolean Query to determine whether to apply the Nudge",
+                "description": "(Optional) Boolean Expression to determine whether to apply the Nudge",
                 "uiLabel": "Rule",
                 "isOptional": true,
                 "reference": "unknown"
@@ -11087,10 +11094,10 @@ exports.ADAPTABLE_METAMODEL = {
                 "defaultValue": "'AdapTable'"
             },
             {
-                "name": "customToolPanelButtons",
+                "name": "customButtons",
                 "kind": "unknown",
                 "description": "ToolPanel Buttons provided by Users which perform custom behaviour",
-                "uiLabel": "Custom Tool Panel Buttons",
+                "uiLabel": "Custom Buttons",
                 "isOptional": true
             },
             {

package/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "11.0.0";
+declare const _default: "11.0.2";
 export default _default;

package/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '11.0.0'; // PLEASE DONT UPDATE THIS!!! - will be updated at build time with the correct version
+exports.default = '11.0.2'; // PLEASE DONT UPDATE THIS!!! - will be updated at build time with the correct version