Apply column state to column defs

mercurymedia · Oct 27, 2023 · 18e91d6 · 18e91d6
1 parent 379d5f1
commit 18e91d6
Show file tree

Hide file tree

Showing 13 changed files with 1,381 additions and 108 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -0,0 +1,17 @@
+name: "Tests"
+on: [push, pull_request]
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'npm'
+      - uses: actions/cache@v2
+        with:
+          path: ~/.elm
+          key: ${{ runner.os }}-elm-${{ hashFiles('package-lock.json', 'elm.json') }}
+      - run: npm ci
+      - run: npm test
diff --git a/ELM_CHANGELOG.md b/ELM_CHANGELOG.md
@@ -1,5 +1,10 @@
 # Elm Changelog
 
+## [19.0.0]
+
+- Added `flex`, `pivot`, `pivotIndex`, `rowGroupIndex`, `sort`, and `sortIndex` to `ColumnSettings`
+- Using `ColumnState` passed to `GridConfig` to override the `ColumnDefs` passed to the grid view. This allows the `ColumnDefs` to be updated after the component is rendered without overwriting the column states. This resolves a column state caching issue.
+
 ## [18.0.0]
 
 - Add `maintainColumnOrder` to `GridConfig`

diff --git a/ag-grid-webcomponent/index.js b/ag-grid-webcomponent/index.js
@@ -93,7 +93,7 @@ class AgGrid extends HTMLElement {
     this._addEventHandler(
       "onBodyScroll",
       "disableResizeOnScroll",
-      function(params) {
+      function (params) {
         if (!disabled) params.api.sizeColumnsToFit();
       }
     );
@@ -107,7 +107,7 @@ class AgGrid extends HTMLElement {
     this._addEventHandler(
       "onFirstDataRendered",
       "sizeToFitAfterFirstDataRendered",
-      function(params) {
+      function (params) {
         if (sizeToFit) params.api.sizeColumnsToFit();
       }
     );
@@ -141,7 +141,7 @@ class AgGrid extends HTMLElement {
           def.cellClassRules,
           (v) => (params) => expression.apply(params.node.data, v)
         ),
-      }
+      };
     }
     this.api.setColumnDefs(defs.map(applyCallbacks));
   }
@@ -156,11 +156,11 @@ class AgGrid extends HTMLElement {
             detail: {
               action: item.actionName,
               data: params.node.data,
-            }
+            },
           });
 
-          this.dispatchEvent(contextMenuEvent)
-        }
+          this.dispatchEvent(contextMenuEvent);
+        };
       }
 
       item.subMenu =
@@ -169,13 +169,16 @@ class AgGrid extends HTMLElement {
           : null;
 
       if (typeof item.disabledCallback === "object") {
-        item.disabled = expression.apply(params.node.data, item.disabledCallback);
+        item.disabled = expression.apply(
+          params.node.data,
+          item.disabledCallback
+        );
       } else {
         item.disabled = item.disabledCallback;
       }
 
       return item;
-    }
+    };
 
     this._applyChange("getContextMenuItems", (params) =>
       data.map((item) => prepareContextAction(item, params))
@@ -195,7 +198,7 @@ class AgGrid extends HTMLElement {
 
     this._events = collection;
 
-    this._gridOptions[eventName] = function(args) {
+    this._gridOptions[eventName] = function (args) {
       Object.values(collection).map((event) => event(args));
     };
   }
@@ -239,7 +242,7 @@ class AgGrid extends HTMLElement {
         ...cellRenderer,
         ...cellEditor,
         appRenderer,
-        appEditor
+        appEditor,
       },
 
       aggFuncs: CUSTOM_AGGREGATIONS,
@@ -248,7 +251,7 @@ class AgGrid extends HTMLElement {
         return !!params.data && params.data.rowCallbackValues.isRowSelectable;
       },
 
-      onSelectionChanged: function(event) {
+      onSelectionChanged: function (event) {
         const nodes = event.api.getSelectedNodes();
         const selectionEvent = new CustomEvent("selectionChanged", {
           detail: { nodes },
@@ -270,6 +273,13 @@ class AgGrid extends HTMLElement {
   }
 
   globalEventListener(eventType, event) {
+    if (
+      eventType != "cellMouseOver" &&
+      eventType != "columnHoverChanged" &&
+      eventType != "cellMouseOut"
+    ) {
+      console.log(eventType, event);
+    }
     let eventLowerCase = eventType.toLowerCase();
     let browserEvent = new Event(eventLowerCase);
 
@@ -293,11 +303,14 @@ class AgGrid extends HTMLElement {
       "onGridColumnsChanged",
       "onColumnResized",
       "onColumnVisible",
+      "onColumnPinned",
+      "onColumnRowGroupChanged",
+      "onColumnValueChanged",
     ];
     const _this = this;
 
     columnEvents.map((event) =>
-      this._addEventHandler(event, "columnEvents", function(params) {
+      this._addEventHandler(event, "columnEvents", function (params) {
         const stateChangeEvent = new CustomEvent("columnStateChanged", {
           detail: {
             event: params,
@@ -314,7 +327,7 @@ class AgGrid extends HTMLElement {
     const _this = this;
 
     filterEvents.map((event) =>
-      this._addEventHandler(event, "filterEvents", function(params) {
+      this._addEventHandler(event, "filterEvents", function (params) {
         const stateChangeEvent = new CustomEvent("filterStateChanged", {
           detail: {
             event: params,

diff --git a/elm.json b/elm.json
@@ -3,7 +3,7 @@
     "name": "mercurymedia/elm-ag-grid",
     "summary": "AgGrid integration for Elm",
     "license": "MIT",
-    "version": "18.0.0",
+    "version": "19.0.0",
     "exposed-modules": [
         "AgGrid.ContextMenu",
         "AgGrid.Expression",
@@ -18,5 +18,7 @@
         "elm/json": "1.1.3 <= v < 2.0.0",
         "lukewestby/elm-string-interpolate": "1.0.4 <= v < 2.0.0"
     },
-    "test-dependencies": {}
+    "test-dependencies": {
+        "elm-explorations/test": "2.0.0 <= v < 3.0.0"
+    }
 }
diff --git a/examples/elm.json b/examples/elm.json
@@ -12,13 +12,17 @@
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
             "elm/json": "1.1.3",
+            "elm/time": "1.0.0",
             "elm/url": "1.0.0",
+            "krisajenkins/remotedata": "6.0.1",
             "lukewestby/elm-string-interpolate": "1.0.4",
             "rtfeldman/elm-css": "18.0.0"
         },
         "indirect": {
+            "elm/bytes": "1.0.8",
+            "elm/file": "1.0.5",
+            "elm/http": "2.0.0",
             "elm/regex": "1.0.0",
-            "elm/time": "1.0.0",
             "elm/virtual-dom": "1.0.2",
             "robinheghan/murmur3": "1.0.0",
             "rtfeldman/elm-hex": "1.0.0"

diff --git a/examples/index.js b/examples/index.js
@@ -18,7 +18,6 @@ import ButtonRenderer from "./src/Components/Button.elm";
 import LinkRenderer from "./src/Components/Link.elm";
 import Editor from "./src/Components/Editor.elm";
 
-
 let app;
 
 window.AgGrid = {
@@ -83,7 +82,12 @@ window.AgGrid = {
     });
 
     app.ports.requestItem.subscribe(function (key) {
-      app.ports.receivedItem.send([key, JSON.parse(localStorage.getItem(key))]);
+      requestAnimationFrame(function () {
+        app.ports.receivedItem.send([
+          key,
+          JSON.parse(localStorage.getItem(key)),
+        ]);
+      });
     });
   },
 };
diff --git a/examples/src/Basic.elm b/examples/src/Basic.elm
@@ -17,22 +17,13 @@ import Result exposing (Result)
 port buttonClicked : (Int -> msg) -> Sub msg
 
 
-port setItem : ( String, Json.Encode.Value ) -> Cmd msg
-
-
-port requestItem : String -> Cmd msg
-
-
-port receivedItem : (( String, Json.Encode.Value ) -> msg) -> Sub msg
-
-
 
 -- INIT
 
 
 init : ( Model, Cmd Msg )
 init =
-    ( initialModel, requestItem gridColumnStorageKey )
+    ( initialModel, Cmd.none )
 
 
 initialModel : Model
@@ -71,7 +62,6 @@ initialModel =
     { searchInput = ""
     , products = products
     , variant = "variant-1"
-    , initialColumnStates = Nothing
     }
 
 
@@ -83,7 +73,6 @@ type alias Model =
     { searchInput : String
     , products : Dict Int Product
     , variant : String
-    , initialColumnStates : Maybe (List AgGrid.ColumnState)
     }
 
 
@@ -92,8 +81,6 @@ type Msg
     | UpdateSearchInput String
     | UpdateProduct (Result Json.Decode.Error Product)
     | ClickedCellButton Int
-    | ColumnStateChanged (AgGrid.StateChange (List AgGrid.ColumnState))
-    | ReceivedColumnStates (Result Json.Decode.Error (List AgGrid.ColumnState))
 
 
 type Category
@@ -134,10 +121,10 @@ update msg model =
             in
             ( { model | products = updatedProducts }, Cmd.none )
 
-        UpdateProduct (Err err) ->
+        UpdateProduct (Err _) ->
             ( model, Cmd.none )
 
-        ClickedCellButton id ->
+        ClickedCellButton _ ->
             let
                 updatedVariant =
                     case model.variant of
@@ -149,12 +136,6 @@ update msg model =
             in
             ( { model | variant = updatedVariant }, Cmd.none )
 
-        ColumnStateChanged { states } ->
-            ( { model | initialColumnStates = Just states }, setItem ( gridColumnStorageKey, AgGrid.columnStatesEncoder states ) )
-
-        ReceivedColumnStates states ->
-            ( { model | initialColumnStates = Result.toMaybe states }, Cmd.none )
-
 
 
 -- VIEW
@@ -185,7 +166,6 @@ viewGrid model =
                 , quickFilterText = model.searchInput
                 , cacheQuickFilter = True
                 , themeClasses = Just "ag-theme-balham ag-basic"
-                , columnStates = Maybe.withDefault [] model.initialColumnStates
             }
 
         gridSettings =
@@ -280,7 +260,6 @@ viewGrid model =
             []
         , AgGrid.grid gridConfig
             [ AgGrid.onCellChanged rowDecoder UpdateProduct
-            , AgGrid.onColumnStateChanged ColumnStateChanged
 
             -- Eventlistener is not attached. Communication happens through ports.
             -- , onCellClicked ClickedCellButton
@@ -359,19 +338,7 @@ onCellClicked toMsg =
 
 subscriptions : Model -> Sub Msg
 subscriptions _ =
-    Sub.batch
-        [ buttonClicked ClickedCellButton
-        , receivedItem
-            (\( key, value ) ->
-                if key == gridColumnStorageKey then
-                    value
-                        |> Json.Decode.decodeValue AgGrid.columnStatesDecoder
-                        |> ReceivedColumnStates
-
-                else
-                    NoOp
-            )
-        ]
+    buttonClicked ClickedCellButton
 
 
 
@@ -401,11 +368,6 @@ decodeCategory categoryString =
             Json.Decode.fail "Failed decoding category"
 
 
-gridColumnStorageKey : String
-gridColumnStorageKey =
-    "elm-ag-grid-columns"
-
-
 rowDecoder : Json.Decode.Decoder Product
 rowDecoder =
     Json.Decode.succeed Product