@cdmx/wappler_ag_grid 1.7.3 → 1.7.4

package/README.md

@@ -301,7 +301,7 @@ Configuration includes:
 
 ---
 
-# Set Filters
+# Set Filters and Sort Orders
 
 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.
 
@@ -314,6 +314,13 @@ Toggle to enable or disable the feature. When enabled, users can set filters for
   - **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.
 
+### Set Sort Orders
+Toggle to enable or disable the feature. When enabled, users can set sort orders for columns. (Default: false)
+
+  **Custom Sort Orders**: A grid that allows you to define custom sort orders.
+  - **Field**: The column name to sort.
+  - **Sort Order**: Select Ascending or Descending Order for the Field."
+
 ---
 
 # Configure Actions Column

package/app_connect/components.hjson

@@ -1632,7 +1632,7 @@
           ]
         },
         {
-          "group": "📒 Set Filters",
+          "group": "📒 Set Filters and Sort Orders",
           "variables": [
             {
               "name": "setFilters",
@@ -1697,6 +1697,57 @@
                   }
                 }
               ]
+            },
+            {
+              "name": "setSortOrders",
+              "title": "Set Sort Orders",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "set_sort_order",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": ["listCustomSortOrder"],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Allows setting sort orders for columns",
+              "children": [
+                {
+                  "name": "listCustomSortOrder",
+                  "attribute": "dmx-bind:csort",
+                  "title": "Custom Sort Order",
+                  "type": "grid",
+                  "jsonFormat": true,
+                  "dataBindings": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "sort",
+                      "caption": "Sort Order",
+                      "editable": {
+                        "type": "list",
+                        "items": [
+                          {"id": "asc", "text": "Ascending"},
+                          {"id": "desc", "text": "Descending"}
+                        ]
+                      }
+                      "help": "Sort Order for the fields."
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "sort": "asc"
+                  }
+                }
+              ]
             }
           ]
         },

package/dmx-ag-grid.js

@@ -27,6 +27,7 @@ dmx.Component('ag-grid', {
     cwidths: { type: Object, default: {} },
     ctypes: { type: Array, default: [] },
     cfilters: { type: Array, default: [] },
+    csort: { type: Array, default: [] },
     cstatic_select_editors: { type: Object, default: {} },
     cdynamic_select_editors: { type: Object, default: {} },
     cselect_placeholder: { type: String, default: "-" },
@@ -857,17 +858,17 @@ dmx.Component('ag-grid', {
 
         if ((displayDataChanges.length > 0) && displayDataChanges.some(change => change.field === params.colDef.field)) {
           const placeholderMap = Object.fromEntries(
-            Object.entries(params.data).map(([field, fieldValue]) => [`%${field}%`, fieldValue])
+              Object.entries(params.data).map(([field, fieldValue]) => [`%${field}%`, fieldValue !== null ? fieldValue : ''])
           );
           return displayDataChanges.reduce((cellData, change) => {
-            if (change.field === params.colDef.field) {
-              const placeholders = Object.keys(placeholderMap).join('|');
-              const regex = new RegExp(placeholders, 'g');
-              cellData = change.data.replace(regex, match => placeholderMap[match]);
-            }
-            return cellData;
+              if (change.field === params.colDef.field) {
+                  const placeholders = Object.keys(placeholderMap).join('|');
+                  const regex = new RegExp(placeholders + '|%[^%]+%', 'g');
+                  cellData = change.data.replace(regex, match => placeholderMap[match] || '');
+              }
+              return cellData;
           }, value);
-        }
+      }      
 
         // Check if there's a matching change in dataChanges
         const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
@@ -1461,6 +1462,19 @@ dmx.Component('ag-grid', {
       },
       onGridReady: (params) => {
         const columnApi = params.columnApi.api;
+        if (options.csort && options.csort.length > 0) {
+          let sortModel = options.csort.map(function(sortItem, index) {
+              return {
+                  colId: sortItem.field,
+                  sort: sortItem.sort,
+                  sortIndex: index
+              };
+          });
+          columnApi.applyColumnState({
+              state: sortModel,
+              defaultState: { sort: null }
+          });
+        }
         hideColumn = (fieldToHide) => {
           columnApi.setColumnsVisible([fieldToHide], false);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "1.7.3",
+    "version": "1.7.4",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",