@cdmx/wappler_ag_grid 1.8.1 → 1.8.3

package/README.md

@@ -36,52 +36,53 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 5. **Filter**: Specifies if the column has a filter. (Default: true)
 6. **Floating Filter**: Specifies if the column has a floating filter. (Default: true)
 7. **Exclude Hidden Fields**: Specifies if Hidden fields are to be excluded in CSV export. (Default: false)
-8. **CSV Export**: Specifies if Export to CSV is enabled. (Default: true)
-9. **Exclude Fields CSV**: Specifies fields to be excluded in CSV export. (Default: null)
-10. **Enable RTL**: Enabled Right to Left, used for Hebrew and Arabic. (Default: false)
-11. **Column Hover Highlight**: Specifies column hover highlighting. (Default: true)
-12. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
-13. **Pagination**: Enables pagination. (Default: true)
-14. **Auto Pagination**: Enables automatic pagination. (Default: false)
-15. **Page Limit Selectors**: Allowed selectors for for page size. Set to false to hide the page size selector. (Default: [20,50,100] ).
-16. **Page Limit**: Number of rows to show per page. (Default: 20)
-17. **Row Selection**: Row Selection (single or multiple).
+8. **CSV Export**: Specifies if Export to CSV is enabled. (Default: true).
+9. **PDF Export**: Specifies if Export to PDF is enabled. (Default: false).
+10. **Exclude Fields CSV**: Specifies fields to be excluded in CSV export. (Default: null)
+11. **Enable RTL**: Enabled Right to Left, used for Hebrew and Arabic. (Default: false)
+12. **Column Hover Highlight**: Specifies column hover highlighting. (Default: true)
+13. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
+14. **Pagination**: Enables pagination. (Default: true)
+15. **Auto Pagination**: Enables automatic pagination. (Default: false)
+16. **Page Limit Selectors**: Allowed selectors for for page size. Set to false to hide the page size selector. (Default: [20,50,100] ).
+17. **Page Limit**: Number of rows to show per page. (Default: 20)
+18. **Row Selection**: Row Selection (single or multiple).
    - "Single"
    - "Multiple" (Default)
-18. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
-19. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
-20. **Filter Field ID**: Specifies the field ID of the search field when using grid quick filter. Applicable when using Quick Filter feature of AG Grid, called from Dynamic Events on change event on the field. (Default: search_field)
-21. **Loading Overlay**: This enables loading overlay. (Default: false)
-22. **Loading Overlay Duration**: This sets loading overlay duration in ms. (Default: 500)
-23. **Sticky Header and Horizontal Scrollbar**:  Optionally specify the header offset and topbar class.
+19. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
+20. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
+21. **Filter Field ID**: Specifies the field ID of the search field when using grid quick filter. Applicable when using Quick Filter feature of AG Grid, called from Dynamic Events on change event on the field. (Default: search_field)
+22. **Loading Overlay**: This enables loading overlay. (Default: false)
+23. **Loading Overlay Duration**: This sets loading overlay duration in ms. (Default: 500)
+24. **Sticky Header and Horizontal Scrollbar**:  Optionally specify the header offset and topbar class.
    - Fixed Header: Enables sticky header. (Default: false)
    - Header Offset: Specifies offset from the top of the viewport area (Optional). (Default: 100)
    - Topbar Class: Specify class, e.g., "topbar", to measure the offset from (Optional). (Default: "topbar")
    - Topbar Offset: Specify topbar offset (Default: 80)
    - Fixed Horizontal Scroll: Enables Hovering horizontal scrollbar which stays at the bottom all the time. (Default: false)
    - Fixed Horizontal Scroll Width: Fixed horizontal scroll width percentage. (Default: 80%)
-24. **Row Height**: Height of each row in pixels. (Default: Auto)
-25. **Header Height**: Height of the header row in pixels. (Default: Auto)
-26. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
-27. **Auto Header Height**: The header height is automatically set based on the content of the header. (Default: true)
-28. **Auto Height**: The height is automatically set based on the content of the cells. (Default: false)
-29. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
-30. **Center Align (V)**: Specifies if the cell data should be vertically centered. (Default: false)
-31. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
-32. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
-33. **Suppress Movable Columns**: Disables moving columns. (Default: false)
-34. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
-35. **Animate Rows**: Enables row animation on data changes. (Default: false)
-36. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
-37. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
-38. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
-39. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
-40. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
-41. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
-42. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-43. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
-44. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-45. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+25. **Row Height**: Height of each row in pixels. (Default: Auto)
+26. **Header Height**: Height of the header row in pixels. (Default: Auto)
+27. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
+28. **Auto Header Height**: The header height is automatically set based on the content of the header. (Default: true)
+29. **Auto Height**: The height is automatically set based on the content of the cells. (Default: false)
+30. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
+31. **Center Align (V)**: Specifies if the cell data should be vertically centered. (Default: false)
+32. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
+33. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
+34. **Suppress Movable Columns**: Disables moving columns. (Default: false)
+35. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
+36. **Animate Rows**: Enables row animation on data changes. (Default: false)
+37. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
+38. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
+39. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
+40. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
+41. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
+42. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
+43. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
+44. **Row Double Click Events**: Enables row double click events. This can be used in Dynamic events => Grid Events => Row Double Clicked. (Default: false)
+45. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+46. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
 
 # Data Type Overrides
 
@@ -101,7 +102,7 @@ The Style Formatting feature allows you to configure custom colors and fonts for
 This grid allows you to define custom color and font settings based on specific conditions. The grid has the following columns:
 
 1. **Field**: The field name for which you want to apply the custom color and font settings. (eg. first_name or status)
-2. **Condition**: The condition to check for applying the custom color and font settings. (eg. status=false or name=K den).
+2. **Condition**: The condition to check for applying the custom color and font settings. (eg. status==false or name==K den).
    You can also supply a function here to return true or false based on the input.
    eg: input jsTest() in the condition field and define it as below:
    ```javascript
@@ -117,7 +118,7 @@ This grid allows you to define custom color and font settings based on specific
 
 ## Configure Row Colors
 
-1. **Condition**: The condition to check for applying the custom color to rows. (eg. status=false or name=K den).
+1. **Condition**: The condition to check for applying the custom color to rows. (eg. status==false or name==K den).
  You can also supply a function here to return true or false based on the input. 
  eg: input jsTest() in the condition field and define it as below:
  ```javascript
@@ -434,7 +435,7 @@ Specify the condition to Show the Button[i] Action button, eg: code==TEST, or st
 
 **Export**
 - To be used if you wish to use a separate Export button instead of using the inbuilt top left-cornered Export button.
-- Trigger this action to call Export Data to CSV download action.
+- Trigger this action to call Export Data to CSV/PDF download action based on selected file Type.
 
 **Save Column State**
 - This action allows you to save the current state of the grid's columns, including their visibility and order, to the browser's local storage.

package/app_connect/components.hjson

@@ -224,6 +224,14 @@
               "defaultValue": true,
               "help": "Specifies if Export to CSV to be enabled"
             },
+            {
+              "name": "exportToPDF",
+              "attribute": "dmx-bind:export_to_pdf",
+              "title": "PDF Export",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Specifies if Export to PDF to be enabled"
+            },
             {
               "name": "exportExcludeHidden",
               "attribute": "dmx-bind:export_exclude_hidden_fields",
@@ -1409,6 +1417,7 @@
                 {
                   "name": "hideFields",
                   "attribute": "hide_fields",
+                  "dataBindings": true,
                   "title": "Hide Fields",
                   "type": "text",
                   "initDisplay": "none"
@@ -2492,8 +2501,24 @@
           name: 'exportGrid',
           icon: 'fa fa-lg fa-download',
           state: 'opened',
-          help: 'Export AG Grid Data to CSV',
-          properties: []
+          help: 'Export AG Grid Data',
+          properties: [
+            {
+              group: 'Properties',
+              variables: [
+                {
+                  name: '1', optionName: '1', title: 'CSV', type: 'boolean',
+                  dataBindings: true, defaultValue: true, required: false,
+                  help: 'Export Grid data as CSV file.'
+                },
+                {
+                  name: '2', optionName: '2', title: 'PDF', type: 'boolean',
+                  dataBindings: true, defaultValue: false, required: false,
+                  help: 'Export Grid data as PDF file.'
+                }
+              ]
+            }
+          ]
         },
         {
           addTitle: 'SaveColumnState',
@@ -2607,6 +2632,14 @@
           "src": "../../../node_modules/exceljs/dist/exceljs.min.js",
           "dst": "js/exceljs.min.js"
         },
+        {
+          "src": "../../../node_modules/pdfmake/build/pdfmake.min.js",
+          "dst": "js/pdfmake.min.js"
+        },
+        {
+          "src": "../../../node_modules/pdfmake/build/vfs_fonts.js",
+          "dst": "js/vfs_fonts.js"
+        },
         {
           "src": "../../../node_modules/ag-grid-community/styles/ag-theme-alpine.css",
           "dst": "css/ag-theme-alpine.css"
@@ -2642,6 +2675,14 @@
         {
           "src": "pt.js",
           "dst": "js/locale/pt.js"
+        },
+        {
+          "src": "pdfmake.min.js",
+          "dst": "js/pdfmake.min.js"
+        },
+        {
+          "src": "vfs_fonts.js",
+          "dst": "js/vfs_fonts.js"
         }
       ],
       "linkFiles": [
@@ -2920,7 +2961,8 @@
       "groupIcon": "fa fa-lg fa-cubes",
       "defaultValue": false,
       "show": [
-        "exportCsvFilename"
+        "exportCsvFilename",
+        "exportPdfFilename"
       ],
       "noChangeOnHide": true,
       "groupEnabler": true,
@@ -2936,6 +2978,18 @@
           "help": "Export CSV filename.",
           "defaultValue": "export.csv",
           "initDisplay": "none"
+        },
+        {
+          "name": "exportPdfFilename",
+          "attributeStartsWith": "dmx-bind",
+          "attribute": "export_pdf_filename",
+          "isValue": true,
+          "dataBindings": true,
+          "title": "PDF Filename",
+          "type": "text",
+          "help": "Export PDF filename.",
+          "defaultValue": "export.pdf",
+          "initDisplay": "none"
         }
       ],
       "allowedOn": {

package/dmx-ag-grid.js

@@ -86,6 +86,8 @@ dmx.Component('ag-grid', {
     export_exclude_fields: { type: String, default: null },
     export_to_csv: { type: Boolean, default: true },
     export_csv_filename: { type: String, default: 'export.csv' },
+    export_to_pdf: { type: Boolean, default: false },
+    export_pdf_filename: { type: String, default: 'export.pdf' },
     fixed_header: { type: Boolean, default: false },
     topbar_class: { type: String, default: 'topbar' },
     fixed_header_offset: { type: Number, default: 100 },
@@ -215,12 +217,14 @@ dmx.Component('ag-grid', {
       this.set('gridInstance', gridInstance);
       }, this);
     },
-    exportGrid: function () {
-      dmx.nextTick(function() {
-        if (typeof exportGridData === 'function') {
-          exportGridData();
+    exportGrid: function (Csv, Pdf) {
+      if (!Csv && !Pdf) return;
+      dmx.nextTick(() => {
+        const exportFunction = Csv ? exportGridData : (Pdf ? exportGridDataToPDF : null);
+        if (typeof exportFunction === 'function') {
+          exportFunction();
         } else {
-          console.error('Grid not loaded to perform export');
+          console.error('Grid not loaded to perform the requested export');
         }
       }, this);
     },
@@ -406,6 +410,7 @@ dmx.Component('ag-grid', {
     let columnDefs = [];
     let groupedColumnDefs = [];
     let exportToCSV = this.props.export_to_csv;
+    let exportToPDF = this.props.export_to_pdf;
     let cellRenderer;
     const gridThemeClass = options.dark_mode ? `${options.grid_theme}-dark` : options.grid_theme;
     this.$node.innerHTML = `<div id=${options.id}-grid class="${gridThemeClass}"></div>`;
@@ -1641,10 +1646,10 @@ dmx.Component('ag-grid', {
       return;
     }
 
-    if (gridInstance) {
-        gridInstance.destroy();
-        gridInstance = null;
-    }
+    // if (gridInstance) {
+    //     gridInstance.destroy();
+    //     gridInstance = null;
+    // }
     const getPageId = () => {
       const currentPageUrl = window.location.origin + window.location.pathname;
       const optionsId = options.id+'-grid';
@@ -1939,6 +1944,198 @@ dmx.Component('ag-grid', {
       gridContainer.parentNode.insertBefore(exportButton, gridContainer);
       exportButton.style.marginBottom = '10px';
     }
+    // Export AG Grid data to PDF
+    exportGridDataToPDF = async () => {
+      if (!gridInstance || gridInstance.isDestroyed()) {
+        console.error('Grid API is destroyed or not initialized.');
+        return;
+      }
+      const excludedColumnIds = ['checkboxColumn', 'actionsColumn'];
+      const exportExcludeFieldsArray = options.export_exclude_fields ? options.export_exclude_fields.split(',') : [];
+      let fieldsAndColIds;
+      if (options.group_config) {
+        // Helper function to traverse grouped column structure
+        const traverseColumns = (columns) => {
+          const fieldsAndColIds = [];
+          columns.forEach((column) => {
+            if (column.children) {
+              fieldsAndColIds.push(...traverseColumns(column.children));
+            } else {
+              fieldsAndColIds.push({
+                field: column.field,
+                colId: column.colId,
+                hide: column.hide,
+              });
+            }
+          });
+          return fieldsAndColIds;
+        };
+        // Traverse columnDefs to gather fields and colIds
+        fieldsAndColIds = traverseColumns(gridConfig.columnDefs);
+      } else {
+        fieldsAndColIds = gridConfig.columnDefs.map((column) => ({
+          field: column.field,
+          colId: column.colId,
+          hide: column.hide,
+        }));
+      }
+      const fieldsToExport = fieldsAndColIds.filter((column) => {
+        return !excludedColumnIds.includes(column.colId) &&
+               (!options.export_exclude_hidden_fields || !column.hide) &&
+               !exportExcludeFieldsArray.includes(column.field);
+      }).map((column) => column.field);
+    
+      const applyCellStyle = (params) => {
+        if (params.data == null) return '-'
+        const field = params.colDef.field.toString();
+        const styles = this.props.cstyles.filter((cs) => cs.field === field);
+        const whiteSpace = options.wrap_text ? 'normal' : 'nowrap';
+    
+        for (const style of styles) {
+          const condition = style.condition;
+          const customColor = style.customColor;
+          const font = style.font || 'normal';
+          const area = style.area || 'text';
+          let conditionResult = false;
+          if (condition.endsWith('()') && typeof window[condition.replace(/\(\)$/, '')] === 'function') {
+            const result = window[condition.replace(/\(\)$/, '')](params.data);
+            if (typeof result !== 'boolean') {
+              console.error('Custom condition function must return a boolean value.');
+              return;
+            }
+            conditionResult = result;
+          } else {
+            const [left, operator, right] = extractConditionParts(condition);
+            if (params.data.hasOwnProperty(left) &&
+              (params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false)
+            ) {
+              conditionResult = true;
+            }
+          }
+          if (conditionResult) {
+            const cellStyle = {
+              color: customColor,
+              fontStyle: font,
+              fontWeight: (font === 'bold' ? 'bold' : null),
+              whiteSpace: whiteSpace
+            };
+            return area === 'cell' ? { ...cellStyle, backgroundColor: customColor } : cellStyle;
+          }
+        }
+        return options.wrap_text ? { whiteSpace: 'normal' } : null;
+      };
+    
+      const getColumnData = (gridInstance, isHeader) => 
+        gridInstance.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),
+              colDef,
+              column,
+              api: gridInstance,
+            };
+            const cellStyle = applyCellStyle(params);
+            // Determine the header name using cnames and humanize function
+            const headerName = isHeader ? (
+              cnames.hasOwnProperty(field) ? 
+              cnames[field].custom_name : 
+              humanize(field)
+            ) : '';
+            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,
+              color: cellStyle?.color ?? 'black',
+              fillColor: cellStyle?.backgroundColor ? cellStyle.backgroundColor.replace('#', '') : undefined,
+            };
+          });
+    
+      const columns = gridInstance.getColumnState();
+      const columnMap = new Map(columns.map(col => [col.colId, col]));
+    
+      const rows = [];
+      gridInstance.forEachNode(node => {
+        const row = fieldsToExport.map(field => {
+          const col = columnMap.get(field);
+          const colDef = col ? gridInstance.getColumnDefs().find(def => def.colId === col.colId) : {};
+          const params = {
+            value: gridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-',
+            data: node.data,
+            node,
+            colDef,
+            column: gridInstance.getColumnState().find(col => col.colId === col.colId),
+            api: gridInstance,
+          };
+          const cellStyle = applyCellStyle(params);
+          const value = gridInstance.getCellValue({ rowNode: node, colKey: col.colId }) ?? '-';
+          return {
+            text: (colDef.cellRenderer && typeof colDef.cellRenderer === 'function') ? colDef.cellRenderer(params) : 
+                  (colDef.valueFormatter && typeof colDef.valueFormatter === 'function') ? colDef.valueFormatter(params) : 
+                  value,
+            color: cellStyle?.color ?? 'black',
+            fillColor: cellStyle?.backgroundColor ? cellStyle.backgroundColor.replace('#', '') : undefined,
+          };
+        });
+        rows.push(row);
+      });
+      const documentDefinition = {
+        pageOrientation: 'landscape',
+        content: [{
+          table: {
+            headerRows: 1,
+            widths: fieldsToExport.map(() => `${100 / fieldsToExport.length}%`),
+            body: [getColumnData(gridInstance, true), ...rows],
+            heights: (rowIndex) => (rowIndex === 0 ? 40 : 15),
+            fillColor: (rowIndex, colIndex) => rows[rowIndex][colIndex].fillColor,
+            color: (rowIndex, colIndex) => rows[rowIndex][colIndex].color,
+          },
+        }],
+      };
+      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);
+
+      // 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)
+      })
+    
+      // Append the export button to the grid container
+      gridContainer.parentNode.insertBefore(exportPdfButton, gridContainer);
+      exportPdfButton.style.marginBottom = '10px';
+    }
+    // Return grid instance
     return gridInstance;
     
   },

package/package.json

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