@cdmx/wappler_ag_grid 0.0.2 → 0.0.4

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

@@ -9,7 +9,7 @@
       "icon": "fa fa-lg fa-table",
       "state": "opened",
       "anyParent": true,
-      "template": "<dmx-ag-grid id=\"@@id@@-grid\">\n<div id=\"@@id@@\" class=\"col ag-theme-alpine\">\n</div>\n</dmx-ag-grid>",
+      "template": "<dmx-ag-grid id=\"@@id@@\"></dmx-ag-grid>",
       "baseName": "aggrid",
       "help": "AG Grid component for data display",
       "dataScheme": [
@@ -56,42 +56,13 @@
         {
           "group": "AG Grid Options",
           "variables": [
-            {
-              "name": "defaultColDef",
-              "attribute": "defaultColDef",
-              "title": "Default Column Definition",
-              "type": "object",
-              "defaultValue": {},
-              "help": "Default properties for all columns"
-            },
-            {
-              "name": "columnTypes",
-              "attribute": "columnTypes",
-              "title": "Column Types",
-              "type": "object",
-              "defaultValue": {},
-              "help": "Map of custom column types"
-            },
-            {
-              "name": "rowSelection",
-              "attribute": "rowSelection",
-              "title": "Row Selection",
-              "type": "string",
-              "defaultValue": "single",
-              "options": [
-                "single",
-                "multiple",
-                "none"
-              ],
-              "help": "Defines the row selection mode"
-            },
             {
               "name": "minWidth",
               "attribute": "minWidth",
               "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 +414,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,8 +157,12 @@ 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;
+
+
+    this.$node.innerHTML = `<div id=${gridId +'-grid'}></div>`
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
       return;
@@ -289,6 +250,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 +308,9 @@ dmx.Component('ag-grid', {
             filterValueGetter = eval(`(params) => ${definition.filterGetter}`);
           }
         }
+        else {
+          valueGetter = getValueGetter(key, dataChanges);
+        }
         function extractConditionParts(condition) {
           const parts = condition.match(/(.+?)(===|==|!=|>|<|>=|<=)(.+)/);
           if (parts) {
@@ -452,10 +426,9 @@ const cstyles = this.props.cstyles
       rowData: rowData,
       ...gridOptions
     };
-
     // Create ag-Grid instance
     new agGrid.Grid(gridDiv, gridConfig);
-    const gridElement = document.querySelector('.ag-theme-alpine');
+    const gridElement = document.getElementById(gridId+'-grid');
     const gridContainer = gridElement.parentNode;
 
     if (!gridContainer) {
@@ -515,13 +488,13 @@ const cstyles = this.props.cstyles
     'dmx-ag-grid-row-data-updated': Event
   },
 
-  render: function () {
-    // this.refreshGrid();
+  render: function(node) {
+    if (this.$node) {
+      this.$parse();
+    }
   },
 
   update: function (props) {
-    // dmx.equal is a helper function the does a deep compare
-    // which is useful when comparing arrays and objects
     if (!dmx.equal(this.props.data, props.data)) {
       this.refreshGrid();
     }

package/package.json

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