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

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

@@ -15,7 +15,7 @@ import { register, PROP_BOOLEAN, PROP_STRING, PROP_NUMBER, PROP_ANY, StylableCom
 import { PaginationComponent } from '@wm/components/data/pagination';
 import * as i3 from '@wm/components/data/list';
 import { debounceTime } from 'rxjs/operators';
-import { isEmpty, floor, debounce, isUndefined, isNaN as isNaN$1, extend, pullAllWith, isEqual, get, remove, findIndex, some, set, forEach, isArray, isObject, indexOf, keys, find, toNumber, includes, split, startsWith, omitBy, values, map, parseInt as parseInt$1, last, toString, isNull, filter, range, endsWith, toLower, head, orderBy, round, sum, max, min, mean, cloneDeep } from 'lodash-es';
+import { get, isEmpty, floor, debounce, isUndefined, isNaN as isNaN$1, extend, pullAllWith, isEqual, remove, findIndex, some, set, forEach, isArray, isObject, indexOf, keys, find, toNumber, includes, split, startsWith, omitBy, values, map, parseInt as parseInt$1, last, toString, isNull, filter, range, endsWith, toLower, head, orderBy, round, sum, max, min, mean, cloneDeep } from 'lodash-es';
 import * as i6 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import * as momentLib from 'moment';
@@ -96,6 +96,8 @@ const exportIconMapping = {
     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'];
@@ -119,6 +121,19 @@ const isInputBodyWrapper = target => {
 };
 class TableComponent extends StylableComponent {
     static { this.initializeProps = registerProps$5(); }
+    /** wm.Variable + inline or quickedit (editmode is string from markup; normalize case). */
+    isModelVariableInlineOrQuickEdit() {
+        if (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
@@ -186,7 +201,14 @@ class TableComponent extends StylableComponent {
                     console.warn('Error in beforedatarender event callback, continuing with table rendering:', error);
                 }
             }
-            this.setDataGridOption('data', getClonedObject(this._gridData));
+            if (this.shouldSoftRefreshAfterModelVarRowSave()) {
+                const clonedData = getClonedObject(this._gridData);
+                this.gridOptions.data = clonedData;
+                this.callDataGridMethod('softRefreshData', clonedData);
+            }
+            else {
+                this.setDataGridOption('data', getClonedObject(this._gridData));
+            }
         }
     }
     get gridData() {
@@ -239,6 +261,8 @@ class TableComponent extends StylableComponent {
         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 Subject();
@@ -314,10 +338,14 @@ class TableComponent extends StylableComponent {
             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: '',
@@ -577,10 +605,24 @@ class TableComponent extends StylableComponent {
                 this.prevData = 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;
+                }
                 muteWatchers();
-                this.updateRecord(extend({}, options, { row, 'prevData': options.rowindex ? options.rowindex : this.prevData, 'event': e, 'callBack': callBack }));
+                const v = get(this.datasource, 'category') === 'wm.Variable' && options && options.rowindex != null;
+                this.updateRecord(extend({}, options, { row, prevData: v ? options.rowindex : this.prevData, event: e, callBack }));
                 setTimeout(() => {
                     unMuteWatchers();
+                    if (isModelVarInlineOrQuick) {
+                        setTimeout(() => {
+                            this._isInlineEditSave = false;
+                            this._modelVarEditSoftRefreshActiveUntil = 0;
+                        }, 520);
+                    }
                 }, 10);
             },
             onBeforeRowUpdate: (row, e, options) => {
@@ -653,11 +695,67 @@ class TableComponent extends StylableComponent {
                 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) => {
@@ -1082,7 +1180,8 @@ class TableComponent extends StylableComponent {
         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;
@@ -1359,6 +1458,8 @@ class TableComponent extends StylableComponent {
         }
     }
     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
@@ -1512,6 +1613,7 @@ class TableComponent extends StylableComponent {
         row.$isLast = this.gridData.length === row.$index;
         delete row.$$index;
         delete row.$$pk;
+        delete row.$$wmSourceListIndex;
         return row;
     }
     handleLoading(data) {
@@ -1611,10 +1713,13 @@ class TableComponent extends StylableComponent {
     }
     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 (isDefined && (!isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
+        if (isDefined(newVal) && (!isEqual(newVal, this.gridOptions[optionName]) || forceSet)) {
             option[optionName] = newVal;
             this.datagridElement.datatable('option', option);
             this.gridOptions[optionName] = newVal;
@@ -1753,6 +1858,14 @@ class TableComponent extends StylableComponent {
         // Apply filter and sort, if data is refreshed through Refresh data method
         if (!this.isNavigationEnabled() && this._isClientSearch) {
             data = getClonedObject(serviceData);
+            if (isObject(data) && !isArray(data)) {
+                data = [data];
+            }
+            if (get(this.datasource, 'category') === 'wm.Variable' && 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;
@@ -2049,13 +2162,48 @@ class TableComponent extends StylableComponent {
             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 (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);
@@ -2090,17 +2238,22 @@ class TableComponent extends StylableComponent {
     setDefaultPageSize(nv) {
         let widgetState = this.statePersistence.getWidgetState(this);
         if (this.gridOptions.allowpagesizechange) {
-            if (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 (get(widgetState, 'pagesize')) {
                 nv = 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];
             }
         }
@@ -2126,14 +2279,43 @@ class TableComponent extends StylableComponent {
         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 => !isNaN$1(v))
+            .sort((a, b) => a - b);
     }
     onDataSourceChange() {
         this.fieldDefs.forEach(col => {
@@ -2261,6 +2443,11 @@ class TableComponent extends StylableComponent {
             if (isObject(data) && !isArray(data)) {
                 data = [data];
             }
+            if (get(this.datasource, 'category') === 'wm.Variable' && 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;
@@ -2688,7 +2875,11 @@ class TableCUDDirective {
         if (dataSource.execute(DataSource.Operation.SUPPORTS_CRUD) || !dataSource.execute(DataSource.Operation.IS_API_AWARE) || dataSource.category === 'wm.CrudVariable') {
             if (!dataSource.execute(DataSource.Operation.IS_API_AWARE)) {
                 const extraOptions = this.generatePath(this.table.binddataset);
-                dataSource.execute(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(DataSource.Operation.SET_ITEM, { prevItem: options.prevData, item, path: extraOptions.path, parentIndex: extraOptions.index });
                 this.updateSuccessHandler(options.row, options);
                 return;
             }
@@ -2771,7 +2962,14 @@ class TableCUDDirective {
         if (dataSource.execute(DataSource.Operation.SUPPORTS_CRUD) || !dataSource.execute(DataSource.Operation.IS_API_AWARE) || this.table._isDependent || dataSource.category === 'wm.CrudVariable') {
             if (!dataSource.execute(DataSource.Operation.IS_API_AWARE)) {
                 const extraOptions = this.generatePath(this.table.binddataset);
-                dataSource.execute(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(DataSource.Operation.REMOVE_ITEM, { item, path: extraOptions.path, parentIndex: extraOptions.index });
                 this.deleteSuccessHandler(options.row, undefined, options.evt, options.callBack);
                 return;
             }
@@ -3312,6 +3510,11 @@ class TableFilterSortDirective {
         if (isObject(data) && !isArray(data)) {
             data = [data];
         }
+        if (get(this.table.datasource, 'category') === 'wm.Variable' && 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);
@@ -4525,6 +4728,11 @@ class TableColumnDirective extends BaseComponent {
             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);