@cdmx/wappler_ag_grid 1.6.2 → 1.6.3

package/README.md

@@ -66,22 +66,21 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 29. **Auto Height**: The height is automatically set based on the content of the cells. (Default: false)
 30. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
 31. **Center Align (V)**: Specifies if the cell data should be vertically centered. (Default: false)
-32. **Center Align (H)**: Specifies if the cell data should be vertically centered. (Default: false)
-33. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
-34. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
-35. **Suppress Movable Columns**: Disables moving columns. (Default: false)
-36. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
-37. **Animate Rows**: Enables row animation on data changes. (Default: false)
-38. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
-39. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
-40. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
-41. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
-42. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
-43. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
-44. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-45. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
-46. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-47. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+32. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
+33. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
+34. **Suppress Movable Columns**: Disables moving columns. (Default: false)
+35. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
+36. **Animate Rows**: Enables row animation on data changes. (Default: false)
+37. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
+38. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
+39. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
+40. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
+41. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
+42. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
+43. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
+44. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
+45. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+46. **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
 
@@ -95,16 +94,40 @@ This grid allows you to define custom type overrides for specific fields in the
 
 # Style Formatting
 
+## Text and Cell Colors
+
 The Style Formatting feature allows you to configure custom colors and fonts for column data based on certain conditions.
 This grid allows you to define custom color and font settings based on specific conditions. The grid has the following columns:
 
 1. **Field**: The field name for which you want to apply the custom color and font settings. (eg. first_name or status)
-2. **Condition**: The condition to check for applying the custom color and font settings. (eg. status=false or name=K den)
+2. **Condition**: The condition to check for applying the custom color and font settings. (eg. status=false or name=K den).
+   You can also supply a function here to return true or false based on the input.
+   eg: input jsTest() in the condition field and define it as below:
+   ```javascript
+   <script>
+     function jsTest(data) {
+       return (data.status == 'success');
+     }
+   </script>
 3. **Color**: The custom color to apply when the condition is met. Enter the color in HEX format (e.g., "#FF0000") or use named colors (e.g., "red"). 
 4. **Area**: Choose where to apply the color: "text" (cell text) or "cell" (cell background).
 5. **Font**: Choose the font style: "normal," "italic," or "bold."
 ---
 
+## Configure Row Colors
+
+1. **Condition**: The condition to check for applying the custom color to rows. (eg. status=false or name=K den).
+ You can also supply a function here to return true or false based on the input. 
+ eg: input jsTest() in the condition field and define it as below:
+ ```javascript
+   <script>
+     function jsTest(data) {
+       return (data.status == 'success');
+     }
+   </script>
+</script>
+2. **Color**: The custom color to apply to row when the condition is met. Enter the color in HEX format (e.g., "#FF0000") or use named colors (e.g., "red"). 
+
 # Tooltip Settings
 
 The Tooltip Settings feature allows you to configure custom tooltips for specific fields in the data.

package/app_connect/components.hjson

@@ -176,7 +176,7 @@
               "defaultValue": true,
               "help": "Specifies if the column has a floating filter"
             },
-            {
+{
               "name": "cellEditable",
               "attribute": "dmx-bind:cell_editable",
               "title": "Editable Cells",
@@ -340,7 +340,7 @@
               "defaultValue": "dd/MM/yyyy hh:mm A",
               "help": "Date Format"
             },
-            {
+{
               "name": "quickFilterField",
               "attribute": "quick_filter_field",
               "title": "Filter Field ID",
@@ -475,7 +475,7 @@
               "defaultValue": false,
               "help": "This will cause long texts to wrap in the cells."
             },
-            {
+{
               "name": "vCenterCellData",
               "attribute": "dmx-bind:vert_center_cell_data",
               "title": "Center Align (V)",
@@ -697,7 +697,7 @@
                 {
                   "name": "listColors",
                   "attribute": "dmx-bind:cstyles",
-                  "title": "Colors",
+                  "title": "Text and Cell Colors",
                   "type": "grid",
                   "dataBindings": true,
                   "jsonFormat": true,
@@ -760,6 +760,64 @@
                   }
                 }
               ]
+            },
+            {
+              "name": "rstyles",
+              "title": "Configure Row Colors",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "rstyles",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "listRowColors"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Add custom Colors function that will return true or false. Add the fucntion name in the Function column."
+              "children": [
+                {
+                  "name": "listRowColors",
+                  "attribute": "dmx-bind:rstyles",
+                  "title": "Row Colors",
+                  "type": "grid",
+                  "key": "field",
+                  "dataBindings": true,
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "condition",
+                      "caption": "Function",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "customColor",
+                      "caption": "Color",
+                      "editable": {
+                        "type": "text"
+                      },
+                      help: "Example: '#FF0000' or 'red'"
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "condition": "",
+                    "customColor": ""
+                  }
+                }
+              ]
             }
           ]
         },
@@ -1392,7 +1450,7 @@
                 "columnsToSum",
                 "enableFixedFooter",
                 "fixedFooterBottomPadding",
-                "columnsToCountNonUnique"
+"columnsToCountNonUnique"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -1428,7 +1486,7 @@
                         "unique_values": ""
                       }
                 },
-                {
+{
                   "name": "columnsToCountNonUnique",
                   "attribute": "dmx-bind:columns_to_count_nonunique",
                   "title": "Count Non-Unique",
@@ -2364,7 +2422,7 @@
           state: 'opened',
           help: 'Get Selected Rows',
           properties: []
-        },
+},
         {
           addTitle: 'quickFilter',
           title: 'Quick Filter',
@@ -2828,7 +2886,7 @@
         "dmx-ag-grid": true
       }
     },
-    {
+{
       "name": "dmx-ag-grid-cell-edited",
       "attributeStartsWith": "dmx-on",
       "attribute": "cell_data_edited",

package/dmx-ag-grid.js

@@ -22,6 +22,7 @@ dmx.Component('ag-grid', {
     tooltip_config: { type: Array, default: [] },
     custom_tooltip: { type: String, default: null },
     cstyles: { type: Array, default: [] },
+    rstyles: { type: Array, default: {} },
     cnames: { type: Object, default: {} },
     cwidths: { type: Object, default: {} },
     ctypes: { type: Array, default: [] },
@@ -728,7 +729,6 @@ dmx.Component('ag-grid', {
           const options = {
             timeZone: timezone,
           };
-
           const convertedTimestamp = date.toLocaleString(options.date_locale, options);
           const [datePart, timePart] = convertedTimestamp.split(', ');
           const [day, month, year] = datePart.split('/');
@@ -755,6 +755,32 @@ dmx.Component('ag-grid', {
       
       return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
     };
+    //Custom Row Styles
+    function createRowStyleFunction(rstyles) {
+      return function(params) {
+        if (!rstyles || !Array.isArray(rstyles) || rstyles.length === 0) {
+          return; // No styles to apply
+        }
+        const rowStyle = {};
+        for (const style of rstyles) {
+          const condition = style.condition.replace(/\(\)$/, ''); // Remove () if present at the end
+          const customColor = style.customColor;
+          let conditionResult;
+          if (typeof window[condition] === 'function') {
+            const result = window[condition](params.data);
+            if (typeof result !== 'boolean') {
+              console.error('Row condition function must return a boolean value.');
+              return;
+            }
+            conditionResult = result;
+          }
+          if (conditionResult) {
+            rowStyle.background = customColor;
+          }
+        }
+        return rowStyle;
+      };
+    }
     dateFilterParams = {
         comparator: function (filterLocalDateAtMidnight, cellValue) {
           var cellDate = new Date(cellValue);
@@ -843,7 +869,6 @@ dmx.Component('ag-grid', {
         if (matchingChange && matchingChange.area === 'cell' ) {
           return matchingChange.new_value;
         }
-    
         // Check if there's a matching change in dataBindedChanges
         const matchingKeyData = keyLookup[key];
         if (matchingKeyData) {
@@ -883,14 +908,11 @@ dmx.Component('ag-grid', {
     
       return function (params) {
         const value = params.data[key];
-        
-    
         // Check if there's a matching change in dataChanges
         const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
         if (matchingChange && matchingChange.area === 'tooltip' ) {
           return matchingChange.new_value;
         }
-    
         // Check if there's a matching change in dataBindedChanges
         const matchingKeyData = keyLookup[key];
         if (matchingKeyData) {
@@ -933,7 +955,6 @@ dmx.Component('ag-grid', {
     
       return function (params) {
         const value = params.data[key];
-    
         // Check if there's a matching change in dataChanges
         const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
         if (matchingChange) {
@@ -1036,22 +1057,43 @@ dmx.Component('ag-grid', {
         function applyCellStyle(params) {
           const field = params.colDef.field.toString();
           const styles = cstyles.filter((cs) => cs.field === field);
-          const whiteSpace = options.wrap_text ? 'normal' : 'nowrap'
+          const whiteSpace = options.wrap_text ? 'normal' : 'nowrap';
         
           for (const style of styles) {
             const condition = style.condition;
             const customColor = style.customColor;
             const font = style.font || 'normal';
-            const area = style.area || 'text'; 
-            const [left, operator, right] = extractConditionParts(condition);
-            if (
-              params.data.hasOwnProperty(left) &&
-              (params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false)
-            ) {
+            const area = style.area || 'text';
+            let conditionResult = false;
+            if (condition.endsWith('()') && typeof window[condition.replace(/\(\)$/, '')] === 'function') {
+              const result = window[condition.replace(/\(\)$/, '')](params.data);
+              if (typeof result !== 'boolean') {
+                console.error('Custom condition function must return a boolean value.');
+                return;
+              }
+                conditionResult = result;
+            } else {
+              const [left, operator, right] = extractConditionParts(condition);
+              if (params.data.hasOwnProperty(left) &&
+                (params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false)
+              ) {
+                conditionResult = true;
+              }
+            }
+            if (conditionResult) {
               if (area === 'text') {
-                return { color: customColor, fontStyle: font, fontWeight: (font==='bold'?'bold':null), whiteSpace: whiteSpace };
+                return {
+                  color: customColor,
+                  fontStyle: font,
+                  fontWeight: (font === 'bold' ? 'bold' : null),
+                  whiteSpace: whiteSpace
+                };
               } else if (area === 'cell') {
-                return { backgroundColor: customColor, fontStyle: font, whiteSpace: whiteSpace };
+                return {
+                  backgroundColor: customColor,
+                  fontStyle: font,
+                  whiteSpace: whiteSpace
+                };
               }
             }
           }
@@ -1060,7 +1102,6 @@ dmx.Component('ag-grid', {
           }
           return null;
         }
-
         if (cnames.hasOwnProperty(key)) {
         const cname = cnames[key]
         headerName = cname ? cname.custom_name : humanize(key);         
@@ -1302,6 +1343,7 @@ dmx.Component('ag-grid', {
     const gridOptions = {
       ...(idFieldPresent ? { getRowId: params => params.data.id } : {}),
       columnDefs: (groupedColumnDefs && groupedColumnDefs.length > 0) ? groupedColumnDefs : columnDefs,
+      getRowStyle: options.rstyles ? createRowStyleFunction(options.rstyles): undefined,
       localeText: localeText,
       enableRtl: options.enable_rtl,
       onRowClicked: enableRowClickEvent ? onRowClicked : undefined,

package/package.json

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