@cdmx/wappler_ag_grid 0.6.0 → 0.6.2

package/README.md

@@ -233,7 +233,7 @@ Specify the CSS class for styling the icon of the Delete Action button.
 - Use Case: Used when you're awaiting the population of specific elements or data before loading the grid. It's also useful for refreshing the grid intentionally.
 
 **Reload** (Beta)
-- To be used in conjunction with "No Auto Load" being enabled
+- To be used in conjunction with "No Auto Load" enabled
 - 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.
 

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",
@@ -1098,12 +1081,74 @@
             }
           ]
         },
+        {
+          "group": "📒 Column Groups",
+          "variables": [
+            {
+              "name": "groupConfig",
+              "title": "Configure Column Groups",
+              "attribute": "group_configs",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "listGroupConfig",
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Apply Column grouping"
+              "children": [
+                {
+                  "name": "listGroupConfig",
+                  "attribute": "dmx-bind:group_config",
+                  "title": "Group Config",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "name",
+                      "caption": "Group Name",
+                      "size": "25%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "start_field",
+                      caption: "Start Field",
+                      size: "25%",
+                      editable: {
+                        type: "text"
+                      }
+                    },
+                    {
+                      field: "end_field",
+                      caption: "Start Field",
+                      size: "25%",
+                      editable: {
+                        type: "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "name": "",
+                    "start_field": "",
+                    "end_field": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Configure Actions Column",
           "variables": [
             {
               "name": "action_column",
-              "attributeStartsWith": "dmx-bind",
               "attribute": "action_column",
               "title": "Configure Actions",
               "type": "boolean",
@@ -1276,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,12 +80,13 @@ 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 }
+    compact_view_item_height: { type: Number, default: 20 },
+    group_config: { type: Array, default: [] }
   },
 
   methods: {
@@ -104,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);
     }
   },
 
@@ -149,6 +159,7 @@ dmx.Component('ag-grid', {
     const enableCellClickEvent = this.props.row_click_event && (this.props.enable_actions || this.props.row_checkbox_event); 
     let localeText;
     let columnDefs = [];
+    let groupedColumnDefs = [];
     let exportToCSV = this.props.export_to_csv;
     let gridInstance = null; 
     this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
@@ -456,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
@@ -548,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;
@@ -559,7 +576,6 @@ dmx.Component('ag-grid', {
       columnDefs = this.props.column_defs;
     } else {
       const firstRow = rowData[0];
-
       columnDefs = Object.keys(firstRow).map(key => {
         // Assuming rowData is an array of objects
         const values = rowData.map(row => row[key]);
@@ -574,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;
           }
@@ -704,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;
@@ -720,13 +747,16 @@ 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;
         }
-
         return {
           headerName: headerName,
           field: key,
@@ -748,6 +778,27 @@ dmx.Component('ag-grid', {
           cellRenderer: cellRenderer
         };
       });
+      if (options.group_config && options.group_config.length > 0) {
+        groupedColumnDefs = options.group_config.map(group => {
+          const startFieldIndex = columnDefs.findIndex(colDef => colDef.field === group.start_field);
+          const endFieldIndex = columnDefs.findIndex(colDef => colDef.field === group.end_field);
+      
+          if (startFieldIndex === -1 || endFieldIndex === -1 || startFieldIndex > endFieldIndex) {
+              return null;
+          }
+      
+          const groupColumns = columnDefs.slice(startFieldIndex, endFieldIndex + 1)
+              .map(col => ({
+                  ...col,
+                  columnGroupShow: 'open'
+              }));
+      
+          return {
+              headerName: group.name,
+              children: groupColumns
+          };
+      }).filter(group => group !== null);
+    }
     }
     window.onRowClicked = (event) => {
       const rowData = event.data;
@@ -834,7 +885,7 @@ dmx.Component('ag-grid', {
       localeText = AG_GRID_LOCALE_HE
     }
     const gridOptions = {
-      columnDefs: columnDefs,
+      columnDefs: (groupedColumnDefs && groupedColumnDefs.length > 0) ? groupedColumnDefs : columnDefs,
       localeText: localeText,
       enableRtl: options.enable_rtl,
       noRowsOverlayComponent: '<div>No Records Found.</div>',
@@ -968,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');
@@ -999,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.0",
+    "version": "0.6.2",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation",
     "license": "MIT",