@cdmx/wappler_ag_grid 1.2.2 → 1.2.4

package/README.md

@@ -259,6 +259,9 @@ The Configure Actions Column feature allows you to configure actions for the but
 **Enable Actions**
 This will display the "Configure Actions" options for the buttons in the Actions Column.
 
+Note: Button Tooltip Supports Calling a function, just define a function and add the function name in the Tooltip e.g. getEditTooltip().
+In the function the variable for the row data will be available as the first attribute e.g. getEditTooltip(data), then data holds the values of the row.
+
 **Pin Actions Column**
 This will keep the Actions Column fixed when scrolling horizontally.
 
@@ -288,7 +291,7 @@ Specify the CSS class for styling the Edit Action button.
 Specify the CSS class for styling the icon of the Edit Action button.
 
 **Edit Action Button Condition**
-Specify the condition to Show the Edit Action button, eg: code==TEST, or status==COMPLETED
+Specify the condition to Show the Edit Action button, eg: code==TEST, or status==COMPLETED||status==FINISHED or status==COMPLETED&&user_status==true
 
 **View Action Button**
 This will display the "View Action Button" options.
@@ -306,7 +309,7 @@ Specify the CSS class for styling the View Action button.
 Specify the CSS class for styling the icon of the View Action button.
 
 **View Action Button Condition**
-Specify the condition to Show the View Action button, eg: code==TEST, or status==COMPLETED
+Specify the condition to Show the View Action button, eg: code==TEST, or status==COMPLETED||status==FINISHED or status==COMPLETED&&user_status==true
 
 **Delete Action Button**
 This will display the "Delete Action Button" options.
@@ -324,69 +327,29 @@ Specify the CSS class for styling the Delete Action button.
 Specify the CSS class for styling the icon of the Delete Action button.
 
 **Delete Action Button Condition**
-Specify the condition to Show the Delete Action button, eg: code==TEST, or status==COMPLETED
+Specify the condition to Show the Delete Action button, eg: code==TEST, or status==COMPLETED||status==FINISHED or status==COMPLETED&&user_status==true
 
 # Custom Action Buttons
 
-**Button1 Class**
-Specify the CSS class for Button 1.
-
-**Button1 Tooltip**
-Specify the tooltip text for Button 1.
-
-**Button2 Class**
-Specify the CSS class for Button 2.
-
-**Button2 Tooltip**
-Specify the tooltip text for Button 2.
-
-**Button3 Class**
-Specify the CSS class for Button 3.
-
-**Button3 Tooltip**
-Specify the tooltip text for Button 3.
-
-**Button4 Class**
-Specify the CSS class for Button 4.
-
-**Button4 Tooltip**
-Specify the tooltip text for Button 4.
-
-**Button5 Class**
-Specify the CSS class for Button 5.
-
-**Button5 Tooltip**
-Specify the tooltip text for Button 5.
-
-**Button6 Class**
-Specify the CSS class for Button 6.
-
-**Button6 Tooltip**
-Specify the tooltip text for Button 6.
-
-**Button7 Class**
-Specify the CSS class for Button 7.
-
-**Button7 Tooltip**
-Specify the tooltip text for Button 7.
+**Buttons 1-10**
 
-**Button8 Class**
-Specify the CSS class for Button 8.
+**Button[i] Action Button**
+This will display the "Button[i] Action Button" options.
 
-**Button8 Tooltip**
-Specify the tooltip text for Button 8.
+**Button[i] Action Button Title**
+Specify the title for the Button[i] Action button.
 
-**Button9 Class**
-Specify the CSS class for Button 9.
+**Button[i] Action Button Tooltip**
+Specify the tooltip text for the Button[i] Action button.
 
-**Button9 Tooltip**
-Specify the tooltip text for Button 9.
+**Button[i] Action Button Class**
+Specify the CSS class for styling the Button[i] Action button.
 
-**Button10 Class**
-Specify the CSS class for Button 10.
+**Button[i] Action Button Icon Class**
+Specify the CSS class for styling the icon of the Button[i] Action button.
 
-**Button10 Tooltip**
-Specify the tooltip text for Button 10.
+**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
 
 # Action Attributes
 

package/dmx-ag-grid.js

@@ -464,21 +464,27 @@ dmx.Component('ag-grid', {
       const buttons = params.buttons || defaultButtons;
       // Create a new container element to hold the buttons
       const container = document.createElement('div');
-  
+      
       buttons.forEach((buttonConfig) => {
           const button = document.createElement('button');
           button.classList.add('btn');
           const classNames = buttonConfig.classNames.split(' ');
           classNames.forEach((className) => button.classList.add(className));
           button.setAttribute('data-toggle', 'tooltip');
-          button.setAttribute('title', buttonConfig.tooltip);
+          // Call a function to get the dynamic tooltip content
+          if (buttonConfig.tooltip.endsWith('()')) {
+            const tooltipFunction = buttonConfig.tooltip.slice(0, -2); // Remove the trailing '()'
+            const tooltipText = window[tooltipFunction](params.data)
+            button.setAttribute('title', tooltipText);
+          } else {
+            button.setAttribute('title', buttonConfig.tooltip);
+          }
           button.innerHTML = `<i class="${buttonConfig.icon}"></i> ${buttonConfig.action}`;
           container.appendChild(button);
            // Check if the button should be hidden based on the condition string and row data
           if (buttonConfig.condition) {
-            const [left, operator, right] = extractConditionParts(buttonConfig.condition);
-            
-            const isConditionMet = params.data.hasOwnProperty(left) && evaluateCondition(params.data[left], operator, right);
+            const conditions = buttonConfig.condition.split(/(\|\||&&)/);
+            const isConditionMet = evaluateConditions(conditions, params);
             if (!isConditionMet) {
               button.style.setProperty('display', 'none', 'important');
             }
@@ -555,6 +561,30 @@ dmx.Component('ag-grid', {
     
       return [left, operator, right];
     }
+    function evaluateConditions(conditions, params) {
+      let results = [];
+      let operators = [];
+      for (let i = 0; i < conditions.length; i++) {
+          const part = conditions[i].trim();
+          if (part === '||' || part === '&&') {
+              operators.push(part);
+          } else {
+              const [left, operator, right] = extractConditionParts(part);
+              const result = evaluateCondition(params.data[left], operator, right);
+              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];
+          }
+      }
+      return finalResult;
+    }
     
     function evaluateCondition(left, operator, right) {
       switch (operator) {

package/package.json

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