@wavemaker/app-ng-runtime 11.14.1-1.6289 → 11.14.1-3.6306

package/components/data/table/fesm2022/index.mjs

@@ -176,8 +176,15 @@ class TableComponent extends StylableComponent {
                 this.setDataGridOption('colDefs', getClonedObject(this.fieldDefs));
             }
             // If data and colDefs are present, call on before data render event
+            // Note: Errors in beforedatarender should not prevent table rendering
             if (!this.isdynamictable && !isEmpty(newValue) && gridOptions.colDefs.length) {
-                this.invokeEventCallback('beforedatarender', { $data: this._gridData, $columns: this.columns, data: this._gridData, columns: this.columns });
+                try {
+                    this.invokeEventCallback('beforedatarender', { $data: this._gridData, $columns: this.columns, data: this._gridData, columns: this.columns });
+                }
+                catch (error) {
+                    // Log error but continue with rendering - beforedatarender errors should not block table rendering
+                    console.warn('Error in beforedatarender event callback, continuing with table rendering:', error);
+                }
             }
             this.setDataGridOption('data', getClonedObject(this._gridData));
         }
@@ -570,7 +577,7 @@ class TableComponent extends StylableComponent {
                 this.prevData = getClonedObject(row);
             },
             afterRowUpdate: (row, e, callBack, options) => {
-                this.updateRecord(extend({}, options, { row, 'prevData': this.prevData, 'event': e, 'callBack': callBack }));
+                this.updateRecord(extend({}, options, { row, 'prevData': options.rowindex ? options.rowindex : this.prevData, 'event': e, 'callBack': callBack }));
             },
             onBeforeRowUpdate: (row, e, options) => {
                 return this.invokeEventCallback('beforerowupdate', { $event: e, $data: row, row, options: options });
@@ -1224,6 +1231,10 @@ class TableComponent extends StylableComponent {
         return this.actualPageSize || 5;
     }
     watchVariableDataSet(newVal) {
+        // Guard against component destruction
+        if (this.isDestroyed) {
+            return;
+        }
         let result;
         // Check for Variable filters if applied
         if (this.gridOptions.isNavTypeScrollOrOndemand()) {
@@ -1281,6 +1292,12 @@ class TableComponent extends StylableComponent {
         }
         /*Return if data is invalid.*/
         if (!this.isDataValid()) {
+            // If data is invalid and variableInflight is still true, clear loading state
+            // This prevents tables from getting stuck in loading when data is invalid
+            if (this.variableInflight) {
+                this.variableInflight = false;
+                this.setGridData([]);
+            }
             return;
         }
         // If value is empty or in studio mode, dont enable the navigation
@@ -1308,7 +1325,13 @@ class TableComponent extends StylableComponent {
         // @ts-ignore
         if (!isObject(newVal) || newVal === '' || (newVal && newVal.dataValue === '')) {
             if (!this.variableInflight) {
-                // If variable has finished loading and resultSet is empty, ender empty data
+                // If variable has finished loading and resultSet is empty, render empty data
+                this.setGridData([]);
+            }
+            else {
+                // If variableInflight is still true but we have invalid/empty data, clear loading state
+                // This handles cases where data never arrives or is invalid
+                this.variableInflight = false;
                 this.setGridData([]);
             }
             return;
@@ -1318,13 +1341,143 @@ class TableComponent extends StylableComponent {
         }
     }
     ngOnDestroy() {
+        // MEMORY LEAK FIX: Remove document click listener
         document.removeEventListener('click', this.documentClickBind);
+        // MEMORY LEAK FIX: Unsubscribe from navigator watches
         if (this.navigatorResultWatch) {
             this.navigatorResultWatch.unsubscribe();
+            this.navigatorResultWatch = null;
         }
         if (this.navigatorMaxResultWatch) {
             this.navigatorMaxResultWatch.unsubscribe();
+            this.navigatorMaxResultWatch = null;
+        }
+        // MEMORY LEAK FIX: Clear all ViewContainerRef embedded views
+        // These hold references to row data, custom expressions, and inline widgets
+        if (this.customExprViewRef) {
+            this.customExprViewRef.clear();
+        }
+        if (this.rowActionsViewRef) {
+            this.rowActionsViewRef.clear();
+        }
+        if (this.filterViewRef) {
+            this.filterViewRef.clear();
+        }
+        if (this.inlineEditViewRef) {
+            this.inlineEditViewRef.clear();
+        }
+        if (this.inlineEditNewViewRef) {
+            this.inlineEditNewViewRef.clear();
         }
+        if (this.rowDetailViewRef) {
+            this.rowDetailViewRef.clear();
+        }
+        if (this.rowExpansionActionViewRef) {
+            this.rowExpansionActionViewRef.clear();
+        }
+        if (this.dynamicTableRef) {
+            this.dynamicTableRef.clear();
+        }
+        // MEMORY LEAK FIX: Clear compiled template caches
+        this.rowActionsCompiledTl = {};
+        this.rowFilterCompliedTl = {};
+        this.inlineCompliedTl = {};
+        this.inlineNewCompliedTl = {};
+        this.customExprCompiledTl = {};
+        this.customExprCompiledSummaryTl = {};
+        this.rowDefInstances = {};
+        this.rowDefMap = {};
+        this.rowExpansionActionTl = {};
+        // MEMORY LEAK FIX: Clear dynamic context
+        if (this._dynamicContext) {
+            Object.keys(this._dynamicContext).forEach(key => {
+                delete this._dynamicContext[key];
+            });
+            this._dynamicContext = null;
+        }
+        // MEMORY LEAK FIX: Clear data arrays
+        this._gridData = [];
+        this.items = [];
+        this.selectedItems = [];
+        this.fieldDefs = [];
+        this.fullFieldDefs = [];
+        this.gridData = [];
+        this.__fullData = null;
+        // MEMORY LEAK FIX: Destroy jQuery datatable widget before clearing gridOptions
+        if (this.datagridElement && this.datagridElement.datatable) {
+            try {
+                this.datagridElement.datatable('destroy');
+            }
+            catch (e) {
+                // Ignore errors during destroy
+            }
+        }
+        // MEMORY LEAK FIX: Clear gridOptions to release all function closures and data
+        // gridOptions holds many closures that capture 'this' and prevent GC
+        if (this.gridOptions) {
+            // Clear data array
+            if (this.gridOptions.data) {
+                this.gridOptions.data = [];
+            }
+            // Clear column definitions
+            if (this.gridOptions.colDefs) {
+                this.gridOptions.colDefs = [];
+            }
+            // Clear row actions
+            if (this.gridOptions.rowActions) {
+                this.gridOptions.rowActions = [];
+            }
+            // Clear header config
+            if (this.gridOptions.headerConfig) {
+                this.gridOptions.headerConfig = [];
+            }
+            // Nullify all function references to break closures
+            Object.keys(this.gridOptions).forEach(key => {
+                if (typeof this.gridOptions[key] === 'function') {
+                    this.gridOptions[key] = null;
+                }
+            });
+        }
+        // MEMORY LEAK FIX: Clear other data structures
+        this.columns = {};
+        this.formfields = {};
+        this.rowFilter = {};
+        this.actions = [];
+        this._actions = { header: [], footer: [] };
+        this.exportOptions = [];
+        this.headerConfig = [];
+        this.rowActions = [];
+        // MEMORY LEAK FIX: Clear all @ContentChildren QueryLists holding template references
+        // These QueryLists hold TemplateRef instances that create circular references to the parent LView
+        if (this.rowActionTmpl) {
+            this.rowActionTmpl.reset([]);
+        }
+        if (this.filterTmpl) {
+            this.filterTmpl.reset([]);
+        }
+        if (this.inlineWidgetTmpl) {
+            this.inlineWidgetTmpl.reset([]);
+        }
+        if (this.inlineWidgetNewTmpl) {
+            this.inlineWidgetNewTmpl.reset([]);
+        }
+        if (this.customExprTmpl) {
+            this.customExprTmpl.reset([]);
+        }
+        if (this.rowExpansionActionTmpl) {
+            this.rowExpansionActionTmpl.reset([]);
+        }
+        // MEMORY LEAK FIX: Clear @ContentChild template reference
+        this.rowExpansionTmpl = null;
+        // MEMORY LEAK FIX: Complete and clear subjects
+        if (this.selectedItemChange) {
+            this.selectedItemChange.complete();
+            this.selectedItemChange = null;
+        }
+        // MEMORY LEAK FIX: Clear ViewChild references
+        this.dataNavigator = null;
+        this._tableElement = null;
+        // console.log("table component destroyed");
         super.ngOnDestroy();
     }
     addRowIndex(row) {
@@ -1395,6 +1548,9 @@ class TableComponent extends StylableComponent {
             if (!key.endsWith('_filter') && ((key.endsWith('_new') && newRow) || (!key.endsWith('_new') && !newRow))) {
                 ctrls[key].setValue('');
                 this.resetFormControl(ctrls[key]);
+                // MEMORY LEAK FIX: Clear validators to release references
+                ctrls[key].clearValidators();
+                ctrls[key].clearAsyncValidators();
             }
         });
     }
@@ -1714,7 +1870,14 @@ class TableComponent extends StylableComponent {
         defaultFieldDefs.forEach(col => {
             this.columns[col.field] = col;
         });
-        this.invokeEventCallback('beforedatarender', { $data: data, $columns: this.columns, data: data, columns: this.columns });
+        // Note: Errors in beforedatarender should not prevent table rendering
+        try {
+            this.invokeEventCallback('beforedatarender', { $data: data, $columns: this.columns, data: data, columns: this.columns });
+        }
+        catch (error) {
+            // Log error but continue with rendering - beforedatarender errors should not block table rendering
+            console.warn('Error in beforedatarender event callback, continuing with table rendering:', error);
+        }
         defaultFieldDefs = [];
         // Apply the changes made by the user
         forEach(this.columns, val => {
@@ -1753,23 +1916,30 @@ class TableComponent extends StylableComponent {
         return sortExp || '';
     }
     onPropertyChange(key, nv, ov) {
+        // Guard against property changes after component destruction
+        if (this.isDestroyed) {
+            return;
+        }
         let enableNewRow, widgetState;
         switch (key) {
             case 'datasource':
                 // Fix for [WMS-23653] when startUpdate is false (request on page load property is unchecked),
                 // then set status msg as "No data found"
-                if (this.allowpagesizechange) {
+                if (this.allowpagesizechange && this.datasource) {
                     this.datasource.maxResults = this.pagesize || this.datasource.maxResults;
                 }
-                if (nv.startUpdate === false) {
+                if (nv && nv.startUpdate === false) {
                     this.variableInflight = false;
                     this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
                 }
-                if (get(this.datasource, 'category') !== 'wm.Variable') {
+                if (this.datasource && get(this.datasource, 'category') !== 'wm.Variable') {
                     this.headerselectall = false;
                     this.setDataGridOption("headerselectall", false);
                 }
-                this.watchVariableDataSet(this.dataset);
+                // Process dataset when datasource is set, especially if dataset was previously skipped
+                if (this.datasource && this.dataset !== undefined) {
+                    this.watchVariableDataSet(this.dataset);
+                }
                 this.onDataSourceChange();
                 break;
             case 'dataset':
@@ -1777,6 +1947,12 @@ class TableComponent extends StylableComponent {
                     this.gridOptions.setIsNextPageData(false);
                 }
                 if (this.binddatasource && !this.datasource) {
+                    // If datasource is not set yet, clear loading state and show no data
+                    // This prevents tables from being stuck in loading state
+                    if (this.variableInflight) {
+                        this.variableInflight = false;
+                        this.callDataGridMethod('setStatus', 'nodata', this.nodatamessage);
+                    }
                     return;
                 }
                 // if table is inside list then table dataset will be set as "item.XXX" and there is no datasource.
@@ -1880,9 +2056,11 @@ class TableComponent extends StylableComponent {
                 this.allowpagesizechange = nv;
                 break;
             case 'pagesizeoptions':
-                this.gridOptions.pagesizeoptions = nv;
-                this.pagesizeoptions = nv;
-                this.setDefaultPageSize(nv);
+                this.prevPagesizeoptions = this.sanitizeCommaSeparatedIntegers(ov);
+                this.gridOptions.pagesizeoptions = this.sanitizeCommaSeparatedIntegers(nv);
+                this.pagesizeoptions = this.sanitizeCommaSeparatedIntegers(nv);
+                if (this.allowpagesizechange)
+                    this.setDefaultPageSize(nv);
                 break;
             case 'multiselecttitle':
                 this.setDataGridOption('multiselecttitle', nv);
@@ -1926,12 +2104,41 @@ class TableComponent extends StylableComponent {
                 this.pagesize = nv;
             }
             this.updatedPageSize = nv;
+            if (this.isPageSizeOptionsChanged()) {
+                this.dataNavigator.defaultPageSizeOptions = this.pagesizeoptions?.split(',').map(Number).sort((a, b) => a - b) || [];
+                this.dataNavigator.pageSizeOptions = [...this.dataNavigator.defaultPageSizeOptions];
+            }
         }
         this.dataNavigator.options = {
             maxResults: nv
         };
         this.dataNavigator.widget.maxResults = nv;
         this.dataNavigator.maxResults = nv;
+        if (this.datasource) {
+            this.datasource.maxResults = this.pagesize || this.datasource.maxResults;
+        }
+    }
+    isPageSizeOptionsChanged() {
+        return !isEqual(this.prevPagesizeoptions, this.pagesizeoptions);
+    }
+    selectPageSize(pagesize) {
+        if (!this.allowpagesizechange && !pagesize)
+            return;
+        if (pagesize < this.dataNavigator.pageSizeOptions[0] || pagesize > this.dataNavigator.pageSizeOptions[this.dataNavigator.pageSizeOptions.length - 1]
+            || !this.dataNavigator.pageSizeOptions.includes(Number(pagesize))) {
+            pagesize = this.dataNavigator.pageSizeOptions[0];
+        }
+        this.dataNavigator.onPageSizeChange(undefined, pagesize);
+    }
+    sanitizeCommaSeparatedIntegers(input) {
+        if (!input)
+            return "";
+        const uniqueNumbers = Array.from(new Set(input
+            .split(",")
+            .map(v => v.trim())
+            .filter(v => /^-?\d+$/.test(v))
+            .map(v => Math.abs(parseInt(v, 10)))));
+        return uniqueNumbers.join(",");
     }
     onDataSourceChange() {
         this.fieldDefs.forEach(col => {