@cdmx/wappler_ag_grid 0.1.1 → 0.1.3

package/app_connect/components.hjson

@@ -357,23 +357,23 @@
               "title": "Row Click Events",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enabled row click events which can then be used in Dynamic events => Grid Events => Row Clicked"
+              "help": "This enables row click events which can then be used in Dynamic events => Grid Events => Row Clicked"
             },
             {
               "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"
+              "help": "This enables row status events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
             }
           ]
         },
@@ -486,7 +486,6 @@
                     {
                       "field": "field",
                       "caption": "Field",
-                      "size": "10%",
                       "editable": {
                         "type": "text"
                       }
@@ -494,7 +493,6 @@
                     {
                       "field": "value",
                       "caption": "Value",
-                      "size": "10%",
                       "editable": {
                         "type": "text"
                       }
@@ -502,7 +500,6 @@
                     {
                       field: "new_value",
                       caption: "New Value",
-                      size: "10%",
                       editable: {
                         type: "text"
                       }
@@ -870,9 +867,9 @@
     {
       "name": "dmx-ag-grid-status-checked",
       "attributeStartsWith": "dmx-on",
-      "attribute": "row_status_checked",
+      "attribute": "row_status_enabled",
       "display": "fieldset",
-      "title": "Status Checked",
+      "title": "Status Enabled",
       "icon": "fa fa-lg fa-chevron-right",
       "groupTitle": "Grid Events",
       "groupIcon": "fa fa-lg fa-cubes",
@@ -887,7 +884,7 @@
         {
           "name": "rowStatusChecked",
           "attributeStartsWith": "dmx-on",
-          "attribute": "row_status_checked",
+          "attribute": "row_status_enabled",
           "isValue": true,
           "actionsPicker": true,
           "title": "Action:",
@@ -904,9 +901,9 @@
     {
       "name": "dmx-ag-grid-status-unchecked",
       "attributeStartsWith": "dmx-on",
-      "attribute": "row_status_unchecked",
+      "attribute": "row_status_disabled",
       "display": "fieldset",
-      "title": "Status Unchecked",
+      "title": "Status Disabled",
       "icon": "fa fa-lg fa-chevron-right",
       "groupTitle": "Grid Events",
       "groupIcon": "fa fa-lg fa-cubes",
@@ -921,7 +918,7 @@
         {
           "name": "rowStatusUnchecked",
           "attributeStartsWith": "dmx-on",
-          "attribute": "row_status_unchecked",
+          "attribute": "row_status_disabled",
           "isValue": true,
           "actionsPicker": true,
           "title": "Action:",

package/dmx-ag-grid.js

@@ -163,12 +163,12 @@ dmx.Component('ag-grid', {
         // Code for when the checkbox is checked
         this.set('id', idValue);
         this.set('fields', {"field": columnName, "data": value});
-        this.dispatchEvent('row_status_checked')
+        this.dispatchEvent('row_status_enabled')
       } else {
         // Code for when the checkbox is unchecked
         this.set('id', idValue);
         this.set('fields', {"field": columnName, "data": value});
-        this.dispatchEvent('row_status_unchecked')
+        this.dispatchEvent('row_status_disabled')
       }
     };
     function clickCellRenderer(params) {
@@ -178,20 +178,26 @@ dmx.Component('ag-grid', {
       const value = formatValue(params.value, columnName, dataType, timezone);
       return `<div onclick="clickEvent('${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,21 +395,20 @@ 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;
@@ -427,10 +432,26 @@ const cstyles = this.props.cstyles
             minWidth: parseInt(cwidths[key].min_width),
             maxWidth: parseInt(cwidths[key].max_width),
           }),
-          cellRenderer: enableClickEvent ? 'clickCellRenderer' : (enableCheckboxEvent ? 'checkboxCellRenderer' : undefined)
+          cellRenderer: enableClickEvent ? 'clickCellRenderer' : (enableStatusToggle ? 'checkboxCellRenderer' : undefined)
         };
       });
     }
+    let checkboxColumn;
+    if (enableCheckboxEvent) {
+        // Duplicate the column for 'id'
+        checkboxColumn = {
+          headerName: '',
+          field: 'id', 
+          filter: '',
+          cellRenderer: 'idCheckboxCellRenderer',
+          resizable: false,
+          width: 50,
+          maxWidth: 50, 
+          suppressMenu: true,
+      };
+      columnDefs.unshift(checkboxColumn);
+    }
+    
     const gridOptions = {
       columnDefs: columnDefs,
       defaultColDef: {
@@ -462,7 +483,8 @@ const cstyles = this.props.cstyles
       localeText: this.props.localeText,
       components: {
         clickCellRenderer: clickCellRenderer,
-        checkboxCellRenderer: checkboxCellRenderer
+        checkboxCellRenderer: checkboxCellRenderer,
+        idCheckboxCellRenderer: idCheckboxCellRenderer
       }
     };
 
@@ -543,8 +565,8 @@ const cstyles = this.props.cstyles
     row_clicked: Event,
     row_checkbox_checked: Event,
     row_checkbox_unchecked: Event,
-    row_status_checked: Event,
-    row_status_unchecked: Event
+    row_status_enabled: Event,
+    row_status_disabled: Event
   },
 
   render: function(node) {

package/package.json

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