@cdmx/wappler_ag_grid 2.0.20 → 2.1.0

package/README.md

@@ -1,65 +1,30 @@
 #### Developed and Maintained by: Roney Dsilva
 
-**Major Update:** This release upgrades from AG Grid v32.3.7 to v34.1.0, bringing significant performance improvements and exciting new features.
+**Major Update:** This release upgrades AG Grid to v35.1.0, bringing continued performance improvements and new features.
 
-## 🚀 What's New in v2.0.19
+## 🚀 What's New in v2.0.23
 
-1. **🔥 AG Grid v34.1.0** - Latest version with all community features
-2. **⚡ Performance Boost** - Up to 40% bundle size reduction potential
+1. **🔥 AG Grid v35.1.0** - Latest version with all community features
+2. **⚡ Smooth Upgrade** - Non-breaking upgrade from v34, all existing configurations continue to work
 3. **🎨 HTML Tooltips** - Rich HTML tooltip support with JavaScript functions
 4. **🔧 Enhanced Tooltip System** - Custom tooltip components with automatic HTML detection
-5. **🚫 Suppress Model Update** - New option to prevent automatic reprocessing after update transactions
+5. **🚫 Suppress Model Update** - Option to prevent automatic reprocessing after update transactions
 
-- **Breaking Changes:** Some configurations may require updates due to AG Grid v33/v34 changes
-
-## 🚀 What's New in AG Grid v34.1.0
-
-### New Features Available in This Release:
-
-1. **✅ Cell Editor Validation** - Built-in validation for all cell editors:
-   - Automatic constraint checking based on column configuration
-   - Override defaults with custom validation rules
-   - Handle invalid values by reverting or blocking changes
-
-2. **🎯 Bulk Cell Editing** - Edit multiple cells in a single action:
-   - Select cells, enter new value, commit with Tab key
-   - Ideal for updating status of multiple items or overriding null values
-
-3. **⚡ Performance Improvements** - Up to 40% bundle size reduction through:
-   - Modular architecture improvements
-   - Better tree-shaking capabilities
-   - Optimized loading times
-
-4. **🎨 Enhanced Theming** - New Theming API for:
-   - Dynamic theme manipulation at runtime
-   - Better integration with Theme Builder
-   - Easy customization via theme parameters
-
-## 🔄 Migration from v1.x to v2.0
+## 🔄 Migration from v34 to v35
 
 ### Compatibility Notes:
-- **Good News:** This upgrade is largely **non-breaking** for existing implementations
+- **Good News:** This upgrade is **non-breaking** for existing implementations
 - Your existing grids should continue to work without changes
-- AG Grid v34 is non-breaking from v33, so most configurations remain the same
+- No deprecated API removals in v35
+
+### What Changed Internally:
+- New automatic overlays for filtering and exporting are now suppressed by default to preserve existing overlay behavior
+- Date/number filter range validation now enforces start < end
 
 ### Recommended Steps:
-1. **Update Package:** Simply update to v2.0.2 - no code changes required for basic functionality
+1. **Update Package:** Simply update to the latest version - no code changes required
 2. **Test Your Grids:** Verify existing grids work as expected
-3. **Explore New Features:** Gradually enable new v34 features as needed:
-   - Enable Cell Editor Validation for better data quality
-   - Try Batch/Bulk editing for improved user experience
-   - Use the new Filters Tool Panel for better UX
-   - Implement Tree Data Drag & Drop for hierarchical data
-
-### Performance Benefits:
-- **Bundle Size:** Potential 20-40% reduction in bundle size
-- **Loading Speed:** Faster grid initialization
-- **Memory Usage:** Improved memory efficiency
-
-### Breaking Changes (Minimal):
-- Some very old deprecated APIs (from v31 and earlier) have been removed
-- If you customized AG Grid CSS extensively, test your styling
-- The new Theming API is now default (but legacy CSS themes still work)
+3. **Test Exports:** Verify CSV/PDF exports work correctly
 
 # AG Grid Module Documentation
 
@@ -636,7 +601,94 @@ You can also specify left-only conditions, where only the field name is provided
 - The "Quick Filter" feature is designed to filter the results based on the value in the Filter Field defined in above settings.
 - Quick Filter is used to filter rows by comparing against the data in all columns. This can be used in addition to column-specific filtering.
 
-## 💡 Implementation Examples for v34 Features
+**Get Applied Filters**
+- This action retrieves the currently applied filters from the grid and stores them in the `filterState` property.
+- Use this to capture the current filter configuration for display, logging, or saving to a database.
+- Returns an object with field names as keys and filter configurations as values.
+
+**Get Filtered Data**
+- This action retrieves all currently visible rows after filters have been applied.
+- Unlike the grid's raw data, this returns only the rows that match the active filters.
+- Useful for exporting filtered results or performing calculations on filtered data.
+
+**Apply Filters**
+- This action applies filters programmatically to the grid without user interaction.
+- Pass a filter model object with the structure: `{ "fieldName": { type: "FilterType", filter: "value" } }`
+- Automatically updates the `filterState` property with the applied filters.
+- Example: `agGrid.applyFilters({ "status": { type: "Contains", filter: "Active" } })`
+
+**Clear Filters**
+- This action removes all currently applied filters from the grid.
+- Useful for resetting the grid view or preparing for new filter configurations.
+- Automatically clears the `filterState` property.
+
+## 💡 Implementation Examples
+
+### Filter Management Examples
+
+**Getting Applied Filters**
+```javascript
+// Retrieve current filters and store in filterState
+agGrid.getAppliedFilters();
+
+// Access the filters programmatically
+const filters = agGrid.filterState;
+console.log(filters);
+// Output: { "name": { type: "Contains", filter: "John" }, "age": { type: "GreaterThan", filter: 30 } }
+```
+
+**Getting Filtered Data**
+```javascript
+// Get all rows that match the current filters
+const filteredData = agGrid.getFilteredData();
+
+// Use for calculations, exports, or other operations
+const totalRows = filteredData.length;
+const avgAge = filteredData.reduce((sum, row) => sum + row.age, 0) / filteredData.length;
+```
+
+**Applying Filters Programmatically**
+```javascript
+// Apply single filter
+agGrid.applyFilters({
+  "status": { type: "Contains", filter: "Active" }
+});
+
+// Apply multiple filters
+agGrid.applyFilters({
+  "department": { type: "Contains", filter: "Sales" },
+  "salary": { type: "GreaterThan", filter: 50000 },
+  "joinDate": { type: "GreaterThan", filter: "2023-01-01" }
+});
+```
+
+**Clearing Filters**
+```javascript
+// Remove all filters from the grid
+agGrid.clearFilters();
+
+// The filterState will be reset to an empty object
+console.log(agGrid.filterState); // Output: {}
+```
+
+**Filter Model Structure**
+```javascript
+// Common filter types and their structures:
+
+// Text filters
+{ "name": { type: "Contains", filter: "John" } }
+{ "name": { type: "NotContains", filter: "Smith" } }
+{ "name": { type: "Equals", filter: "John Doe" } }
+
+// Number filters
+{ "age": { type: "GreaterThan", filter: 30 } }
+{ "age": { type: "LessThan", filter: 65 } }
+{ "age": { type: "Equals", filter: 35 } }
+
+// Date filters (use date strings or timestamps)
+{ "joinDate": { type: "GreaterThan", filter: "2023-01-01" } }
+{ "joinDate": { type: "LessThan", filter: "2024-12-31" } }
+```
 
 ### Cell Editor Validation Example
 ```javascript
@@ -692,14 +744,14 @@ tree_data_drag_drop: true
 // ]
 ```
 
-## 🔧 Best Practices for v34
+## 🔧 Best Practices
 
-1. **Performance:** Start with basic features and gradually enable v34 enhancements
+1. **Performance:** Start with basic features and gradually enable enhancements
 2. **Testing:** Test new features in development before production deployment
-3. **Bundle Size:** Monitor bundle size improvements with the new architecture
-4. **User Experience:** Combine multiple v34 features for enhanced workflows:
+3. **Bundle Size:** Monitor bundle size improvements with the modular architecture
+4. **User Experience:** Combine multiple features for enhanced workflows:
    - Use Batch Editing + Validation for better data entry
-   - Combine New Filters Tool Panel with server-side data
+   - Combine Filters Tool Panel with server-side data
    - Use Tree Data + Drag & Drop for hierarchical management
 
 ## License

package/app_connect/components.hjson

@@ -57,6 +57,11 @@
           "name": "columnState",
           "title": "columnState",
           "type": "array"
+        },
+        {
+          "name": "filterState",
+          "title": "filterState",
+          "type": "object"
         }
       ],
       "outputType": "object",
@@ -3795,6 +3800,53 @@
           state: 'opened',
           help: 'Quick Search',
           properties: []
+        },
+        {
+          addTitle: 'getAppliedFilters',
+          title: 'Get Applied Filters',
+          name: 'getAppliedFilters',
+          icon: 'fa fa-lg fa-filter',
+          state: 'opened',
+          help: 'Get Currently Applied Filters and Store in filterState',
+          properties: []
+        },
+        {
+          addTitle: 'getFilteredData',
+          title: 'Get Filtered Data',
+          name: 'getFilteredData',
+          icon: 'fa fa-lg fa-list',
+          state: 'opened',
+          help: 'Get All Filtered Row Data',
+          properties: []
+        },
+        {
+          addTitle: 'applyFilters',
+          title: 'Apply Filters',
+          name: 'applyFilters',
+          icon: 'fa fa-lg fa-check-circle',
+          state: 'opened',
+          help: 'Apply Filters Programmatically',
+          properties: [
+            {
+              group: 'Properties',
+              variables: [
+                {
+                  name: '1', optionName: '1', title: 'Filter Model', type: 'text',
+                  dataBindings: true, defaultValue: '{}', required: true,
+                  help: 'Filter model object with field-filter mappings'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          addTitle: 'clearFilters',
+          title: 'Clear Filters',
+          name: 'clearFilters',
+          icon: 'fa fa-lg fa-times-circle',
+          state: 'opened',
+          help: 'Remove All Applied Filters',
+          properties: []
         }
       ],
       "children": [],

package/dmx-ag-grid.js

@@ -7,6 +7,7 @@ dmx.Component('ag-grid', {
     fileData: [],
     selectedRows: [],
     columnState: [],
+    filterState: [],
     state: {
       gridReady: !1,
       firstDataRendered: !1,
@@ -403,6 +404,60 @@ dmx.Component('ag-grid', {
     },
     quickFilter: function () {
       onFilterTextBoxChanged();
+    },
+    getAppliedFilters: function () {
+      dmx.nextTick(function() {
+        const gridInstance = this.get('gridInstance');
+        if (gridInstance) {
+          const filterModel = gridInstance.getFilterModel();
+          this.set('filterState', filterModel || {});
+          return filterModel;
+        } else {
+          console.error('Grid not loaded to get filters');
+          return null;
+        }
+      }, this);
+    },
+    getFilteredData: function () {
+      dmx.nextTick(function() {
+        const gridInstance = this.get('gridInstance');
+        if (gridInstance) {
+          const filteredData = [];
+          gridInstance.forEachNodeAfterFilter(node => {
+            if (node.data) {
+              filteredData.push(node.data);
+            }
+          });
+          return filteredData;
+        } else {
+          console.error('Grid not loaded to get filtered data');
+          return null;
+        }
+      }, this);
+    },
+    applyFilters: function (filterModel) {
+      dmx.nextTick(function() {
+        const gridInstance = this.get('gridInstance');
+        if (gridInstance && filterModel) {
+          gridInstance.setFilterModel(filterModel);
+          gridInstance.onFilterChanged();
+          this.set('filterState', filterModel);
+        } else {
+          console.error('Grid not loaded or filter model is invalid');
+        }
+      }, this);
+    },
+    clearFilters: function () {
+      dmx.nextTick(function() {
+        const gridInstance = this.get('gridInstance');
+        if (gridInstance) {
+          gridInstance.setFilterModel(null);
+          gridInstance.onFilterChanged();
+          this.set('filterState', {});
+        } else {
+          console.error('Grid not loaded to clear filters');
+        }
+      }, this);
     }
   },
 
@@ -1772,6 +1827,7 @@ dmx.Component('ag-grid', {
       suppressScrollOnNewData: this.props.suppress_scroll_on_new_data,
       columnHoverHighlight: this.props.column_hover_highlight,
       tooltipShowDelay: options.tooltip_show_delay,
+      suppressOverlays: ['noMatchingRows', 'exporting'],
       onFilterModified: function (params) { 
         const columnApi = params.api;
           const rowCount = columnApi.getDisplayedRowCount();
@@ -1987,16 +2043,19 @@ dmx.Component('ag-grid', {
     const gridConfig = {
       columnDefs: columnDefs,
       ...gridOptions,
-      // Store export configuration for each grid instance
-      exportConfig: {
-        export_csv_filename: options.export_csv_filename,
-        export_pdf_filename: options.export_pdf_filename,
-        export_remove_html: options.export_remove_html,
-        export_trim_data: options.export_trim_data,
-        export_exclude_fields: options.export_exclude_fields,
-        export_exclude_hidden_fields: options.export_exclude_hidden_fields,
-        group_config: options.group_config,
-        column_state_storage_key: options.column_state_storage_key
+      // Store export configuration in context to avoid AG Grid warnings
+      context: {
+        ...gridOptions.context,
+        exportConfig: {
+          export_csv_filename: options.export_csv_filename,
+          export_pdf_filename: options.export_pdf_filename,
+          export_remove_html: options.export_remove_html,
+          export_trim_data: options.export_trim_data,
+          export_exclude_fields: options.export_exclude_fields,
+          export_exclude_hidden_fields: options.export_exclude_hidden_fields,
+          group_config: options.group_config,
+          column_state_storage_key: options.column_state_storage_key
+        }
       }
     };
     // Store gridConfig on component instance for export functions
@@ -2188,7 +2247,7 @@ dmx.Component('ag-grid', {
     };
 
     exportGridData = (currentGridInstance, currentGridConfig) => {
-      const exportConfig = currentGridConfig.exportConfig;
+      const exportConfig = currentGridConfig.context.exportConfig;
       const excludedColumnIds = ['checkboxColumn', 'actionsColumn'];
       const exportExcludeFieldsArray = exportConfig.export_exclude_fields ? exportConfig.export_exclude_fields.split(',') : [];
       
@@ -2388,7 +2447,7 @@ dmx.Component('ag-grid', {
         console.error('Grid API is destroyed or not initialized.');
         return;
       }
-      const exportConfig = currentGridConfig.exportConfig;
+      const exportConfig = currentGridConfig.context.exportConfig;
       const excludedColumnIds = ['checkboxColumn', 'actionsColumn'];
       const exportExcludeFieldsArray = exportConfig.export_exclude_fields ? exportConfig.export_exclude_fields.split(',') : [];
       let fieldsAndColIds;

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.0.20",
+    "version": "2.1.0",
     "type": "module",
-    "description": "App Connect module for AG Grid v34 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
+    "description": "App Connect module for AG Grid v35 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
     "license": "MIT",
     "author": {
         "name": "cdmx-in",
@@ -14,8 +14,8 @@
         "ag-grid"
     ],
     "dependencies": {
-        "@ag-grid-community/locale": "~34.1.0",
-        "ag-grid-community": "~34.1.0",
+        "@ag-grid-community/locale": "~35.1.0",
+        "ag-grid-community": "~35.1.0",
         "papaparse": "~5.5.2",
         "pdfmake": "~0.2.18",
         "read-excel-file": "~5.8.7"