@cdmx/wappler_ag_grid 0.0.2 → 0.0.3

package/README.md

@@ -7,3 +7,7 @@ This Custom Module provides the below features:
 5. Export to CSV button
 6. Sticky header options
 7. Custom Styles (Column Data)
+8. Custom Header Names
+9. Custom min and max widths
+10. Timezone setting for Date fields
+11. Data Manipulation

package/app_connect/components.hjson

@@ -91,7 +91,7 @@
               "title": "Minimum Width",
               "type": "number",
               "defaultValue": 150,
-              "help": "The minimum width of the columns"
+              "help": "The minimum width of the column"
             },
             {
               "name": "resizable",
@@ -443,6 +443,76 @@
             }
           ]
         },
+        {
+          "group": "📒 Data Manipulation",
+          "variables": [
+            {
+              "name": "data_changes",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "data_changes",
+              "title": "Configure Fields",
+              "type": "boolean",
+              "display": "fieldset",
+              "show": [
+                "dataChanges"
+              ],
+              "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": "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",
+                  "title": "Fields Data",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "key": "field",
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "size": "10%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "value",
+                      "caption": "Value",
+                      "size": "10%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "new_value",
+                      caption: "New Value",
+                      size: "10%",
+                      editable: {
+                        type: "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "name": "",
+                    "value": "",
+                    "field": "",
+                    "new_value": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Custom Headers",
           "variables": [

package/dmx-ag-grid.js

@@ -6,6 +6,7 @@ dmx.Component('ag-grid', {
     cstyles: null,
     cnames: null,
     cwidths: null,
+    data_changes: null,
     gridInstance: null,
     domLayout: 'autoHeight',
     enableCellTextSelection: true,
@@ -42,69 +43,25 @@ dmx.Component('ag-grid', {
   },
 
   attributes: {
-    id: {
-      default: null
-    },
-    rowData: {
-      type: Array,
-      default: []
-    },
-    column_defs: {
-      type: Array,
-      default: []
-    },
-    cstyles: {
-      type: Object,
-      default: {}
-    },
+    id: { default: null },
+    rowData: { type: Array, default: [] },
+    column_defs: { type: Array, default: [] },
+    cstyles: { type: Object, default: {} },
     cnames: { type: Object, default: {} },
     cwidths: { type: Object, default: {} },
-    data: {
-      type: Array,
-      default: []
-    },
-    domLayout: {
-      default: 'autoHeight'
-    },
-    enableCellTextSelection: {
-      type: Boolean,
-      default: true
-    },
-    rowSelection: {
-      type: Boolean,
-      default: false
-    },
-    suppressRowDeselection: {
-      type: Boolean,
-      default: false
-    },
-    pagination: {
-      type: Boolean,
-      default: true
-    },
-    paginationPageSize: {
-      default: 20
-    },
-    rowHeight: {
-      type: Number,
-      default: null
-    },
-    headerHeight: {
-      type: Number,
-      default: null
-    },
-    suppressRowClickSelection: {
-      type: Boolean,
-      default: false
-    },
-    suppressMenuHide: {
-      type: Boolean,
-      default: false
-    },
-    suppressMovableColumns: {
-      type: Boolean,
-      default: false
-    },
+    data_changes: { type: Object, default: {} },
+    data: { type: Array, default: [] },
+    domLayout: { default: 'autoHeight' },
+    enableCellTextSelection: { type: Boolean, default: true },
+    rowSelection: { type: Boolean, default: false },
+    suppressRowDeselection: { type: Boolean, default: false },
+    pagination: { type: Boolean, default: true },
+    paginationPageSize: { default: 20 },
+    rowHeight: { type: Number, default: null },
+    headerHeight: { type: Number, default: null },
+    suppressRowClickSelection: { type: Boolean, default: false },
+    suppressMenuHide: { type: Boolean, default: false },
+    suppressMovableColumns: { type: Boolean, default: false },
     enableCellExpressions: {
       type: Boolean,
       default: false
@@ -200,6 +157,7 @@ dmx.Component('ag-grid', {
     const topbarClass = this.props.topbarClass;
     const fixedTopOffset = this.props.fixedTopOffset;
     const timezone = this.props.timezone || false;
+    const dataChanges = this.props.data_changes;
     let columnDefs = [];
     let exportToCSV = this.props.exportToCSV;
     if (!rowData || rowData.length === 0) {
@@ -289,6 +247,16 @@ dmx.Component('ag-grid', {
         return 'text';
       }
     }
+    function getValueGetter(key, dataChanges) {
+      return function(params) {
+        let value = params.data[key];
+        if (dataChanges.hasOwnProperty(key)) {
+          const change = dataChanges[key];
+          value = change.new_value;
+        }
+        return value;
+      };
+    }
     if (Array.isArray(this.props.column_defs) && this.props.column_defs.length > 0) {
       columnDefs = this.props.column_defs;
     } else {
@@ -337,6 +305,9 @@ dmx.Component('ag-grid', {
             filterValueGetter = eval(`(params) => ${definition.filterGetter}`);
           }
         }
+        else {
+          valueGetter = getValueGetter(key, dataChanges);
+        }
         function extractConditionParts(condition) {
           const parts = condition.match(/(.+?)(===|==|!=|>|<|>=|<=)(.+)/);
           if (parts) {

package/package.json

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