@cdmx/wappler_ag_grid 0.6.1 → 0.6.3

package/README.md

@@ -112,6 +112,9 @@ This grid allows you to define custom data changes for specific fields. The grid
 3. **New Value**: The new value to replace the original value in the field data. 
 4. **Area**: Choose where to apply the data changes: "cell" (cell text) or "tooltip" (tooltip text). 
 
+**Amount Fields** (Type: textbox, Default: null)
+- Define the fields where the comma-separation and float parsing need to be applied.
+  
 ---
 **Configure Header Names**
 This grid allows you to define custom header names for specific columns. The grid has the following columns:
@@ -152,16 +155,6 @@ Enter the names of the sort filters you want to hide separated by commas. The sp
 
 ---
 
-# Amount Fields
-The amount fields configuration consists of the following parameters:
-
-- **Amount Fields** (Type: checkbox, Default: false)
-  - Enable or disable the comma-separation for amount fields.
-
-- **Amount Fields** (Type: textbox, Default: null)
-  - Define the fields where the comma-separation and float parsing need to be applied.
----
-
 # Compact View
 The compact view configuration consists of the following parameters:
 
@@ -173,7 +166,24 @@ The compact view configuration consists of the following parameters:
 
 - **Grid Item Height** (Type: number, Default: 20)
   - Set the height of each item in the compact view.
- 
+---
+# Column Groups
+
+This feature allows you to organize and group columns for a more structured presentation of data. Instead of using the built-in top left corner button, you can opt for a separate Export button that triggers the action to download data as a CSV file.
+
+## Group Configuration
+This option enables column grouping functionality.
+
+### Group Configurations
+
+This option allows you separate fields into different groups. 
+Each configuration includes:
+- **Group Name**: Assign a name to the group for easy identification.
+- **Start Field**: Specify the starting field of the group.
+- **End Field**: Define the ending field of the group.
+
+These configurations help you create organized and logical groupings of columns for your data presentation needs.
+
 ---
 
 # Configure Actions Column
@@ -237,6 +247,10 @@ Specify the CSS class for styling the icon of the Delete Action button.
 - This performs a transactional update of the client-side data in the grid after comparing the existing and updated datasets
 - To use this: Enable "No Auto Load", On Edit or update actions, perform an SC load, On Success of SC load perform the AG Grid Module Reload Action.
 
+**Export**
+- To be used if you wish to use a separate Export button instead of using the inbuilt top left-cornered Export button.
+- Trigger this action to call Export Data to CSV download action.
+
 ## License
 
 The AG Grid module is licensed under the MIT License. Please refer to the license file for more details.

package/app_connect/components.hjson

@@ -264,6 +264,7 @@
             {
               "name": "fixedHeader",
               "title": "Sticky Header and Horizontal Scrollbar",
+              "attribute": "f_header",
               "type": "boolean",
               "display": "fieldset",
               "noChangeOnHide": true,
@@ -791,7 +792,8 @@
               "defaultValue": false,
               "display": "fieldset",
               "show": [
-                "dataChanges"
+                "dataChanges",
+                "amountFields"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -847,6 +849,13 @@
                     "new_value": "",
                     "area": "cell"
                   }
+                },
+                {
+                  "name": "amountFields",
+                  "attribute": "amount_fields",
+                  "title": "Amount Fields",
+                  "type": "text",
+                  "initDisplay": "none"
                 }
               ]
             }
@@ -994,7 +1003,7 @@
               "show": [
                 "hideFields",
                 "hideFilters",
-                "hideSort",
+                "hideSort"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -1025,39 +1034,13 @@
             }
           ]
         },
-        {
-          "group": "📒 Amount Fields",
-          "variables": [
-            {
-              "name": "amount_fields",
-              "title": "Amount Fields Config",
-              "type": "boolean",
-              "defaultValue": false,
-              "display": "fieldset",
-              "show": [
-                "amountFields"
-              ],
-              "noChangeOnHide": true,
-              "groupEnabler": true,
-              "help": "Configure amount fields to have comma-seperation implemented"
-              "children": [
-                {
-                  "name": "amountFields",
-                  "attribute": "amount_fields",
-                  "title": "Amount Fields",
-                  "type": "text",
-                  "initDisplay": "none"
-                }
-              ]
-            }
-          ]
-        },
         {
           "group": "📒 Compact View",
           "variables": [
             {
               "name": "compact_view",
               "title": "Compact View Config",
+              "attribute": "compact_views",
               "type": "boolean",
               "defaultValue": false,
               "display": "fieldset",
@@ -1104,6 +1087,7 @@
             {
               "name": "groupConfig",
               "title": "Configure Column Groups",
+              "attribute": "group_configs",
               "type": "boolean",
               "defaultValue": false,
               "display": "fieldset",
@@ -1165,7 +1149,6 @@
           "variables": [
             {
               "name": "action_column",
-              "attributeStartsWith": "dmx-bind",
               "attribute": "action_column",
               "title": "Configure Actions",
               "type": "boolean",
@@ -1338,6 +1321,15 @@
           state : 'opened',
           help: 'Reload the AG Grid',
           properties : []
+        },
+        {
+          addTitle: 'Export',
+          title: 'Export',
+          name: 'exportGrid',
+          icon: 'fa fa-lg fa-download',
+          state: 'opened',
+          help: 'Export AG Grid Data to CSV',
+          properties: []
         }
       ],
       "children": [],

package/dmx-ag-grid.js

@@ -43,7 +43,7 @@ dmx.Component('ag-grid', {
     locale_text: { type: String, default: null },
     date_locale: { type: String, default: 'en-IN' },
     date_format: { type: String, default: 'dd/MM/yyyy hh:mm A' },
-    amount_fields: { type: Array, default: [] },
+    amount_fields: { type: String, default: null },
     min_width: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
@@ -80,9 +80,9 @@ dmx.Component('ag-grid', {
     delete_action_icon_class: {type: String, default: 'fas fa-trash' },
     delete_action_btn_class: {type: String, default: 'btn-danger btn-xs' },
     data_binded_changes: {type: Array, default: [] },
-    hide_fields: {type: Array, default: [] },
-    hide_filters: {type: Array, default: [] },
-    hide_sort: {type: Array, default: [] },
+    hide_fields: {type: String, default: null },
+    hide_filters: {type: String, default: null },
+    hide_sort: {type: String, default: null },
     compact_view: { type: Boolean, default: false },
     compact_view_grid_size: { type: Number, default: 3 },
     compact_view_item_height: { type: Number, default: 20 },
@@ -105,6 +105,15 @@ dmx.Component('ag-grid', {
       let gridInstance = this.refreshGrid();
       this.set('gridInstance', gridInstance);
       }, this);
+    },
+    exportGrid: function () {
+      dmx.nextTick(function() {
+        if (typeof exportGridData === 'function') {
+          exportGridData();
+        } else {
+          console.error('Grid not loaded to perform export');
+        }
+      }, this);
     }
   },
 
@@ -458,8 +467,11 @@ dmx.Component('ag-grid', {
             return matchingItem[output];
           }
         }
-        if (options.amount_fields && options.amount_fields.includes(key)) {
-              return parseFloat(value)
+        if (options.amount_fields) {
+          const amountFieldsArray = options.amount_fields.split(',');
+          if (amountFieldsArray.includes(key)) {
+            return parseFloat(value);
+          }
         }
     
         // Return the original value if no matching changes were found
@@ -550,8 +562,11 @@ dmx.Component('ag-grid', {
             return matchingItem[output];
           }
         }
-        if (options.amount_fields && options.amount_fields.includes(key)) {
-              return parseFloat(value)
+        if (options.amount_fields) {
+          const amountFieldsArray = options.amount_fields.split(',');
+          if (amountFieldsArray.includes(key)) {
+            return parseFloat(value);
+          }
         }
         // Return the original value if no matching changes were found
         return value;
@@ -575,22 +590,26 @@ dmx.Component('ag-grid', {
         let hide;
         let type;
         let colId;
+        let sortable;
 
         if (dataType === 'number') {
           filter = 'agNumberColumnFilter';
           if (options.numeric_column_align){
             type = 'numericColumn';
           }
-          if (options.amount_fields && options.amount_fields.includes(key)) {
-            valueFormatter = function (params) {
-              if (params.value != null) {
-                return Number(params.value).toLocaleString("en-US", {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2,
-                });
-              }
-              return '-';
-            };
+          if (options.amount_fields) {
+            const amountFieldsArray = options.amount_fields.split(',');
+            if (amountFieldsArray.includes(key)) {
+              valueFormatter = function (params) {
+                if (params.value != null) {
+                  return Number(params.value).toLocaleString("en-US", {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                  });
+                }
+                return '-';
+              };
+            }
           } else {
             valueFormatter = blankOrNullValueFormatter;
           }
@@ -705,15 +724,22 @@ dmx.Component('ag-grid', {
           colId = 'statusColumn';
           filter = null;
         }
-        else if (options.hide_filters && options.hide_filters.includes(key)) {
-          filter = null;
+        else if (options.hide_filters) {
+          const hideFiltersArray = options.hide_filters.split(',');
+        
+          if (hideFiltersArray.includes(key)) {
+            filter = null;
+          }
         }
         else {
           cellRenderer = undefined;
           colId = undefined;
         }
-        if (options.hide_sort && options.hide_sort.includes(key)) {
-          sortable = false;
+        if (options.hide_sort) {
+          const hideSortArray = options.hide_sort.split(',');
+          if (hideSortArray.includes(key)) {
+            sortable = false;
+          }
         }
         else {
           sortable = true;
@@ -721,8 +747,12 @@ dmx.Component('ag-grid', {
         if (options.hide_id_field && key == 'id') {
           hide = true;
         }
-        else if (options.hide_fields && options.hide_fields.includes(key)) {
-          hide = true;
+        else if (options.hide_fields) {
+          const hideFieldsArray = options.hide_fields.split(',');
+        
+          if (hideFieldsArray.includes(key)) {
+            hide = true;
+          }
         }
         else {
           hide = undefined;
@@ -989,6 +1019,37 @@ dmx.Component('ag-grid', {
     updateHoveringBarStyles();
     window.addEventListener('resize', updateHoveringBarStyles);
 
+    //CSV Export Function
+    exportGridData = () => {
+      const excludedColumnIds = ['checkboxColumn', 'actionsColumn']; 
+      // Extracting fields and colIds from columnDefs
+      const fieldsAndColIds = gridConfig.columnDefs.map((column) => ({
+        field: column.field,
+        colId: column.colId,
+      }));
+      // Filtering out fields based on excludedColumnIds
+      const fieldsToExport = fieldsAndColIds.filter(
+        (column) => !excludedColumnIds.includes(column.colId)
+      ).map((column) => column.field);
+      const params = {
+        fileName: 'export.csv', // Set the desired file name here
+        allColumns: true,
+        columnKeys: fieldsToExport,
+        processCellCallback: function (params) {
+          const columnDef = params.column.getColDef();
+          const valueFormatter = columnDef.valueFormatter;
+          if (valueFormatter && typeof valueFormatter === "function") {
+            const formattedValue = valueFormatter(params);
+            if (formattedValue !== null && formattedValue !== undefined) {
+              return formattedValue;
+            }
+          }
+          return params.value;
+        },
+      };
+      gridConfig.api.exportDataAsCsv(params);
+    };
+
     // Create the export button
     if (exportToCSV) {
       const existingExportButton = document.getElementById('exportButton');
@@ -1020,37 +1081,10 @@ dmx.Component('ag-grid', {
       exportButton.style.borderRadius = '5px';
       exportButton.style.cursor = 'pointer';
       exportButton.style.marginBottom = '10px';
-      
+
       exportButton.addEventListener('click', () => {
-        const excludedColumnIds = ['checkboxColumn', 'actionsColumn']; 
-        // Extracting fields and colIds from columnDefs
-        const fieldsAndColIds = gridConfig.columnDefs.map((column) => ({
-          field: column.field,
-          colId: column.colId,
-        }));
-        // Filtering out fields based on excludedColumnIds
-        const fieldsToExport = fieldsAndColIds.filter(
-          (column) => !excludedColumnIds.includes(column.colId)
-        ).map((column) => column.field);
-        const params = {
-          fileName: 'export.csv', // Set the desired file name here
-          allColumns: true,
-          columnKeys: fieldsToExport,
-          processCellCallback: function (params) {
-            const columnDef = params.column.getColDef();
-            const valueFormatter = columnDef.valueFormatter;
-            if (valueFormatter && typeof valueFormatter === "function") {
-              const formattedValue = valueFormatter(params);
-              if (formattedValue !== null && formattedValue !== undefined) {
-                return formattedValue;
-              }
-            }
-            return params.value;
-          },
-        };
-        gridConfig.api.exportDataAsCsv(params);
-      });
-      
+        exportGridData()
+      })
       // Append the export button to the grid container
       gridContainer.parentNode.insertBefore(exportButton, gridContainer);
       exportButton.style.marginBottom = '10px';

package/package.json

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