@cdmx/wappler_ag_grid 0.8.9 → 0.9.1

package/README.md

@@ -341,6 +341,16 @@ Specify the tooltip text for Button 10.
 - This action enables you to reset the grid's column state to default state.
 - It is useful when you want to revert the column configuration to a default configuration.
 
+**Import File Data**
+- The "Import File Data" action allows to import data from CSV and XLSX files into the AG Grid. This action simplifies the process of populating the grid with external data sources.
+- Key Features:
+  - File Type Support: Currently, this feature supports two common file types - CSV (Comma-Separated Values) and XLSX (Microsoft Excel).
+  - File Field ID: Users must specify the "File Field ID," 
+
+**Get Selected Rows**
+- The "Get Selected Rows" feature is designed to retrieve selected rows.
+- This variable named "selectedRows", holds the selected data for access from other modules.
+
 ## License
 
 The AG Grid module is licensed under the MIT License. Please refer to the license file for more details.

package/app_connect/components.hjson

@@ -32,6 +32,16 @@
           "name": "fields",
           "title": "Fields",
           "type": "object"
+        },
+        {
+          "name": "fileData",
+          "title": "fileData",
+          "type": "array"
+        },
+        {
+          "name": "selectedRows",
+          "title": "selectedRows",
+          "type": "array"
         }
       ],
       "outputType": "object",
@@ -55,7 +65,6 @@
               "type": "text",
               "dataBindings": true,
               "defaultValue": [],
-              "required": true,
               "help": "Enter Data Source"
             },
             { 
@@ -1844,6 +1853,35 @@
           state: 'opened',
           help: 'Save Column State to Browser Local Storage',
           properties: []
+        },
+        {
+          addTitle: 'importFileData',
+          title: 'Import File Data',
+          name: 'importFileData',
+          icon: 'fa fa-lg fa-file-import',
+          state: 'opened',
+          help: 'Import File Data to Grid',
+          properties: [
+            {
+              group: 'Properties',
+              variables: [
+                {
+                  name: '1', optionName: '1', title: 'File Field ID', type: 'text',
+                  dataBindings: true, defaultValue: 'csvfile', required: true,
+                  help: 'Field ID of the file to import'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          addTitle: 'fetchSelectedRows',
+          title: 'Get Selected Rows',
+          name: 'getSelectedRows',
+          icon: 'fas fa-lg fa-table',
+          state: 'opened',
+          help: 'Get Selected Rows',
+          properties: []
         }
       ],
       "children": [],
@@ -1853,6 +1891,14 @@
           "src": "../../../node_modules/ag-grid-community/dist/ag-grid-community.min.js",
           "dst": "js/ag-grid-community.min.js"
         },
+        {
+          "src": "../../../node_modules/papaparse/papaparse.js",
+          "dst": "js/papaparse.js"
+        },
+        {
+          "src": "../../../node_modules/exceljs/dist/exceljs.min.js",
+          "dst": "js/exceljs.min.js"
+        },
         {
           "src": "../../../node_modules/ag-grid-community/styles/ag-theme-alpine.css",
           "dst": "css/ag-theme-alpine.css"
@@ -1888,6 +1934,16 @@
           "type": "js",
           "defer": true
         },
+        {
+          "src": "js/papaparse.js",
+          "type": "js",
+          "defer": true
+        },
+        {
+          "src": "js/exceljs.min.js",
+          "type": "js",
+          "defer": true
+        },
         {
           "src": "js/dmx-ag-grid.js",
           "type": "js",

package/dmx-ag-grid.js

@@ -3,7 +3,9 @@ dmx.Component('ag-grid', {
     id: null,
     data: {},
     count: Number,
-    fields: {}
+    fields: {},
+    fileData: [],
+    selectedRows: []
   },
 
   attributes: {
@@ -186,6 +188,12 @@ dmx.Component('ag-grid', {
         let gridInstance = this.refreshGrid();
         this.set('gridInstance', gridInstance);
       }, this);
+    },
+    importFileData: async function (fieldId) {
+      await this.parseFileData(fieldId);
+    },
+    getSelectedRows: function () {
+      exportSelectedRows();
     }
   },
 
@@ -219,7 +227,85 @@ dmx.Component('ag-grid', {
       console.error('AG Grid instance or transaction not found.');
     }
   },
-
+  parseFileData: async function (fieldId) {
+    const parseCSV = (csvData) => {
+      return new Promise((resolve, reject) => {
+        Papa.parse(csvData, {
+          header: true,
+          dynamicTyping: true,
+          complete: function (results) {
+            resolve(results.data);
+          },
+          error: function (error) {
+            reject(error.message);
+          }
+        });
+      });
+    };
+  
+    const parseExcel = (excelData) => {
+      return new Promise((resolve, reject) => {
+        const workbook = new ExcelJS.Workbook();
+        workbook.xlsx.load(excelData)
+          .then(() => {
+            const worksheet = workbook.getWorksheet(1);
+            const data = [];
+            const headers = [];
+  
+            worksheet.eachRow((row, rowNumber) => {
+              if (rowNumber === 1) {
+                row.eachCell((cell) => {
+                  headers.push(cell.value);
+                });
+              } else {
+                const rowData = {};
+                row.eachCell({ includeEmpty: true }, (cell, colNumber) => {
+                  rowData[headers[colNumber - 1]] = cell.value;
+                });
+                data.push(rowData);
+              }
+            });
+  
+            resolve(data);
+          })
+          .catch((error) => {
+            reject(error.message);
+          });
+      });
+    };
+  
+    const fileInput = document.getElementById(fieldId);
+    const file = fileInput.files[0];
+  
+    if (!file) {
+      console.error('Please select a file.');
+      return;
+    }
+  
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      const fileData = e.target.result;
+  
+      try {
+        let parsedData;
+        // Detect the file type based on the file extension or other criteria
+        if (file.name.endsWith('.csv')) {
+          parsedData = await parseCSV(fileData);
+        } else if (file.name.endsWith('.xlsx') || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+          parsedData = await parseExcel(fileData);
+        } else {
+          console.error('Unsupported file type. Please select a CSV or Excel file.');
+          return;
+        }
+  
+        this.set('fileData', parsedData);
+      } catch (error) {
+        console.error('Error parsing file:', error);
+      }
+    };
+  
+    reader.readAsBinaryString(file);
+  },
   refreshGrid: function () {
     const options = this.props
     const rowData = this.props.data;
@@ -1159,8 +1245,10 @@ dmx.Component('ag-grid', {
         }
       });
     }
-    const gridId = `${options.id}-grid`;
-    const agGridElement = document.getElementById(gridId);
+    exportSelectedRows = () => {
+      const selectedRows = gridConfig.api.getSelectedRows();
+      this.set('selectedRows', selectedRows);
+    }
     function updateHoveringBarStyles() {
       const existingStyle = document.getElementById('hovering-bar-style');
       if (options.fixed_horizontal_scroll) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "0.8.9",
+    "version": "0.9.1",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",
@@ -14,7 +14,9 @@
         "ag-grid"
     ],
     "dependencies": {
-        "ag-grid-community": "30.1.x"
+        "ag-grid-community": "30.1.x",
+        "exceljs": "^4.3.0",
+        "papaparse": "^5.4.1"
     },
     "scripts": {
         "build": "rollup --config",