@cdmx/wappler_ag_grid 0.8.8 → 0.9.0

package/README.md

@@ -12,8 +12,15 @@ The AG Grid module allows you to create a flexible and customizable data grid wi
    - "Alpine" (Default)
    - "Balham"
    - "Material"
+   - "Custom"
 5. **Locale**: Select the locale for the grid. Currently supported locales: English (EN) and Hebrew (HE). (Default: EN)
 
+**Note for Custom Theme:**
+When you select the "Custom" theme option, you have the flexibility to define your own unique styling for the ag-Grid components.
+This option allows you to customize the look and feel of the grid to match the design requirements of you pages and layouts.
+You can override the default styles provided by ag-Grid with your own CSS rules by targeting the specific CSS variables and classes used by the grid.
+The overrides for the "Custom" theme can be applied in the ag-theme-custom.css file located in the public/css folder. This file serves as a centralized place for customizing the grid's appearance.
+
 ## AG Grid Options
 1. **Minimum Width**: The minimum width of the column. (Default: 150)
 2. **Resizable**: Specifies if the column can be resized. (Default: true)

package/ag-theme-custom.css

@@ -0,0 +1,79 @@
+.ag-theme-custom.ag-theme-alpine {
+  --ag-odd-row-background-color: blue; /* Background color for odd rows */
+  --ag-alpine-active-color: red; /* Active color for Alpine theme */
+  --ag-data-color: #333; /* Color of text in grid cells */
+  --ag-header-foreground-color: rgb(12, 10, 10); /* Color of text and icons in the header */
+  --ag-header-background-color: rgb(226, 226, 219); /* Background color for all headers */
+  --ag-tooltip-background-color: #f6f8f1; /* Background color for tooltips */
+  --ag-disabled-foreground-color: gray; /* Color of disabled elements */
+  --ag-subheader-background-color: lightgray; /* Background color for second level headings */
+  --ag-subheader-toolbar-background-color: #ccc; /* Background color for toolbars under subheadings */
+  --ag-control-panel-background-color: #f5f5f5; /* Background for UI control areas */
+  --ag-side-button-selected-background-color: #007acc; /* Background for active side panel tab */
+  --ag-selected-row-background-color: #e6f7ff; /* Background color of selected rows */
+  --ag-odd-row-background-color: #f9f9f9; /* Background color applied to every other row */
+  --ag-modal-overlay-background-color: rgba(0, 0, 0, 0.5); /* Overlay background color */
+  --ag-row-hover-color: #e0e0e0; /* Background color when hovering over rows */
+  --ag-column-hover-color: #f0f0f0; /* Background color when hovering over columns */
+  --ag-range-selection-border-color: #007acc; /* Color around selected cell ranges */
+  --ag-range-selection-background-color: rgba(0, 122, 204, 0.2); /* Background color of selected cell ranges */
+  --ag-range-selection-background-color-2: rgba(0, 122, 204, 0.4); /* Background when 2 selected ranges overlap */
+  --ag-range-selection-background-color-3: rgba(0, 122, 204, 0.6); /* Background when 3 selected ranges overlap */
+  --ag-range-selection-background-color-4: rgba(0, 122, 204, 0.8); /* Background when 4+ selected ranges overlap */
+  --ag-range-selection-highlight-color: #007acc; /* Background color when copying/pasting ranges */
+  --ag-selected-tab-underline-color: #007acc; /* Color of the border under selected tabs */
+  /* --ag-borders: solid 1px grey; /* Enable borders around most UI elements */
+  /* --ag-border-color: #ccc; /* Color for border around major UI components */
+  /* --ag-borders-critical: solid 1px #ff6347; /* Enable borders critical to UX */
+  /* --ag-borders-secondary: solid 1px #eee; /* Draw decorative borders separating UI elements */
+  /* --ag-secondary-border-color: #eee; /* Color for decorative borders */
+  /* --ag-row-border-style: solid; /* Default border style for grid rows */
+  /* --ag-row-border-width: 1px; /* Thickness of the border between grid rows */
+  /* --ag-row-border-color: #ccc; /* Color of the border between grid rows
+  /* --ag-cell-horizontal-border: solid transparent; /* Default border for cells */
+  /* --ag-input-focus-border-color: #007acc; /* Border color around focused inputs */
+  /* --ag-checkbox-background-color: white; /* Background of checkboxes */
+  /* --ag-checkbox-border-radius: 3px; /* Border radius for checkboxes */
+  /* --ag-checkbox-checked-color: #007acc; /* Color of checked checkbox icon */
+  /* --ag-checkbox-unchecked-color: #ccc; /* Color of unchecked checkbox icon */
+  /* --ag-checkbox-indeterminate-color: #007acc; /* Color of indeterminate checkbox icon */
+  /* --ag-input-border-color: #ccc; /* Border color around inputs */
+  /* --ag-input-border-color-invalid: #ff6347; /* Border color around invalid inputs */
+  /* --ag-chip-background-color: #007acc; /* Background color for column drag indicator */
+  /* --ag-borders-input: solid 1px #ccc; /* Borders around inputs */
+  /* --ag-borders-input-invalid: solid 2px #ff6347; /* Borders around invalid inputs */
+  /* --ag-toggle-button-border-width: 1px; /* Thickness of the toggle button border */
+  /* --ag-toggle-button-on-border-color: #007acc; /* Border color of the toggle button in the 'on' state */
+  /* --ag-toggle-button-off-border-color: #ccc; /* Border color of the toggle button in the 'off' state */
+  /* --ag-toggle-button-on-background-color: #007acc; /* Background color of the toggle button in the 'on' state */
+  /* --ag-toggle-button-off-background-color: #ccc; /* Background color of the toggle button in the 'off' state */
+  /* --ag-toggle-button-switch-background-color: white; /* Background color of the toggle button switch */
+  /* --ag-toggle-button-switch-border-color: #ccc; /* Border color of the toggle button switch */
+  /* --ag-toggle-button-width: 40px; /* Width of the toggle button */
+  /* --ag-toggle-button-height: 20px; /* Height of the toggle button */
+  /* --ag-grid-size: 8px; /* Grid size for spacing */
+  /* --ag-icon-size: 16px; /* Size of icons */
+  /* --ag-widget-container-horizontal-padding: 8px; /* Horizontal padding for widget containers */
+  /* --ag-widget-container-vertical-padding: 8px; /* Vertical padding for widget containers */
+  /* --ag-widget-horizontal-spacing: 8px; /* Horizontal spacing between widgets */
+  /* --ag-widget-vertical-spacing: 8px; /* Vertical spacing between widgets */
+  /* --ag-cell-horizontal-padding: 8px; /* Horizontal padding for grid cells */
+  /* --ag-cell-widget-spacing: 4px; /* Horizontal spacing between widgets inside cells */
+  /* --ag-row-height: 32px; /* Height of grid rows */
+  /* --ag-header-height: 40px; /* Height of header rows */
+  /* --ag-list-item-height: 24px; /* Height of items in lists */
+  /* --ag-header-column-separator-display: block; /* Display header column separator */
+  /* --ag-header-column-separator-height: 100%; /* Height of header column separator */
+  /* --ag-header-column-separator-width: 1px; /* Width of header column separator */
+  /* --ag-header-column-separator-color: #ccc; /* Color of header column separator */
+  /* --ag-header-column-resize-handle-display: block; /* Display header column resize handle */
+  /* --ag-header-column-resize-handle-height: 100%; /* Height of header resize handle */
+  /* --ag-header-column-resize-handle-width: 10px; /* Width of header resize handle */
+  /* --ag-header-column-resize-handle-color: grey; /* Color of header resize handle */
+  /* --ag-font-family: 'Helvetica Neue', sans-serif; /* Font family for text */
+  /* --ag-font-size: 14px; /* Default font size */
+  /* --ag-icon-font-family: 'ag-Grid'; /* Icon font used by the grid */
+  /* --ag-card-radius: 4px; /* Border radius for cards */
+  /* --ag-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow for cards */
+  /* --ag-popup-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Shadow for popups */
+}

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"
             },
             { 
@@ -76,6 +80,7 @@
               {title: 'Alpine', value: 'ag-theme-alpine'},
               {title: 'Balham', value: 'ag-theme-balham'},
               {title: 'Material', value: 'ag-theme-material'},
+              {title: 'Custom', value: 'ag-theme-alpine ag-theme-custom'},
               {title: 'Base', value: 'ag-grid'}
               ],
               "help": "Select a theme for the grid"
@@ -1843,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": [],
@@ -1852,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"
@@ -1864,6 +1882,10 @@
           "src": "../../../node_modules/ag-grid-community/styles/ag-theme-material.css",
           "dst": "css/ag-theme-material.css"
         },
+        {
+          "src": "ag-theme-custom.css",
+          "dst": "css/ag-theme-custom.css"
+        },
         {
           "src": "switch-toggle-slider.css",
           "dst": "css/switch-toggle-slider.css"
@@ -1883,6 +1905,11 @@
           "type": "js",
           "defer": true
         },
+        {
+          "src": "js/papaparse.js",
+          "type": "js",
+          "defer": true
+        },
         {
           "src": "js/dmx-ag-grid.js",
           "type": "js",
@@ -1905,6 +1932,10 @@
           "src": "css/ag-theme-material.css",
           "type": "css"
         },
+        {
+          "src": "css/ag-theme-custom.css",
+          "type": "css"
+        },
         {
           "src": "css/switch-toggle-slider.css",
           "type": "css"

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.8",
+    "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",