@platforma-sdk/ui-vue 1.18.0 → 1.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -37,8 +37,8 @@
     "@ag-grid-community/theming": "^32.3.3",
     "@ag-grid-enterprise/side-bar": "^32.3.3",
     "@ag-grid-enterprise/column-tool-panel": "^32.3.3",
-    "@milaboratories/uikit": "^2.2.28",
-    "@platforma-sdk/model": "^1.18.0"
+    "@platforma-sdk/model": "^1.18.0",
+    "@milaboratories/uikit": "^2.2.28"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",
@@ -58,8 +58,8 @@
     "yarpm": "^1.2.0",
     "semver": "^7.6.3",
     "@types/semver": "^7.5.8",
-    "@milaboratories/helpers": "^1.6.9",
-    "@milaboratories/eslint-config": "^1.0.0"
+    "@milaboratories/eslint-config": "^1.0.0",
+    "@milaboratories/helpers": "^1.6.9"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/components/PlAgCsvExporter/PlAgCsvExporter.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { GridApi } from '@ag-grid-community/core';
+import { PlBtnGhost, PlMaskIcon24 } from '@milaboratories/uikit';
+import { shallowRef, toRefs } from 'vue';
+import { PlAgDataTableToolsPanelId } from '../PlAgDataTableToolsPanel/PlAgDataTableToolsPanelId';
+import { exportCsv } from './export-csv';
+
+const props = defineProps<{
+  api: GridApi;
+}>();
+const { api: gridApi } = toRefs(props);
+
+const exporting = shallowRef(false);
+const initiateExport = () => {
+  exporting.value = true;
+  exportCsv(gridApi.value, () => exporting.value = false);
+};
+</script>
+
+<template>
+  <div>
+    <Teleport :to="`#${PlAgDataTableToolsPanelId}`">
+      <PlBtnGhost :loading="exporting" @click.stop="initiateExport">
+        Export
+        <template #append>
+          <PlMaskIcon24 name="export" />
+        </template>
+      </PlBtnGhost>
+    </Teleport>
+  </div>
+</template>

package/src/components/{PlAgDataTable/sources → PlAgCsvExporter}/export-csv.ts

@@ -1,6 +1,5 @@
 import type { ColDef, ColGroupDef } from '@ag-grid-community/core';
 import { createGrid, type GridApi, type GridOptions } from '@ag-grid-community/core';
-import type { PlAgDataTableRow } from '../types';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 
 function createGridDiv(): HTMLDivElement {
@@ -17,22 +16,19 @@ function destroyGridDiv(cellFake: HTMLDivElement) {
   document.body.removeChild(cellFake);
 }
 
-export async function exportCsv(gridApi?: GridApi<PlAgDataTableRow>) {
-  if (!gridApi) return;
-
+export async function exportCsv(gridApi: GridApi, completed: () => void) {
   const rowModel = gridApi.getGridOption('rowModelType');
   switch (rowModel) {
     case 'clientSide': {
-      return gridApi.exportDataAsCsv();
+      gridApi.exportDataAsCsv();
+      return completed();
     }
 
     case 'serverSide': {
-      const groupState = gridApi.getServerSideGroupLevelState();
-      if (groupState.length === 0) return;
-
-      const state = groupState[0];
-      if (state.rowCount <= state.cacheBlockSize!) {
-        return gridApi.exportDataAsCsv();
+      const state = gridApi.getServerSideGroupLevelState();
+      if (state.length === 0 || state[0].rowCount <= state[0].cacheBlockSize!) {
+        gridApi.exportDataAsCsv();
+        return completed();
       }
 
       const gridDiv = createGridDiv();
@@ -47,23 +43,23 @@ export async function exportCsv(gridApi?: GridApi<PlAgDataTableRow>) {
             valueGetter: def.valueGetter,
           })) ?? [],
         serverSideDatasource: gridApi.getGridOption('serverSideDatasource'),
-        cacheBlockSize: state.rowCount,
+        cacheBlockSize: state[0].rowCount,
         onModelUpdated: (event) => {
-          const groupState = event.api.getServerSideGroupLevelState();
-          if (groupState.length === 0) return;
-
-          const state = groupState[0];
-          if (state.rowCount !== state.cacheBlockSize) return;
-
-          event.api.exportDataAsCsv();
-          destroyGridDiv(gridDiv);
+          const state = event.api.getServerSideGroupLevelState();
+          if (state.length > 0 && state[0].rowCount === state[0].cacheBlockSize) {
+            event.api.exportDataAsCsv();
+            destroyGridDiv(gridDiv);
+            return completed();
+          }
         },
         defaultCsvExportParams: gridApi.getGridOption('defaultCsvExportParams'),
       };
       return createGrid(gridDiv, gridOptions, { modules: [ServerSideRowModelModule] });
     }
 
-    default:
+    default: {
+      completed();
       throw Error(`exportCsv unsupported for rowModelType = ${rowModel}`);
+    }
   }
 };

package/src/components/PlAgCsvExporter/index.ts

@@ -0,0 +1 @@
+export { default as PlAgCsvExporter } from './PlAgCsvExporter.vue';

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -39,8 +39,8 @@ import { makeRowId, parseColId, updatePFrameGridOptions } from './sources/table-
 import type { PlAgDataTableController, PlDataTableSettings, PlAgDataTableRow } from './types';
 import { PlAgGridColumnManager } from '../PlAgGridColumnManager';
 import { autoSizeRowNumberColumn, PlAgDataTableRowNumberColId } from './sources/row-number';
-import { exportCsv } from './sources/export-csv';
 import { focusRow, makeOnceTracker, trackFirstDataRendered } from './sources/focus-row';
+import PlAgCsvExporter from '../PlAgCsvExporter/PlAgCsvExporter.vue';
 
 ModuleRegistry.registerModules([
   ClientSideRowModelModule,
@@ -60,6 +60,13 @@ const props = defineProps<{
    * This component serves as the target for teleporting the button.
    */
   showColumnsPanel?: boolean;
+  /**
+   * The showExportButton prop controls the display of a button that allows
+   * to export table data in CSV format. To make the button functional
+   * and visible, you must also include the PlAgDataTableToolsPanel component in your layout.
+   * This component serves as the target for teleporting the button.
+   */
+  showExportButton?: boolean;
   showCellButtonForAxisId?: AxisId;
 }>();
 const { settings } = toRefs(props);
@@ -247,7 +254,6 @@ const onGridPreDestroyed = () => {
 };
 
 defineExpose<PlAgDataTableController>({
-  exportCsv: () => exportCsv(gridApi.value),
   focusRow: (rowKey) => focusRow(makeRowId(rowKey), firstDataRenderedTracker),
 });
 
@@ -376,6 +382,7 @@ watch(
 <template>
   <div class="ap-ag-data-table-container">
     <PlAgGridColumnManager v-if="gridApi && showColumnsPanel" :api="gridApi" />
+    <PlAgCsvExporter v-if="gridApi && showExportButton" :api="gridApi" />
     <div v-if="settings?.sourceType === 'ptable' && !!settings.sheets && settings.sheets.length > 0" class="ap-ag-data-table-sheets">
       <PlDropdownLine
         v-for="(sheet, i) in settings.sheets"

package/src/components/PlAgDataTable/index.ts

@@ -3,5 +3,5 @@ export { default as PlAgOverlayLoading } from './PlAgOverlayLoading.vue';
 export { default as PlAgOverlayNoRows } from './PlAgOverlayNoRows.vue';
 
 export * from './types';
-
 export * from './sources/row-number';
+export * from './sources/focus-row';

package/src/components/PlAgDataTable/types.ts

@@ -46,8 +46,6 @@ export type PTableRowKey = PTableValue[];
 
 /** PlAgDataTable controller contains all exported methods */
 export type PlAgDataTableController = {
-  /** Export table data as Csv file */
-  exportCsv: () => void;
   /** Scroll table to make row with provided key visible */
   focusRow: (rowKey: PTableRowKey) => void;
 };

package/src/lib.ts

@@ -12,8 +12,10 @@ export * from './components/PlAgColumnHeader';
 export * from './components/PlAgCellFile';
 
 export * from './components/PlAgDataTable/types';
-
 export * from './components/PlAgDataTable/sources/row-number';
+export * from './components/PlAgDataTable/sources/focus-row';
+
+export * from './components/PlAgCsvExporter';
 
 export * from './components/PlAgTextAndButtonCell';
 

package/dist/src/components/PlAgDataTable/sources/export-csv.d.ts

@@ -1,4 +0,0 @@
-import { type GridApi } from '@ag-grid-community/core';
-import type { PlAgDataTableRow } from '../types';
-export declare function exportCsv(gridApi?: GridApi<PlAgDataTableRow>): Promise<void | GridApi<any>>;
-//# sourceMappingURL=export-csv.d.ts.map

package/dist/src/components/PlAgDataTable/sources/export-csv.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"export-csv.d.ts","sourceRoot":"","sources":["../../../../../src/components/PlAgDataTable/sources/export-csv.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,OAAO,EAAoB,MAAM,yBAAyB,CAAC;AACrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAiBjD,wBAAsB,SAAS,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,gCAiDlE"}