@cdmx/wappler_ag_grid 0.2.7 → 0.2.9

package/README.md

@@ -16,4 +16,5 @@ This Custom Module provides the below features:
 13. Row Click Event Handling
 14. Options to enable checkboxes for IDs for bulk select Operations
 15. Options to enable Toggle Sliders for status fields
-16. Added Action Buttons feature
+16. Added Action Buttons feature
+17. Advanced Data Manipulation using Arrays and SC bindings

package/app_connect/components.hjson

@@ -22,7 +22,12 @@
           "name": "data",
           "title": "Data",
           "type": "object"
-        }
+        },
+        {
+          "name": "count",
+          "title": "Count",
+          "type": "number"
+        },
         {
           "name": "fields",
           "title": "Fields",
@@ -450,11 +455,11 @@
                       }
                     },
                     {
-                      field: "customColor",
-                      caption: "Color",
-                      size: "20%",
-                      editable: {
-                        type: "text"
+                      "field": "customColor",
+                      "caption": "Color",
+                      "size": "20%",
+                      "editable": {
+                        "type": "text"
                       },
                       help: "Example: '#FF0000' or 'red'"
                     }
@@ -471,6 +476,76 @@
             }
           ]
         },
+        {
+          "group": "📒 Data Advanced Manipulation",
+          "variables": [
+            {
+              "name": "data_binded_changes",
+              "title": "Configure Fields",
+              "type": "boolean",
+              "display": "fieldset",
+              "show": [
+                "dataBindedChanges"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Add custom values for the field data based on value, ex: field: status, value: false, new_value: Disabled"
+              "children": [
+                {
+                  "name": "dataBindedChanges",
+                  "attribute": "dmx-bind:data_binded_changes",
+                  "title": "Fields Data",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "size": "5%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "data_source",
+                      "caption": "Value",
+                      "size": "5%",
+                      "editable": {
+                        "type": "datapicker"
+                      }
+                    },
+                    {
+                      "field": "property",
+                      "caption": "Property",
+                      "size": "5%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "output",
+                      "caption": "Output",
+                      "size": "5%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "data_source": "",
+                    "property": "",
+                    "output": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Data Manipulation",
           "variables": [
@@ -486,11 +561,6 @@
               "groupEnabler": true,
               "help": "Add custom values for the field data based on value, ex: field: status, value: false, new_value: Disabled"
               "children": [
-                {
-                  "name": "help",
-                  "type": "static",
-                  "help": "Add custom values for the field data based on value, ex: field: status, value: false, new_value: Disabled"
-                },
                 {
                   "name": "dataChanges",
                   "attribute": "dmx-bind:data_changes",
@@ -560,7 +630,6 @@
                   "attribute": "dmx-bind:cnames",
                   "title": "Header Names",
                   "type": "grid",
-                  "dataBindings": true,
                   "key": "field",
                   "jsonFormat": true,
                   "encloseBT": true,
@@ -579,6 +648,7 @@
                       field: "custom_name",
                       caption: "Name",
                       size: "20%",
+                      dataBindings: true,
                       editable: {
                         type: "text"
                       },

package/dmx-ag-grid.js

@@ -2,6 +2,7 @@ dmx.Component('ag-grid', {
   initialData: {
     id: null,
     data: {},
+    count: Number,
     fields: {}
   },
 
@@ -64,6 +65,7 @@ dmx.Component('ag-grid', {
     edit_action_btn_class: {type: String, default: 'btn-primary btn-xs' },
     view_action_icon_class: {type: String, default: 'fas fa-eye' },
     view_action_btn_class: {type: String, default: 'btn-info btn-xs' },
+    data_binded_changes: {type: Array, default: [] }
     
   },
 
@@ -83,7 +85,6 @@ dmx.Component('ag-grid', {
     const options = this.props
     const rowData = this.props.data;
     const timezone = this.props.timezone || false;
-    const dataChanges = this.props.data_changes;
 
     let columnDefs = [];
     let exportToCSV = this.props.exportToCSV;
@@ -283,13 +284,43 @@ dmx.Component('ag-grid', {
         return 'text';
       }
     }
-    function getValueGetter(key, dataChanges) {
+    createCombinedValueGetter = (key, dataChanges, dataBindedChanges) => {
+      const keyLookup = {};
+    
+      dataBindedChanges.forEach(change => {
+        if (!keyLookup[change.field]) {
+          const data_source = change.data_source;
+          const property = change.property;
+          const output = change.output;
+          let dataArray;
+          this.$addBinding(data_source, (function (e) {
+            dataArray = e;
+          }));
+          keyLookup[change.field] = { dataArray, property, output };
+        }
+      });
+    
       return function (params) {
         const value = params.data[key];
-        const matchingChange = dataChanges.find((change) => change.field === key && change.value === String(value));
+    
+        // Check if there's a matching change in dataChanges
+        const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
         if (matchingChange) {
           return matchingChange.new_value;
         }
+    
+        // Check if there's a matching change in dataBindedChanges
+        const matchingKeyData = keyLookup[key];
+        if (matchingKeyData) {
+          const { dataArray, property, output } = matchingKeyData;
+          const matchingItem = dataArray.find(item => item[property] === value);
+    
+          if (matchingItem) {
+            return matchingItem[output];
+          }
+        }
+    
+        // Return the original value if no matching changes were found
         return value;
       };
     }
@@ -310,8 +341,6 @@ dmx.Component('ag-grid', {
         let filterParams;
         let minWidth;
         let hide;
-
-
         if (dataType === 'number') {
           filter = 'agNumberColumnFilter';
           if (/(amount|amt)$/.test(key)) {
@@ -349,7 +378,8 @@ dmx.Component('ag-grid', {
           }
         }
         else {
-          valueGetter = getValueGetter(key, dataChanges);
+          // valueGetter = getValueGetter(key, dataChanges);
+          valueGetter = createCombinedValueGetter(key, options.data_changes, options.data_binded_changes);
         }
         function extractConditionParts(condition) {
           const parts = condition.match(/(.+?)(===|==|!=|>|<|>=|<=)(.+)/);
@@ -512,6 +542,7 @@ dmx.Component('ag-grid', {
         
     const gridOptions = {
       columnDefs: columnDefs,
+      noRowsOverlayComponent: '<div>No Records Found.</div>',
       onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
       rowStyle: enableRowClickEvent ? { cursor: 'pointer' } : undefined,
       defaultColDef: {
@@ -684,6 +715,7 @@ dmx.Component('ag-grid', {
   },
 
   update: function (props) {
+    this.set('count', this.props.data.length);
     if (!dmx.equal(this.props.data, props.data)) {
       this.refreshGrid();
     }

package/package.json

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