@cdmx/wappler_ag_grid 2.0.21 → 2.1.1

package/README.md

@@ -1,65 +1,30 @@
 #### Developed and Maintained by: Roney Dsilva
 
-**Major Update:** This release upgrades from AG Grid v32.3.7 to v34.1.0, bringing significant performance improvements and exciting new features.
+**Major Update:** This release upgrades AG Grid to v35.1.0, bringing continued performance improvements and new features.
 
-## 🚀 What's New in v2.0.19
+## 🚀 What's New in v2.0.23
 
-1. **🔥 AG Grid v34.1.0** - Latest version with all community features
-2. **⚡ Performance Boost** - Up to 40% bundle size reduction potential
+1. **🔥 AG Grid v35.1.0** - Latest version with all community features
+2. **⚡ Smooth Upgrade** - Non-breaking upgrade from v34, all existing configurations continue to work
 3. **🎨 HTML Tooltips** - Rich HTML tooltip support with JavaScript functions
 4. **🔧 Enhanced Tooltip System** - Custom tooltip components with automatic HTML detection
-5. **🚫 Suppress Model Update** - New option to prevent automatic reprocessing after update transactions
+5. **🚫 Suppress Model Update** - Option to prevent automatic reprocessing after update transactions
 
-- **Breaking Changes:** Some configurations may require updates due to AG Grid v33/v34 changes
-
-## 🚀 What's New in AG Grid v34.1.0
-
-### New Features Available in This Release:
-
-1. **✅ Cell Editor Validation** - Built-in validation for all cell editors:
-   - Automatic constraint checking based on column configuration
-   - Override defaults with custom validation rules
-   - Handle invalid values by reverting or blocking changes
-
-2. **🎯 Bulk Cell Editing** - Edit multiple cells in a single action:
-   - Select cells, enter new value, commit with Tab key
-   - Ideal for updating status of multiple items or overriding null values
-
-3. **⚡ Performance Improvements** - Up to 40% bundle size reduction through:
-   - Modular architecture improvements
-   - Better tree-shaking capabilities
-   - Optimized loading times
-
-4. **🎨 Enhanced Theming** - New Theming API for:
-   - Dynamic theme manipulation at runtime
-   - Better integration with Theme Builder
-   - Easy customization via theme parameters
-
-## 🔄 Migration from v1.x to v2.0
+## 🔄 Migration from v34 to v35
 
 ### Compatibility Notes:
-- **Good News:** This upgrade is largely **non-breaking** for existing implementations
+- **Good News:** This upgrade is **non-breaking** for existing implementations
 - Your existing grids should continue to work without changes
-- AG Grid v34 is non-breaking from v33, so most configurations remain the same
+- No deprecated API removals in v35
+
+### What Changed Internally:
+- New automatic overlays for filtering and exporting are now suppressed by default to preserve existing overlay behavior
+- Date/number filter range validation now enforces start < end
 
 ### Recommended Steps:
-1. **Update Package:** Simply update to v2.0.2 - no code changes required for basic functionality
+1. **Update Package:** Simply update to the latest version - no code changes required
 2. **Test Your Grids:** Verify existing grids work as expected
-3. **Explore New Features:** Gradually enable new v34 features as needed:
-   - Enable Cell Editor Validation for better data quality
-   - Try Batch/Bulk editing for improved user experience
-   - Use the new Filters Tool Panel for better UX
-   - Implement Tree Data Drag & Drop for hierarchical data
-
-### Performance Benefits:
-- **Bundle Size:** Potential 20-40% reduction in bundle size
-- **Loading Speed:** Faster grid initialization
-- **Memory Usage:** Improved memory efficiency
-
-### Breaking Changes (Minimal):
-- Some very old deprecated APIs (from v31 and earlier) have been removed
-- If you customized AG Grid CSS extensively, test your styling
-- The new Theming API is now default (but legacy CSS themes still work)
+3. **Test Exports:** Verify CSV/PDF exports work correctly
 
 # AG Grid Module Documentation
 
@@ -657,7 +622,7 @@ You can also specify left-only conditions, where only the field name is provided
 - Useful for resetting the grid view or preparing for new filter configurations.
 - Automatically clears the `filterState` property.
 
-## 💡 Implementation Examples for v34 Features
+## 💡 Implementation Examples
 
 ### Filter Management Examples
 
@@ -779,14 +744,14 @@ tree_data_drag_drop: true
 // ]
 ```
 
-## 🔧 Best Practices for v34
+## 🔧 Best Practices
 
-1. **Performance:** Start with basic features and gradually enable v34 enhancements
+1. **Performance:** Start with basic features and gradually enable enhancements
 2. **Testing:** Test new features in development before production deployment
-3. **Bundle Size:** Monitor bundle size improvements with the new architecture
-4. **User Experience:** Combine multiple v34 features for enhanced workflows:
+3. **Bundle Size:** Monitor bundle size improvements with the modular architecture
+4. **User Experience:** Combine multiple features for enhanced workflows:
    - Use Batch Editing + Validation for better data entry
-   - Combine New Filters Tool Panel with server-side data
+   - Combine Filters Tool Panel with server-side data
    - Use Tree Data + Drag & Drop for hierarchical management
 
 ## License

package/app_connect/components.hjson

@@ -243,6 +243,14 @@
               "defaultValue": false,
               "help": "Specifies if Export to PDF to be enabled"
             },
+            {
+              "name": "exportToXLS",
+              "attribute": "dmx-bind:export_to_xls",
+              "title": "XLS Export",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Specifies if Export to XLS (Excel) to be enabled"
+            },
             {
               "name": "exportExcludeHidden",
               "attribute": "dmx-bind:export_exclude_hidden_fields",
@@ -3700,6 +3708,11 @@
                   name: '2', optionName: '2', title: 'PDF', type: 'boolean',
                   dataBindings: true, defaultValue: false, required: false,
                   help: 'Export Grid data as PDF file.'
+                },
+                {
+                  name: '3', optionName: '3', title: 'XLS', type: 'boolean',
+                  dataBindings: true, defaultValue: false, required: false,
+                  help: 'Export Grid data as Excel (.xlsx) file.'
                 }
               ]
             }
@@ -3911,6 +3924,10 @@
         {
           "src": "../../../node_modules/pdfmake/build/vfs_fonts.js",
           "dst": "js/vfs_fonts.js"
+        },
+        {
+          "src": "../../../node_modules/exceljs/dist/exceljs.min.js",
+          "dst": "js/exceljs.min.js"
         }
       ],
       "linkFiles": [
@@ -3954,6 +3971,11 @@
           "type": "js",
           "defer": true
         },
+        {
+          "src": "js/exceljs.min.js",
+          "type": "js",
+          "defer": true
+        },
         {
           "src": "css/ag-theme-alpine.css",
           "type": "css"
@@ -4318,6 +4340,40 @@
         "dmx-ag-grid": true
       }
     },
+    {
+      "name": "dmx-ag-grid-export-xls-filename",
+      "attributeStartsWith": "dmx-bind",
+      "attribute": "export_xls_filename",
+      "title": "Export XLS Filename",
+      "type": "boolean",
+      "display": "fieldset",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Config",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "exportXlsFilename"
+      ],
+      "noChangeOnHide": true,
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "exportXlsFilename",
+          "attributeStartsWith": "dmx-bind",
+          "attribute": "export_xls_filename",
+          "isValue": true,
+          "dataBindings": true,
+          "title": "XLS Filename",
+          "type": "text",
+          "help": "Export XLS filename.",
+          "defaultValue": "export.xlsx",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
     {
       "name": "dmx-ag-grid-dark-mode",
       "attributeStartsWith": "dmx-bind",

package/dmx-ag-grid.js

@@ -94,6 +94,8 @@ dmx.Component('ag-grid', {
     export_csv_filename: { type: String, default: 'export.csv' },
     export_to_pdf: { type: Boolean, default: false },
     export_pdf_filename: { type: String, default: 'export.pdf' },
+    export_to_xls: { type: Boolean, default: false },
+    export_xls_filename: { type: String, default: 'export.xlsx' },
     fixed_header: { type: Boolean, default: false },
     topbar_class: { type: String, default: 'topbar' },
     fixed_header_offset: { type: Number, default: 100 },
@@ -353,9 +355,9 @@ dmx.Component('ag-grid', {
       if (gridInstance) gridInstance.destroy();
       }, this);
     },
-    exportGrid: function (Csv, Pdf) {
-      // Default Csv to true if both Csv and Pdf are false
-      if (!Csv && !Pdf) {
+    exportGrid: function (Csv, Pdf, Xls) {
+      // Default Csv to true if none specified
+      if (!Csv && !Pdf && !Xls) {
         Csv = true;
       }
       dmx.nextTick(() => {
@@ -365,6 +367,8 @@ dmx.Component('ag-grid', {
           exportGridData(gridInst, gridCfg);
         } else if (Pdf) {
           exportGridDataToPDF(gridInst, gridCfg);
+        } else if (Xls) {
+          exportGridDataToXLS(gridInst, gridCfg);
         } else {
           console.error('Grid not loaded to perform the requested export');
         }
@@ -607,6 +611,7 @@ dmx.Component('ag-grid', {
     let groupedColumnDefs = [];
     let exportToCSV = this.props.export_to_csv;
     let exportToPDF = this.props.export_to_pdf;
+    let exportToXLS = this.props.export_to_xls;
     let cellRenderer;
     
     const gridThemeClass = options.dark_mode ? `${options.grid_theme}-dark` : options.grid_theme;
@@ -1827,6 +1832,7 @@ dmx.Component('ag-grid', {
       suppressScrollOnNewData: this.props.suppress_scroll_on_new_data,
       columnHoverHighlight: this.props.column_hover_highlight,
       tooltipShowDelay: options.tooltip_show_delay,
+      suppressOverlays: ['noMatchingRows', 'exporting'],
       onFilterModified: function (params) { 
         const columnApi = params.api;
           const rowCount = columnApi.getDisplayedRowCount();
@@ -2042,16 +2048,20 @@ dmx.Component('ag-grid', {
     const gridConfig = {
       columnDefs: columnDefs,
       ...gridOptions,
-      // Store export configuration for each grid instance
-      exportConfig: {
-        export_csv_filename: options.export_csv_filename,
-        export_pdf_filename: options.export_pdf_filename,
-        export_remove_html: options.export_remove_html,
-        export_trim_data: options.export_trim_data,
-        export_exclude_fields: options.export_exclude_fields,
-        export_exclude_hidden_fields: options.export_exclude_hidden_fields,
-        group_config: options.group_config,
-        column_state_storage_key: options.column_state_storage_key
+      // Store export configuration in context to avoid AG Grid warnings
+      context: {
+        ...gridOptions.context,
+        exportConfig: {
+          export_csv_filename: options.export_csv_filename,
+          export_pdf_filename: options.export_pdf_filename,
+          export_xls_filename: options.export_xls_filename,
+          export_remove_html: options.export_remove_html,
+          export_trim_data: options.export_trim_data,
+          export_exclude_fields: options.export_exclude_fields,
+          export_exclude_hidden_fields: options.export_exclude_hidden_fields,
+          group_config: options.group_config,
+          column_state_storage_key: options.column_state_storage_key
+        }
       }
     };
     // Store gridConfig on component instance for export functions
@@ -2243,7 +2253,7 @@ dmx.Component('ag-grid', {
     };
 
     exportGridData = (currentGridInstance, currentGridConfig) => {
-      const exportConfig = currentGridConfig.exportConfig;
+      const exportConfig = currentGridConfig.context.exportConfig;
       const excludedColumnIds = ['checkboxColumn', 'actionsColumn'];
       const exportExcludeFieldsArray = exportConfig.export_exclude_fields ? exportConfig.export_exclude_fields.split(',') : [];
       
@@ -2443,7 +2453,7 @@ dmx.Component('ag-grid', {
         console.error('Grid API is destroyed or not initialized.');
         return;
       }
-      const exportConfig = currentGridConfig.exportConfig;
+      const exportConfig = currentGridConfig.context.exportConfig;
       const excludedColumnIds = ['checkboxColumn', 'actionsColumn'];
       const exportExcludeFieldsArray = exportConfig.export_exclude_fields ? exportConfig.export_exclude_fields.split(',') : [];
       let fieldsAndColIds;
@@ -2656,6 +2666,221 @@ dmx.Component('ag-grid', {
         exportPdfButton.style.marginBottom = '10px';
       }
     }
+    // XLS Export Function using ExcelJS
+    exportGridDataToXLS = async (currentGridInstance, currentGridConfig) => {
+      if (!currentGridInstance || currentGridInstance.isDestroyed()) {
+        console.error('Grid API is destroyed or not initialized.');
+        return;
+      }
+      if (typeof ExcelJS === 'undefined') {
+        console.error('ExcelJS library is not loaded. Make sure exceljs.min.js is included.');
+        return;
+      }
+      const exportConfig = currentGridConfig.context.exportConfig;
+      const excludedColumnIds = ['checkboxColumn', 'actionsColumn'];
+      const exportExcludeFieldsArray = exportConfig.export_exclude_fields ? exportConfig.export_exclude_fields.split(',') : [];
+
+      // Determine fields to export (reuse same logic as CSV)
+      let fieldsToExport = [];
+      const pageId = getPageId();
+      const storageKey = exportConfig.column_state_storage_key || pageId;
+      const savedColumnState = localStorage.getItem(`dmxState-${storageKey}`);
+
+      if (savedColumnState) {
+        try {
+          const parsedState = JSON.parse(savedColumnState);
+          fieldsToExport = parsedState
+            .filter((col) => {
+              if (excludedColumnIds.includes(col.colId)) return false;
+              if (col.hide) return false;
+              return true;
+            })
+            .map((col) => {
+              const columnDef = findColumnDefByColId(col.colId, exportConfig, currentGridConfig);
+              return columnDef ? columnDef.field : col.colId;
+            })
+            .filter((field) => !exportExcludeFieldsArray.includes(field));
+        } catch (err) {
+          console.warn(`Failed to parse saved column state for key: dmxState-${storageKey}`, err);
+          fieldsToExport = [];
+        }
+      }
+
+      function findColumnDefByColId(colId, expConfig, gridCfg) {
+        if (expConfig.group_config) {
+          const traverseColumns = (columns) => {
+            for (const column of columns) {
+              if (column.children) {
+                const result = traverseColumns(column.children);
+                if (result) return result;
+              } else if (column.colId === colId) {
+                return column;
+              }
+            }
+            return null;
+          };
+          return traverseColumns(gridCfg.columnDefs);
+        } else {
+          return gridCfg.columnDefs.find((column) => column.colId === colId);
+        }
+      }
+
+      if (!fieldsToExport || fieldsToExport.length === 0) {
+        let fieldsAndColIds;
+        if (exportConfig.group_config) {
+          const traverseColumns = (columns) => {
+            const result = [];
+            columns.forEach((column) => {
+              if (column.children) {
+                result.push(...traverseColumns(column.children));
+              } else {
+                result.push({ field: column.field, colId: column.colId, hide: column.hide });
+              }
+            });
+            return result;
+          };
+          fieldsAndColIds = traverseColumns(currentGridConfig.columnDefs);
+        } else {
+          fieldsAndColIds = currentGridConfig.columnDefs.map((column) => ({
+            field: column.field, colId: column.colId, hide: column.hide,
+          }));
+        }
+        fieldsToExport = fieldsAndColIds.filter((column) => {
+          return !excludedColumnIds.includes(column.colId) &&
+                 (!exportConfig.export_exclude_hidden_fields || !column.hide) &&
+                 !exportExcludeFieldsArray.includes(column.field);
+        }).map((column) => column.field);
+      }
+
+      // Build headers
+      const headers = fieldsToExport.map(field => {
+        return cnames.hasOwnProperty(field) ? cnames[field].custom_name : humanize(field);
+      });
+
+      // Build rows
+      const rows = [];
+      currentGridInstance.forEachNode(node => {
+        const row = fieldsToExport.map(field => {
+          const columns = currentGridInstance.getColumnState();
+          const col = columns.find(c => c.colId === field);
+          const colDef = col ? currentGridInstance.getColumnDefs().find(def => def.colId === col.colId) : {};
+          const params = {
+            value: currentGridInstance.getCellValue({ rowNode: node, colKey: field }) ?? '-',
+            data: node.data,
+            node,
+            colDef,
+            column: col,
+            api: currentGridInstance,
+            context: currentGridInstance.getContext ? currentGridInstance.getContext() : undefined,
+          };
+
+          let displayValue;
+          if (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') {
+            displayValue = colDef.cellRenderer(params);
+          } else if (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') {
+            displayValue = colDef.valueFormatter(params);
+          } else {
+            displayValue = params.value;
+          }
+
+          if (exportConfig.export_remove_html && typeof displayValue === 'string') {
+            displayValue = removeHtmlTags(displayValue);
+          }
+          if (exportConfig.export_trim_data && typeof displayValue === 'string') {
+            displayValue = displayValue.trim();
+          }
+          return displayValue;
+        });
+        rows.push(row);
+      });
+
+      // Create workbook and worksheet using ExcelJS
+      const workbook = new ExcelJS.Workbook();
+      const worksheet = workbook.addWorksheet('Export');
+
+      // Add header row
+      worksheet.addRow(headers);
+      // Style header row
+      const headerRow = worksheet.getRow(1);
+      headerRow.font = { bold: true };
+      headerRow.eachCell((cell) => {
+        cell.fill = {
+          type: 'pattern',
+          pattern: 'solid',
+          fgColor: { argb: 'FFE0E0E0' }
+        };
+      });
+
+      // Add data rows
+      rows.forEach(row => worksheet.addRow(row));
+
+      // Auto-fit column widths
+      worksheet.columns.forEach((column, i) => {
+        let maxLength = headers[i] ? headers[i].length : 10;
+        rows.forEach(row => {
+          const cellValue = row[i];
+          if (cellValue != null) {
+            const len = String(cellValue).length;
+            if (len > maxLength) maxLength = len;
+          }
+        });
+        column.width = Math.min(maxLength + 2, 50);
+      });
+
+      // Generate and download
+      const buffer = await workbook.xlsx.writeBuffer();
+      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = exportConfig.export_xls_filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    };
+    if (exportToXLS) {
+      let exportXlsButton = document.getElementById(`exportXlsButton-${options.id}`);
+      let isNewXlsButton = false;
+      if (!exportXlsButton) {
+        isNewXlsButton = true;
+        exportXlsButton = document.createElement('button');
+        exportXlsButton.id = `exportXlsButton-${options.id}`;
+        const icon = document.createElement('i');
+        icon.classList.add('fas', 'fa-file-excel');
+        exportXlsButton.appendChild(icon);
+
+        const buttonText = document.createElement('span');
+        buttonText.innerText = ' Export to XLS';
+        exportXlsButton.appendChild(buttonText);
+        exportXlsButton.style.backgroundColor = '#4CAF50';
+        exportXlsButton.style.border = 'none';
+        exportXlsButton.style.color = 'white';
+        exportXlsButton.style.padding = '5px 10px';
+        exportXlsButton.style.textAlign = 'center';
+        exportXlsButton.style.textDecoration = 'none';
+        exportXlsButton.style.display = 'inline-block';
+        exportXlsButton.style.fontSize = '14px';
+        exportXlsButton.style.borderRadius = '5px';
+        exportXlsButton.style.cursor = 'pointer';
+        exportXlsButton.style.marginBottom = '10px';
+      }
+
+      exportXlsButton.onclick = () => {
+        const currentGridInstance = this.get('gridInstance');
+        const currentGridConfig = this.get('gridConfig');
+        if (currentGridInstance && currentGridConfig) {
+          exportGridDataToXLS(currentGridInstance, currentGridConfig);
+        } else {
+          console.error('Grid instance or configuration not available for export');
+        }
+      };
+
+      if (isNewXlsButton) {
+        gridContainer.parentNode.insertBefore(exportXlsButton, gridContainer);
+        exportXlsButton.style.marginBottom = '10px';
+      }
+    }
     const paginationPanelCss = `
       /* Flexbox layout for pagination panel */
       .ag-paging-panel {

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.0.21",
+    "version": "2.1.1",
     "type": "module",
-    "description": "App Connect module for AG Grid v34 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
+    "description": "App Connect module for AG Grid v35 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
     "license": "MIT",
     "author": {
         "name": "cdmx-in",
@@ -14,8 +14,9 @@
         "ag-grid"
     ],
     "dependencies": {
-        "@ag-grid-community/locale": "~34.1.0",
-        "ag-grid-community": "~34.1.0",
+        "@ag-grid-community/locale": "~35.1.0",
+        "ag-grid-community": "~35.1.0",
+        "exceljs": "^4.4.0",
         "papaparse": "~5.5.2",
         "pdfmake": "~0.2.18",
         "read-excel-file": "~5.8.7"