@platforma-sdk/ui-vue 1.26.1 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -23,8 +23,8 @@
     "canonicalize": "~2.1.0",
     "ag-grid-enterprise": "^33.0.4",
     "ag-grid-vue3": "^33.0.4",
-    "@platforma-sdk/model": "^1.26.0",
-    "@milaboratories/uikit": "^2.2.61"
+    "@milaboratories/uikit": "^2.2.61",
+    "@platforma-sdk/model": "^1.26.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",

package/src/AgGridVue/useAgGridOptions.ts

@@ -1,15 +1,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ColGroupDef, GridApi, GridOptions, GridReadyEvent } from 'ag-grid-enterprise';
+import type { ColGroupDef, GridApi, GridOptions, GridReadyEvent, ICellRendererParams, RowSelectionOptions, ValueSetterParams } from 'ag-grid-enterprise';
+import type { Component } from 'vue';
 import { computed, shallowRef, watch } from 'vue';
 import { AgGridTheme } from '../aggrid';
-import PlAgOverlayLoading from '../components/PlAgDataTable/PlAgOverlayLoading.vue';
-import PlAgOverlayNoRows from '../components/PlAgDataTable/PlAgOverlayNoRows.vue';
+import { PlAgOverlayLoading } from '../components/PlAgDataTable';
+import { PlAgOverlayNoRows } from '../components/PlAgDataTable';
 import type { ColDefExtended } from './createAgGridColDef';
 import type { PlAgOverlayLoadingParams } from '../lib';
 import { autoSizeRowNumberColumn, createAgGridColDef, makeRowNumberColDef } from '../lib';
 import { whenever } from '@vueuse/core';
-import PlAgCellFile from '../components/PlAgCellFile/PlAgCellFile.vue';
-
+import { PlAgCellFile } from '../components/PlAgCellFile';
+import { PlAgChartStackedBarCell } from '../components/PlAgChartStackedBarCell';
+import { PlAgChartHistogramCell } from '../components/PlAgChartHistogramCell';
+import type { ImportFileHandle } from '@platforma-sdk/model';
+import type { ImportProgress } from '@platforma-sdk/model';
+import { PlAgCellStatusTag } from '../components/PlAgCellStatusTag';
 interface GridOptionsExtended<TData = any> extends Omit<GridOptions<TData>, 'columnDefs'> {
   /**
    * Array of Column / Column Group definitions.
@@ -30,7 +35,7 @@ interface GridOptionsExtended<TData = any> extends Omit<GridOptions<TData>, 'col
   /**
    * Use "transparent" to make table headers visible below the loading layer (experimental)
    */
-  loadingOverlayType?: 'transparent';
+  loadingOverlayType?: 'transparent' | undefined;
   /**
    * Override standard 'Empty' text for the "no rows" overlay
    */
@@ -46,15 +51,198 @@ class Builder<TData> {
     return this;
   }
 
-  get columnDefs() {
+  private get columnDefs() {
     return this.#options.columnDefs ?? [];
   }
 
+  /**
+   * Set default column definition
+   * @param def - column definition
+   * @returns this
+   */
+  public setDefaultColDef(def: ColDefExtended<TData>) {
+    this.#options.defaultColDef = def;
+    return this;
+  }
+
+  /**
+   * Show loading overlay
+   * @param loading
+   * @returns this
+   */
+  public setLoading(loading?: boolean) {
+    this.#options.loading = loading;
+    return this;
+  }
+
+  /**
+   * Show "not ready overlay
+   * @param notReady
+   * @returns this
+   */
+  public setNotReady(notReady?: boolean) {
+    this.#options.notReady = notReady;
+    return this;
+  }
+
+  /**
+   * Set loading overlay type
+   * @param type
+   * @returns this
+   */
+  public setLoadingOverlayType(type?: 'transparent') {
+    this.#options.loadingOverlayType = type;
+    return this;
+  }
+
+  /**
+   * Set "not ready" text
+   * @param notReadyText
+   * @returns this
+   */
+  public setNotReadyText(notReadyText?: string) {
+    this.#options.notReadyText = notReadyText;
+    return this;
+  }
+
+  /**
+   * Set "no rows" text when there are no rows (default is "Empty")
+   * @param noRowsText
+   * @returns this
+   */
+  public setNoRowsText(noRowsText?: string) {
+    this.#options.noRowsText = noRowsText;
+    return this;
+  }
+
+  /**
+   * Set row selection options
+   * @param rowSelection
+   * @returns this
+   */
+  public setRowSelection(rowSelection?: RowSelectionOptions) {
+    this.#options.rowSelection = rowSelection;
+    return this;
+  }
+
+  /**
+   * Set row data
+   * @param rowData
+   * @returns this
+   */
+  public setRowData(rowData: TData[]) {
+    this.#options.rowData = rowData;
+    return this;
+  }
+
+  /**
+   * Set components
+   * @param components
+   * @returns this
+   */
+  public setComponents(components?: Record<string, Component>) {
+    this.#options.components = components;
+    return this;
+  }
+
+  /**
+   * Set an option
+   * @param key - option key
+   * @param value - option value
+   * @returns this
+   */
+  public setOption<K extends keyof GridOptionsExtended<TData>>(key: K, value: GridOptionsExtended<TData>[K]) {
+    this.#options[key] = value;
+    return this;
+  }
+
+  /**
+   * Add an extended column definition
+   * @param def - column definition
+   * @returns this
+   */
   public column<TValue = any>(def: ColDefExtended<TData, TValue>) {
     this.#options.columnDefs = [...this.columnDefs, def];
     return this;
   }
 
+  /**
+   * Show row numbers column
+   * @param show - show or hide row numbers column
+   * @returns this
+   */
+  public columnRowNumbers(show: boolean = true) {
+    this.#options.rowNumbersColumn = show;
+    return this;
+  }
+
+  /**
+   * Add a file input column
+   * @param def - column definition
+   * @param cb - callback to set params for the file input cell renderer
+   * @returns this
+   */
+  public columnFileInput<TValue = any>(
+    def: ColDefExtended<TData, TValue> & {
+      /**
+       * Allowed file extensions (like ['fastq.gz'])
+       */
+      extensions?: string[];
+      /**
+       * The resolveProgress function is an optional input parameter for the component
+       * that allows tracking the file upload progress in real-time.
+       * By passing resolveProgress, you can ensure that the component
+       * displays accurate progress values for each file as they upload.
+       * How to use it in AgGrid
+       * cellRendererParams: {
+       *  resolveProgress: (cellData) => {
+       *    const progresses = app.progresses;
+       *    if (!cellData.value.importFileHandle) return undefined;
+       *    else return progresses[cellData.value.importFileHandle];
+       *  }
+       * }
+       */
+      resolveImportProgress?: (cellData: ICellRendererParams<TData, TValue>) => ImportProgress | undefined;
+
+      /**
+       * The resolveFileHandle function is an optional input parameter for the component
+       * that allows tracking the file upload progress in real-time.
+       * By passing resolveFileHandle, you can ensure that the component
+       * displays accurate progress values for each file as they upload.
+       * How to use it in AgGrid
+       * cellRendererParams: {
+       *  resolveFileHandle: (cellData) => {
+       *    return cellData.value.importFileHandle;
+       *  }
+       * }
+       */
+      resolveImportFileHandle?: (cellData: ICellRendererParams<TData, TValue>) => ImportFileHandle | undefined;
+
+      setImportFileHandle?: (d: ValueSetterParams<TData, ImportFileHandle | undefined>) => void;
+    }) {
+    return this.column(Object.assign({
+      cellRenderer: 'PlAgCellFile',
+      headerComponentParams: { type: 'File' },
+      cellStyle: { padding: 0 },
+      valueSetter: (d: ValueSetterParams<TData, ImportFileHandle | undefined>) => {
+        def.setImportFileHandle?.(d);
+        return true;
+      },
+      cellRendererSelector: (cellData: ICellRendererParams<TData, TValue>) => {
+        return {
+          component: 'PlAgCellFile',
+          params: {
+            extensions: def.extensions,
+            value: def.resolveImportFileHandle?.(cellData),
+            resolveProgress: () => {
+              return def.resolveImportProgress?.(cellData);
+            },
+          },
+        };
+      },
+    }, def));
+  }
+
   public build() {
     return this.#options;
   }
@@ -129,6 +317,9 @@ export function useAgGridOptions<TData>(
     // Register all special components
     options.components = Object.assign({}, options.components ?? {}, {
       PlAgCellFile,
+      PlAgChartStackedBarCell,
+      PlAgChartHistogramCell,
+      PlAgCellStatusTag,
     });
 
     return options;