@platforma-sdk/ui-vue 1.7.17 → 1.7.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.7.17",
+  "version": "1.7.20",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -35,7 +35,7 @@
     "@ag-grid-enterprise/menu": "^32.3.0",
     "@ag-grid-enterprise/excel-export": "^32.3.0",
     "@milaboratories/uikit": "^1.2.26",
-    "@platforma-sdk/model": "^1.7.16"
+    "@platforma-sdk/model": "^1.7.20"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
@@ -58,7 +58,7 @@
     "vue-tsc": "^2.1.6",
     "zod": "^3.23.8",
     "yarpm": "^1.2.0",
-    "@milaboratories/helpers": "^1.6.5"
+    "@milaboratories/helpers": "^1.6.6"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -1,7 +1,15 @@
 <script lang="ts" setup>
 import './ag-theme.css';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import type { GridApi, GridOptions, GridReadyEvent, ManagedGridOptionKey, ManagedGridOptions, SortState } from '@ag-grid-community/core';
+import type {
+  GridApi,
+  GridOptions,
+  GridReadyEvent,
+  ManagedGridOptionKey,
+  ManagedGridOptions,
+  SortState,
+  StateUpdatedEvent,
+} from '@ag-grid-community/core';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { AgGridVue } from '@ag-grid-community/vue3';
@@ -225,13 +233,7 @@ const gridOptions = ref<GridOptions>({
   animateRows: false,
   suppressColumnMoveAnimation: true,
   cellSelection: true,
-  initialState: tableState.value.gridState,
-  onStateUpdated: (event) => {
-    gridState.value = {
-      columnOrder: event.state.columnOrder,
-      sort: event.state.sort,
-    };
-  },
+  initialState: gridState.value,
   autoSizeStrategy: { type: 'fitCellContents' },
   onRowDataUpdated: (event) => {
     event.api.autoSizeAllColumns();
@@ -239,6 +241,8 @@ const gridOptions = ref<GridOptions>({
   rowModelType: 'clientSide',
   maxBlocksInCache: 10000,
   cacheBlockSize: 100,
+  serverSideSortAllLevels: true,
+  suppressServerSideFullWidthLoadingRow: true,
   getRowId: (params) => params.data.id,
   loading: true,
   loadingOverlayComponentParams: { notReady: true },
@@ -271,6 +275,22 @@ const onGridReady = (event: GridReadyEvent) => {
     },
   });
 };
+const onStateUpdated = (event: StateUpdatedEvent) => {
+  gridState.value = {
+    columnOrder: event.state.columnOrder,
+    sort: event.state.sort,
+  };
+  gridOptions.value.initialState = gridState.value;
+};
+const onGridPreDestroyed = () => {
+  const state = gridApi.value!.getState();
+  gridState.value = {
+    columnOrder: state.columnOrder,
+    sort: state.sort,
+  };
+  gridOptions.value.initialState = gridState.value;
+  gridApi.value = undefined;
+};
 
 const reloadKey = ref(0);
 watch(
@@ -281,9 +301,21 @@ watch(
     const [gridApi, gridState] = state;
     if (!gridApi) return;
 
-    const selfState = gridApi.getState();
-    if (lodash.isEqual(gridState.columnOrder, selfState.columnOrder) && lodash.isEqual(gridState.sort, selfState.sort)) return;
-
+    const selfFullState = gridApi.getState();
+    const selfState = {
+      columnOrder: selfFullState.columnOrder,
+      sort: selfFullState.sort,
+    };
+    if (lodash.isEqual(gridState, selfState)) return;
+
+    console.log(
+      'reloading; columnOrder changed',
+      !lodash.isEqual(gridState.columnOrder, selfState.columnOrder),
+      'saved',
+      gridState.columnOrder,
+      'current',
+      selfState.columnOrder,
+    );
     gridOptions.value.initialState = gridState;
     ++reloadKey.value;
   },
@@ -292,16 +324,7 @@ watch(
   () => gridOptions.value,
   (options, oldOptions) => {
     if (!oldOptions) return;
-    if (options.rowModelType != oldOptions.rowModelType) {
-      console.log('reloading gridOptions');
-      options.loading = false;
-      options.columnDefs = [];
-      options.rowData = undefined;
-      options.serverSideDatasource = undefined;
-      gridOptions.value = options;
-      gridApi.value = undefined;
-      ++reloadKey.value;
-    }
+    if (options.rowModelType != oldOptions.rowModelType) ++reloadKey.value;
   },
 );
 
@@ -337,8 +360,9 @@ watch(
             columnDefs: [],
           });
         }
-        const options = await updatePFrameGridOptions(gridApi, pfDriver, pTable, sheets);
+        const options = await updatePFrameGridOptions(pfDriver, pTable, sheets);
         return gridApi.updateGridOptions({
+          loading: options.rowModelType !== 'clientSide',
           loadingOverlayComponentParams: { notReady: false },
           ...options,
         });
@@ -357,8 +381,9 @@ watch(
           });
         }
 
-        const options = await updateXsvGridOptions(gridApi, blobDriver, xsvFile.value);
+        const options = await updateXsvGridOptions(blobDriver, xsvFile.value);
         return gridApi.updateGridOptions({
+          loading: true,
           loadingOverlayComponentParams: { notReady: false },
           ...options,
         });
@@ -384,7 +409,14 @@ watch(
         />
       </div>
     </Transition>
-    <AgGridVue class="ap-ag-data-table-grid" :grid-options="gridOptions" @grid-ready="onGridReady" :key="reloadKey" />
+    <AgGridVue
+      class="ap-ag-data-table-grid"
+      :grid-options="gridOptions"
+      :key="reloadKey"
+      @grid-ready="onGridReady"
+      @state-updated="onStateUpdated"
+      @grid-pre-destroyed="onGridPreDestroyed"
+    />
   </div>
 </template>
 

package/src/components/PlAgDataTable/sources/file-source.ts

@@ -1,15 +1,13 @@
-import type { ColDef, GridApi, IDatasource } from '@ag-grid-community/core';
+import type { ColDef, IDatasource } from '@ag-grid-community/core';
 import type { BlobDriver, LocalBlobHandleAndSize, RemoteBlobHandleAndSize } from '@platforma-sdk/model';
 
 export async function updateXsvGridOptions(
-  gridApi: GridApi,
   blobDriver: BlobDriver,
   file: LocalBlobHandleAndSize | RemoteBlobHandleAndSize,
 ): Promise<{
   columnDefs: ColDef[];
   datasource: IDatasource;
 }> {
-  gridApi;
   blobDriver;
   file;
   //blobDriver.getContent(file.handle!)

package/src/components/PlAgDataTable/sources/table-source.ts

@@ -1,4 +1,4 @@
-import type { ColDef, GridApi, IServerSideDatasource, IServerSideGetRowsParams, RowModelType } from '@ag-grid-community/core';
+import type { ColDef, IServerSideDatasource, IServerSideGetRowsParams, RowModelType } from '@ag-grid-community/core';
 import type { AxisId, JoinEntry, PColumnIdAndSpec, PFrameHandle, PObjectId } from '@platforma-sdk/model';
 import {
   type PColumnSpec,
@@ -273,7 +273,6 @@ const isLabelColumn = (col: PTableColumnSpec) => col.type === 'column' && col.sp
  * Calculate GridOptions for p-table data source type
  */
 export async function updatePFrameGridOptions(
-  gridApi: GridApi,
   pfDriver: PFrameDriver,
   pt: PTableHandle,
   sheets: PlDataTableSheet[],
@@ -335,7 +334,8 @@ export async function updatePFrameGridOptions(
       try {
         if (rowCount == 0) {
           params.success({ rowData: [], rowCount });
-          gridApi.showNoRowsOverlay();
+          params.api.showNoRowsOverlay();
+          params.api.setGridOption('loading', false);
           return;
         }
 
@@ -343,6 +343,7 @@ export async function updatePFrameGridOptions(
         if (lastParams && !lodash.isEqual(lastParams.request.sortModel, params.request.sortModel)) {
           lastParams = undefined;
           params.fail();
+          params.api.setGridOption('loading', true);
           return;
         }
         lastParams = params;
@@ -361,9 +362,11 @@ export async function updatePFrameGridOptions(
         }
 
         params.success({ rowData, rowCount });
-        gridApi.autoSizeAllColumns();
+        params.api.autoSizeAllColumns();
+        params.api.setGridOption('loading', false);
       } catch (error: unknown) {
         params.fail();
+        params.api.setGridOption('loading', true);
       }
     },
   } satisfies IServerSideDatasource;