@cdmx/wappler_ag_grid 0.5.8 → 0.6.0

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" being 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

@@ -1052,6 +1052,52 @@
             }
           ]
         },
+        {
+          "group": "📒 Compact View",
+          "variables": [
+            {
+              "name": "compact_view",
+              "title": "Compact View Config",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "compactView",
+                "compactViewGridSize",
+                "compactViewItemHeight"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Configure amount fields to have comma-seperation implemented"
+              "children": [
+                {
+                  "name": "compactView",
+                  "attribute": "dmx-bind:compact_view",
+                  "title": "Compact View",
+                  "type": "boolean",
+                  "defaultValue": false,
+                  "initDisplay": "none"
+                },
+                {
+                  "name": "compactViewGridSize",
+                  "attribute": "compact_view_grid_size",
+                  "title": "Grid Size",
+                  "type": "number",
+                  "defaultValue": 3,
+                  "initDisplay": "none"
+                },
+                {
+                  "name": "compactViewItemHeight",
+                  "attribute": "compact_view_item_height",
+                  "title": "Grid Item Height",
+                  "type": "number",
+                  "defaultValue": 20,
+                  "initDisplay": "none"
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Configure Actions Column",
           "variables": [

package/dmx-ag-grid.js

@@ -82,7 +82,10 @@ dmx.Component('ag-grid', {
     data_binded_changes: {type: Array, default: [] },
     hide_fields: {type: Array, default: [] },
     hide_filters: {type: Array, default: [] },
-    hide_sort: {type: Array, default: [] }
+    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 }
   },
 
   methods: {
@@ -93,16 +96,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;
@@ -537,6 +572,7 @@ dmx.Component('ag-grid', {
         let filterParams;
         let minWidth;
         let hide;
+        let type;
         let colId;
 
         if (dataType === 'number') {
@@ -859,6 +895,10 @@ dmx.Component('ag-grid', {
     // Create ag-Grid instance
     gridInstance = new agGrid.Grid(gridDiv, gridConfig);
     const gridElement = document.getElementById(options.id+'-grid');
+    if (options.compact_view) {
+      gridElement.style.setProperty('--ag-grid-size', `${options.compact_view_grid_size}`+'px');
+      gridElement.style.setProperty('--ag-list-item-height', `${options.compact_view_item_height}`+'px');
+    }
     const gridContainer = gridElement.parentNode;
     // Add an event listener to the grid
     if (options.row_checkbox_event) {

package/package.json

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