@cdmx/wappler_ag_grid 0.2.0 → 0.2.2

package/app_connect/components.hjson

@@ -1046,6 +1046,74 @@
       "allowedOn": {
         "dmx-ag-grid": true
       }
+    },
+    {
+      "name": "dmx-ag-grid-edit-clicked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_action_edit",
+      "display": "fieldset",
+      "title": "Edit Clicked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowActionEdit"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowActionEdit",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_action_edit",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
+    {
+      "name": "dmx-ag-grid-view-clicked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_action_view",
+      "display": "fieldset",
+      "title": "View Clicked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowActionView"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowActionView",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_action_view",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
     }
   ],
   "static_events": []

package/dmx-ag-grid.js

@@ -2,45 +2,7 @@ dmx.Component('ag-grid', {
   initialData: {
     id: null,
     data: {},
-    fields: {},
-    column_defs: [],
-    cstyles: null,
-    cnames: null,
-    cwidths: null,
-    data_changes: null,
-    gridInstance: null,
-    domLayout: 'autoHeight',
-    enableCellTextSelection: true,
-    rowSelection: null,
-    suppressRowDeselection: null,
-    pagination: null,
-    paginationPageSize: null,
-    rowHeight: null,
-    headerHeight: null,
-    suppressRowClickSelection: null,
-    suppressMenuHide: null,
-    suppressMovableColumns: null,
-    enableCellExpressions: null,
-    animateRows: null,
-    suppressAggFuncInHeader: null,
-    suppressAggAtRootLevel: null,
-    suppressClipboardPaste: null,
-    suppressScrollOnNewData: null,
-    suppressPropertyNamesCheck: null,
-    localeText: null,
-    minWidth: 150,
-    resizable: true,
-    sortable: true,
-    filter: true,
-    floatingFilter: true,
-    columnHoverHighlight: true,
-    exportToCSV: true,
-    fixedHeader: false,
-    topbarClass: null,
-    fixedHeaderOffset: 100,
-    fixedTopOffset: 80,
-    fixedHorizonatalScroll: false,
-    timezone: null
+    fields: {}
   },
 
   attributes: {
@@ -111,33 +73,14 @@ dmx.Component('ag-grid', {
   },
 
   refreshGrid: function () {
-    const gridId = this.props.id;
+    const options = this.props
     const rowData = this.props.data;
-    const fixedHeader = this.props.fixedHeader;
-    const fixedHeaderOffset = this.props.fixedHeaderOffset;
-    const topbarClass = this.props.topbarClass;
-    const fixedTopOffset = this.props.fixedTopOffset;
     const timezone = this.props.timezone || false;
     const dataChanges = this.props.data_changes;
-    const grid_theme = this.props.grid_theme;
-    const enableCheckboxEvent = this.props.row_checkbox_event;
-    const enableStatusToggle = this.props.row_status_event;
-    const enableActions = this.props.enable_actions;
-    const pin_actions = this.props.pin_actions;
-    const edit_action_title = this.props.edit_action_title;
-    const edit_action_btn_class = this.props.edit_action_btn_class;
-    const edit_action_icon_class = this.props.edit_action_icon_class;
-    const view_action_title = this.props.view_action_title;
-    const view_action_btn_class = this.props.view_action_btn_class;
-    const view_action_icon_class = this.props.view_action_icon_class;
-    const edit_action_tooltip = this.props.edit_action_tooltip;
-    const view_action_tooltip = this.props.view_action_tooltip;
 
     let columnDefs = [];
     let exportToCSV = this.props.exportToCSV;
-    console.log(this.props)
-
-    this.$node.innerHTML = `<div id=${gridId}-grid class="${grid_theme}"></div>`;
+    this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
       return;
@@ -164,8 +107,7 @@ dmx.Component('ag-grid', {
     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);
+      const value = params.value
       return `<div onclick="cellClickEvent('${columnName}', '${value}', '${idValue}')" style="cursor: pointer;">${value}</div>`;
     }
 
@@ -214,8 +156,12 @@ dmx.Component('ag-grid', {
           button.setAttribute('title', buttonConfig.tooltip);
           button.innerHTML = `<i class="${buttonConfig.icon}"></i> ${buttonConfig.action}`;
           container.appendChild(button);
+          button.addEventListener('click', function () {
+            if (typeof buttonConfig.onClick === 'function') {
+                buttonConfig.onClick(params.data);
+            }
+        });
       });
-  
       // Add spacing between buttons (margin-right)
       const buttonSpacing = '5px'; // You can adjust the spacing as needed
       const buttonsInContainer = container.querySelectorAll('button');
@@ -449,7 +395,7 @@ dmx.Component('ag-grid', {
         else {
           headerName = humanize(key);
         }
-        if (key =='status' && enableStatusToggle) {
+        if (key =='status' && options.row_status_event) {
           cellRenderer = 'checkboxCellRenderer';
           filter = null;
         }
@@ -482,7 +428,7 @@ dmx.Component('ag-grid', {
       this.dispatchEvent('row_clicked')
     }
     let checkboxColumn;
-    if (enableCheckboxEvent) {
+    if (options.row_checkbox_event) {
         checkboxColumn = {
           headerCheckboxSelection: true,
           headerCheckboxSelectionFilteredOnly: false,
@@ -498,38 +444,36 @@ dmx.Component('ag-grid', {
       };
       columnDefs.unshift(checkboxColumn);
     }
-    if (enableActions) {
+    if (options.enable_actions) {
           actionsColumn = {
             headerName: 'Actions',
             field: 'action',
             filter: null,
             cellRenderer: actionsRenderer,
-            pinned: pin_actions,
+            pinned: options.pin_actions,
             cellRendererParams: {
               // Custom button configurations
               buttons: [
                 {
-                  action: edit_action_title,
-                  classNames: edit_action_btn_class,
-                  tooltip: edit_action_tooltip,
-                  icon: edit_action_icon_class,
+                  action: options.edit_action_title,
+                  classNames: options.edit_action_btn_class,
+                  tooltip: options.edit_action_tooltip,
+                  icon: options.edit_action_icon_class,
                   onClick: (rowData) => {
                     this.set('data', rowData);
                     this.set('id', rowData.id);
-                    this.dispatchEvent('action_edit');
-                    console.log('Custom Action 1 clicked for row with ID:', rowData.id);
+                    this.dispatchEvent('row_action_edit');
                   },
                 },
                 {
-                  action: view_action_title,
-                  classNames: view_action_btn_class,
-                  tooltip: view_action_tooltip,
-                  icon: view_action_icon_class,
+                  action: options.view_action_title,
+                  classNames: options.view_action_btn_class,
+                  tooltip: options.view_action_tooltip,
+                  icon: options.view_action_icon_class,
                   onClick: (rowData) => {
                     this.set('data', rowData);
                     this.set('id', rowData.id);
-                    this.dispatchEvent('action_view');
-                    console.log('Custom Action 2 clicked for row with ID:', rowData.id);
+                    this.dispatchEvent('row_action_view');
                   },
                 },
                 // Add more custom buttons as needed
@@ -579,11 +523,11 @@ dmx.Component('ag-grid', {
       }
     };
 
-    const gridDiv = document.getElementById(gridId+'-grid');
+    const gridDiv = document.getElementById(options.id+'-grid');
     
 
     if (!gridDiv) {
-      console.error(`Grid container element with ID '${gridId}' not found.`);
+      console.error(`Grid container element with ID '${options.id}' not found.`);
       return;
     }
 
@@ -597,10 +541,10 @@ dmx.Component('ag-grid', {
     };
     // Create ag-Grid instance
     new agGrid.Grid(gridDiv, gridConfig);
-    const gridElement = document.getElementById(gridId+'-grid');
+    const gridElement = document.getElementById(options.id+'-grid');
     const gridContainer = gridElement.parentNode;
     // Add an event listener to the grid
-    if (enableCheckboxEvent) {
+    if (options.row_checkbox_event) {
       gridConfig.api.addEventListener('rowSelected', (event) => {
         if (event.node && event.node.isSelected()) {
           const rowData = event.node.data;
@@ -619,12 +563,12 @@ dmx.Component('ag-grid', {
       console.error('Grid container not found.');
       return;
     }
-    if (fixedHeader) {
+    if (options.fixedHeader) {
       window.addEventListener('scroll', function () {
         const header = document.querySelector('.ag-header');
-        const topbar = document.querySelector('.' + topbarClass);
-        const topbarHeight = (topbar ? topbar.getBoundingClientRect().height : 0) + fixedTopOffset;
-        const headerPos = (topbar ? topbar.getBoundingClientRect().bottom : 0) + fixedHeaderOffset;
+        const topbar = document.querySelector('.' + options.topbarClass);
+        const topbarHeight = (topbar ? topbar.getBoundingClientRect().height : 0) + options.fixedTopOffset;
+        const headerPos = (topbar ? topbar.getBoundingClientRect().bottom : 0) + options.fixedHeaderOffset;
 
         if (window.pageYOffset > headerPos) {
           header.style.position = 'fixed';
@@ -675,8 +619,8 @@ dmx.Component('ag-grid', {
     row_checkbox_unchecked: Event,
     row_status_enabled: Event,
     row_status_disabled: Event,
-    action_edit: Event,
-    action_view: Event
+    row_action_edit: Event,
+    row_action_view: Event
   },
 
   render: function(node) {

package/package.json

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