@cdmx/wappler_ag_grid 0.3.4 → 0.3.6

package/app_connect/components.hjson

@@ -419,13 +419,79 @@
             }
           ]
         },
+        {
+          "group": "📒 Data Type Overrides",
+          "variables": [
+            {
+              "name": "ctypes",
+              "title": "Configure Type Overrides",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "ctypes",
+              "type": "boolean",
+              "defaultValue": false,
+              "icon": "fa fa-lg fa-database",
+              "groupIcon": "fa fa-lg fa-exchange",
+              "display": "fieldset",
+              "show": [
+                "typeOverrides"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "This allows you to override the auto-detected datatypes"
+              "children": [
+                {
+                  "name": "typeOverrides",
+                  "attribute": "dmx-bind:ctypes",
+                  "title": "Type Overrides",
+                  "type": "grid",
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "defaultValue": [],
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "size": "20%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "type",
+                      "caption": "Type",
+                      "size": "35%",
+                      "editable": {
+                        "type": "list", 
+                        "items": [
+                          {id: 'number', text: 'number'},
+                          {id: 'text', text: 'text'},
+                          {id: 'date', text: 'date'}
+                        ]
+                      }
+                    },
+                  ],
+                  "newRecord": {
+                    "name": "",
+                    "field": "",
+                    "type": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Style Formatting",
           "variables": [
             {
               "name": "cstyles",
               "title": "Configure Colors",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "cstyles",
               "type": "boolean",
+              "defaultValue": false,
               "display": "fieldset",
               "show": [
                 "listColors"
@@ -434,11 +500,6 @@
               "groupEnabler": true,
               "help": "Add custom colors to column data based on condition, ex: field: status, condition: status==false, Color: red"
               "children": [
-                {
-                  "name": "help",
-                  "type": "static",
-                  "help": "Add custom colors for the fields"
-                },
                 {
                   "name": "listColors",
                   "attribute": "dmx-bind:cstyles",
@@ -494,7 +555,10 @@
             {
               "name": "data_binded_changes",
               "title": "Configure Fields",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "data_binded_changes",
               "type": "boolean",
+              "defaultValue": false,
               "display": "fieldset",
               "show": [
                 "dataBindedChanges"
@@ -564,7 +628,10 @@
             {
               "name": "data_changes",
               "title": "Configure Fields",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "data_changes",
               "type": "boolean",
+              "defaultValue": false,
               "display": "fieldset",
               "show": [
                 "dataChanges"
@@ -623,7 +690,10 @@
             {
               "name": "cnames",
               "title": "Configure Header Names",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "cnames",
               "type": "boolean",
+              "defaultValue": false,
               "display": "fieldset",
               "show": [
                 "listCustomNames"
@@ -632,11 +702,6 @@
               "groupEnabler": true,
               "help": "Add custom headers to column"
               "children": [
-                {
-                  "name": "help",
-                  "type": "static",
-                  "help": "Add custom headers to column"
-                },
                 {
                   "name": "listCustomNames",
                   "attribute": "dmx-bind:cnames",
@@ -685,7 +750,10 @@
             {
               "name": "cwidths",
               "title": "Configure Custom Widths",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "cwidths",
               "type": "boolean",
+              "defaultValue": false,
               "display": "fieldset",
               "show": [
                 "listCustomWidths",
@@ -694,11 +762,6 @@
               "groupEnabler": true,
               "help": "Add custom widths for the field"
               "children": [
-                {
-                  "name": "help",
-                  "type": "static",
-                  "help": "Add custom widths for the field"
-                },
                 {
                   "name": "listCustomWidths",
                   "attribute": "dmx-bind:cwidths",
@@ -776,11 +839,6 @@
               "groupEnabler": true,
               "help": "Configure Actions for the buttons in Actions Column"
               "children": [
-                {
-                  "name": "help",
-                  "type": "static",
-                  "help": "Configure Actions for the buttons"
-                },
                 {
                   "name": "enableActions",
                   "attribute": "dmx-bind:enable_actions",

package/dmx-ag-grid.js

@@ -13,6 +13,7 @@ dmx.Component('ag-grid', {
     cstyles: { type: Array, default: [] },
     cnames: { type: Object, default: {} },
     cwidths: { type: Object, default: {} },
+    ctypes: { type: Array, default: [] },
     data_changes: { type: Array, default: [] },
     data: { type: Array, default: [] },
     dom_layout: { type: String, default: 'autoHeight' },
@@ -75,8 +76,9 @@ dmx.Component('ag-grid', {
       this.refreshGrid();
     },
     reloadGrid: function () {
-      this.refreshGrid()
-      console.log('reloadGrid');
+      dmx.nextTick(function() {
+        this.refreshGrid();
+      }, this);
     }
   },
 
@@ -86,6 +88,7 @@ dmx.Component('ag-grid', {
     const timezone = this.props.timezone || false;
     const cnames = this.props.cnames
     const cwidths = this.props.cwidths
+    const ctypes = this.props.ctypes
     const enableRowClickEvent = this.props.row_click_event;
     const enableCellClickEvent = this.props.cell_click_event;
     let localeText;
@@ -262,6 +265,10 @@ dmx.Component('ag-grid', {
         browserDatePicker: true,
       }
     // Function to detect the data type based on the values
+    function getCustomDataTypes(key) {
+      const matchingType = ctypes.find((ct) => ct.field === key);
+      return matchingType ? matchingType.type : null;
+    }
     function detectDataType(values) {
       let hasDate = false;
       let hasNumber = false;
@@ -327,6 +334,44 @@ dmx.Component('ag-grid', {
         return value;
       };
     }
+    createCombinedFilterValueGetter = (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];
+    
+        // 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;
+      };
+    };
     if (Array.isArray(this.props.column_defs) && this.props.column_defs.length > 0) {
       columnDefs = this.props.column_defs;
     } else {
@@ -336,7 +381,7 @@ dmx.Component('ag-grid', {
         // Assuming rowData is an array of objects
         const values = rowData.map(row => row[key]);
         const nonNullValues = values.filter(value => value !== null);
-        const dataType = detectDataType(nonNullValues);
+        const dataType = (ctypes.length>0 ? getCustomDataTypes(key) : detectDataType(nonNullValues));
         let filter;
         let valueGetter;
         let filterValueGetter;
@@ -384,6 +429,7 @@ dmx.Component('ag-grid', {
         else {
           // valueGetter = getValueGetter(key, dataChanges);
           valueGetter = createCombinedValueGetter(key, options.data_changes, options.data_binded_changes);
+          filterValueGetter = createCombinedFilterValueGetter(key, options.data_changes, options.data_binded_changes);
         }
         function extractConditionParts(condition) {
           const parts = condition.match(/(.+?)(===|==|!=|>|<|>=|<=)(.+)/);

package/package.json

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