@cdmx/wappler_ag_grid 1.1.7 → 1.1.8

package/README.md

@@ -253,6 +253,7 @@ This will set the minimum width (px) for the Actions Column.(Default: 80)
 **Actions Column Max Width**
 This will set the maximum width (px) for the Actions Column.(Default: null)
 
+
 **Edit Action Button**
 This will display the "Edit Action Button" options.
 
@@ -265,9 +266,12 @@ Specify the tooltip text for the Edit Action button.
 **Edit Action Button Class**
 Specify the CSS class for styling the Edit Action button.
 
-**Edit Action Icon Class**
+**Edit Action Button Icon Class**
 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
+
 **View Action Button**
 This will display the "View Action Button" options.
 
@@ -280,10 +284,15 @@ Specify the tooltip text for the View Action button.
 **View Action Button Class**
 Specify the CSS class for styling the View Action button.
 
-**View Action Icon Class**
+**View Action Button Icon Class**
 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
+
 **Delete Action Button**
+This will display the "Delete Action Button" options.
+
 **Delete Action Button Title**
 Specify the title for the Delete Action button.
 
@@ -292,8 +301,13 @@ Specify the tooltip text for the Delete Action button.
 
 **Delete Action Button Class**
 Specify the CSS class for styling the Delete Action button.
+
+**Delete Action Button Icon Class**
 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
+
 # Custom Action Buttons
 
 **Button1 Class**

package/app_connect/components.hjson

@@ -1489,6 +1489,12 @@
                   "type": "text",
                   "defaultValue": 'fas fa-pencil-alt'
                 },
+                {
+                  "name": "editActionBtnCondition",
+                  "attribute": "edit_action_btn_condition",
+                  "title": "Edit Action Button Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "viewActionBtn",
                   "attribute": "dmx-bind:view_action_btn",
@@ -1524,6 +1530,12 @@
                   "type": "text",
                   "defaultValue": 'fas fa-eye'
                 },
+                {
+                  "name": "viewActionBtnCondition",
+                  "attribute": "view_action_btn_condition",
+                  "title": "View Action Button Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "deleteActionBtn",
                   "attribute": "dmx-bind:delete_action_btn",
@@ -1558,6 +1570,12 @@
                   "title": "Delete Action Icon Class",
                   "type": "text",
                   "defaultValue": 'fas fa-trash'
+                },
+                {
+                  "name": "deleteActionBtnCondition",
+                  "attribute": "delete_action_btn_condition",
+                  "title": "Delete Action Button Conditon",
+                  "type": "text"
                 }
               ]
             },

package/dmx-ag-grid.js

@@ -83,16 +83,19 @@ dmx.Component('ag-grid', {
     edit_action_tooltip: {type: String, default: 'Edit' },
     edit_action_icon_class: {type: String, default: 'fas fa-pencil-alt' },
     edit_action_btn_class: {type: String, default: 'btn-primary btn-xs m-1' },
+    edit_action_btn_condition: {type: String, default: null },
     view_action_btn: { type: Boolean, default: false },
     view_action_title: {type: String, default: '' },
     view_action_tooltip: {type: String, default: 'View' },
     view_action_icon_class: {type: String, default: 'fas fa-eye' },
     view_action_btn_class: {type: String, default: 'btn-info btn-xs m-1' },
+    view_action_btn_condition: {type: String, default: null },
     delete_action_btn: { type: Boolean, default: false },
     delete_action_title: {type: String, default: '' },
     delete_action_tooltip: {type: String, default: 'Delete' },
     delete_action_icon_class: {type: String, default: 'fas fa-trash' },
     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 },
     button1_action_btn: { type: "Boolean", default: false },
     button1_action_title: { type: "String", default: "" },
@@ -445,6 +448,15 @@ dmx.Component('ag-grid', {
           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);
+            if (!isConditionMet) {
+              button.style.setProperty('display', 'none', 'important');
+            }
+          }
           button.addEventListener('click', function () {
             if (typeof buttonConfig.onClick === 'function') {
                 buttonConfig.onClick(params.data);
@@ -493,6 +505,52 @@ dmx.Component('ag-grid', {
       }
       return params.value;
     }
+
+    function extractConditionParts(condition) {
+          
+      const operators = ['===', '==', '!=', '>', '<', '>=', '<='];
+      let operator;
+      let left;
+      let right;
+    
+      for (const op of operators) {
+        if (condition.includes(op)) {
+          operator = op;
+          const parts = condition.split(op).map(part => part.trim());
+          left = parts[0];
+          right = parts.slice(1).join(op).trim();
+          break;
+        }
+      }
+    
+      if (!operator) {
+        throw new Error('Invalid operator in the condition.');
+      }
+    
+      return [left, operator, right];
+    }
+    
+    function evaluateCondition(left, operator, right) {
+      switch (operator) {
+        case '===':
+          return left.toString() === right.toString();
+        case '==':
+          return left.toString() == right.toString();
+        case '!=':
+          return left.toString() != right.toString();
+        case '>':
+          return left.toString() > parseFloat(right);
+        case '<':
+          return left.toString() < parseFloat(right);
+        case '>=':
+          return left.toString() >= parseFloat(right);
+        case '<=':
+          return left.toString() <= parseFloat(right);
+        default:
+          return false;
+      }
+    }
+    
     function formatDate(timestamp) {
       const format = options.date_format
       const localDate = new Date(timestamp);
@@ -849,50 +907,7 @@ dmx.Component('ag-grid', {
           tooltipValueGetter = createCombinedTooltipValueGetter(key, options.data_changes, options.data_binded_changes);
 
         }
-        function extractConditionParts(condition) {
-          
-          const operators = ['===', '==', '!=', '>', '<', '>=', '<='];
-          let operator;
-          let left;
-          let right;
-        
-          for (const op of operators) {
-            if (condition.includes(op)) {
-              operator = op;
-              const parts = condition.split(op).map(part => part.trim());
-              left = parts[0];
-              right = parts.slice(1).join(op).trim();
-              break;
-            }
-          }
         
-          if (!operator) {
-            throw new Error('Invalid operator in the condition.');
-          }
-        
-          return [left, operator, right];
-        }
-        
-        function evaluateCondition(left, operator, right) {
-          switch (operator) {
-            case '===':
-              return left.toString() === right.toString();
-            case '==':
-              return left.toString() == right.toString();
-            case '!=':
-              return left.toString() != right.toString();
-            case '>':
-              return left.toString() > parseFloat(right);
-            case '<':
-              return left.toString() < parseFloat(right);
-            case '>=':
-              return left.toString() >= parseFloat(right);
-            case '<=':
-              return left.toString() <= parseFloat(right);
-            default:
-              return false;
-          }
-        }
         const cstyles = this.props.cstyles
         // Check if custom color exists for the current field and condition
         function applyCellStyle(params) {
@@ -1059,6 +1074,7 @@ dmx.Component('ag-grid', {
             this.set('id', rowData.id);
             this.dispatchEvent('row_action_edit');
           },
+          condition: options.edit_action_btn_condition
         });
       }
     
@@ -1073,6 +1089,7 @@ dmx.Component('ag-grid', {
             this.set('id', rowData.id);
             this.dispatchEvent('row_action_view');
           },
+          condition: options.view_action_btn_condition
         });
       }
 
@@ -1087,6 +1104,7 @@ dmx.Component('ag-grid', {
             this.set('id', rowData.id);
             this.dispatchEvent('row_action_delete');
           },
+          condition: options.delete_action_btn_condition
         });
       }
       

package/package.json

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