@cdmx/wappler_ag_grid 0.3.3 → 0.3.5

package/app_connect/components.hjson

@@ -91,7 +91,7 @@
           "variables": [
             {
               "name": "minWidth",
-              "attribute": "minWidth",
+              "attribute": "min_width",
               "title": "Minimum Width",
               "type": "number",
               "defaultValue": 150,
@@ -123,7 +123,7 @@
             },
             {
               "name": "floatingFilter",
-              "attribute": "dmx-bind:floatingFilter",
+              "attribute": "dmx-bind:floating_filter",
               "title": "Floating Filter",
               "type": "boolean",
               "defaultValue": true,
@@ -131,7 +131,7 @@
             },
             {
               "name": "exportToCSV",
-              "attribute": "dmx-bind:exportToCSV",
+              "attribute": "dmx-bind:export_to_csv",
               "title": "CSV Export",
               "type": "boolean",
               "defaultValue": true,
@@ -147,7 +147,7 @@
             },
             {
               "name": "columnHoverHighlight",
-              "attribute": "dmx-bind:columnHoverHighlight",
+              "attribute": "dmx-bind:column_hover_highlight",
               "title": "Column Hover Highlight",
               "type": "boolean",
               "defaultValue": true,
@@ -155,7 +155,7 @@
             },
             {
               "name": "suppressRowDeselection",
-              "attribute": "dmx-bind:suppressRowDeselection",
+              "attribute": "dmx-bind:suppress_row_deselection",
               "title": "Supress Row Deselection",
               "type": "boolean",
               "defaultValue": false,
@@ -247,7 +247,7 @@
             },
             {
               "name": "fixedHeader",
-              "attribute": "dmx-bind:fixedHeader",
+              "attribute": "dmx-bind:fixed_header",
               "title": "Sticky Header",
               "type": "boolean",
               "display": "fieldset",
@@ -262,7 +262,7 @@
               "children": [
                 {
                   "name": "fixedHeaderOffset",
-                  "attribute": "fixedHeaderOffset",
+                  "attribute": "fixed_header_offset",
                   "title": "Header Offset",
                   "type": "number",
                   "initDisplay": "none",
@@ -271,7 +271,7 @@
                 },
                 {
                   "name": "topbarClass",
-                  "attribute": "topbarClass",
+                  "attribute": "topbar_class",
                   "title": "Topbar Class",
                   "type": "text",
                   "initDisplay": "none",
@@ -280,7 +280,7 @@
                 },
                 {
                   "name": "fixedTopOffset",
-                  "attribute": "fixedTopOffset",
+                  "attribute": "fixed_top_offset",
                   "title": "Topbar Offset",
                   "type": "number",
                   "initDisplay": "none",
@@ -307,7 +307,7 @@
             },
             {
               "name": "suppressRowClickSelection",
-              "attribute": "dmx-bind:suppressRowClickSelection",
+              "attribute": "dmx-bind:suppress_row_click_selection",
               "title": "Suppress Row Click Selection",
               "type": "boolean",
               "defaultValue": false,
@@ -315,7 +315,7 @@
             },
             {
               "name": "suppressMenuHide",
-              "attribute": "dmx-bind:suppressMenuHide",
+              "attribute": "dmx-bind:suppress_menu_hide",
               "title": "Suppress Menu Hide",
               "type": "boolean",
               "defaultValue": false,
@@ -323,7 +323,7 @@
             },
             {
               "name": "suppressMovableColumns",
-              "attribute": "dmx-bind:suppressMovableColumns",
+              "attribute": "dmx-bind:suppress_movable_columns",
               "title": "Suppress Movable Columns",
               "type": "boolean",
               "defaultValue": false,
@@ -331,7 +331,7 @@
             },
             {
               "name": "enableCellExpressions",
-              "attribute": "dmx-bind:enableCellExpressions",
+              "attribute": "dmx-bind:enable_cell_expressions",
               "title": "Enable Cell Expressions",
               "type": "boolean",
               "defaultValue": false,
@@ -339,7 +339,7 @@
             },
             {
               "name": "animateRows",
-              "attribute": "dmx-bind:animateRows",
+              "attribute": "dmx-bind:animate_rows",
               "title": "Animate Rows",
               "type": "boolean",
               "defaultValue": false,
@@ -347,7 +347,7 @@
             },
             {
               "name": "suppressAggFuncInHeader",
-              "attribute": "dmx-bind:suppressAggFuncInHeader",
+              "attribute": "dmx-bind:suppress_agg_func_in_header",
               "title": "Suppress Aggregation Function in Header",
               "type": "boolean",
               "defaultValue": false,
@@ -355,7 +355,7 @@
             },
             {
               "name": "suppressAggAtRootLevel",
-              "attribute": "dmx-bind:suppressAggAtRootLevel",
+              "attribute": "dmx-bind:suppress_agg_at_root_level",
               "title": "Suppress Aggregation at Root Level",
               "type": "boolean",
               "defaultValue": false,
@@ -363,7 +363,7 @@
             },
             {
               "name": "suppressClipboardPaste",
-              "attribute": "dmx-bind:suppressClipboardPaste",
+              "attribute": "dmx-bind:suppress_clipboard_paste",
               "title": "Suppress Clipboard Paste",
               "type": "boolean",
               "defaultValue": false,
@@ -371,7 +371,7 @@
             },
             {
               "name": "suppressScrollOnNewData",
-              "attribute": "dmx-bind:suppressScrollOnNewData",
+              "attribute": "dmx-bind:suppress_scroll_on_new_data",
               "title": "Suppress Scroll on New Data",
               "type": "boolean",
               "defaultValue": false,
@@ -379,7 +379,7 @@
             },
             {
               "name": "suppressPropertyNamesCheck",
-              "attribute": "dmx-bind:suppressPropertyNamesCheck",
+              "attribute": "dmx-bind:suppress_property_names_check",
               "title": "Suppress Property Names Check",
               "type": "boolean",
               "defaultValue": false,

package/dmx-ag-grid.js

@@ -8,7 +8,6 @@ dmx.Component('ag-grid', {
 
   attributes: {
     id: { default: null },
-    rowData: { type: Array, default: [] },
     grid_theme: { type: String, default: 'ag-theme-alpine' },
     column_defs: { type: Array, default: [] },
     cstyles: { type: Array, default: [] },
@@ -16,39 +15,39 @@ dmx.Component('ag-grid', {
     cwidths: { type: Object, default: {} },
     data_changes: { type: Array, default: [] },
     data: { type: Array, default: [] },
-    domLayout: { default: 'autoHeight' },
-    enableCellTextSelection: { type: Boolean, default: true },
-    rowSelection: { type: String, default: 'single' },
-    suppressRowDeselection: { type: Boolean, default: false },
+    dom_layout: { type: String, default: 'autoHeight' },
+    enable_cell_text_selection: { type: Boolean, default: true },
+    row_selection: { type: String, default: 'single' },
+    suppress_row_deselection: { type: Boolean, default: false },
     pagination: { type: Boolean, default: true },
     pagination_page_size: { type: Number, default: 20 },
     row_height: { type: Number, default: null },
     header_height: { type: Number, default: null },
-    suppressRowClickSelection: { type: Boolean, default: false },
-    suppressMenuHide: { type: Boolean, default: false },
-    suppressMovableColumns: { type: Boolean, default: false },
-    enableCellExpressions: { type: Boolean, default: false },
-    animateRows: { type: Boolean, default: false },
-    suppressAggFuncInHeader: { type: Boolean, default: false },
-    suppressAggAtRootLevel: { type: Boolean, default: false },
-    suppressClipboardPaste: { type: Boolean, default: false },
-    suppressScrollOnNewData: { type: Boolean, default: false },
-    suppressPropertyNamesCheck: { type: Boolean, default: false },
+    suppress_row_click_selection: { type: Boolean, default: false },
+    suppress_menu_hide: { type: Boolean, default: false },
+    suppress_movable_columns: { type: Boolean, default: false },
+    enable_cell_expressions: { type: Boolean, default: false },
+    animate_rows: { type: Boolean, default: false },
+    suppress_agg_func_in_header: { type: Boolean, default: false },
+    suppress_agg_at_root_level: { type: Boolean, default: false },
+    suppress_clipboard_paste: { type: Boolean, default: false },
+    suppress_scroll_on_new_data: { type: Boolean, default: false },
+    suppress_property_names_check: { type: Boolean, default: false },
     hide_id_field: { type: Boolean, default: false },
     enable_rtl: { type: Boolean, default: false },
     locale_text: { type: Text, default: null },
-    minWidth: { type: Number, default: 150 },
+    min_width: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
     filter: { type: Boolean, default: true },
-    floatingFilter: { type: Boolean, default: true },
-    columnHoverHighlight: { type: Boolean, default: true },
-    exportToCSV: { type: Boolean, default: true },
-    fixedHeader: { type: Boolean, default: false },
-    topbarClass: { type: Text, default: 'topbar' },
-    fixedHeaderOffset: { type: Number, default: 100 },
-    fixedTopOffset: { type: Number, default: 80 },
-    fixedHorizonatalScroll: { type: Boolean, default: false },
+    floating_filter: { type: Boolean, default: true },
+    column_hover_highlight: { type: Boolean, default: true },
+    export_to_csv: { type: Boolean, default: true },
+    fixed_header: { type: Boolean, default: false },
+    topbar_class: { type: Text, default: 'topbar' },
+    fixed_header_offset: { type: Number, default: 100 },
+    fixed_top_offset: { type: Number, default: 80 },
+    fixed_horizonatal_scroll: { type: Boolean, default: false },
     timezone: {type: Text, default: '' },
     cell_click_event: {type: Boolean, default: false },
     row_click_event: {type: Boolean, default: false },
@@ -67,7 +66,6 @@ dmx.Component('ag-grid', {
     view_action_icon_class: {type: String, default: 'fas fa-eye' },
     view_action_btn_class: {type: String, default: 'btn-info btn-xs' },
     data_binded_changes: {type: Array, default: [] }
-    
   },
 
   methods: {
@@ -77,8 +75,9 @@ dmx.Component('ag-grid', {
       this.refreshGrid();
     },
     reloadGrid: function () {
-      this.refreshGrid()
-      console.log('reloadGrid');
+      dmx.nextTick(function() {
+        this.refreshGrid();
+      }, this);
     }
   },
 
@@ -92,7 +91,7 @@ dmx.Component('ag-grid', {
     const enableCellClickEvent = this.props.cell_click_event;
     let localeText;
     let columnDefs = [];
-    let exportToCSV = this.props.exportToCSV;
+    let exportToCSV = this.props.export_to_csv;
     this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
@@ -329,6 +328,44 @@ dmx.Component('ag-grid', {
         return value;
       };
     }
+    createCombinedFilterValueGetter = (key, dataChanges, dataBindedChanges) => {
+      const keyLookup = {};
+    
+      dataBindedChanges.forEach(change => {
+        if (!keyLookup[change.field]) {
+          const data_source = change.data_source;
+          const property = change.property;
+          const output = change.output;
+          let dataArray;
+          this.$addBinding(data_source, (function (e) {
+            dataArray = e;
+          }));
+          keyLookup[change.field] = { dataArray, property, output };
+        }
+      });
+    
+      return function (params) {
+        const value = params.data[key];
+    
+        // Check if there's a matching change in dataChanges
+        const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
+        if (matchingChange) {
+          return matchingChange.new_value;
+        }
+        // Check if there's a matching change in dataBindedChanges
+        const matchingKeyData = keyLookup[key];
+        if (matchingKeyData) {
+          const { dataArray, property, output } = matchingKeyData;
+          const matchingItem = dataArray.find(item => item[property] === value);
+    
+          if (matchingItem) {
+            return matchingItem[output];
+          }
+        }
+        // Return the original value if no matching changes were found
+        return value;
+      };
+    };
     if (Array.isArray(this.props.column_defs) && this.props.column_defs.length > 0) {
       columnDefs = this.props.column_defs;
     } else {
@@ -386,6 +423,7 @@ dmx.Component('ag-grid', {
         else {
           // valueGetter = getValueGetter(key, dataChanges);
           valueGetter = createCombinedValueGetter(key, options.data_changes, options.data_binded_changes);
+          filterValueGetter = createCombinedFilterValueGetter(key, options.data_changes, options.data_binded_changes);
         }
         function extractConditionParts(condition) {
           const parts = condition.match(/(.+?)(===|==|!=|>|<|>=|<=)(.+)/);
@@ -554,32 +592,32 @@ dmx.Component('ag-grid', {
       rowStyle: enableRowClickEvent ? { cursor: 'pointer' } : undefined,
       defaultColDef: {
         flex: 1,
-        minWidth: this.props.minWidth,
+        minWidth: this.props.min_width,
         resizable: this.props.resizable,
         filter: this.props.filter,
         sortable: this.props.sortable,
-        floatingFilter: this.props.floatingFilter
+        floatingFilter: this.props.floating_filter
       },
-      domLayout: 'autoHeight',
+      domLayout: this.props.dom_layout,
       enableCellTextSelection: true,
-      rowSelection: this.props.rowSelection,
-      suppressRowDeselection: this.props.suppressRowDeselection,
+      rowSelection: this.props.row_selection,
+      suppressRowDeselection: this.props.suppress_row_deselection,
       pagination: this.props.pagination,
       paginationPageSize: this.props.pagination_page_size,
       rowHeight: this.props.row_height,
       headerHeight: this.props.header_height,
-      suppressRowClickSelection: this.props.suppressRowClickSelection,
-      suppressMenuHide: this.props.suppressMenuHide,
-      suppressMovableColumns: this.props.suppressMovableColumns,
-      enableCellExpressions: this.props.enableCellExpressions,
-      animateRows: this.props.animateRows,
-      suppressAggFuncInHeader: this.props.suppressAggFuncInHeader,
-      suppressAggAtRootLevel: this.props.suppressAggAtRootLevel,
-      suppressClipboardPaste: this.props.suppressClipboardPaste,
-      suppressScrollOnNewData: this.props.suppressScrollOnNewData,
-      suppressPropertyNamesCheck: this.props.suppressPropertyNamesCheck,
-      suppressRowDeselection: this.props.suppressRowDeselection,
-      columnHoverHighlight: this.props.columnHoverHighlight,
+      suppressRowClickSelection: this.props.suppress_row_click_selection,
+      suppressMenuHide: this.props.suppress_menu_hide,
+      suppressMovableColumns: this.props.suppress_movable_columns,
+      enableCellExpressions: this.props.enable_cell_expressions,
+      animateRows: this.props.animate_rows,
+      suppressAggFuncInHeader: this.props.suppress_agg_func_in_header,
+      suppressAggAtRootLevel: this.props.suppress_agg_at_root_level,
+      suppressClipboardPaste: this.props.suppress_clipboard_paste,
+      suppressScrollOnNewData: this.props.suppress_scroll_on_new_data,
+      suppressPropertyNamesCheck: this.props.suppress_property_names_check,
+      suppressRowDeselection: this.props.suppress_row_deselection,
+      columnHoverHighlight: this.props.column_hover_highlight,
       components: {
         clickCellRenderer: clickCellRenderer,
         checkboxCellRenderer: checkboxCellRenderer,
@@ -627,10 +665,10 @@ dmx.Component('ag-grid', {
       console.error('Grid container not found.');
       return;
     }
-    if (options.fixedHeader) {
+    if (options.fixed_header) {
       window.addEventListener('scroll', function () {
         const header = document.querySelector('.ag-header');
-        const topbar = document.querySelector('.' + options.topbarClass);
+        const topbar = document.querySelector('.' + options.topbar_class);
         const topbarHeight = (topbar ? topbar.getBoundingClientRect().height : 0) + options.fixedTopOffset;
         const headerPos = (topbar ? topbar.getBoundingClientRect().bottom : 0) + options.fixedHeaderOffset;
 

package/package.json

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