@cdmx/wappler_ag_grid 1.1.7 → 1.1.9

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

@@ -1397,16 +1397,19 @@
                 "editActionTooltip",
                 "editActionBtnClass",
                 "editActionIconClass",
+                "editActionBtnCondition",
                 "viewActionBtn",
                 "viewActionTitle",
                 "viewActionTooltip",
                 "viewActionBtnClass",
                 "viewActionIconClass",
+                "viewActionBtnCondition",
                 "deleteActionBtn",
                 "deleteActionTitle",
                 "deleteActionTooltip",
                 "deleteActionBtnClass",
-                "deleteActionIconClass"
+                "deleteActionIconClass",
+                "deleteActionBtnCondition"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -1489,6 +1492,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 +1533,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 +1573,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"
                 }
               ]
             },
@@ -1575,51 +1596,61 @@
                 "button1ActionTooltip",
                 "button1ActionBtnClass",
                 "button1ActionIconClass",
+                "button1ActionBtnCondition",
                 "button2ActionBtn",
                 "button2ActionTitle",
                 "button2ActionTooltip",
                 "button2ActionBtnClass",
                 "button2ActionIconClass",
+                "button2ActionBtnCondition",
                 "button3ActionBtn",
                 "button3ActionTitle",
                 "button3ActionTooltip",
                 "button3ActionBtnClass",
                 "button3ActionIconClass",
+                "button3ActionBtnCondition",
                 "button4ActionBtn",
                 "button4ActionTitle",
                 "button4ActionTooltip",
                 "button4ActionBtnClass",
                 "button4ActionIconClass",
+                "button4ActionBtnCondition",
                 "button5ActionBtn",
                 "button5ActionTitle",
                 "button5ActionTooltip",
                 "button5ActionBtnClass",
                 "button5ActionIconClass",
+                "button5ActionBtnCondition",
                 "button6ActionBtn",
                 "button6ActionTitle",
                 "button6ActionTooltip",
                 "button6ActionBtnClass",
                 "button6ActionIconClass",
+                "button6ActionBtnCondition",
                 "button7ActionBtn",
                 "button7ActionTitle",
                 "button7ActionTooltip",
                 "button7ActionBtnClass",
                 "button7ActionIconClass",
+                "button7ActionBtnCondition",
                 "button8ActionBtn",
                 "button8ActionTitle",
                 "button8ActionTooltip",
                 "button8ActionBtnClass",
                 "button8ActionIconClass",
+                "button8ActionBtnCondition",
                 "button9ActionBtn",
                 "button9ActionTitle",
                 "button9ActionTooltip",
                 "button9ActionBtnClass",
                 "button9ActionIconClass",
+                "button9ActionBtnCondition",
                 "button10ActionBtn",
                 "button10ActionTitle",
                 "button10ActionTooltip",
                 "button10ActionBtnClass",
-                "button10ActionIconClass"
+                "button10ActionIconClass",
+                "button10ActionBtnCondition"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -1668,6 +1699,12 @@
                   "type": "text",
                   "defaultValue": "fas fa-wrench"
                 },
+                {
+                  "name": "button1ActionBtnCondition",
+                  "attribute": "button1_action_btn_condition",
+                  "title": "Button1 Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "button2ActionBtn",
                   "attribute": "dmx-bind:button2_action_btn",
@@ -1703,6 +1740,12 @@
                   "type": "text",
                   "defaultValue": "fas fa-search-plus"
                 },
+                {
+                  "name": "button2ActionBtnCondition",
+                  "attribute": "button2_action_btn_condition",
+                  "title": "Button2 Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "button3ActionBtn",
                   "attribute": "dmx-bind:button3_action_btn",
@@ -1738,6 +1781,12 @@
                   "type": "text",
                   "defaultValue": "fas fa-check-circle"
                 },
+                {
+                  "name": "button3ActionBtnCondition",
+                  "attribute": "button3_action_btn_condition",
+                  "title": "Button3 Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "button4ActionBtn",
                   "attribute": "dmx-bind:button4_action_btn",
@@ -1773,6 +1822,12 @@
                   "type": "text",
                   "defaultValue": "fas fa-exclamation-triangle"
                 },
+                {
+                  "name": "button4ActionBtnCondition",
+                  "attribute": "button4_action_btn_condition",
+                  "title": "Button4 Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "button5ActionBtn",
                   "attribute": "dmx-bind:button5_action_btn",
@@ -1808,6 +1863,12 @@
                   "type": "text",
                   "defaultValue": "fas fa-times-circle"
                 },
+                {
+                  "name": "button5ActionBtnCondition",
+                  "attribute": "button5_action_btn_condition",
+                  "title": "Button5 Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "button6ActionBtn",
                   "attribute": "dmx-bind:button6_action_btn",
@@ -1843,6 +1904,12 @@
                   "type": "text",
                   "defaultValue": "fas fa-link"
                 },
+                {
+                  "name": "button6ActionBtnCondition",
+                  "attribute": "button6_action_btn_condition",
+                  "title": "Button6 Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "button7ActionBtn",
                   "attribute": "dmx-bind:button7_action_btn",
@@ -1878,6 +1945,12 @@
                   "type": "text",
                   "defaultValue": "fas fa-download"
                 },
+                {
+                  "name": "button7ActionBtnCondition",
+                  "attribute": "button7_action_btn_condition",
+                  "title": "Button7 Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "button8ActionBtn",
                   "attribute": "dmx-bind:button8_action_btn",
@@ -1913,6 +1986,12 @@
                   "type": "text",
                   "defaultValue": "fas fa-file-pdf"
                 },
+                {
+                  "name": "button8ActionBtnCondition",
+                  "attribute": "button8_action_btn_condition",
+                  "title": "Button8 Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "button9ActionBtn",
                   "attribute": "dmx-bind:button9_action_btn",
@@ -1948,6 +2027,12 @@
                   "type": "text",
                   "defaultValue": "fas fa-star"
                 },
+                {
+                  "name": "button9ActionBtnCondition",
+                  "attribute": "button9_action_btn_condition",
+                  "title": "Button9 Conditon",
+                  "type": "text"
+                },
                 {
                   "name": "button10ActionBtn",
                   "attribute": "dmx-bind:button10_action_btn",
@@ -1982,6 +2067,12 @@
                   "title": "Button10 Icon Class",
                   "type": "text",
                   "defaultValue": "fas fa-trash-alt"
+                },
+                {
+                  "name": "button10ActionBtnCondition",
+                  "attribute": "button10_action_btn_condition",
+                  "title": "Button10 Conditon",
+                  "type": "text"
                 }
 
               ]

package/dmx-ag-grid.js

@@ -83,67 +83,80 @@ 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: "" },
     button1_action_tooltip: { type: "String", default: "" },
     button1_action_icon_class: { type: "String", default: "fas fa-wrench" },
     button1_action_btn_class: { type: "String", default: "btn-primary btn-xs m-1" },
+    button1_action_btn_condition: {type: String, default: null },
     button2_action_btn: { type: "Boolean", default: false },
     button2_action_title: { type: "String", default: "" },
     button2_action_tooltip: { type: "String", default: "" },
     button2_action_icon_class: { type: "String", default: "fas fa-search-plus" },
     button2_action_btn_class: { type: "String", default: "btn-info btn-xs m-1" },
+    button2_action_btn_condition: {type: String, default: null },
     button3_action_btn: { type: "Boolean", default: false },
     button3_action_title: { type: "String", default: "" },
     button3_action_tooltip: { type: "String", default: "" },
     button3_action_icon_class: { type: "String", default: "fas fa-check-circle" },
     button3_action_btn_class: { type: "String", default: "btn-success btn-xs m-1" },
+    button3_action_btn_condition: {type: String, default: null },
     button4_action_btn: { type: "Boolean", default: false },
     button4_action_title: { type: "String", default: "" },
     button4_action_tooltip: { type: "String", default: "" },
     button4_action_icon_class: { type: "String", default: "fas fa-exclamation-triangle" },
     button4_action_btn_class: { type: "String", default: "btn-warning btn-xs m-1" },
+    button4_action_btn_condition: {type: String, default: null },
     button5_action_btn: { type: "Boolean", default: false },
     button5_action_title: { type: "String", default: "" },
     button5_action_tooltip: { type: "String", default: "Edit" },
     button5_action_icon_class: { type: "String", default: "fas fa-times-circle" },
     button5_action_btn_class: { type: "String", default: "btn-danger btn-xs m-1" },
+    button5_action_btn_condition: {type: String, default: null },
     button6_action_btn: { type: "Boolean", default: false },
     button6_action_title: { type: "String", default: "" },
     button6_action_tooltip: { type: "String", default: "" },
     button6_action_icon_class: { type: "String", default: "fas fa-link" },
     button6_action_btn_class: { type: "String", default: "btn-secondary btn-xs m-1" },
+    button6_action_btn_condition: {type: String, default: null },
     button7_action_btn: { type: "Boolean", default: false },
     button7_action_title: { type: "String", default: "" },
     button7_action_tooltip: { type: "String", default: "" },
     button7_action_icon_class: { type: "String", default: "fas fa-download" },
     button7_action_btn_class: { type: "String", default: "btn-primary btn-xm" },
+    button7_action_btn_condition: {type: String, default: null },
     button8_action_btn: { type: "Boolean", default: false },
     button8_action_title: { type: "String", default: "" },
     button8_action_tooltip: { type: "String", default: "" },
     button8_action_icon_class: { type: "String", default: "fas fa-file-pdf" },
     button8_action_btn_class: { type: "String", default: "btn-info btn-xs m-1" },
+    button8_action_btn_condition: {type: String, default: null },
     button9_action_btn: { type: "Boolean", default: false },
     button9_action_title: { type: "String", default: "" },
     button9_action_tooltip: { type: "String", default: "" },
     button9_action_icon_class: { type: "String", default: "fas fa-star" },
     button9_action_btn_class: { type: "String", default: "btn-success btn-xs m-1" },
+    button9_action_btn_condition: {type: String, default: null },
     button10_action_btn: { type: "Boolean", default: false },
     button10_action_title: { type: "String", default: "" },
     button10_action_tooltip: { type: "String", default: "" },
     button10_action_icon_class: { type: "String", default: "fas fa-trash-alt" },
     button10_action_btn_class: { type: "String", default: "btn-danger btn-xs m-1" },
+    button10_action_btn_condition: {type: String, default: null },
     data_binded_changes: {type: Array, default: [] },
     hide_fields: {type: String, default: null },
     hide_filters: {type: String, default: null },
@@ -445,6 +458,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 +515,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 +917,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 +1084,7 @@ dmx.Component('ag-grid', {
             this.set('id', rowData.id);
             this.dispatchEvent('row_action_edit');
           },
+          condition: options.edit_action_btn_condition
         });
       }
     
@@ -1073,6 +1099,7 @@ dmx.Component('ag-grid', {
             this.set('id', rowData.id);
             this.dispatchEvent('row_action_view');
           },
+          condition: options.view_action_btn_condition
         });
       }
 
@@ -1087,6 +1114,7 @@ dmx.Component('ag-grid', {
             this.set('id', rowData.id);
             this.dispatchEvent('row_action_delete');
           },
+          condition: options.delete_action_btn_condition
         });
       }
       
@@ -1097,6 +1125,7 @@ dmx.Component('ag-grid', {
           const buttonClassKey = `button${i}_action_btn_class`;
           const buttonTooltipKey = `button${i}_action_tooltip`;
           const buttonIconClassKey = `button${i}_action_icon_class`;
+          const buttonConditionKey = `button${i}_action_btn_condition`; 
         
           if (options[buttonActionKey]) {
             actionsColumn.cellRendererParams.buttons.push({
@@ -1109,6 +1138,7 @@ dmx.Component('ag-grid', {
                 this.set('id', rowData.id);
                 this.dispatchEvent(`row_action_button${i}`);
               },
+              condition: options[buttonConditionKey]
             });
           }
         }

package/package.json

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