@cdmx/wappler_ag_grid 1.2.1 → 1.2.3

package/README.md

@@ -65,8 +65,9 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 31. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
 33. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
 34. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-35. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-36. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+35. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
+36. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+37. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
 
 # Data Type Overrides
 

package/app_connect/components.hjson

@@ -488,7 +488,15 @@
               "title": "Row Click Events",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enabled row click events which can then be used in Dynamic events => Grid Events => Row Clicked"
+              "help": "This enables row click events which can then be used in Dynamic Events => Grid Events => Row Clicked"
+            },
+            {
+              "name": "rowDoubleClickEvent",
+              "attribute": "dmx-bind:row_double_click_event",
+              "title": "Row Double Click Events",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "This enables row double click events which can then be used in Dynamic Events => Grid Events => Row Double Clicked"
             },
             {
               "name": "rowCheckboxEvent",
@@ -496,7 +504,7 @@
               "title": "Enable Row Selection",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enables row selection which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
+              "help": "This enables row selection which can then be used in Dynamic Events => Grid Events => Checkbox Checked || Checkbox Unchecked"
             },
             {
               "name": "rowStatusEvent",
@@ -504,7 +512,7 @@
               "title": "Enable Row Status Toggle",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enabled row status events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
+              "help": "This enables row status events which can then be used in Dynamic Events => Grid Events => Checkbox Checked || Checkbox Unchecked"
             }
           ]
         },
@@ -2607,6 +2615,40 @@
         "dmx-ag-grid": true
       }
     },
+    {
+      "name": "dmx-ag-grid-row-double-clicked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_double_clicked",
+      "display": "fieldset",
+      "title": "Row Double Clicked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowDoubleClicked"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowDoubleClicked",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_double_clicked",
+          "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-checkbox-checked",
       "attributeStartsWith": "dmx-on",

package/dmx-ag-grid.js

@@ -73,6 +73,7 @@ dmx.Component('ag-grid', {
     timezone: {type: String, default: '' },
     cell_click_event: {type: Boolean, default: false },
     row_click_event: {type: Boolean, default: false },
+    row_double_click_event: {type: Boolean, default: false },
     row_checkbox_event: {type: Boolean, default: false },
     row_status_event: {type: Boolean, default: false },
     enable_actions: {type: Boolean, default: false },
@@ -349,7 +350,9 @@ dmx.Component('ag-grid', {
     const cwidths = this.props.cwidths
     const ctypes = this.props.ctypes
     const enableRowClickEvent = this.props.row_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 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);
     let localeText;
     let columnDefs = [];
     let groupedColumnDefs = [];
@@ -397,6 +400,17 @@ dmx.Component('ag-grid', {
       this.set('id', rowData.id);
       this.dispatchEvent('row_clicked')
     }
+    onCellDoubleClicked = (event) => {
+      const rowData = event.data;
+      const columnId = event.column.colId
+      const excludedColIds = ['checkboxColumn', 'actionsColumn', 'statusColumn'];
+      if (excludedColIds.includes(columnId)) {
+        return;
+      }
+      this.set('data', rowData);
+      this.set('id', rowData.id);
+      this.dispatchEvent('row_double_clicked')
+    }
 
     function checkboxCellRenderer(params) {
       const idValue = params.data.id;
@@ -462,9 +476,8 @@ dmx.Component('ag-grid', {
           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');
             }
@@ -541,6 +554,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) {
@@ -1060,6 +1097,12 @@ dmx.Component('ag-grid', {
       this.set('id', rowData.id);
       this.dispatchEvent('row_clicked')
     }
+    window.onRowDoubleClicked = (event) => {
+      const rowData = event.data;
+      this.set('data', rowData);
+      this.set('id', rowData.id);
+      this.dispatchEvent('row_double_clicked')
+    }
     let checkboxColumn;
     if (options.row_checkbox_event) {
         checkboxColumn = {
@@ -1178,8 +1221,10 @@ dmx.Component('ag-grid', {
       enableRtl: options.enable_rtl,
       noRowsOverlayComponent: '<div>No Records Found.</div>',
       onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
+      onRowDoubleClicked: enableRowDoubleClickEvent ? onRowDoubleClicked : undefined,
       onCellClicked: enableCellClickEvent ? onCellClicked : undefined,
-      rowStyle: enableRowClickEvent || enableCellClickEvent ? { cursor: 'pointer' } : undefined,
+      onCellDoubleClicked: enableCellDoubleClickEvent ? onCellDoubleClicked : undefined,
+      rowStyle: enableRowClickEvent || enableCellClickEvent || enableRowDoubleClickEvent || enableCellDoubleClickEvent  ? { cursor: 'pointer' } : undefined,
       defaultColDef: {
         flex: 1,
         minWidth: options.min_width,
@@ -1567,6 +1612,7 @@ dmx.Component('ag-grid', {
 
   events: {
     row_clicked: Event,
+    row_double_clicked: Event,
     cell_clicked: Event,
     row_checkbox_checked: Event,
     row_checkbox_unchecked: Event,

package/package.json

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