@cdmx/wappler_ag_grid 0.0.7 → 0.0.9

package/app_connect/components.hjson

@@ -14,21 +14,18 @@
       "help": "AG Grid component for data display",
       "dataScheme": [
         {
-          "name": "data",
-          "title": "Data",
+          "name": "id",
+          "title": "Id",
+          "type": "number"
+        },
+        {
+          "name": "fields",
+          "title": "Fields",
           "type": "object"
         }
       ],
       "outputType": "object",
       "dataPick": true,
-      "outputType": "object",
-      "dataScheme": [
-        {
-          "name": "data",
-          "title": "Data",
-          "type": "object"
-        }
-      ],
       "properties": [
         {
           "group": "AG Grid Properties",
@@ -50,6 +47,20 @@
               "defaultValue": [],
               "required": true,
               "help": "Enter Data Source"
+            },
+            {
+              "name": "grid_theme",
+              "attribute": "grid_theme",
+              "title": "Theme",
+              "type": "droplist",
+              "defaultValue": 'ag-theme-alpine',
+              "values": [
+              {title: 'Alpine', value: 'ag-theme-alpine'},
+              {title: 'Balham', value: 'ag-theme-balham'},
+              {title: 'Material', value: 'ag-theme-material'},
+              {title: 'Base', value: 'ag-grid'}
+              ],
+              "help": "Select a theme for the grid"
             }
           ]
         },
@@ -194,7 +205,7 @@
             },
             {
               "name": "fixedHeader",
-              "attribute": "fixedHeader",
+              "attribute": "dmx-bind:fixedHeader",
               "title": "Sticky Header",
               "type": "boolean",
               "display": "fieldset",
@@ -254,7 +265,7 @@
             },
             {
               "name": "suppressRowClickSelection",
-              "attribute": "suppressRowClickSelection",
+              "attribute": "dmx-bind:suppressRowClickSelection",
               "title": "Suppress Row Click Selection",
               "type": "boolean",
               "defaultValue": false,
@@ -262,7 +273,7 @@
             },
             {
               "name": "suppressMenuHide",
-              "attribute": "suppressMenuHide",
+              "attribute": "dmx-bind:suppressMenuHide",
               "title": "Suppress Menu Hide",
               "type": "boolean",
               "defaultValue": false,
@@ -270,7 +281,7 @@
             },
             {
               "name": "suppressMovableColumns",
-              "attribute": "suppressMovableColumns",
+              "attribute": "dmx-bind:suppressMovableColumns",
               "title": "Suppress Movable Columns",
               "type": "boolean",
               "defaultValue": false,
@@ -278,7 +289,7 @@
             },
             {
               "name": "enableCellExpressions",
-              "attribute": "enableCellExpressions",
+              "attribute": "dmx-bind:enableCellExpressions",
               "title": "Enable Cell Expressions",
               "type": "boolean",
               "defaultValue": false,
@@ -286,7 +297,7 @@
             },
             {
               "name": "animateRows",
-              "attribute": "animateRows",
+              "attribute": "dmx-bind:animateRows",
               "title": "Animate Rows",
               "type": "boolean",
               "defaultValue": false,
@@ -294,7 +305,7 @@
             },
             {
               "name": "suppressAggFuncInHeader",
-              "attribute": "suppressAggFuncInHeader",
+              "attribute": "dmx-bind:suppressAggFuncInHeader",
               "title": "Suppress Aggregation Function in Header",
               "type": "boolean",
               "defaultValue": false,
@@ -302,7 +313,7 @@
             },
             {
               "name": "suppressAggAtRootLevel",
-              "attribute": "suppressAggAtRootLevel",
+              "attribute": "dmx-bind:suppressAggAtRootLevel",
               "title": "Suppress Aggregation at Root Level",
               "type": "boolean",
               "defaultValue": false,
@@ -310,7 +321,7 @@
             },
             {
               "name": "suppressClipboardPaste",
-              "attribute": "suppressClipboardPaste",
+              "attribute": "dmx-bind:suppressClipboardPaste",
               "title": "Suppress Clipboard Paste",
               "type": "boolean",
               "defaultValue": false,
@@ -318,7 +329,7 @@
             },
             {
               "name": "suppressScrollOnNewData",
-              "attribute": "suppressScrollOnNewData",
+              "attribute": "dmx-bind:suppressScrollOnNewData",
               "title": "Suppress Scroll on New Data",
               "type": "boolean",
               "defaultValue": false,
@@ -326,7 +337,7 @@
             },
             {
               "name": "suppressPropertyNamesCheck",
-              "attribute": "suppressPropertyNamesCheck",
+              "attribute": "dmx-bind:suppressPropertyNamesCheck",
               "title": "Suppress Property Names Check",
               "type": "boolean",
               "defaultValue": false,
@@ -339,6 +350,14 @@
               "type": "object",
               "defaultValue": {},
               "help": "Localization strings for the grid"
+            },
+            {
+              "name": "rowClickEvent",
+              "attribute": "dmx-bind:row_click_event",
+              "title": "Row Click Events",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "This enabled row click en=vents whcihc can then be used in Dynamic events => Grid Events => Row Clicked"
             }
           ]
         },
@@ -621,7 +640,17 @@
         }
 
       ],
-      "actionsScheme": [],
+      actionsScheme: [
+        {
+          addTitle: 'Reload Grid',
+          title : 'Reload Grid',
+          name : 'reloadGrid',
+          icon : 'fa fa-lg fa-play',
+          state : 'opened',
+          help: 'Reload the AG Grid',
+          properties : []
+        },
+      ],
       "children": [],
       "allowed_children": {},
       "copyFiles": [
@@ -633,6 +662,14 @@
           "src": "ag-theme-alpine.css",
           "dst": "css/ag-theme-alpine.css"
         },
+        {
+          "src": "ag-theme-balham.css",
+          "dst": "css/ag-theme-balham.css"
+        },
+        {
+          "src": "ag-theme-material.css",
+          "dst": "css/ag-theme-material.css"
+        },
         {
           "src": "dmx-ag-grid.js",
           "dst": "js/dmx-ag-grid.js"
@@ -652,6 +689,14 @@
         {
           "src": "css/ag-theme-alpine.css",
           "type": "css"
+        },
+        {
+          "src": "css/ag-theme-balham.css",
+          "type": "css"
+        },
+        {
+          "src": "css/ag-theme-material.css",
+          "type": "css"
         }
       ],
       "cssOrder": [],
@@ -696,44 +741,34 @@
   ],
   "events": [
     {
-      "name": "dmx-ag-grid-row-data-updated",
+      "name": "dmx-ag-grid-row-clicked",
       "attributeStartsWith": "dmx-on",
+      "attribute": "row_clicked",
       "display": "fieldset",
-      "title": "Updated",
+      "title": "Row Clicked",
       "icon": "fa fa-lg fa-chevron-right",
       "groupTitle": "Grid Events",
       "groupIcon": "fa fa-lg fa-cubes",
       "defaultValue": false,
       "show": [
-        "updatedValue",
-        "updatedMods"
+        "rowClicked",
+        "rowMods"
       ],
       "noChangeOnHide": true,
       "type": "boolean",
       "groupEnabler": true,
       "children": [
         {
-          "name": "updatedValue",
+          "name": "rowClicked",
           "attributeStartsWith": "dmx-on",
-          "attribute": "updated",
+          "attribute": "row_clicked",
           "isValue": true,
           "actionsPicker": true,
           "title": "Action:",
           "type": "text",
           "help": "Choose the action to execute.",
           "defaultValue": "",
-          "initDisplay": "none" //, required: true
-        },
-        {
-          "name": "updatedMods",
-          "attributeStartsWith": "dmx-on",
-          "attribute": "updated",
-          "isModifiers": true,
-          "title": "Modifiers:",
-          "type": "enum",
-          "defaultValue": "",
-          "initDisplay": "none",
-          "valuesType": "event_modifiers" //values: EVENT_MODIFIERS
+          "initDisplay": "none"
         }
       ],
       "allowedOn": {

package/dmx-ag-grid.js

@@ -39,12 +39,14 @@ dmx.Component('ag-grid', {
     fixedHeaderOffset: 100,
     fixedTopOffset: 80,
     fixedHorizonatalScroll: false,
-    timezone: null
+    timezone: null,
+    fields: {}
   },
 
   attributes: {
     id: { default: null },
     rowData: { type: Array, default: [] },
+    grid_theme: { type: String, default: 'ag-theme-alpine' },
     column_defs: { type: Array, default: [] },
     cstyles: { type: Object, default: {} },
     cnames: { type: Object, default: {} },
@@ -82,7 +84,8 @@ dmx.Component('ag-grid', {
     fixedHeaderOffset: { type: Number, default: 100 },
     fixedTopOffset: { type: Number, default: 80 },
     fixedHorizonatalScroll: { type: Boolean, default: false },
-    timezone: {type: Text, default: '' }
+    timezone: {type: Text, default: '' },
+    row_click_event: {type: Boolean, default: false }
   },
 
   methods: {
@@ -102,15 +105,46 @@ dmx.Component('ag-grid', {
     const fixedTopOffset = this.props.fixedTopOffset;
     const timezone = this.props.timezone || false;
     const dataChanges = this.props.data_changes;
+    const grid_theme = this.props.grid_theme;
     let columnDefs = [];
     let exportToCSV = this.props.exportToCSV;
 
 
-    this.$node.innerHTML = `<div id=${gridId}-grid class="ag-theme-alpine"></div>`;
+    this.$node.innerHTML = `<div id=${gridId}-grid class="${grid_theme}"></div>`;
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
       return;
     }
+    function formatValue(value, key, dataType, timezone) {
+      params = {"value":value}
+      if (dataType === 'number') {
+        if (/(amount|amt)$/.test(key)) {
+          return Number(value).toLocaleString("en-US", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          });
+        } else {
+          return blankOrNullValueFormatter(params);
+        }
+      } else if (dataType === 'date') {
+        return formatTime(params, timezone);
+      } else {
+        return blankOrNullValueFormatter(params);
+      }
+    }
+    window.clickEvent = (columnName, value, idValue) => {
+      this.set('fields', {"field": columnName, "data": value});
+      this.set('id', idValue);
+      this.dispatchEvent('row_clicked')
+    };
+    function clickCellRenderer(params) {
+      const idValue = params.data.id;
+      const columnName = params.colDef.field;
+      const dataType = detectDataType([params.value]);
+      const value = formatValue(params.value, columnName, dataType, timezone);
+      return `<div onclick="clickEvent('${columnName}', '${value}', '${idValue}')" style="cursor: pointer;">${value}</div>`;
+    }
+    
 
     function humanize(str) {
       if (str == null) return str;
@@ -301,6 +335,7 @@ const cstyles = this.props.cstyles
 }
         cnames = this.props.cnames
         cwidths = this.props.cwidths
+        enableClickEvent = this.props.row_click_event;
         if (cnames.hasOwnProperty(key)) {
         console.log(key)
         const cname = cnames[key]
@@ -321,6 +356,7 @@ const cstyles = this.props.cstyles
             minWidth: parseInt(cwidths[key].min_width),
             maxWidth: parseInt(cwidths[key].max_width),
           }),
+          cellRenderer: enableClickEvent ? 'clickCellRenderer' : undefined
         };
       });
     }
@@ -352,7 +388,10 @@ const cstyles = this.props.cstyles
       suppressClipboardPaste: this.props.suppressClipboardPaste,
       suppressScrollOnNewData: this.props.suppressScrollOnNewData,
       suppressPropertyNamesCheck: this.props.suppressPropertyNamesCheck,
-      localeText: this.props.localeText
+      localeText: this.props.localeText,
+      components: {
+        clickCellRenderer: clickCellRenderer
+      }
     };
 
     const gridDiv = document.getElementById(gridId+'-grid');
@@ -429,17 +468,23 @@ const cstyles = this.props.cstyles
   },
 
   events: {
-    'dmx-ag-grid-row-data-updated': Event
+    row_clicked: Event
   },
 
   render: function(node) {
     if (this.$node) {
+      
       this.$parse();
     }
   },
 
   update: function (props) {
     if (!dmx.equal(this.props.data, props.data)) {
+      this.set("id", {
+        status: 0,
+        message: 'tedt',
+        response: null
+    })
       this.refreshGrid();
     }
   },

package/package.json

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