@cdmx/wappler_ag_grid 1.0.0 → 1.0.2

package/README.md

@@ -204,6 +204,19 @@ Configuration includes:
 
 ---
 
+### Set Filters
+
+The "Set Filters" feature allows you to enable the setting of filters for columns in a user interface. This feature allows to preset filters when the grid is rendered.
+
+Configuration includes:
+- **Set Filters**: Toggle to enable or disable the feature. When enabled, users can set filters for columns. (Default: false)
+- **Custom Filters**: A grid that allows you to define custom filters.
+  - **Field**: The column name to filter.
+  - **Filter Type**: The type of filter to apply, options available are: "Starts With," "Less Than," "Date From," "Greater Than," "Equals," and "Contains."
+  - **Filter Value**: The Value/Filter to be applied.
+
+---
+
 # Configure Actions Column
 The Configure Actions Column feature allows you to configure actions for the buttons in the Actions Column.
 

package/app_connect/components.hjson

@@ -1231,6 +1231,74 @@
             }
           ]
         },
+        {
+          "group": "📒 Set Filters",
+          "variables": [
+            {
+              "name": "setFilters",
+              "title": "Set Filters",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "set_filters",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": ["listCustomFilters"],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Allows setting filters for columns",
+              "children": [
+                {
+                  "name": "listCustomFilters",
+                  "attribute": "dmx-bind:cfilters",
+                  "title": "Custom Filters",
+                  "type": "grid",
+                  "jsonFormat": true,
+                  "dataBindings": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "type",
+                      "caption": "Filter Type",
+                      "editable": {
+                        "type": "list",
+                        "items": [
+                          {"id": "startsWith", "text": "Starts With"},
+                          {"id": "lessThan", "text": "Less Than"},
+                          {"id": "dateFrom", "text": "Date From"},
+                          {"id": "greaterThan", "text": "Greater Than"},
+                          {"id": "equals", "text": "Equals"},
+                          {"id": "contains", "text": "Contains"}
+                        ]
+                      }
+                      "help": "Filter type: startsWith, lessThan, dateFrom, etc."
+                    },
+                    {
+                      "field": "filter",
+                      "caption": "Filter Value",
+                      "editable": {
+                        "type": "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "type": "Contains",
+                    "filter": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Configure Actions Column",
           "variables": [
@@ -1972,6 +2040,10 @@
           "src": "../../../node_modules/ag-grid-community/styles/ag-theme-material.css",
           "dst": "css/ag-theme-material.css"
         },
+        {
+          "src": "../../../node_modules/moment/min/moment.min.js",
+          "dst": "js/moment.min.js"
+        },
         {
           "src": "ag-theme-custom.css",
           "dst": "css/ag-theme-custom.css"
@@ -2010,6 +2082,11 @@
           "type": "js",
           "defer": true
         },
+        {
+          "src": "js/moment.min.js",
+          "type": "js",
+          "defer": true
+        },
         {
           "src": "js/locale/he.js",
           "type": "js",
@@ -2075,6 +2152,38 @@
         "dmx-ag-grid": true
       }
     },
+    {
+        "name": "dmx-ag-grid-cfilters",
+        "attributeStartsWith": "dmx-bind",
+        "attribute": "cfilters",
+        "title": "Custom Filters",
+        "type": "boolean",
+        "display": "fieldset",
+        "icon": "fa fa-lg fa-chevron-right",
+        "groupTitle": "Grid Config",
+        "groupIcon": "fa fa-lg fa-cubes",
+        "defaultValue": false,
+        "show": ["setCustomFilters"],
+        "noChangeOnHide": true,
+        "groupEnabler": true,
+        "children": [
+          {
+            "name": "setCustomFilters",
+            "attributeStartsWith": "dmx-bind",
+            "attribute": "cfilters",
+            "isValue": true,
+            "dataBindings": true,
+            "title": "Custom Filters:",
+            "type": "text",
+            "help": "Edit Custom Filters.",
+            "defaultValue": "",
+            "initDisplay": "none"
+          }
+        ],
+        "allowedOn": {
+          "dmx-ag-grid": true
+        }
+      },
     {
       "name": "dmx-ag-grid-pagination-page-size",
       "attributeStartsWith": "dmx-bind",

package/dmx-ag-grid.js

@@ -19,6 +19,7 @@ dmx.Component('ag-grid', {
     cnames: { type: Object, default: {} },
     cwidths: { type: Object, default: {} },
     ctypes: { type: Array, default: [] },
+    cfilters: { type: Array, default: [] },
     data_changes: { type: Array, default: [] },
     data: { type: Array, default: [] },
     dom_layout: { type: String, default: 'autoHeight' },
@@ -1236,6 +1237,20 @@ dmx.Component('ag-grid', {
     }
     // Create ag-Grid instance
     gridInstance = new agGrid.Grid(gridDiv, gridConfig);
+
+    if (options.cfilters && options.cfilters.length > 0) {
+    var filterModel = {};
+    const customFilters = options.cfilters
+    customFilters.forEach(function (customFilter) {
+      filterModel[customFilter.field] = {
+        type: customFilter.type,
+        filter: customFilter.filter
+      };
+    });
+    gridInstance.gridOptions.api.setFilterModel(filterModel);
+    gridInstance.gridOptions.api.onFilterChanged();
+    }
+
     const gridElement = document.getElementById(options.id+'-grid');
     if (options.compact_view) {
       gridElement.style.setProperty('--ag-grid-size', `${options.compact_view_grid_size}`+'px');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",
@@ -16,6 +16,7 @@
     "dependencies": {
         "ag-grid-community": "30.1.x",
         "exceljs": "4.3.x",
+        "moment": "2.29.x",
         "papaparse": "5.4.x"
     },
     "scripts": {