Update Ag Grid to 31.1.0

mercurymedia · Feb 26, 2024 · 7c56e78 · 7c56e78
1 parent b111a09
commit 7c56e78
Show file tree

Hide file tree

Showing 6 changed files with 265 additions and 73 deletions.
diff --git a/NPM_CHANGELOG.md b/NPM_CHANGELOG.md
@@ -1,5 +1,10 @@
 # NPM Changelog
 
+## [4.0.0]
+
+- Updates AG Grid to 31.1.x
+- AG Grid Enterprise license key now providade via ElmAgGrid constructor
+
 ## [3.7.1]
 
 - Explicitly check in column events for `finished === false`

diff --git a/README.md b/README.md
@@ -47,16 +47,17 @@ The latest [Elm package version](https://package.elm-lang.org/packages/mercuryme
 | 14.0.0 - 18.0.0 |   3.4.0 - 3.4.2    |
 | 19.0.0 - 22.0.0 |       3.5.0        |
 | 23.0.0 - 23.1.0 |       3.6.0        |
-|   24.0.0 - \*   |   3.7.0 - 3.7.1    |
+|   24.0.0 - \*   |   3.7.0 - 4.0.0    |
 
 ## Ag Grid Enterprise
 
 The `elm-ag-grid` package uses Ag Grid Enterprise features. To enable them install the `ag-grid-enterprise` package and activate it by setting the license key. See the [official Ag Grid documentation](http://54.222.217.254/javascript-grid-set-license/) for further details.
 
 ```js
-import * as AgGridEnterprise from "ag-grid-enterprise";
-
-AgGridEnterprise.LicenseManager.setLicenseKey("YOUR-LICENSE-KEY");
+new ElmAgGrid({
+    licenseKey: "YOUR-LICENSE-KEY",
+    ...
+});
 ```
 
 ## Themes

diff --git a/ag-grid-webcomponent/index.js b/ag-grid-webcomponent/index.js
@@ -1,4 +1,13 @@
-import { Grid, ComponentUtil } from "ag-grid-community";
+import { createGrid, ComponentUtil, ModuleRegistry } from "@ag-grid-community/core";
+import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
+import { LicenseManager } from '@ag-grid-enterprise/core'
+import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
+import { FiltersToolPanelModule } from '@ag-grid-enterprise/filter-tool-panel';
+import { MenuModule } from '@ag-grid-enterprise/menu';
+import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
+import { RichSelectModule } from '@ag-grid-enterprise/rich-select';
+import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
+import { SideBarModule } from '@ag-grid-enterprise/side-bar';
 
 import cellRenderer from "./cell_renderer";
 import cellEditor from "./cell_editor";
@@ -58,20 +67,14 @@ class AgGrid extends HTMLElement {
   set gridOptions(options) {
     let globalEventListener = this.globalEventListener.bind(this);
 
-    this._gridOptions = ComponentUtil.copyAttributesToGridOptions(
-      options,
-      this._preInitAgGridAttributes
-    );
-
+    let mergedOptions = Object.assign(options, this._preInitAgGridAttributes)
 
     // Can only be instantiated once
     if (!this._initialised) {
       // prevent instantiating multiple grids
       let gridParams = { globalEventListener };
-      this._agGrid = new Grid(this, this._gridOptions, gridParams);
+      this._api = createGrid(this, mergedOptions, gridParams);
 
-      this.api = options.api;
-      this.columnApi = options.columnApi;
       this._initialised = true;
 
       Object.entries(this._preInitCustomAttributes).map(
@@ -102,7 +105,7 @@ class AgGrid extends HTMLElement {
   }
 
   set columnState(state) {
-    this.columnApi.applyColumnState({ state: state, applyOrder: true });
+    this._api.applyColumnState({ state: state, applyOrder: true });
   }
 
   set disableResizeOnScroll(disabled) {
@@ -116,7 +119,7 @@ class AgGrid extends HTMLElement {
   }
 
   set filterState(state) {
-    this.api.setFilterModel(state);
+    this._api.setFilterModel(state);
   }
 
   set sizeToFitAfterFirstDataRendered(sizeToFit) {
@@ -132,16 +135,16 @@ class AgGrid extends HTMLElement {
   set rowData(data) {
     this._applyChange("rowData", data);
 
-    if (this._agGrid.gridOptions.rowData === null) {
-      this.api.showNoRowsOverlay();
+    if (data == []) {
+      this._api.showNoRowsOverlay();
     }
   }
 
   set selectedIds(selectedIds) {
     if (selectedIds.length == 0) {
-      this.api.deselectAll();
+      this._api.deselectAll();
     } else {
-      this.api.forEachNode(function (node) {
+      this._api.forEachNode(function (node) {
         const selected = selectedIds.includes(node.id);
         node.setSelected(selected);
       });
@@ -159,7 +162,7 @@ class AgGrid extends HTMLElement {
         ),
       };
     }
-    this.api.setColumnDefs(defs.map(applyCallbacks));
+    this._api.updateGridOptions({columnDefs: defs.map(applyCallbacks)});
   }
 
   set getContextMenuItems(data) {
@@ -212,10 +215,7 @@ class AgGrid extends HTMLElement {
   }
 
   _applyChange(propertyName, newValue) {
-    let changeObject = {};
-    changeObject[propertyName] = { currentValue: newValue };
-
-    ComponentUtil.processOnChange(changeObject, this.api);
+    this._api.setGridOption(propertyName, newValue);
   }
 
   _addEventHandler(eventName, type, callback) {
@@ -224,9 +224,9 @@ class AgGrid extends HTMLElement {
 
     this._events = collection;
 
-    this._gridOptions[eventName] = function (args) {
+    this._api.setGridOption(eventName, function (args) {
       Object.values(collection).map((event) => event(args));
-    };
+    });
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -361,7 +361,7 @@ class AgGrid extends HTMLElement {
 
         const stateChangeEvent = columnStateChangedEvent(
           params,
-          params.columnApi.getColumnState()
+          params.api.getColumnState()
         );
 
         _this.dispatchEvent(stateChangeEvent);
@@ -400,10 +400,26 @@ function objectMap(obj, fn) {
 }
 
 export default class ElmAgGrid {
-  constructor({ apps = {}, aggregations = {} } = {}) {
+  constructor({ apps = {}, aggregations = {}, licenseKey = null } = {}) {
     window.ElmAgGridComponentRegistry = apps;
     CUSTOM_AGGREGATIONS = aggregations;
 
+    ModuleRegistry.register(ClientSideRowModelModule);
+
+    if (licenseKey != null) {
+      LicenseManager.setLicenseKey(licenseKey)
+    }
+
+    ModuleRegistry.registerModules([
+      ColumnsToolPanelModule,
+      FiltersToolPanelModule,
+      MenuModule,
+      RangeSelectionModule,
+      RichSelectModule,
+      RowGroupingModule,
+      SideBarModule
+    ]);
+
     customElements.define("ag-grid", AgGrid);
   }
 }

diff --git a/examples/index.js b/examples/index.js
@@ -1,18 +1,14 @@
 import "@webcomponents/custom-elements";
-import * as AgGridEnterprise from "ag-grid-enterprise";
 
-// This would usually be the pacakge import
+// This would usually be the package import
 // import ElmAgGrid from "@mercurymedia/elm-ag-grid";
 import ElmAgGrid from "../ag-grid-webcomponent";
 import { Elm } from "./src/Main.elm";
 
-import "ag-grid-community/styles/ag-grid.css";
-import "ag-grid-community/styles/ag-theme-balham.css";
+import "@ag-grid-community/styles/ag-grid.css";
+import "@ag-grid-community/styles/ag-theme-balham.css";
 import "./styles/ag_grid_custom.css";
 
-// For AG Grid Enterprise you can set license key by calling:
-// AgGridEnterprise.LicenseManager.setLicenseKey("YOUR-LICENSE-KEY");
-
 // Component import
 import ButtonRenderer from "./src/Components/Button.elm";
 import LinkRenderer from "./src/Components/Link.elm";
@@ -25,6 +21,8 @@ window.AgGrid = {
     app = Elm.Main.init({ node: node });
 
     new ElmAgGrid({
+      // For AG Grid Enterprise features set your license key here:
+      // licenseKey: <YOUR LICENSE KEY>,
       app: app,
       apps: {
         // You can simply provide the usual Elm object to register your component.