@cdmx/wappler_ag_grid 0.4.3 → 0.4.5

package/app_connect/components.hjson

@@ -503,7 +503,7 @@
           "variables": [
             {
               "name": "cstyles",
-              "title": "Configure Colors",
+              "title": "Configure Colors and Fonts",
               "attributeStartsWith": "dmx-bind",
               "attribute": "cstyles",
               "type": "boolean",
@@ -551,14 +551,39 @@
                         "type": "text"
                       },
                       help: "Example: '#FF0000' or 'red'"
+                    },
+                    {
+                      "field": "area",
+                      "caption": "Area",
+                      "size": "20%",
+                      "editable": {
+                        "type": "list", 
+                        "items": [
+                          {id: 'text', text: 'text'},
+                          {id: 'cell', text: 'cell'}
+                        ]
+                      }
+                    },
+                    {
+                      "field": "font",
+                      "caption": "Font",
+                      "size": "20%",
+                      "editable": {
+                        "type": "list", 
+                        "items": [
+                          {id: 'normal', text: 'normal'},
+                          {id: 'italic', text: 'italic'},
+                          {id: 'bold', text: 'bold'}
+                        ]
+                      }
                     }
                   ],
                   "newRecord": {
-                    "name": "",
-                    "value": "",
                     "field": "",
                     "condition": "",
-                    "customColor": ""
+                    "customColor": "",
+                    "area": "text",
+                    "font": "normal"
                   }
                 }
               ]
@@ -625,13 +650,26 @@
                       "editable": {
                         "type": "text"
                       }
+                    },
+                    {
+                      "field": "area",
+                      "caption": "Area",
+                      "size": "5%",
+                      "editable": {
+                        "type": "list", 
+                        "items": [
+                          {id: 'cell', text: 'cell'},
+                          {id: 'tooltip', text: 'tooltip'}
+                        ]
+                      }
                     }
                   ],
                   "newRecord": {
                     "field": "",
                     "data_source": "",
                     "property": "",
-                    "output": ""
+                    "output": "",
+                    "area": "cell"
                   }
                 }
               ]
@@ -687,13 +725,25 @@
                       editable: {
                         type: "text"
                       }
+                    },
+                    {
+                      "field": "area",
+                      "caption": "Area",
+                      "size": "5%",
+                      "editable": {
+                        "type": "list", 
+                        "items": [
+                          {id: 'cell', text: 'cell'},
+                          {id: 'tooltip', text: 'tooltip'}
+                        ]
+                      }
                     }
                   ],
                   "newRecord": {
-                    "name": "",
-                    "value": "",
                     "field": "",
-                    "new_value": ""
+                    "value": "",
+                    "new_value": "",
+                    "area": "cell"
                   }
                 }
               ]

package/dmx-ag-grid.js

@@ -216,8 +216,6 @@ dmx.Component('ag-grid', {
   
       return container;
   }
-    
-
     function humanize(str) {
       if (str == null) return str;
 
@@ -390,11 +388,12 @@ dmx.Component('ag-grid', {
           const data_source = change.data_source;
           const property = change.property;
           const output = change.output;
+          const area = change.area;
           let dataArray;
           this.$addBinding(data_source, (function (e) {
             dataArray = e;
           }));
-          keyLookup[change.field] = { dataArray, property, output };
+          keyLookup[change.field] = { dataArray, property, output, area };
         }
       });
     
@@ -403,17 +402,17 @@ dmx.Component('ag-grid', {
     
         // Check if there's a matching change in dataChanges
         const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
-        if (matchingChange) {
+        if (matchingChange && matchingChange.area === 'tooltip' ) {
           return matchingChange.new_value;
         }
     
         // Check if there's a matching change in dataBindedChanges
         const matchingKeyData = keyLookup[key];
         if (matchingKeyData) {
-          const { dataArray, property, output } = matchingKeyData;
+          const { dataArray, property, output, area } = matchingKeyData;
           const matchingItem = dataArray.find(item => item[property] === value);
     
-          if (matchingItem) {
+          if (matchingItem && area === 'cell') {
             return matchingItem[output];
           }
         }
@@ -422,6 +421,48 @@ dmx.Component('ag-grid', {
         return value;
       };
     }
+    createCombinedTooltipValueGetter = (key, dataChanges, dataBindedChanges) => {
+      const keyLookup = {};
+    
+      dataBindedChanges.forEach(change => {
+        if (!keyLookup[change.field]) {
+          const data_source = change.data_source;
+          const property = change.property;
+          const output = change.output;
+          const area = change.area;
+          let dataArray;
+          this.$addBinding(data_source, (function (e) {
+            dataArray = e;
+          }));
+          keyLookup[change.field] = { dataArray, property, output, area };
+        }
+      });
+    
+      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) {
+          const { dataArray, property, output, area } = matchingKeyData;
+          const matchingItem = dataArray.find(item => item[property] === value);
+          
+    
+          if (matchingItem && area === 'tooltip') {
+            return matchingItem[output];
+          }
+        }
+        // Return the original value if no matching changes were found
+        return undefined;
+      };
+    }
     createCombinedFilterValueGetter = (key, dataChanges, dataBindedChanges) => {
       const keyLookup = {};
     
@@ -518,14 +559,30 @@ dmx.Component('ag-grid', {
         else {
           valueGetter = createCombinedValueGetter(key, options.data_changes, options.data_binded_changes);
           filterValueGetter = createCombinedFilterValueGetter(key, options.data_changes, options.data_binded_changes);
+          tooltipValueGetter = createCombinedTooltipValueGetter(key, options.data_changes, options.data_binded_changes);
         }
         function extractConditionParts(condition) {
-          const parts = condition.match(/(.+?)(===|==|!=|>|<|>=|<=)(.+)/);
-          if (parts) {
-            const [, left, operator, right] = parts;
-            return [left.trim(), operator.trim(), right.trim()];
+          
+          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;
+            }
           }
-          return [];
+        
+          if (!operator) {
+            throw new Error('Invalid operator in the condition.');
+          }
+        
+          return [left, operator, right];
         }
         
         function evaluateCondition(left, operator, right) {
@@ -557,17 +614,24 @@ dmx.Component('ag-grid', {
           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) && 
-              evaluateCondition(params.data[left], operator, right) 
+              params.data.hasOwnProperty(left) &&
+              evaluateCondition(params.data[left], operator, right)
             ) {
-              return { color: customColor }; 
+              if (area === 'text') {
+                return { color: customColor, fontStyle: font };
+              } else if (area === 'cell') {
+                return { backgroundColor: customColor, fontStyle: font };
+              }
             }
           }
         
           return null;
-          }
+        }
 
         if (cnames.hasOwnProperty(key)) {
         const cname = cnames[key]
@@ -615,6 +679,7 @@ dmx.Component('ag-grid', {
           sortable: sortable,
           filterValueGetter: filterValueGetter,
           filterParams: filterParams,
+          tooltipValueGetter: tooltipValueGetter,
           cellStyle: applyCellStyle,
           ...(cwidths.hasOwnProperty(key) && {
             minWidth: parseInt(cwidths[key].min_width),
@@ -654,6 +719,7 @@ dmx.Component('ag-grid', {
         field: 'action',
         colId: 'actionsColumn',
         filter: null,
+        sortable: false,
         cellRenderer: actionsRenderer,
         pinned: options.pin_actions,
         cellRendererParams: {

package/package.json

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