@cdmx/wappler_ag_grid 1.7.6 → 1.7.7

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,7 +1190,7 @@ dmx.Component('ag-grid', {
             filter = null;
           }
         }
-        
+
         
         if (options.hide_sort) {
           const hideSortArray = options.hide_sort.split(',');
@@ -1852,7 +1877,14 @@ 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 cellRendererValue = cellRenderer(params);
+            console.log(cellRendererValue)
+              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.7",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",