@cdmx/wappler_ag_grid 1.7.6 → 1.7.8

package/README.md

@@ -126,6 +126,7 @@ This grid allows you to define custom color and font settings based on specific
        return (data.status == 'success');
      }
    </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
@@ -185,7 +186,7 @@ The grid has the following settings:
 1. **Field**: The field name for which you want to apply the custom data changes. 
 2. **Function**: Create a JavaScript function that defines the custom rendering logic. In your HTML or script section, define the JS function. 
 ex: jsChanges. 
-
+ ```javascript
 <script>
   function jsChanges(data) {
     const html = `
@@ -194,7 +195,7 @@ ex: jsChanges.
     return html;
   }
 </script>
-
+  ```
 ---
 # Custom Headers
 

package/dmx-ag-grid.js

@@ -728,6 +728,32 @@ dmx.Component('ag-grid', {
         }
       });
     }
+    function getDateForComparison(value, timezone) {
+      if (value) {
+        const date = new Date(value);
+        if (timezone) {
+          const options = {
+            timeZone: timezone,
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false,
+          };
+          const convertedTimestamp = date.toLocaleString('en-US', options);
+          const [datePart, timePart] = convertedTimestamp.split(', ');
+          const [month, day, year] = datePart.split('/');
+          const [hours, minutes, seconds] = timePart.split(':');
+          return new Date(`${year}-${month}-${day}T${hours}:${minutes}:${seconds}`);
+        } else {
+          return date;
+        }
+      } else {
+        return null;
+      }
+    }
     function formatTime(params, timezone) {
       if (params.value) {
         const date = new Date(params.value)
@@ -789,9 +815,8 @@ dmx.Component('ag-grid', {
     }
     dateFilterParams = {
         comparator: function (filterLocalDateAtMidnight, cellValue) {
-          var cellDate = new Date(cellValue);
-          var filterDate = new Date(filterLocalDateAtMidnight);
-
+          const cellDate = getDateForComparison(cellValue, timezone);
+          const filterDate = new Date(filterLocalDateAtMidnight);
           // Compare the date portion of the cell value with the filter value
           var cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
           var filterDateOnly = new Date(filterDate.getFullYear(), filterDate.getMonth(), filterDate.getDate());
@@ -1165,8 +1190,8 @@ dmx.Component('ag-grid', {
             filter = null;
           }
         }
-        
-        
+
+
         if (options.hide_sort) {
           const hideSortArray = options.hide_sort.split(',');
           if (hideSortArray.includes(key)) {
@@ -1205,7 +1230,7 @@ dmx.Component('ag-grid', {
           }
         }
         function lookupValue(mappings, key) {
-          if (key==''||key === undefined){
+          if (mappings === undefined || key==''||key === undefined){
             return options.cselect_placeholder
           }
           return mappings[key];
@@ -1214,6 +1239,8 @@ dmx.Component('ag-grid', {
           editable = true;
           cellEditor = 'agSelectCellEditor';
           valueFormatter = (params) => {
+            if (params.api.isDestroyed()) return;
+          
             const selectedNode = params.api.getSelectedNodes()[0];
             const dynamicOptions = options.cdynamic_select_editors[key];
             const staticOptions = options.cstatic_select_editors[key];
@@ -1228,7 +1255,7 @@ dmx.Component('ag-grid', {
             } else {
                 selectOptions = selectedNode?.data[dynamicOptions.options_field];
             }
-            return lookupValue(selectOptions, params.value);
+              return lookupValue(selectOptions, params.value);
           };
           valueParser = (params) => {
             return lookupKey(selectOptions, params.newValue);
@@ -1317,7 +1344,7 @@ dmx.Component('ag-grid', {
           editable: false,
           width: 50,
           maxWidth: 50, 
-          suppressMenu: true
+          suppressHeaderMenuButton: true
       };
       columnDefs.unshift(checkboxColumn);
     }
@@ -1852,7 +1879,22 @@ dmx.Component('ag-grid', {
         processCellCallback: function (params) {
           const columnDef = params.column.getColDef();
           const valueFormatter = columnDef.valueFormatter;
-          if (valueFormatter && typeof valueFormatter === "function") {
+          const cellRenderer = columnDef.cellRenderer;
+          // Apply cellRenderer if it exists
+          if (cellRenderer && typeof cellRenderer === "function") {
+            const cellRendererParams = {
+              value: params.value,
+              data: params.node.data,
+              node: params.node,
+              colDef: columnDef,
+              column: params.column,
+              api: params.api,
+              context: params.context,
+            };
+            const cellRendererValue = cellRenderer(cellRendererParams);
+              return cellRendererValue;
+          }
+          else if (valueFormatter && typeof valueFormatter === "function") {
             const formattedValue = valueFormatter(params);
             if (formattedValue !== null && formattedValue !== undefined) {
               return formattedValue;

package/package.json

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