@cdmx/wappler_ag_grid 0.1.2 → 0.1.4

package/app_connect/components.hjson

@@ -18,6 +18,11 @@
           "title": "Id",
           "type": "number"
         },
+        {
+          "name": "data",
+          "title": "Data",
+          "type": "object"
+        }
         {
           "name": "fields",
           "title": "Fields",
@@ -362,15 +367,15 @@
             {
               "name": "rowCheckboxEvent",
               "attribute": "dmx-bind:row_checkbox_event",
-              "title": "Row Checkbox Events",
+              "title": "Enable Row Selection",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enabled row checkbox events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
+              "help": "This enables row selection which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
             },
             {
               "name": "rowStatusEvent",
               "attribute": "dmx-bind:row_status_event",
-              "title": "Row Status Events",
+              "title": "Enable Row Status Toggle",
               "type": "boolean",
               "defaultValue": false,
               "help": "This enabled row status events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
@@ -486,7 +491,6 @@
                     {
                       "field": "field",
                       "caption": "Field",
-                      "size": "10%",
                       "editable": {
                         "type": "text"
                       }
@@ -494,7 +498,6 @@
                     {
                       "field": "value",
                       "caption": "Value",
-                      "size": "10%",
                       "editable": {
                         "type": "text"
                       }
@@ -502,7 +505,6 @@
                     {
                       field: "new_value",
                       caption: "New Value",
-                      size: "10%",
                       editable: {
                         type: "text"
                       }

package/dmx-ag-grid.js

@@ -1,7 +1,8 @@
 dmx.Component('ag-grid', {
   initialData: {
     id: null,
-    rowData: [],
+    data: {},
+    fields: {},
     column_defs: [],
     cstyles: null,
     cnames: null,
@@ -39,8 +40,7 @@ dmx.Component('ag-grid', {
     fixedHeaderOffset: 100,
     fixedTopOffset: 80,
     fixedHorizonatalScroll: false,
-    timezone: null,
-    fields: {}
+    timezone: null
   },
 
   attributes: {
@@ -85,6 +85,7 @@ dmx.Component('ag-grid', {
     fixedTopOffset: { type: Number, default: 80 },
     fixedHorizonatalScroll: { type: Boolean, default: false },
     timezone: {type: Text, default: '' },
+    cell_click_event: {type: Boolean, default: false },
     row_click_event: {type: Boolean, default: false },
     row_checkbox_event: {type: Boolean, default: false },
     row_status_event: {type: Boolean, default: false }
@@ -138,10 +139,10 @@ dmx.Component('ag-grid', {
         return blankOrNullValueFormatter(params);
       }
     }
-    window.clickEvent = (columnName, value, idValue) => {
+    window.cellClickEvent = (columnName, value, idValue) => {
       this.set('fields', {"field": columnName, "data": value});
       this.set('id', idValue);
-      this.dispatchEvent('row_clicked')
+      this.dispatchEvent('cell_clicked')
     };
     window.handleCheckboxClick = (event, columnName, value, idValue) => {
       const isChecked = event.target.checked;
@@ -176,22 +177,28 @@ dmx.Component('ag-grid', {
       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>`;
+      return `<div onclick="cellClickEvent('${columnName}', '${value}', '${idValue}')" style="cursor: pointer;">${value}</div>`;
     }
-    function checkboxCellRenderer(params) {
+    function idCheckboxCellRenderer(params) {
       const idValue = params.data.id;
       const columnName = params.colDef.field;
       const dataType = detectDataType([params.value]);
       const value = formatValue(params.value, columnName, dataType, timezone);
-    
-      if (columnName === "id") {
-        return `
+      return `
           <input 
             type="checkbox" 
             onclick="handleCheckboxClick(event, '${columnName}', '${value}', '${idValue}')"
           />
         `;
-      } else if (columnName == "status" && enableStatusToggle) {
+    }
+
+    function checkboxCellRenderer(params) {
+      const idValue = params.data.id;
+      const columnName = params.colDef.field;
+      const dataType = detectDataType([params.value]);
+      const value = formatValue(params.value, columnName, dataType, timezone);
+    
+      if (columnName == "status" && enableStatusToggle) {
         // Assuming `value` is a boolean representing the status
         const checked = value==true ? "checked" : "";
         return `
@@ -389,24 +396,24 @@ dmx.Component('ag-grid', {
               return false;
           }
         }
-const cstyles = this.props.cstyles
- // Check if custom color exists for the current field and condition
- function applyCellStyle(params) {
-  const field = params.colDef.field.toString();
-  if (cstyles.hasOwnProperty(field)) {
-    const condition = cstyles[field].condition;
-    const customColor = cstyles[field].customColor;
-    const [left, operator, right] = extractConditionParts(condition);
-    // Check if the field exists and its value is true
-    if (params.data.hasOwnProperty(field) && evaluateCondition(params.data[left], operator, right)) {
-      return { color: customColor };
-    }
-  }
-  return null;
-}
+        const cstyles = this.props.cstyles
+        // Check if custom color exists for the current field and condition
+        function applyCellStyle(params) {
+            const field = params.colDef.field.toString();
+            if (cstyles.hasOwnProperty(field)) {
+              const condition = cstyles[field].condition;
+              const customColor = cstyles[field].customColor;
+              const [left, operator, right] = extractConditionParts(condition);
+              if (params.data.hasOwnProperty(field) && evaluateCondition(params.data[left], operator, right)) {
+                return { color: customColor };
+              }
+            }
+            return null;
+          }
         cnames = this.props.cnames
         cwidths = this.props.cwidths
-        enableClickEvent = this.props.row_click_event;
+        enableRowClickEvent = this.props.row_click_event;
+        enableCellClickEvent = this.props.cell_click_event;
         if (cnames.hasOwnProperty(key)) {
         console.log(key)
         const cname = cnames[key]
@@ -427,12 +434,61 @@ const cstyles = this.props.cstyles
             minWidth: parseInt(cwidths[key].min_width),
             maxWidth: parseInt(cwidths[key].max_width),
           }),
-          cellRenderer: enableClickEvent ? 'clickCellRenderer' : (enableCheckboxEvent ? 'checkboxCellRenderer' : undefined)
+          cellRenderer: enableCellClickEvent ? 'clickCellRenderer' : (enableStatusToggle ? 'checkboxCellRenderer' : undefined)
         };
       });
     }
+    let checkboxColumn;
+    function headerCheckbox(params) {
+      const eHeaderCheckbox = document.createElement('input');
+      eHeaderCheckbox.type = 'checkbox';
+      eHeaderCheckbox.addEventListener('change', () => {
+        const columnName = params.colDef.field;
+        const value = params.value;
+    
+        params.api.forEachNode((node) => {
+          if (node.rowPinned) return; // Skip pinned rows
+          if (node.visible) {
+            const idValue = node.data.id;
+            cellClickEvent(columnName, value, idValue);
+            node.setSelected(eHeaderCheckbox.checked);
+          }
+        });
+      });
+    
+      const eLabel = document.createElement('label');
+      eLabel.appendChild(eHeaderCheckbox);
+      eLabel.appendChild(document.createTextNode('Select All'));
+    
+      return eLabel;
+    }
+    if (enableCheckboxEvent) {
+        checkboxColumn = {
+          headerCheckboxSelection: true,
+          headerCheckboxSelectionFilteredOnly: false,
+          headerName: '',
+          field: 'id', 
+          filter: '',
+          cellRenderer: 'idCheckboxCellRenderer',
+          resizable: false,
+          width: 50,
+          maxWidth: 50, 
+          suppressMenu: true,
+          // headerComponent: 'headerCheckbox'
+      };
+      columnDefs.unshift(checkboxColumn);
+    }
+    window.onRowClicked = (event) => {
+      const rowData = event.data;
+      this.set('data', rowData);
+      this.set('id', rowData.id);
+      this.dispatchEvent('row_clicked')
+    }
+    
     const gridOptions = {
       columnDefs: columnDefs,
+      onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
+      rowStyle: enableRowClickEvent ? { cursor: 'pointer' } : undefined,
       defaultColDef: {
         flex: 1,
         minWidth: this.props.minWidth,
@@ -462,7 +518,9 @@ const cstyles = this.props.cstyles
       localeText: this.props.localeText,
       components: {
         clickCellRenderer: clickCellRenderer,
-        checkboxCellRenderer: checkboxCellRenderer
+        checkboxCellRenderer: checkboxCellRenderer,
+        idCheckboxCellRenderer: idCheckboxCellRenderer,
+        headerCheckbox: headerCheckbox
       }
     };
 

package/package.json

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