@cdmx/wappler_ag_grid 0.8.9 → 0.9.0

package/app_connect/components.hjson

@@ -32,6 +32,11 @@
           "name": "fields",
           "title": "Fields",
           "type": "object"
+        },
+        {
+          "name": "fileData",
+          "title": "fileData",
+          "type": "array"
         }
       ],
       "outputType": "object",
@@ -55,7 +60,6 @@
               "type": "text",
               "dataBindings": true,
               "defaultValue": [],
-              "required": true,
               "help": "Enter Data Source"
             },
             { 
@@ -1844,6 +1848,15 @@
           state: 'opened',
           help: 'Save Column State to Browser Local Storage',
           properties: []
+        },
+        {
+          addTitle: 'importFileData',
+          title: 'Import File Data',
+          name: 'importFileData',
+          icon: 'fa fa-lg fa-undo',
+          state: 'opened',
+          help: 'Import File Data to Grid',
+          properties: []
         }
       ],
       "children": [],
@@ -1853,6 +1866,10 @@
           "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/ag-grid-community/styles/ag-theme-alpine.css",
           "dst": "css/ag-theme-alpine.css"
@@ -1888,6 +1905,11 @@
           "type": "js",
           "defer": true
         },
+        {
+          "src": "js/papaparse.js",
+          "type": "js",
+          "defer": true
+        },
         {
           "src": "js/dmx-ag-grid.js",
           "type": "js",

package/dmx-ag-grid.js

@@ -3,7 +3,8 @@ dmx.Component('ag-grid', {
     id: null,
     data: {},
     count: Number,
-    fields: {}
+    fields: {},
+    fileData: []
   },
 
   attributes: {
@@ -186,6 +187,13 @@ dmx.Component('ag-grid', {
         let gridInstance = this.refreshGrid();
         this.set('gridInstance', gridInstance);
       }, this);
+    },
+    importFileData: function () {
+      this.parseFileData();
+      dmx.nextTick(function() {
+        let gridInstance = this.refreshGrid();
+        this.set('gridInstance', gridInstance);
+      }, this);
     }
   },
 
@@ -219,7 +227,40 @@ dmx.Component('ag-grid', {
       console.error('AG Grid instance or transaction not found.');
     }
   },
+  parseFileData: async function (options) {
+    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 fileInput = document.getElementById('csv-file');
+      const file = fileInput.files[0];
+      if (!file) {
+        console.error('Please select a CSV file.');
+        return;
+      }
 
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const csvData = e.target.result;
+        try {
+          const parsedData = await parseCSV(csvData);
+          this.set('fileData', parsedData);
+        } catch (error) {
+          console.error('Error parsing CSV:', error);
+        }
+      };
+      reader.readAsText(file);
+  },
   refreshGrid: function () {
     const options = this.props
     const rowData = this.props.data;

package/package.json

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