@cdmx/wappler_ag_grid 1.9.7 → 1.9.9

package/README.md

@@ -423,7 +423,14 @@ Specify the condition to Show the Button[i] Action button, eg: code==TEST, or st
 
 # 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
+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
+You can also specify left-only conditions, where only the field name is provided. The field is then evaluated for its truthiness ie if value present/true(bool) eg: status
+
+# Button Icon Class Toggles
+The Icon Class Toggles feature works similarly to Button Class Toggles but is used to apply classes to icons in the action buttons based on conditions in the row data. This allows you to dynamically update the icons
+eg: code==TEST, or status==COMPLETED||status==FINISHED or status==COMPLETED&&user_status==true
+You can also specify left-only conditions, where only the field name is provided. The field is then evaluated for its truthiness ie if value present/true(bool) eg: status
 
 # Action Attributes
 

package/app_connect/components.hjson

@@ -1673,12 +1673,12 @@
                       "editable": {
                         "type": "list",
                         "items": [
-                          {"id": "startsWith", "text": "Starts With"},
-                          {"id": "lessThan", "text": "Less Than"},
-                          {"id": "dateFrom", "text": "Date From"},
-                          {"id": "greaterThan", "text": "Greater Than"},
-                          {"id": "equals", "text": "Equals"},
-                          {"id": "contains", "text": "Contains"}
+                          {"id": "startsWith", "text": "startsWith"},
+                          {"id": "lessThan", "text": "lessThan"},
+                          {"id": "dateFrom", "text": "dateFrom"},
+                          {"id": "greaterThan", "text": "greaterThan"},
+                          {"id": "equals", "text": "equals"},
+                          {"id": "contains", "text": "contains"}
                         ]
                       }
                       "help": "Filter type: startsWith, lessThan, dateFrom, etc."
@@ -1737,8 +1737,8 @@
                       "editable": {
                         "type": "list",
                         "items": [
-                          {"id": "asc", "text": "Ascending"},
-                          {"id": "desc", "text": "Descending"}
+                          {"id": "asc", "text": "asc"},
+                          {"id": "desc", "text": "desc"}
                         ]
                       }
                       "help": "Sort Order for the fields."
@@ -2930,7 +2930,7 @@
               "type": "boolean",
               "defaultValue": false,
               "display": "fieldset",
-              "show": ["actionBtnsClassToggles"],
+              "show": ["actionBtnsClassToggles","actionBtnsIconClassToggles"],
               "noChangeOnHide": true,
               "groupEnabler": true,
               "children": [
@@ -2951,29 +2951,93 @@
                       "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"}
+                          {"id": "edit", "text": "edit"},
+                          {"id": "view", "text": "view"},
+                          {"id": "delete", "text": "delete"},
+                          {"id": "button1", "text": "button1"},
+                          {"id": "button2", "text": "button2"},
+                          {"id": "button3", "text": "button3"},
+                          {"id": "button4", "text": "button4"},
+                          {"id": "button5", "text": "button5"},
+                          {"id": "button6", "text": "button6"},
+                          {"id": "button7", "text": "button7"},
+                          {"id": "button8", "text": "button8"},
+                          {"id": "button9", "text": "button9"},
+                          {"id": "button10", "text": "button10"},
+                          {"id": "button11", "text": "button11"},
+                          {"id": "button12", "text": "button12"},
+                          {"id": "button13", "text": "button13"},
+                          {"id": "button14", "text": "button14"},
+                          {"id": "button15", "text": "button15"},
+                          {"id": "button16", "text": "button16"},
+                          {"id": "button17", "text": "button17"},
+                          {"id": "button18", "text": "button18"},
+                          {"id": "button19", "text": "button19"},
+                          {"id": "button20", "text": "button20"}
+                        ]
+                      }
+                    },
+                    {
+                      "field": "class",
+                      "caption": "Class",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "condition",
+                      "caption": "Condition",
+                      "editable": {
+                        "type": "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "btn_id": "",
+                    "class": "",
+                    "condition": ""
+                  }
+                },
+                {
+                  "name": "actionBtnsIconClassToggles",
+                  "attribute": "dmx-bind:action_button_icon_class_toggles",
+                  "title": "Buttons Icon 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": "button1"},
+                          {"id": "button2", "text": "button2"},
+                          {"id": "button3", "text": "button3"},
+                          {"id": "button4", "text": "button4"},
+                          {"id": "button5", "text": "button5"},
+                          {"id": "button6", "text": "button6"},
+                          {"id": "button7", "text": "button7"},
+                          {"id": "button8", "text": "button8"},
+                          {"id": "button9", "text": "button9"},
+                          {"id": "button10", "text": "button10"},
+                          {"id": "button11", "text": "button11"},
+                          {"id": "button12", "text": "button12"},
+                          {"id": "button13", "text": "button13"},
+                          {"id": "button14", "text": "button14"},
+                          {"id": "button15", "text": "button15"},
+                          {"id": "button16", "text": "button16"},
+                          {"id": "button17", "text": "button17"},
+                          {"id": "button18", "text": "button18"},
+                          {"id": "button19", "text": "button19"},
+                          {"id": "button20", "text": "button20"}
                         ]
                       }
                     },
@@ -3000,8 +3064,8 @@
                 }
               ]
             }
-          ]
-        }
+              ]
+            }
 
       ],
       actionsScheme: [

package/dmx-ag-grid.js

@@ -62,7 +62,6 @@ dmx.Component('ag-grid', {
     suppress_agg_at_root_level: { type: Boolean, default: false },
     suppress_clipboard_paste: { type: Boolean, default: false },
     suppress_scroll_on_new_data: { type: Boolean, default: false },
-    suppress_property_names_check: { type: Boolean, default: false },
     hide_id_field: { type: Boolean, default: false },
     numeric_column_align: { type: Boolean, default: false },
     enable_rtl: { type: Boolean, default: false },
@@ -128,6 +127,7 @@ dmx.Component('ag-grid', {
     delete_action_btn_condition: {type: String, default: null },
     enable_custom_action_btns: { type: Boolean, default: false },
     action_button_class_toggles: { type: Array, default: [] },
+    action_button_icon_class_toggles: { type: Array, default: [] },
     button1_action_btn: { type: "Boolean", default: false },
     button1_action_title: { type: "String", default: "" },
     button1_action_tooltip: { type: "String", default: "" },
@@ -474,6 +474,7 @@ dmx.Component('ag-grid', {
     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
+    const actionButtonIconClassToggles = options.action_button_icon_class_toggles
     let localeText;
     let columnDefs = [];
     let groupedColumnDefs = [];
@@ -621,10 +622,19 @@ 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)) {
+            if (toggle.btn_id.toLowerCase() === buttonConfig.id && evaluateConditions([toggle.condition], params)) {
                 button.classList.add(...toggle.class.split(' '));
             }
+          });
+          actionButtonIconClassToggles.forEach((iconToggle) => {
+            if (iconToggle.btn_id.toLowerCase() === buttonConfig.id && evaluateConditions([iconToggle.condition], params)) {
+                const iconElement = button.querySelector('i');
+                if (iconElement) {
+                    iconElement.classList.add(...iconToggle.class.split(' '));
+                }
+            }
           });
            // Check if the button should be hidden based on the condition string and row data
           if (buttonConfig.condition) {
@@ -714,22 +724,29 @@ dmx.Component('ag-grid', {
           if (part === '||' || part === '&&') {
               operators.push(part);
           } else {
-              const [left, operator, right] = extractConditionParts(part);
-              const result = params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false;
-              results.push(result);
+              const hasOperator = /(==|!=|<=|>=|<|>)/.test(part);
+              if (!hasOperator) {
+                const left = part;
+                const result = params.data[left] !== null && params.data[left] !== undefined && params.data[left] !== ""; 
+                results.push(result);
+              } else {
+                  const [left, operator, right] = extractConditionParts(part);
+                  const result = params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false;
+                  results.push(result);
+              }
           }
       }
       let finalResult = results[0];
-      
+
       for (let i = 0; i < operators.length; i++) {
-        if (operators[i] === '||') {
-            finalResult = finalResult || results[i + 1];
-        } else if (operators[i] === '&&') {
-            finalResult = finalResult && results[i + 1];
-        }
-    }
+          if (operators[i] === '||') {
+              finalResult = finalResult || results[i + 1];
+          } else if (operators[i] === '&&') {
+              finalResult = finalResult && results[i + 1];
+          }
+      }
       return finalResult;
-    }
+  }
     
     function evaluateCondition(left, operator, right) {
       switch (operator) {
@@ -1585,7 +1602,6 @@ dmx.Component('ag-grid', {
       suppressAggFuncInHeader: this.props.suppress_agg_func_in_header,
       suppressClipboardPaste: this.props.suppress_clipboard_paste,
       suppressScrollOnNewData: this.props.suppress_scroll_on_new_data,
-      suppressPropertyNamesCheck: this.props.suppress_property_names_check,
       columnHoverHighlight: this.props.column_hover_highlight,
       onFilterModified: function (params) { 
         const columnApi = params.api;

package/package.json

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