@cdmx/wappler_ag_grid 0.5.9 → 0.6.1

package/README.md

@@ -148,10 +148,34 @@ Enter the names of fields you want to hide separated by commas. The specified fi
 Enter the names of filters you want to hide separated by commas. The specified filters will be hidden from the view.
 
 **Hide Sort Filters**
-Enter the names of sort filters you want to hide separated by commas. The specified sort filters will be hidden from the view.
+Enter the names of the sort filters you want to hide separated by commas. The specified sort filters will be hidden from the view.
 
 ---
 
+# Amount Fields
+The amount fields configuration consists of the following parameters:
+
+- **Amount Fields** (Type: checkbox, Default: false)
+  - Enable or disable the comma-separation for amount fields.
+
+- **Amount Fields** (Type: textbox, Default: null)
+  - Define the fields where the comma-separation and float parsing need to be applied.
+---
+
+# Compact View
+The compact view configuration consists of the following parameters:
+
+- **Compact View** (Type: checkbox, Default: false)
+  - Enable or disable the compact view for the grid.
+
+- **Grid Size** (Type: number, Default: 3)
+  - Specify the grid size for the compact view. This determines the number of columns in each row.
+
+- **Grid Item Height** (Type: number, Default: 20)
+  - Set the height of each item in the compact view.
+ 
+---
+
 # Configure Actions Column
 The Configure Actions Column feature allows you to configure actions for the buttons in the Actions Column.
 
@@ -202,6 +226,17 @@ Specify the tooltip text for the Delete Action button.
 Specify the CSS class for styling the Delete Action button.
 Specify the CSS class for styling the icon of the Delete Action button.
 
+# Action Attributes
+
+**Load**
+- Mainly to be used in conjunction with "No Auto Load" enabled so that you can load only when certain conditions are met.
+- Use Case: Used when you're awaiting the population of specific elements or data before loading the grid. It's also useful for refreshing the grid intentionally.
+
+**Reload** (Beta)
+- To be used in conjunction with "No Auto Load" enabled
+- This performs a transactional update of the client-side data in the grid after comparing the existing and updated datasets
+- To use this: Enable "No Auto Load", On Edit or update actions, perform an SC load, On Success of SC load perform the AG Grid Module Reload Action.
+
 ## License
 
 The AG Grid module is licensed under the MIT License. Please refer to the license file for more details.

package/app_connect/components.hjson

@@ -1098,6 +1098,68 @@
             }
           ]
         },
+        {
+          "group": "📒 Column Groups",
+          "variables": [
+            {
+              "name": "groupConfig",
+              "title": "Configure Column Groups",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "listGroupConfig",
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Apply Column grouping"
+              "children": [
+                {
+                  "name": "listGroupConfig",
+                  "attribute": "dmx-bind:group_config",
+                  "title": "Group Config",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "name",
+                      "caption": "Group Name",
+                      "size": "25%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "start_field",
+                      caption: "Start Field",
+                      size: "25%",
+                      editable: {
+                        type: "text"
+                      }
+                    },
+                    {
+                      field: "end_field",
+                      caption: "Start Field",
+                      size: "25%",
+                      editable: {
+                        type: "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "name": "",
+                    "start_field": "",
+                    "end_field": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Configure Actions Column",
           "variables": [

package/dmx-ag-grid.js

@@ -85,7 +85,8 @@ dmx.Component('ag-grid', {
     hide_sort: {type: Array, default: [] },
     compact_view: { type: Boolean, default: false },
     compact_view_grid_size: { type: Number, default: 3 },
-    compact_view_item_height: { type: Number, default: 20 }
+    compact_view_item_height: { type: Number, default: 20 },
+    group_config: { type: Array, default: [] }
   },
 
   methods: {
@@ -96,16 +97,48 @@ dmx.Component('ag-grid', {
     },
     reloadGrid: function () {
       dmx.nextTick(function() {
-        this.refreshGrid();
+        this.transactionUpdate();
       }, this);
     },
     loadGrid: function () {
       dmx.nextTick(function() {
-        this.refreshGrid();
+      let gridInstance = this.refreshGrid();
+      this.set('gridInstance', gridInstance);
       }, this);
     }
   },
 
+  transactionUpdate: function () {
+    // const oldRowData = this.get('oldData');
+    const gridInstance = this.get('gridInstance');
+    const oldRowData = gridInstance.gridOptions.api.getModel().rowsToDisplay.map(row => row.data);
+    const newRowData = this.props.data;
+    let transaction;
+  
+    if (oldRowData && oldRowData.length > 0) {
+        const addedRows = newRowData.filter(newRow => !oldRowData.some(oldRow => newRow.id === oldRow.id));
+        const removedRows = oldRowData.filter(oldRow => !newRowData.some(newRow => oldRow.id === newRow.id));
+        const updatedRows = newRowData.filter(newRow => {
+          const oldRow = oldRowData.find(old => old.id === newRow.id);
+          return oldRow && JSON.stringify(oldRow) !== JSON.stringify(newRow);
+        });
+  
+        // Apply transactional updates to AG Grid
+        transaction = {
+          add: addedRows,
+          remove: removedRows,
+          update: updatedRows,
+        };
+      }
+      
+    if (gridInstance && gridInstance.gridOptions && transaction) {
+      gridInstance.gridOptions.api.applyTransaction(transaction);
+      gridInstance.gridOptions.api.refreshCells();
+    } else {
+      console.error('AG Grid instance or transaction not found.');
+    }
+  },
+
   refreshGrid: function () {
     const options = this.props
     const rowData = this.props.data;
@@ -117,6 +150,7 @@ dmx.Component('ag-grid', {
     const enableCellClickEvent = this.props.row_click_event && (this.props.enable_actions || this.props.row_checkbox_event); 
     let localeText;
     let columnDefs = [];
+    let groupedColumnDefs = [];
     let exportToCSV = this.props.export_to_csv;
     let gridInstance = null; 
     this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
@@ -527,7 +561,6 @@ dmx.Component('ag-grid', {
       columnDefs = this.props.column_defs;
     } else {
       const firstRow = rowData[0];
-
       columnDefs = Object.keys(firstRow).map(key => {
         // Assuming rowData is an array of objects
         const values = rowData.map(row => row[key]);
@@ -540,6 +573,7 @@ dmx.Component('ag-grid', {
         let filterParams;
         let minWidth;
         let hide;
+        let type;
         let colId;
 
         if (dataType === 'number') {
@@ -693,7 +727,6 @@ dmx.Component('ag-grid', {
         else {
           hide = undefined;
         }
-
         return {
           headerName: headerName,
           field: key,
@@ -715,6 +748,27 @@ dmx.Component('ag-grid', {
           cellRenderer: cellRenderer
         };
       });
+      if (options.group_config && options.group_config.length > 0) {
+        groupedColumnDefs = options.group_config.map(group => {
+          const startFieldIndex = columnDefs.findIndex(colDef => colDef.field === group.start_field);
+          const endFieldIndex = columnDefs.findIndex(colDef => colDef.field === group.end_field);
+      
+          if (startFieldIndex === -1 || endFieldIndex === -1 || startFieldIndex > endFieldIndex) {
+              return null;
+          }
+      
+          const groupColumns = columnDefs.slice(startFieldIndex, endFieldIndex + 1)
+              .map(col => ({
+                  ...col,
+                  columnGroupShow: 'open'
+              }));
+      
+          return {
+              headerName: group.name,
+              children: groupColumns
+          };
+      }).filter(group => group !== null);
+    }
     }
     window.onRowClicked = (event) => {
       const rowData = event.data;
@@ -801,7 +855,7 @@ dmx.Component('ag-grid', {
       localeText = AG_GRID_LOCALE_HE
     }
     const gridOptions = {
-      columnDefs: columnDefs,
+      columnDefs: (groupedColumnDefs && groupedColumnDefs.length > 0) ? groupedColumnDefs : columnDefs,
       localeText: localeText,
       enableRtl: options.enable_rtl,
       noRowsOverlayComponent: '<div>No Records Found.</div>',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "0.5.9",
+    "version": "0.6.1",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation",
     "license": "MIT",