@cdmx/wappler_ag_grid 1.8.5 → 1.8.7

package/README.md

@@ -402,7 +402,7 @@ Specify the condition to Show the Delete Action button, eg: code==TEST, or statu
 
 # Custom Action Buttons
 
-**Buttons 1-10**
+**Buttons 1-20**
 
 **Button[i] Action Button**
 This will display the "Button[i] Action Button" options.
@@ -422,6 +422,10 @@ Specify the CSS class for styling the icon of the Button[i] Action button.
 **Button[i] Action Button Condition**
 Specify the condition to Show the Button[i] Action button, eg: code==TEST, or status==COMPLETED||status==FINISHED or status==COMPLETED&&user_status==true
 
+# Button Class Toggles
+The Button Class Toggles feature provides a way to define and manage classes for action buttons within a grid, based on certain data conditions. This can be useful for dynamically updating button styles based on the state of the row data.
+Specify the condition to apply the defined class on the Action button, eg: code==TEST, or status==COMPLETED||status==FINISHED or status==COMPLETED&&user_status==true
+
 # Action Attributes
 
 **Load**

package/app_connect/components.hjson

@@ -2928,7 +2928,83 @@
                   "title": "Button20 Condition",
                   "type": "text"
                 }
-
+              ]
+            },
+            {
+              "name": "btnClassToggles",
+              "attribute": "button_class_toggles",
+              "title": "Button Class Toggles",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": ["actionBtnsClassToggles"],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "children": [
+                {
+                  "name": "actionBtnsClassToggles",
+                  "attribute": "dmx-bind:action_button_class_toggles",
+                  "title": "Buttons Classes",
+                  "type": "grid",
+                  "jsonFormat": true,
+                  "dataBindings": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "btn_id",
+                      "caption": "Button",
+                      "editable": {
+                        "type": "list",
+                        "items": [
+                          {"id": "edit", "text": "Edit"},
+                          {"id": "view", "text": "View"},
+                          {"id": "delete", "text": "Delete"},
+                          {"id": "button1", "text": "Button 1"},
+                          {"id": "button2", "text": "Button 2"},
+                          {"id": "button3", "text": "Button 3"},
+                          {"id": "button4", "text": "Button 4"},
+                          {"id": "button5", "text": "Button 5"},
+                          {"id": "button6", "text": "Button 6"},
+                          {"id": "button7", "text": "Button 7"},
+                          {"id": "button8", "text": "Button 8"},
+                          {"id": "button9", "text": "Button 9"},
+                          {"id": "button10", "text": "Button 10"},
+                          {"id": "button11", "text": "Button 11"},
+                          {"id": "button12", "text": "Button 12"},
+                          {"id": "button13", "text": "Button 13"},
+                          {"id": "button14", "text": "Button 14"},
+                          {"id": "button15", "text": "Button 15"},
+                          {"id": "button16", "text": "Button 16"},
+                          {"id": "button17", "text": "Button 17"},
+                          {"id": "button18", "text": "Button 18"},
+                          {"id": "button19", "text": "Button 19"},
+                          {"id": "button20", "text": "Button 20"}
+                        ]
+                      }
+                    },
+                    {
+                      "field": "class",
+                      "caption": "Class",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "condition",
+                      "caption": "Condition",
+                      "editable": {
+                        "type": "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "btn_id": "",
+                    "class": "",
+                    "condition": ""
+                  }
+                }
               ]
             }
           ]
@@ -3429,6 +3505,40 @@
         "dmx-ag-grid": true
       }
     },
+    {
+      "name": "dmx-ag-grid-export-exclude-fields",
+      "attributeStartsWith": "dmx-bind",
+      "attribute": "export_exclude_fields",
+      "title": "Export Exclude Fields",
+      "type": "boolean",
+      "display": "fieldset",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Config",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "exportExcludeFields"
+      ],
+      "noChangeOnHide": true,
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "exportExcludeFields",
+          "attributeStartsWith": "dmx-bind",
+          "attribute": "export_exclude_fields",
+          "isValue": true,
+          "dataBindings": true,
+          "title": "Exclude Fields",
+          "type": "text",
+          "help": "Export Exclude Fields.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
     {
       "name": "dmx-ag-grid-export-filename",
       "attributeStartsWith": "dmx-bind",
@@ -4226,6 +4336,326 @@
           "dmx-ag-grid": true
         }
       },
+      {
+        "name": "dmx-ag-grid-button11-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button11",
+        "display": "fieldset",
+        "title": "Button11 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": ["button11ActionEvent"],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button11ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button11",
+            "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-button12-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button12",
+        "display": "fieldset",
+        "title": "Button12 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": ["button12ActionEvent"],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button12ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button12",
+            "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-button13-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button13",
+        "display": "fieldset",
+        "title": "Button13 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": ["button13ActionEvent"],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button13ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button13",
+            "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-button14-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button14",
+        "display": "fieldset",
+        "title": "Button14 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": ["button14ActionEvent"],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button14ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button14",
+            "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-button15-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button15",
+        "display": "fieldset",
+        "title": "Button15 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": ["button15ActionEvent"],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button15ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button15",
+            "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-button16-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button16",
+        "display": "fieldset",
+        "title": "Button16 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": ["button16ActionEvent"],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button16ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button16",
+            "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-button17-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button17",
+        "display": "fieldset",
+        "title": "Button17 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": ["button17ActionEvent"],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button17ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button17",
+            "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-button18-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button18",
+        "display": "fieldset",
+        "title": "Button18 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": ["button18ActionEvent"],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button18ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button18",
+            "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-button19-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button19",
+        "display": "fieldset",
+        "title": "Button19 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": ["button19ActionEvent"],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button19ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button19",
+            "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-button20-clicked",
+        "attributeStartsWith": "dmx-on",
+        "attribute": "row_action_button20",
+        "display": "fieldset",
+        "title": "Button20 Clicked",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Custom Buttons",
+        "groupIcon": "fa fa-lg fa-hand-pointer",
+        "defaultValue": false,
+        "show": ["button20ActionEvent"],
+        "noChangeOnHide": true,
+        "type": "boolean",
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "button20ActionEvent",
+            "attributeStartsWith": "dmx-on",
+            "attribute": "row_action_button20",
+            "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

@@ -127,6 +127,7 @@ dmx.Component('ag-grid', {
     delete_action_btn_class: {type: String, default: 'btn-danger btn-xs m-1' },
     delete_action_btn_condition: {type: String, default: null },
     enable_custom_action_btns: { type: Boolean, default: false },
+    action_button_class_toggles: { type: Array, default: [] },
     button1_action_btn: { type: "Boolean", default: false },
     button1_action_title: { type: "String", default: "" },
     button1_action_tooltip: { type: "String", default: "" },
@@ -466,6 +467,7 @@ dmx.Component('ag-grid', {
     const enableRowDoubleClickEvent = this.props.row_double_click_event && !this.props.enable_actions && !this.props.row_checkbox_event;
     const enableCellClickEvent = this.props.row_click_event && (this.props.enable_actions || this.props.row_checkbox_event);
     const enableCellDoubleClickEvent = this.props.row_double_click_event && (this.props.enable_actions || this.props.row_checkbox_event);
+    const actionButtonClassToggles = options.action_button_class_toggles
     let localeText;
     let columnDefs = [];
     let groupedColumnDefs = [];
@@ -612,6 +614,12 @@ dmx.Component('ag-grid', {
           }
           button.innerHTML = `<i class="${buttonConfig.icon}"></i> ${buttonConfig.action}`;
           container.appendChild(button);
+          // Handle dynamic classes based on conditions and buttonConfig.id
+          actionButtonClassToggles.forEach((toggle) => {
+            if (toggle.btn_id === buttonConfig.id && evaluateConditions([toggle.condition], params)) {
+                button.classList.add(...toggle.class.split(' '));
+            }
+          });
            // Check if the button should be hidden based on the condition string and row data
           if (buttonConfig.condition) {
             const conditions = buttonConfig.condition.split(/(\|\||&&)/);
@@ -1443,6 +1451,7 @@ dmx.Component('ag-grid', {
     
       if (options.edit_action_btn) {
         actionsColumn.cellRendererParams.buttons.push({
+          id: 'edit',
           action: options.edit_action_title,
           classNames: options.edit_action_btn_class,
           tooltip: options.edit_action_tooltip,
@@ -1458,6 +1467,7 @@ dmx.Component('ag-grid', {
     
       if (options.view_action_btn) {
         actionsColumn.cellRendererParams.buttons.push({
+          id: 'view',
           action: options.view_action_title,
           classNames: options.view_action_btn_class,
           tooltip: options.view_action_tooltip,
@@ -1473,6 +1483,7 @@ dmx.Component('ag-grid', {
 
       if (options.delete_action_btn) {
         actionsColumn.cellRendererParams.buttons.push({
+          id: 'delete',
           action: options.delete_action_title,
           classNames: options.delete_action_btn_class,
           tooltip: options.delete_action_tooltip,
@@ -1497,6 +1508,7 @@ dmx.Component('ag-grid', {
         
           if (options[buttonActionKey]) {
             actionsColumn.cellRendererParams.buttons.push({
+              id: `button${i}`,
               action: options[buttonTitleKey],
               classNames: options[buttonClassKey],
               tooltip: options[buttonTooltipKey],

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "1.8.5",
+    "version": "1.8.7",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",
@@ -14,7 +14,7 @@
         "ag-grid"
     ],
     "dependencies": {
-        "ag-grid-community": "~32.0.0",
+        "ag-grid-community": "~32.0.2",
         "exceljs": "4.4.x",
         "papaparse": "5.4.x"
     },