@wavemaker/app-ng-runtime 11.15.4-rc.250 → 11.15.5-rc.253

package/components/data/table/bundles/index.umd.js

@@ -106,6 +106,8 @@
         CSV: 'fa fa-file-text-o'
     };
     const ROW_OPS_FIELD = 'rowOperations';
+    /** Same default as `table.props.ts` — used when `pagesizeoptions` cannot be parsed to integers. */
+    const DEFAULT_PAGE_SIZE_OPTIONS = '5,10,20,50,100';
     const noop = () => { };
     const isInputBodyWrapper = target => {
         const classes = ['.dropdown-menu', '.uib-typeahead-match', '.modal-dialog', '.toast'];
@@ -129,6 +131,19 @@
     };
     class TableComponent extends i4.StylableComponent {
         static { this.initializeProps = registerProps$5(); }
+        /** wm.Variable + inline or quickedit (editmode is string from markup; normalize case). */
+        isModelVariableInlineOrQuickEdit() {
+            if (lodashEs.get(this.datasource, 'category') !== 'wm.Variable') {
+                return false;
+            }
+            const em = String(this.editmode || '').toLowerCase();
+            return em === 'quickedit' || em === 'inline';
+        }
+        /** True while an inline/quickedit row save is updating the grid (incl. delayed navigator emit). */
+        shouldSoftRefreshAfterModelVarRowSave() {
+            return this.isModelVariableInlineOrQuickEdit()
+                && (this._isInlineEditSave || this._modelVarEditSoftRefreshActiveUntil > Date.now());
+        }
         set gridData(newValue) {
             this.isDataLoading = false;
             // Fix for [WMS-24012]: hide no datafound msg when variableInflight is true and dataset is empty
@@ -196,7 +211,14 @@
                         console.warn('Error in beforedatarender event callback, continuing with table rendering:', error);
                     }
                 }
-                this.setDataGridOption('data', i2.getClonedObject(this._gridData));
+                if (this.shouldSoftRefreshAfterModelVarRowSave()) {
+                    const clonedData = i2.getClonedObject(this._gridData);
+                    this.gridOptions.data = clonedData;
+                    this.callDataGridMethod('softRefreshData', clonedData);
+                }
+                else {
+                    this.setDataGridOption('data', i2.getClonedObject(this._gridData));
+                }
             }
         }
         get gridData() {
@@ -249,6 +271,8 @@
             this.formfields = {};
             this.enablesort = true;
             this.showviewlessbutton = false;
+            /** Covers async navigator/dataset updates after inline/quickedit save (wm.Variable). */
+            this._modelVarEditSoftRefreshActiveUntil = 0;
             this.primaryKey = [];
             this.selectedItems = [];
             this.selectedItemChange = new rxjs.Subject();
@@ -324,10 +348,14 @@
                 showviewlessbutton: false,
                 ondemandmessage: '',
                 allowpagesizechange: false,
-                pagesizeoptions: '',
+                pagesizeoptions: DEFAULT_PAGE_SIZE_OPTIONS,
                 viewlessmessage: '',
                 loadingdatamsg: '',
                 isNextPageData: undefined,
+                enableSort: true,
+                multiselect: false,
+                showRadioColumn: false,
+                enableColumnSelection: false,
                 multiselecttitle: '',
                 multiselectarialabel: '',
                 radioselecttitle: '',
@@ -587,10 +615,24 @@
                     this.prevData = i2.getClonedObject(row);
                 },
                 afterRowUpdate: (row, e, callBack, options) => {
+                    const isModelVarInlineOrQuick = this.isModelVariableInlineOrQuickEdit();
+                    if (isModelVarInlineOrQuick) {
+                        this._isInlineEditSave = true;
+                        // Inline save triggers navigatePage / dataset emit asynchronously; a
+                        // microtask timeout cleared the flag before gridData ran → full rerender.
+                        this._modelVarEditSoftRefreshActiveUntil = Date.now() + 550;
+                    }
                     i2.muteWatchers();
-                    this.updateRecord(lodashEs.extend({}, options, { row, 'prevData': options.rowindex ? options.rowindex : this.prevData, 'event': e, 'callBack': callBack }));
+                    const v = lodashEs.get(this.datasource, 'category') === 'wm.Variable' && options && options.rowindex != null;
+                    this.updateRecord(lodashEs.extend({}, options, { row, prevData: v ? options.rowindex : this.prevData, event: e, callBack }));
                     setTimeout(() => {
                         i2.unMuteWatchers();
+                        if (isModelVarInlineOrQuick) {
+                            setTimeout(() => {
+                                this._isInlineEditSave = false;
+                                this._modelVarEditSoftRefreshActiveUntil = 0;
+                            }, 520);
+                        }
                     }, 10);
                 },
                 onBeforeRowUpdate: (row, e, options) => {
@@ -663,11 +705,67 @@
                     this.customExprCompiledTl = {};
                     this.customExprCompiledSummaryTl = {};
                 },
+                updateCustomExpressionContexts: (preparedData) => {
+                    const viewCount = this.customExprViewRef.length;
+                    for (let i = 0; i < viewCount; i++) {
+                        const viewRef = this.customExprViewRef.get(i);
+                        if (!viewRef || !viewRef.context || !viewRef.context.row || viewRef.context.row.$index === undefined) {
+                            continue;
+                        }
+                        const existingRow = viewRef.context.row;
+                        const rowIndex = existingRow.$index - 1;
+                        const dataRow = preparedData[rowIndex];
+                        if (!dataRow) {
+                            continue;
+                        }
+                        Object.keys(dataRow).forEach(key => {
+                            if (key !== '$$index' && key !== '$$pk') {
+                                existingRow[key] = dataRow[key];
+                            }
+                        });
+                        existingRow.$isFirst = existingRow.$index === 1;
+                        existingRow.$isLast = this.gridData.length === existingRow.$index;
+                        viewRef.markForCheck();
+                    }
+                },
                 clearRowDetailExpression: () => {
                     this.rowDetailViewRef.clear();
                     this.rowDefMap = {};
                     this.rowDefInstances = {};
                 },
+                invalidateRowDetailCache: (preparedData) => {
+                    this.rowDefMap = {};
+                    this.rowDefInstances = {};
+                    // Update existing row detail view contexts in-place so currently
+                    // expanded partials pick up the new row data via change detection.
+                    const viewCount = this.rowDetailViewRef.length;
+                    for (let i = 0; i < viewCount; i++) {
+                        const viewRef = this.rowDetailViewRef.get(i);
+                        if (!viewRef || !viewRef.context || !viewRef.context.row) {
+                            continue;
+                        }
+                        const existingRow = viewRef.context.row;
+                        const rowIndex = existingRow.$index - 1;
+                        const dataRow = preparedData[rowIndex];
+                        if (!dataRow) {
+                            continue;
+                        }
+                        Object.keys(dataRow).forEach(key => {
+                            if (key !== '$$index' && key !== '$$pk') {
+                                existingRow[key] = dataRow[key];
+                            }
+                        });
+                        viewRef.markForCheck();
+                    }
+                },
+                refreshSelectedItems: () => {
+                    const selectedRows = this.callDataGridMethod('getSelectedRows');
+                    if (selectedRows.length) {
+                        this.items.length = 0;
+                        selectedRows.forEach(row => this.items.push(row));
+                        this.selectedItemChange.next(selectedRows);
+                    }
+                },
                 generateCustomExpressions: (rowData, index, summaryRow) => {
                     const row = this.getClonedRowObject(rowData);
                     const compileTemplate = (tmpl) => {
@@ -1092,7 +1190,8 @@
             this.gridOptions.ondemandmessage = this.ondemandmessage;
             this.gridOptions.viewlessmessage = this.viewlessmessage;
             this.gridOptions.loadingdatamsg = this.loadingdatamsg;
-            this.gridOptions.pagesizeoptions = this.pagesizeoptions;
+            this.gridOptions.pagesizeoptions = this.sanitizeCommaSeparatedIntegers(this.pagesizeoptions);
+            this.pagesizeoptions = this.gridOptions.pagesizeoptions;
             this.gridOptions.multiselecttitle = this.multiselecttitle;
             this.gridOptions.multiselectarialabel = this.multiselectarialabel;
             this.gridOptions.radioselecttitle = this.radioselecttitle;
@@ -1369,6 +1468,8 @@
             }
         }
         ngOnDestroy() {
+            this._modelVarEditSoftRefreshActiveUntil = 0;
+            this._isInlineEditSave = false;
             // MEMORY LEAK FIX: Remove document click listener
             document.removeEventListener('click', this.documentClickBind);
             // MEMORY LEAK FIX: Unsubscribe from navigator watches
@@ -1522,6 +1623,7 @@
             row.$isLast = this.gridData.length === row.$index;
             delete row.$$index;
             delete row.$$pk;
+            delete row.$$wmSourceListIndex;
             return row;
         }
         handleLoading(data) {
@@ -1621,10 +1723,13 @@
         }
         setDataGridOption(optionName, newVal, forceSet = false) {
             if (!this.datagridElement || !this.datagridElement.datatable || !this.datagridElement.datatable('instance')) {
+                // Bound properties can update before the jQuery widget is initialized.
+                // Keep gridOptions in sync so the initial datatable() call sees the latest value.
+                this.gridOptions[optionName] = newVal;
                 return;
             }
             const option = {};
-            if (i2.isDefined && (!lodashEs.isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
+            if (i2.isDefined(newVal) && (!lodashEs.isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
                 option[optionName] = newVal;
                 this.datagridElement.datatable('option', option);
                 this.gridOptions[optionName] = newVal;
@@ -1763,6 +1868,14 @@
             // Apply filter and sort, if data is refreshed through Refresh data method
             if (!this.isNavigationEnabled() && this._isClientSearch) {
                 data = i2.getClonedObject(serviceData);
+                if (lodashEs.isObject(data) && !lodashEs.isArray(data)) {
+                    data = [data];
+                }
+                if (lodashEs.get(this.datasource, 'category') === 'wm.Variable' && lodashEs.isArray(data)) {
+                    for (let i = 0; i < data.length; i++) {
+                        data[i].$$wmSourceListIndex = i;
+                    }
+                }
                 data = this.getSearchResult(data, this.filterInfo);
                 data = this.getSortResult(data, this.sortInfo);
                 this.serverData = data;
@@ -2059,13 +2172,48 @@
                 case 'allowpagesizechange':
                     this.gridOptions.allowpagesizechange = nv;
                     this.allowpagesizechange = nv;
+                    this.dataNavigator.allowpagesizechange = nv;
+                    if (nv) {
+                        const pagesizeoptions = this.sanitizeCommaSeparatedIntegers(this.pagesizeoptions);
+                        this.gridOptions.pagesizeoptions = pagesizeoptions;
+                        this.pagesizeoptions = pagesizeoptions;
+                        this.prevPagesizeoptions = '';
+                        this.setDefaultPageSize(this.pagesize || this.actualPageSize || this.gridOptions.getPageSize());
+                    }
                     break;
                 case 'pagesizeoptions':
                     this.prevPagesizeoptions = this.sanitizeCommaSeparatedIntegers(ov);
                     this.gridOptions.pagesizeoptions = this.sanitizeCommaSeparatedIntegers(nv);
-                    this.pagesizeoptions = this.sanitizeCommaSeparatedIntegers(nv);
-                    if (this.allowpagesizechange)
-                        this.setDefaultPageSize(nv);
+                    this.pagesizeoptions = this.gridOptions.pagesizeoptions;
+                    if (this.allowpagesizechange) {
+                        this.setDefaultPageSize(this.pagesize || this.actualPageSize || this.gridOptions.getPageSize());
+                        if (lodashEs.get(this.datasource, 'category') !== 'wm.Variable') {
+                            this.dataNavigator.onPageSizeChange(undefined, this.dataNavigator.pageSizeOptions[0] || this.pagesize);
+                        }
+                    }
+                    break;
+                case 'showheader':
+                    this.setDataGridOption('showHeader', nv);
+                    break;
+                case 'showheader':
+                    this.setDataGridOption('showHeader', nv);
+                    break;
+                case 'enablesort':
+                    this.setDataGridOption('enableSort', nv);
+                    break;
+                case 'enablecolumnselection':
+                    //   this.enablecolumnselection = nv;
+                    //this.gridOptions.enableColumnSelection = nv;
+                    this.setDataGridOption('enableColumnSelection', nv);
+                    break;
+                case 'isrowselectable':
+                    this.setDataGridOption('isrowselectable', nv);
+                    break;
+                case 'multiselect':
+                    this.setDataGridOption('multiselect', nv);
+                    break;
+                case 'radioselect':
+                    this.setDataGridOption('showRadioColumn', nv);
                     break;
                 case 'multiselecttitle':
                     this.setDataGridOption('multiselecttitle', nv);
@@ -2100,17 +2248,22 @@
         setDefaultPageSize(nv) {
             let widgetState = this.statePersistence.getWidgetState(this);
             if (this.gridOptions.allowpagesizechange) {
-                if (lodashEs.get(widgetState, 'pagesize')) {
+                const normalizedPageSizeOptions = this.getNormalizedPageSizeOptionsArray(this.pagesizeoptions);
+                if (this.isPageSizeOptionsChanged() && normalizedPageSizeOptions.length) { // if pagesize options are changed, then update the pagesize without checking for statepersistence
+                    nv = normalizedPageSizeOptions[0];
+                    this.pagesize = nv;
+                }
+                else if (lodashEs.get(widgetState, 'pagesize')) {
                     nv = lodashEs.get(widgetState, 'pagesize');
                     this.pagesize = nv; // updating the default pagesize to user selected pagesize
                 }
-                else if (this.pagesizeoptions) {
-                    nv = this.pagesizeoptions?.split(',').map(Number).sort((a, b) => a - b)[0];
+                else if (this.pagesizeoptions && normalizedPageSizeOptions.length) {
+                    nv = normalizedPageSizeOptions[0];
                     this.pagesize = nv;
                 }
                 this.updatedPageSize = nv;
                 if (this.isPageSizeOptionsChanged()) {
-                    this.dataNavigator.defaultPageSizeOptions = this.pagesizeoptions?.split(',').map(Number).sort((a, b) => a - b) || [];
+                    this.dataNavigator.defaultPageSizeOptions = normalizedPageSizeOptions;
                     this.dataNavigator.pageSizeOptions = [...this.dataNavigator.defaultPageSizeOptions];
                 }
             }
@@ -2136,14 +2289,43 @@
             this.dataNavigator.onPageSizeChange(undefined, pagesize);
         }
         sanitizeCommaSeparatedIntegers(input) {
-            if (!input)
-                return "";
-            const uniqueNumbers = Array.from(new Set(input
-                .split(",")
-                .map(v => v.trim())
+            if (input === null || input === undefined || input === '') {
+                return DEFAULT_PAGE_SIZE_OPTIONS;
+            }
+            let arr;
+            if (Array.isArray(input)) {
+                arr = input;
+            }
+            else if (typeof input === "string") {
+                const trimmed = input.trim();
+                if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+                    try {
+                        arr = JSON.parse(trimmed);
+                    }
+                    catch {
+                        arr = [];
+                    }
+                }
+                else {
+                    arr = trimmed.split(",");
+                }
+            }
+            else {
+                return DEFAULT_PAGE_SIZE_OPTIONS;
+            }
+            const uniqueNumbers = Array.from(new Set(arr
+                .map(v => String(v).trim())
                 .filter(v => /^-?\d+$/.test(v))
                 .map(v => Math.abs(parseInt(v, 10)))));
-            return uniqueNumbers.join(",");
+            const joined = uniqueNumbers.join(",");
+            return joined || DEFAULT_PAGE_SIZE_OPTIONS;
+        }
+        getNormalizedPageSizeOptionsArray(input) {
+            return this.sanitizeCommaSeparatedIntegers(input)
+                .split(',')
+                .map(Number)
+                .filter(v => !lodashEs.isNaN(v))
+                .sort((a, b) => a - b);
         }
         onDataSourceChange() {
             this.fieldDefs.forEach(col => {
@@ -2271,6 +2453,11 @@
                 if (lodashEs.isObject(data) && !lodashEs.isArray(data)) {
                     data = [data];
                 }
+                if (lodashEs.get(this.datasource, 'category') === 'wm.Variable' && lodashEs.isArray(data)) {
+                    for (let i = 0; i < data.length; i++) {
+                        data[i].$$wmSourceListIndex = i;
+                    }
+                }
                 data = this.getSearchResult(data, this.filterInfo);
                 data = this.getSortResult(data, this.sortInfo);
                 return data;
@@ -2698,7 +2885,11 @@
             if (dataSource.execute(i2.DataSource.Operation.SUPPORTS_CRUD) || !dataSource.execute(i2.DataSource.Operation.IS_API_AWARE) || dataSource.category === 'wm.CrudVariable') {
                 if (!dataSource.execute(i2.DataSource.Operation.IS_API_AWARE)) {
                     const extraOptions = this.generatePath(this.table.binddataset);
-                    dataSource.execute(i2.DataSource.Operation.SET_ITEM, { prevItem: options.prevData, item: options.row, path: extraOptions.path, parentIndex: extraOptions.index });
+                    const item = options.row;
+                    if (dataSource.category === 'wm.Variable' && item) {
+                        delete item['$$wmSourceListIndex'];
+                    }
+                    dataSource.execute(i2.DataSource.Operation.SET_ITEM, { prevItem: options.prevData, item, path: extraOptions.path, parentIndex: extraOptions.index });
                     this.updateSuccessHandler(options.row, options);
                     return;
                 }
@@ -2781,7 +2972,14 @@
             if (dataSource.execute(i2.DataSource.Operation.SUPPORTS_CRUD) || !dataSource.execute(i2.DataSource.Operation.IS_API_AWARE) || this.table._isDependent || dataSource.category === 'wm.CrudVariable') {
                 if (!dataSource.execute(i2.DataSource.Operation.IS_API_AWARE)) {
                     const extraOptions = this.generatePath(this.table.binddataset);
-                    dataSource.execute(i2.DataSource.Operation.REMOVE_ITEM, { item: options.row, path: extraOptions.path, parentIndex: extraOptions.index });
+                    let item = options.row;
+                    if (dataSource.category === 'wm.Variable' && options.rowindex != null) {
+                        item = options.rowindex;
+                    }
+                    else if (dataSource.category === 'wm.Variable' && item) {
+                        delete item['$$wmSourceListIndex'];
+                    }
+                    dataSource.execute(i2.DataSource.Operation.REMOVE_ITEM, { item, path: extraOptions.path, parentIndex: extraOptions.index });
                     this.deleteSuccessHandler(options.row, undefined, options.evt, options.callBack);
                     return;
                 }
@@ -3321,6 +3519,11 @@
             if (lodashEs.isObject(data) && !lodashEs.isArray(data)) {
                 data = [data];
             }
+            if (lodashEs.get(this.table.datasource, 'category') === 'wm.Variable' && lodashEs.isArray(data)) {
+                for (let i = 0; i < data.length; i++) {
+                    data[i].$$wmSourceListIndex = i;
+                }
+            }
             /*Both the functions return same 'data' if arguments are undefined*/
             data = this.getSearchResult(data, this.table.filterInfo);
             data = this.getSortResult(data, this.table.sortInfo);
@@ -4534,6 +4737,11 @@
                 case 'showinfilter':
                     this.showinfilter = nv;
                     break;
+                case 'sortable':
+                    if (this.table) {
+                        this.table.callDataGridMethod('refreshSortHeader');
+                    }
+                    break;
                 default:
                     if (inlineWidgetProps.includes(key)) {
                         this.setInlineWidgetProp('inlineInstance', key, nv);