imm-element-ui 2.7.0 → 2.7.1

package/fesm2022/imm-element-ui.mjs

@@ -7394,6 +7394,7 @@ class GridComponent {
         this.autoGroupColumnDef = {
             minWidth: 180,
         };
+        this.columnDefsLoadId = 0;
         this.singleClickEdit.set(this.isMobileOrTabletBrowser());
         this.searchPrmSub = toObservable(this.searchPrm).subscribe((searchPrm) => {
             if (searchPrm.modelName !== undefined) {
@@ -7401,19 +7402,19 @@ class GridComponent {
                 this.searchPrmSub.unsubscribe();
             }
         });
-        effect(async () => {
-            this.columnDefs = await this.setRichValue();
-            this.columnDefs = gridUtils.handleI18nKey(this.toOptions().columnDefs || [], this.i18nService);
-            this.mainField = this.toOptions().mainField;
-            this.modelName = this.toOptions().modelName;
+        effect(() => {
+            const options = this.toOptions();
+            void this.refreshColumnDefs(options);
+            this.mainField = options.mainField;
+            this.modelName = options.modelName;
             if (!this.upsert()?.subsert?.find((v) => v.subModelName === this.modelName)) {
                 this.upsert()?.subsert?.push({
-                    subModelName: this.toOptions().modelName,
-                    fk: this.toOptions().fk,
+                    subModelName: options.modelName,
+                    fk: options.fk,
                     subData: [],
                     maptmp: new Map(),
                     logtmp: new Map(),
-                    reference: this.toOptions().reference,
+                    reference: options.reference,
                 });
             }
             this.subIndex = this.upsert()?.subsert?.findIndex((v) => v.subModelName === this.modelName);
@@ -7425,14 +7426,19 @@ class GridComponent {
             this.getData();
         }, { allowSignalWrites: true });
         effect(() => {
-            if (this.rowData() === undefined)
+            const rowData = this.rowData();
+            if (rowData === undefined)
                 return;
             untracked(() => {
-                if (this.toOptions().rowModelType === 'serverSide' && this.toOptions().serverFunc) {
+                const options = this.toOptions();
+                if (this.hasDynamicSelectDataColumn(options)) {
+                    void this.refreshColumnDefs(options);
+                }
+                if (options.rowModelType === 'serverSide' && options.serverFunc) {
                     return;
                 }
-                this.toOptions().rowModelType = 'clientSide';
-                this.toOptions().clientFunc = () => of({ data: this.rowData(), totalNum: this.rowData()?.length });
+                options.rowModelType = 'clientSide';
+                options.clientFunc = () => of({ data: rowData, totalNum: rowData?.length });
                 setTimeout(() => {
                     this.getClientData(undefined);
                 }, 100);
@@ -7517,34 +7523,54 @@ class GridComponent {
             });
         });
     }
-    async setRichValue() {
-        let col = this.toOptions().columnDefs || [];
+    hasDynamicSelectDataColumn(options = this.toOptions()) {
+        return !!options.columnDefs?.some((item) => item?.hasOwnProperty('selectData') && typeof item.selectData === 'function');
+    }
+    async refreshColumnDefs(options = this.toOptions()) {
+        const loadId = ++this.columnDefsLoadId;
+        const columnDefs = await this.setRichValue(options);
+        if (loadId !== this.columnDefsLoadId) {
+            return;
+        }
+        this.columnDefs = gridUtils.handleI18nKey(columnDefs, this.i18nService);
+        if (this.grid?.api) {
+            this.grid.api.setGridOption('columnDefs', this.columnDefs);
+            this.grid.api.refreshCells({
+                force: true,
+                suppressFlash: true,
+            });
+        }
+    }
+    async setRichValue(options = this.toOptions()) {
+        let col = options.columnDefs || [];
         try {
             const processedCols = await Promise.all(col.map(async (item) => {
-                if (item.hasOwnProperty('fieldId') && (item.cellEditor == 'agRichSelectCellEditor' || item.cellEditor == 'agSelectCellEditor' || item.cellEditor == 'cellEditSelectFieldComponent') && !item.rowGroup) {
+                const nextItem = { ...item };
+                if (nextItem.hasOwnProperty('fieldId') && (nextItem.cellEditor == 'agRichSelectCellEditor' || nextItem.cellEditor == 'agSelectCellEditor' || nextItem.cellEditor == 'cellEditSelectFieldComponent') && !nextItem.rowGroup) {
                     let values = [];
-                    if (item.cellEditorParams && typeof item.cellEditorParams === 'function') {
-                        item.cellEditorParams = item.cellEditorParams() || {};
-                        values = JSON.parse(JSON.stringify(item.cellEditorParams.values || [])) || [];
+                    const rawCellEditorParams = typeof item.cellEditorParams === 'function' ? item.cellEditorParams() || {} : item.cellEditorParams || {};
+                    const cellEditorParams = { ...rawCellEditorParams };
+                    if (cellEditorParams.hasOwnProperty('values')) {
+                        values = cellEditorParams.values || [];
                     }
-                    if ((!item.cellEditorParams || !item.cellEditorParams.hasOwnProperty('values')) && item.hasOwnProperty('selectData') && typeof item.selectData === 'function') {
-                        values = await item.selectData();
+                    if (nextItem.hasOwnProperty('selectData') && typeof nextItem.selectData === 'function') {
+                        values = (await item.selectData()) || [];
                     }
-                    item.cellEditorParams = {
-                        ...(item.cellEditorParams || {}),
+                    nextItem.cellEditorParams = {
+                        ...cellEditorParams,
                         valueListMaxHeight: 200,
                         suppressMultiSelectPillRenderer: true,
                     };
-                    if (item.cellEditorParams.hasOwnProperty('values')) {
-                        values = item.cellEditorParams.values;
+                    if (nextItem.cellEditorParams.hasOwnProperty('values') && !(nextItem.hasOwnProperty('selectData') && typeof nextItem.selectData === 'function')) {
+                        values = nextItem.cellEditorParams.values;
                     }
                     let isString = values.every((item) => typeof item === 'string');
                     if (!isString) {
-                        const optionValueField = item.cellEditorParams.optionValue || 'value';
-                        const optionLabelField = item.cellEditorParams.optionLabel || 'label';
-                        item.cellEditorParams.rawOptions = values;
-                        item.cellEditorParams.values = values.map((item) => item?.[optionValueField]);
-                        item.valueFormatter = (params) => {
+                        const optionValueField = nextItem.cellEditorParams.optionValue || 'value';
+                        const optionLabelField = nextItem.cellEditorParams.optionLabel || 'label';
+                        nextItem.cellEditorParams.rawOptions = values;
+                        nextItem.cellEditorParams.values = values.map((item) => item?.[optionValueField]);
+                        nextItem.valueFormatter = (params) => {
                             const options = params.colDef.cellEditorParams.rawOptions;
                             const valueField = params.colDef.cellEditorParams.optionValue || 'value';
                             const labelField = params.colDef.cellEditorParams.optionLabel || 'label';
@@ -7566,14 +7592,14 @@ class GridComponent {
                                 return option.length > 0 ? option.map((v) => v?.[labelField]) : params.value;
                             }
                         };
-                        item.valueGetter = (params) => {
+                        nextItem.valueGetter = (params) => {
                             // console.log('pamrams----',params,item.field)
-                            if ((item.cellEditor == 'agRichSelectCellEditor' || item.cellEditor == 'cellEditSelectFieldComponent') && params.data && params.data.hasOwnProperty(item.field)) {
-                                return typeof params.data[item.field] == 'string' ? params.data[item.field].split(',') : params.data[item.field];
+                            if ((nextItem.cellEditor == 'agRichSelectCellEditor' || nextItem.cellEditor == 'cellEditSelectFieldComponent') && params.data && params.data.hasOwnProperty(nextItem.field)) {
+                                return typeof params.data[nextItem.field] == 'string' ? params.data[nextItem.field].split(',') : params.data[nextItem.field];
                             }
-                            return params.data ? params.data[item.field] : '';
+                            return params.data ? params.data[nextItem.field] : '';
                         };
-                        item.valueParser = (params) => {
+                        nextItem.valueParser = (params) => {
                             // console.log('params----',params)
                             const options = params.colDef.cellEditorParams.rawOptions;
                             const valueField = params.colDef.cellEditorParams.optionValue || 'value';
@@ -7583,16 +7609,16 @@ class GridComponent {
                         };
                     }
                     else {
-                        item.cellEditorParams.values = values;
-                        item.valueGetter = (params) => {
-                            if ((item.cellEditor == 'agRichSelectCellEditor' || item.cellEditor == 'cellEditSelectFieldComponent') && params.data && params.data.hasOwnProperty(item.field)) {
-                                return typeof params.data[item.field] == 'string' ? params.data[item.field].split(',') : params.data[item.field];
+                        nextItem.cellEditorParams.values = values;
+                        nextItem.valueGetter = (params) => {
+                            if ((nextItem.cellEditor == 'agRichSelectCellEditor' || nextItem.cellEditor == 'cellEditSelectFieldComponent') && params.data && params.data.hasOwnProperty(nextItem.field)) {
+                                return typeof params.data[nextItem.field] == 'string' ? params.data[nextItem.field].split(',') : params.data[nextItem.field];
                             }
-                            return params.data ? params.data[item.field] : '';
+                            return params.data ? params.data[nextItem.field] : '';
                         };
                     }
                 }
-                return item;
+                return nextItem;
             }));
             return processedCols;
         }
@@ -11186,7 +11212,7 @@ class PageFormComponent extends AmComponent {
         }
         this.leftPanelInitialized = true;
         this.leftPanelInitializedMode = this.getLeftPanelMode();
-        this.baseGridListSnapshot = this.gridList().map((item) => item);
+        this.baseGridListSnapshot = deepClone(this.gridList(), this);
         const dataSource = this.getPanelDataSource();
         this.runLeftPanelEvent('onInit');
         const items = await this.loadLeftPanelItems(dataSource);