@cdmx/wappler_ag_grid 2.0.13 → 2.0.15

package/app_connect/components.hjson

@@ -253,6 +253,14 @@
               "type": "text",
               "help": "Specifies fields to be excluded in CSV export (comma-seperated)."
             },
+            {
+              "name": "exportRemoveHtml",
+              "attribute": "dmx-bind:export_remove_html",
+              "title": "Remove HTML from Export",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Removes HTML tags from exported data (CSV/PDF). Converts <br> tags to newlines."
+            },
             {
               "name": "paginationPageSizeSelector",
               "attribute": "dmx-bind:pagination_page_size_selector",

package/dmx-ag-grid.js

@@ -87,6 +87,7 @@ dmx.Component('ag-grid', {
     export_trim_data: { type: Boolean, default: false },
     export_exclude_hidden_fields: { type: Boolean, default: false },
     export_exclude_fields: { type: String, default: null },
+    export_remove_html: { type: Boolean, default: false },
     export_to_csv: { type: Boolean, default: true },
     export_csv_filename: { type: String, default: 'export.csv' },
     export_to_pdf: { type: Boolean, default: false },
@@ -356,9 +357,11 @@ dmx.Component('ag-grid', {
         Csv = true;
       }
       dmx.nextTick(() => {
-        const exportFunction = Csv ? exportGridData : (Pdf ? exportGridDataToPDF : null);
-        if (typeof exportFunction === 'function') {
-          exportFunction();
+        const gridInst = this.get('gridInstance');
+        if (Csv) {
+          exportGridData(gridInst, this.gridConfig);
+        } else if (Pdf) {
+          exportGridDataToPDF(gridInst, this.gridConfig);
         } else {
           console.error('Grid not loaded to perform the requested export');
         }
@@ -1979,6 +1982,8 @@ dmx.Component('ag-grid', {
       columnDefs: columnDefs,
       ...gridOptions
     };
+    // Store gridConfig on component instance for export functions
+    this.gridConfig = gridConfig;
     // Conditionally add event listeners based on whether columnsToSum or columnsToCount are defined
     if ((options.columns_to_sum && options.columns_to_sum.split(',').length > 0) || (options.columns_to_count.length > 0)) {
       let columnsToSum = options.columns_to_sum ? options.columns_to_sum.split(',') : [];
@@ -2150,7 +2155,22 @@ dmx.Component('ag-grid', {
     updateHoveringBarStyles();
 
     //CSV Export Function
-    exportGridData = () => {
+    // Helper function to remove HTML tags from string
+    const removeHtmlTags = (htmlString) => {
+      if (typeof htmlString !== 'string') return htmlString;
+      // Remove all HTML tags and decode common HTML entities
+      return htmlString
+        .replace(/<br\s*\/?>/gi, '\n')  // Replace <br> tags with newlines
+        .replace(/<[^>]*>/g, '')         // Remove all other HTML tags
+        .replace(/&nbsp;/g, ' ')         // Replace non-breaking space
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'");
+    };
+
+    exportGridData = (currentGridInstance, currentGridConfig) => {
       const excludedColumnIds = ['checkboxColumn', 'actionsColumn'];
       const exportExcludeFieldsArray = options.export_exclude_fields ? options.export_exclude_fields.split(',') : [];
       
@@ -2204,9 +2224,9 @@ dmx.Component('ag-grid', {
             }
             return null;
           };
-          return traverseColumns(gridConfig.columnDefs);
+          return traverseColumns(currentGridConfig.columnDefs);
         } else {
-          return gridConfig.columnDefs.find((column) => column.colId === colId);
+          return currentGridConfig.columnDefs.find((column) => column.colId === colId);
         }
       }
       
@@ -2236,9 +2256,9 @@ dmx.Component('ag-grid', {
             return fieldsAndColIds;
           };
           // Traverse columnDefs to gather fields and colIds
-          fieldsAndColIds = traverseColumns(gridConfig.columnDefs);
+          fieldsAndColIds = traverseColumns(currentGridConfig.columnDefs);
         } else {
-          fieldsAndColIds = gridConfig.columnDefs.map((column) => ({
+          fieldsAndColIds = currentGridConfig.columnDefs.map((column) => ({
             field: column.field,
             colId: column.colId,
             hide: column.hide,
@@ -2283,6 +2303,11 @@ dmx.Component('ag-grid', {
             }
           }
     
+          // Remove HTML tags if export_remove_html is true
+          if (options.export_remove_html && typeof value === 'string') {
+            value = removeHtmlTags(value);
+          }
+    
           // Trim value if export_trim is true
           if (options.export_trim_data && typeof value === 'string') {
             return value.trim();
@@ -2291,46 +2316,57 @@ dmx.Component('ag-grid', {
           return value;
         },
       };
-      gridInstance.exportDataAsCsv(params);
+      currentGridInstance.exportDataAsCsv(params);
     };
     // Create the export button
     if (exportToCSV) {
-      const existingExportButton = document.getElementById('exportButton');
-      if (existingExportButton) {
-        return;
-      }
-      const exportButton = document.createElement('button');
-      exportButton.id = 'exportButton'; 
-      const icon = document.createElement('i');
-      icon.classList.add('fas', 'fa-file-csv');
-      exportButton.appendChild(icon);
+      let exportButton = document.getElementById(`exportButton-${options.id}`);
+      let isNewButton = false;
+      if (!exportButton) {
+        isNewButton = true;
+        exportButton = document.createElement('button');
+        exportButton.id = `exportButton-${options.id}`; 
+        const icon = document.createElement('i');
+        icon.classList.add('fas', 'fa-file-csv');
+        exportButton.appendChild(icon);
 
-      // Add the button text
-      const buttonText = document.createElement('span');
-      buttonText.innerText = ' Export to CSV';
-      exportButton.appendChild(buttonText);
-      exportButton.style.backgroundColor = '#4CAF50';
-      exportButton.style.border = 'none';
-      exportButton.style.color = 'white';
-      exportButton.style.padding = '5px 10px';
-      exportButton.style.textAlign = 'center';
-      exportButton.style.textDecoration = 'none';
-      exportButton.style.display = 'inline-block';
-      exportButton.style.fontSize = '14px'; 
-      exportButton.style.borderRadius = '5px';
-      exportButton.style.cursor = 'pointer';
-      exportButton.style.marginBottom = '10px';
-
-      exportButton.addEventListener('click', () => {
-        exportGridData()
-      })
-      // Append the export button to the grid container
-      gridContainer.parentNode.insertBefore(exportButton, gridContainer);
-      exportButton.style.marginBottom = '10px';
+        // Add the button text
+        const buttonText = document.createElement('span');
+        buttonText.innerText = ' Export to CSV';
+        exportButton.appendChild(buttonText);
+        exportButton.style.backgroundColor = '#4CAF50';
+        exportButton.style.border = 'none';
+        exportButton.style.color = 'white';
+        exportButton.style.padding = '5px 10px';
+        exportButton.style.textAlign = 'center';
+        exportButton.style.textDecoration = 'none';
+        exportButton.style.display = 'inline-block';
+        exportButton.style.fontSize = '14px'; 
+        exportButton.style.borderRadius = '5px';
+        exportButton.style.cursor = 'pointer';
+        exportButton.style.marginBottom = '10px';
+      }
+      
+      // Always update the click handler to ensure it has the latest gridInstance and gridConfig
+      exportButton.onclick = () => {
+        const currentGridInstance = this.get('gridInstance');
+        const currentGridConfig = this.gridConfig;
+        if (currentGridInstance && currentGridConfig) {
+          exportGridData(currentGridInstance, currentGridConfig);
+        } else {
+          console.error('Grid instance or configuration not available for export');
+        }
+      };
+      
+      if (isNewButton) {
+        // Append the export button to the grid container
+        gridContainer.parentNode.insertBefore(exportButton, gridContainer);
+        exportButton.style.marginBottom = '10px';
+      }
     }
     // Export AG Grid data to PDF
-    exportGridDataToPDF = async () => {
-      if (!gridInstance || gridInstance.isDestroyed()) {
+    exportGridDataToPDF = async (currentGridInstance, currentGridConfig) => {
+      if (!currentGridInstance || currentGridInstance.isDestroyed()) {
         console.error('Grid API is destroyed or not initialized.');
         return;
       }
@@ -2355,9 +2391,9 @@ dmx.Component('ag-grid', {
           return fieldsAndColIds;
         };
         // Traverse columnDefs to gather fields and colIds
-        fieldsAndColIds = traverseColumns(gridConfig.columnDefs);
+        fieldsAndColIds = traverseColumns(currentGridConfig.columnDefs);
       } else {
-        fieldsAndColIds = gridConfig.columnDefs.map((column) => ({
+        fieldsAndColIds = currentGridConfig.columnDefs.map((column) => ({
           field: column.field,
           colId: column.colId,
           hide: column.hide,
@@ -2409,19 +2445,19 @@ dmx.Component('ag-grid', {
         return options.wrap_text ? { whiteSpace: 'normal' } : null;
       };
     
-      const getColumnData = (gridInstance, isHeader) => 
-        gridInstance.getAllDisplayedColumns()
+      const getColumnData = (gInstance, isHeader) => 
+        gInstance.getAllDisplayedColumns()
           .filter(column => fieldsToExport.includes(column.getColDef().field))
           .map(column => {
             const colDef = column.getColDef();
             const field = colDef.field;
             const params = {
-              value: isHeader ? null : gridInstance.getValue(column, gridInstance.getDisplayedRowAtIndex(0)),
-              data: isHeader ? null : gridInstance.getDisplayedRowAtIndex(0).data,
-              node: isHeader ? null : gridInstance.getDisplayedRowAtIndex(0),
+              value: isHeader ? null : gInstance.getValue(column, gInstance.getDisplayedRowAtIndex(0)),
+              data: isHeader ? null : gInstance.getDisplayedRowAtIndex(0).data,
+              node: isHeader ? null : gInstance.getDisplayedRowAtIndex(0),
               colDef,
               column,
-              api: gridInstance,
+              api: gInstance,
               context: params.context,
             };
             const cellStyle = applyCellStyle(params);
@@ -2431,39 +2467,55 @@ dmx.Component('ag-grid', {
               cnames[field].custom_name : 
               humanize(field)
             ) : '';
+            let cellValue = !isHeader ? (
+              (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
+              (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
+              gInstance.getValue(column, gInstance.getDisplayedRowAtIndex(0)) ?? ''
+            ) : headerName;
+            
+            // Remove HTML tags if export_remove_html is true
+            if (options.export_remove_html && typeof cellValue === 'string') {
+              cellValue = removeHtmlTags(cellValue);
+            }
+            
             return {
-              text: !isHeader ? (
-                (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
-                (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
-                gridInstance.getValue(column, gridInstance.getDisplayedRowAtIndex(0)) ?? ''
-              ) : headerName,
+              text: cellValue,
               color: cellStyle?.color ?? 'black',
               fillColor: cellStyle?.backgroundColor ? cellStyle.backgroundColor.replace('#', '') : undefined,
             };
-          });
+          });;
     
-      const columns = gridInstance.getColumnState();
+      const columns = currentGridInstance.getColumnState();
       const columnMap = new Map(columns.map(col => [col.colId, col]));
     
       const rows = [];
-      gridInstance.forEachNode(node => {
+      currentGridInstance.forEachNode(node => {
         const row = fieldsToExport.map(field => {
           const col = columnMap.get(field);
-          const colDef = col ? gridInstance.getColumnDefs().find(def => def.colId === col.colId) : {};
+          const colDef = col ? currentGridInstance.getColumnDefs().find(def => def.colId === col.colId) : {};
           const params = {
-            value: gridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-',
+            value: currentGridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-',
             data: node.data,
             node,
             colDef,
-            column: gridInstance.getColumnState().find(col => col.colId === col.colId),
-            api: gridInstance,
+            column: currentGridInstance.getColumnState().find(col => col.colId === col.colId),
+            api: currentGridInstance,
           };
           const cellStyle = applyCellStyle(params);
-          const value = gridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-';
+          let value = currentGridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-';
+          
+          // Get the rendered value
+          let displayValue = (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
+                            (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
+                            value;
+          
+          // Remove HTML tags if export_remove_html is true
+          if (options.export_remove_html && typeof displayValue === 'string') {
+            displayValue = removeHtmlTags(displayValue);
+          }
+          
           return {
-            text: (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
-                  (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
-                  value,
+            text: displayValue,
             color: cellStyle?.color ?? 'black',
             fillColor: cellStyle?.backgroundColor ? cellStyle.backgroundColor.replace('#', '') : undefined,
           };
@@ -2476,7 +2528,7 @@ dmx.Component('ag-grid', {
           table: {
             headerRows: 1,
             widths: fieldsToExport.map(() => `${100 / fieldsToExport.length}%`),
-            body: [getColumnData(gridInstance, true), ...rows],
+            body: [getColumnData(currentGridInstance, true), ...rows],
             heights: (rowIndex) => (rowIndex === 0 ? 40 : 15),
             fillColor: (rowIndex, colIndex) => rows[rowIndex][colIndex].fillColor,
             color: (rowIndex, colIndex) => rows[rowIndex][colIndex].color,
@@ -2486,39 +2538,49 @@ dmx.Component('ag-grid', {
       pdfMake.createPdf(documentDefinition).download(options.export_pdf_filename);
     };
     if (exportToPDF) {
-      const existingPdfExportButton = document.getElementById('exportPdfButton');
-      if (existingPdfExportButton) {
-        return;
-      }
-      const exportPdfButton = document.createElement('button');
-      exportPdfButton.id = 'exportPdfButton'; 
-      const icon = document.createElement('i');
-      icon.classList.add('fas', 'fa-file-pdf');
-      exportPdfButton.appendChild(icon);
+      let exportPdfButton = document.getElementById(`exportPdfButton-${options.id}`);
+      let isNewPdfButton = false;
+      if (!exportPdfButton) {
+        isNewPdfButton = true;
+        exportPdfButton = document.createElement('button');
+        exportPdfButton.id = `exportPdfButton-${options.id}`; 
+        const icon = document.createElement('i');
+        icon.classList.add('fas', 'fa-file-pdf');
+        exportPdfButton.appendChild(icon);
 
-      // Add the button text
-      const buttonText = document.createElement('span');
-      buttonText.innerText = ' Export to PDF';
-      exportPdfButton.appendChild(buttonText);
-      exportPdfButton.style.backgroundColor = '#4CAF50';
-      exportPdfButton.style.border = 'none';
-      exportPdfButton.style.color = 'white';
-      exportPdfButton.style.padding = '5px 10px';
-      exportPdfButton.style.textAlign = 'center';
-      exportPdfButton.style.textDecoration = 'none';
-      exportPdfButton.style.display = 'inline-block';
-      exportPdfButton.style.fontSize = '14px'; 
-      exportPdfButton.style.borderRadius = '5px';
-      exportPdfButton.style.cursor = 'pointer';
-      exportPdfButton.style.marginBottom = '10px';
-
-      exportPdfButton.addEventListener('click', () => {
-        exportGridDataToPDF(this)
-      })
+        // Add the button text
+        const buttonText = document.createElement('span');
+        buttonText.innerText = ' Export to PDF';
+        exportPdfButton.appendChild(buttonText);
+        exportPdfButton.style.backgroundColor = '#4CAF50';
+        exportPdfButton.style.border = 'none';
+        exportPdfButton.style.color = 'white';
+        exportPdfButton.style.padding = '5px 10px';
+        exportPdfButton.style.textAlign = 'center';
+        exportPdfButton.style.textDecoration = 'none';
+        exportPdfButton.style.display = 'inline-block';
+        exportPdfButton.style.fontSize = '14px'; 
+        exportPdfButton.style.borderRadius = '5px';
+        exportPdfButton.style.cursor = 'pointer';
+        exportPdfButton.style.marginBottom = '10px';
+      }
+      
+      // Always update the click handler to ensure it has the latest gridInstance and gridConfig
+      exportPdfButton.onclick = () => {
+        const currentGridInstance = this.get('gridInstance');
+        const currentGridConfig = this.gridConfig;
+        if (currentGridInstance && currentGridConfig) {
+          exportGridDataToPDF(currentGridInstance, currentGridConfig);
+        } else {
+          console.error('Grid instance or configuration not available for export');
+        }
+      };
     
-      // Append the export button to the grid container
-      gridContainer.parentNode.insertBefore(exportPdfButton, gridContainer);
-      exportPdfButton.style.marginBottom = '10px';
+      if (isNewPdfButton) {
+        // Append the export button to the grid container
+        gridContainer.parentNode.insertBefore(exportPdfButton, gridContainer);
+        exportPdfButton.style.marginBottom = '10px';
+      }
     }
     const paginationPanelCss = `
       /* Flexbox layout for pagination panel */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.0.13",
+    "version": "2.0.15",
     "type": "module",
     "description": "App Connect module for AG Grid v34 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
     "license": "MIT",