@slickgrid-universal/vanilla-bundle 5.13.4 → 9.0.0

package/src/components/slick-vanilla-grid-bundle.ts

@@ -21,7 +21,6 @@ import {
   autoAddEditorFormatterToColumnsWithEditor,
   type AutocompleterEditor,
   GlobalGridOptions,
-  GridStateType,
   SlickGroupItemMetadataProvider,
 
   // services
@@ -47,6 +46,7 @@ import {
 
   // utilities
   emptyElement,
+  fetchAsPromise,
   isColumnDateType,
   SlickEventHandler,
   SlickDataView,
@@ -69,7 +69,7 @@ export class SlickVanillaGridBundle<TData = any> {
   protected _eventPubSubService!: EventPubSubService;
   protected _darkMode = false;
   protected _collectionObservers: Array<null | { disconnect: () => void }> = [];
-  protected _columnDefinitions?: Column<TData>[];
+  protected _columns?: Column<TData>[];
   protected _gridOptions: GridOption = {};
   protected _gridContainerElm!: HTMLElement;
   protected _gridParentContainerElm!: HTMLElement;
@@ -139,10 +139,10 @@ export class SlickVanillaGridBundle<TData = any> {
   }
 
   get columnDefinitions(): Column<TData>[] {
-    return this._columnDefinitions || [];
+    return this._columns || [];
   }
-  set columnDefinitions(columnDefinitions: Column<TData>[]) {
-    this.columnDefinitionsChanged(columnDefinitions);
+  set columnDefinitions(columns: Column<TData>[]) {
+    this.columnDefinitionsChanged(columns);
   }
 
   get dataset(): TData[] {
@@ -333,9 +333,9 @@ export class SlickVanillaGridBundle<TData = any> {
     // we only want to do this check once in the constructor
     this._hideHeaderRowAfterPageLoad = options?.showHeaderRow === false;
 
-    this._columnDefinitions = columnDefs || [];
-    if (this._columnDefinitions.length > 0) {
-      this.copyColumnWidthsReference(this._columnDefinitions);
+    this._columns = columnDefs || [];
+    if (this._columns.length > 0) {
+      this.copyColumnWidthsReference(this._columns);
     }
 
     // save resource refs to register before the grid options are merged and possibly deep copied
@@ -486,7 +486,7 @@ export class SlickVanillaGridBundle<TData = any> {
       (this.sharedService as any)[prop] = null;
     }
     this.datasetHierarchical = undefined;
-    this._columnDefinitions = [];
+    this._columns = [];
 
     // we could optionally also empty the content of the grid container DOM element
     if (shouldEmptyDomElementContainer) {
@@ -555,16 +555,16 @@ export class SlickVanillaGridBundle<TData = any> {
     this.preRegisterResources();
 
     // prepare and load all SlickGrid editors, if an async editor is found then we'll also execute it.
-    this._columnDefinitions = this.loadSlickGridEditors(this._columnDefinitions || []);
+    this._columns = this.loadSlickGridEditors(this._columns || []);
 
     // if the user wants to automatically add a Custom Editor Formatter, we need to call the auto add function again
     if (this._gridOptions?.autoAddCustomEditorFormatter) {
-      autoAddEditorFormatterToColumnsWithEditor(this._columnDefinitions, this._gridOptions.autoAddCustomEditorFormatter);
+      autoAddEditorFormatterToColumnsWithEditor(this._columns, this._gridOptions.autoAddCustomEditorFormatter);
     }
 
     // save reference for all columns before they optionally become hidden/visible
-    this.sharedService.allColumns = this._columnDefinitions;
-    this.sharedService.visibleColumns = this._columnDefinitions;
+    this.sharedService.allColumns = this._columns;
+    this.sharedService.visibleColumns = this._columns;
 
     // TODO: revisit later, this is conflicting with Grid State & Presets
     // before certain extentions/plugins potentially adds extra columns not created by the user itself (RowMove, RowDetail, RowSelections)
@@ -577,7 +577,7 @@ export class SlickVanillaGridBundle<TData = any> {
 
     // after subscribing to potential columns changed, we are ready to create these optional extensions
     // when we did find some to create (RowMove, RowDetail, RowSelections), it will automatically modify column definitions (by previous subscribe)
-    this.extensionService.createExtensionsBeforeGridCreation(this._columnDefinitions, this._gridOptions);
+    this.extensionService.createExtensionsBeforeGridCreation(this._columns, this._gridOptions);
 
     // if user entered some Pinning/Frozen "presets", we need to apply them in the grid options
     if (this.gridOptions.presets?.pinning) {
@@ -587,7 +587,7 @@ export class SlickVanillaGridBundle<TData = any> {
     this.slickGrid = new SlickGrid<TData, Column<TData>, GridOption<Column<TData>>>(
       gridContainerElm,
       this.dataView as SlickDataView<TData>,
-      this._columnDefinitions,
+      this._columns,
       this._gridOptions,
       this._eventPubSubService
     );
@@ -604,8 +604,8 @@ export class SlickVanillaGridBundle<TData = any> {
 
     // when it's a frozen grid, we need to keep the frozen column id for reference if we ever show/hide column from ColumnPicker/GridMenu afterward
     const frozenColumnIndex = this._gridOptions?.frozenColumn ?? -1;
-    if (frozenColumnIndex >= 0 && frozenColumnIndex <= this._columnDefinitions.length && this._columnDefinitions.length > 0) {
-      this.sharedService.frozenVisibleColumnId = this._columnDefinitions[frozenColumnIndex]?.id ?? '';
+    if (frozenColumnIndex >= 0 && frozenColumnIndex <= this._columns.length && this._columns.length > 0) {
+      this.sharedService.frozenVisibleColumnId = this._columns[frozenColumnIndex]?.id ?? '';
     }
 
     // get any possible Services that user want to register
@@ -730,7 +730,6 @@ export class SlickVanillaGridBundle<TData = any> {
       gridEventService: this.gridEventService,
       gridStateService: this.gridStateService,
       gridService: this.gridService,
-      groupingService: this.headerGroupingService,
       headerGroupingService: this.headerGroupingService,
       extensionService: this.extensionService,
       extensionUtility: this.extensionUtility,
@@ -803,13 +802,13 @@ export class SlickVanillaGridBundle<TData = any> {
         backendApi.internalPostProcess = (processResult: any) => {
           // prettier-ignore
           const datasetName = (backendApi && backendApiService && typeof backendApiService.getDatasetName === 'function') ? backendApiService.getDatasetName() : '';
-          if (processResult && processResult.data && processResult.data[datasetName]) {
+          if (processResult?.data?.[datasetName]) {
             const data = processResult.data[datasetName].hasOwnProperty('nodes')
-              ? (processResult as any).data[datasetName].nodes
-              : (processResult as any).data[datasetName];
+              ? processResult.data[datasetName].nodes
+              : processResult.data[datasetName];
             const totalCount = processResult.data[datasetName].hasOwnProperty('totalCount')
-              ? (processResult as any).data[datasetName].totalCount
-              : (processResult as any).data[datasetName].length;
+              ? processResult.data[datasetName].totalCount
+              : processResult.data[datasetName].length;
             this.refreshGridData(data, totalCount || 0);
           }
         };
@@ -834,10 +833,7 @@ export class SlickVanillaGridBundle<TData = any> {
       this._eventPubSubService.subscribe('onLanguageChange', (args: { language: string }) => {
         if (gridOptions.enableTranslate) {
           this.extensionService.translateAllExtensions(args.language);
-          if (
-            (gridOptions.createPreHeaderPanel && gridOptions.createTopHeaderPanel) ||
-            (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping)
-          ) {
+          if (gridOptions.createPreHeaderPanel && (gridOptions.createTopHeaderPanel || !gridOptions.enableDraggableGrouping)) {
             this.headerGroupingService.translateHeaderGrouping();
           }
         }
@@ -930,18 +926,6 @@ export class SlickVanillaGridBundle<TData = any> {
       this.loadColumnPresetsWhenDatasetInitialized();
       this.loadFilterPresetsWhenDatasetInitialized();
     }
-
-    // @deprecated @use `dataview.globalItemMetadataProvider.getRowMetadata`
-    // did the user add a colspan callback? If so, hook it into the DataView getItemMetadata
-    if (gridOptions?.colspanCallback && dataView?.getItem && dataView?.getItemMetadata) {
-      dataView.getItemMetadata = (rowNumber: number) => {
-        let callbackResult = null;
-        if (gridOptions.colspanCallback) {
-          callbackResult = gridOptions.colspanCallback(dataView.getItem(rowNumber));
-        }
-        return callbackResult;
-      };
-    }
   }
 
   bindBackendCallbackFunctions(gridOptions: GridOption): void {
@@ -989,9 +973,7 @@ export class SlickVanillaGridBundle<TData = any> {
           const startTime = new Date();
 
           // run any pre-process, if defined, for example a spinner
-          if (backendApi.preProcess) {
-            backendApi.preProcess();
-          }
+          backendApi.preProcess?.();
 
           // the processes can be a Promise (like Http)
           const totalItems = this.gridOptions?.pagination?.totalItems ?? 0;
@@ -1130,7 +1112,7 @@ export class SlickVanillaGridBundle<TData = any> {
       this.sharedService.currentPagination = { pageNumber, pageSize };
     }
     this._eventPubSubService.publish('onGridStateChanged', {
-      change: { newValues: { pageNumber, pageSize }, type: GridStateType.pagination },
+      change: { newValues: { pageNumber, pageSize }, type: 'pagination' },
       gridState: this.gridStateService.getCurrentGridState(),
     });
   }
@@ -1158,7 +1140,6 @@ export class SlickVanillaGridBundle<TData = any> {
         if (dataset.length > 0) {
           if (!this._isDatasetInitialized) {
             this.loadFilterPresetsWhenDatasetInitialized();
-
             if (this._gridOptions.enableCheckboxSelector) {
               this.loadRowSelectionPresetWhenExists();
             }
@@ -1208,20 +1189,20 @@ export class SlickVanillaGridBundle<TData = any> {
    * We will re-render the grid so that the new header and data shows up correctly.
    * If using translater, we also need to trigger a re-translate of the column headers
    */
-  updateColumnDefinitionsList(newColumnDefinitions: Column<TData>[]): void {
-    if (this.slickGrid && this._gridOptions && Array.isArray(newColumnDefinitions)) {
+  updateColumnDefinitionsList(newColumns: Column<TData>[]): void {
+    if (this.slickGrid && this._gridOptions && Array.isArray(newColumns)) {
       // map the Editor model to editorClass and load editor collectionAsync
-      newColumnDefinitions = this.loadSlickGridEditors(newColumnDefinitions);
+      newColumns = this.loadSlickGridEditors(newColumns);
 
       // if the user wants to automatically add a Custom Editor Formatter, we need to call the auto add function again
       if (this._gridOptions.autoAddCustomEditorFormatter) {
-        autoAddEditorFormatterToColumnsWithEditor(newColumnDefinitions, this._gridOptions.autoAddCustomEditorFormatter);
+        autoAddEditorFormatterToColumnsWithEditor(newColumns, this._gridOptions.autoAddCustomEditorFormatter);
       }
 
       if (this._gridOptions.enableTranslate) {
-        this.extensionService.translateColumnHeaders(undefined, newColumnDefinitions);
+        this.extensionService.translateColumnHeaders(undefined, newColumns);
       } else {
-        this.extensionService.renderColumnHeaders(newColumnDefinitions, true);
+        this.extensionService.renderColumnHeaders(newColumns, true);
       }
 
       if (this.slickGrid && this._gridOptions?.enableAutoSizeColumns) {
@@ -1284,8 +1265,8 @@ export class SlickVanillaGridBundle<TData = any> {
    * Loop through all column definitions and copy the original optional `width` properties optionally provided by the user.
    * We will use this when doing a resize by cell content, if user provided a `width` it won't override it.
    */
-  protected copyColumnWidthsReference(columnDefinitions: Column<TData>[]): void {
-    columnDefinitions.forEach((col) => (col.originalWidth = col.width));
+  protected copyColumnWidthsReference(columns: Column<TData>[]): void {
+    columns.forEach((col) => (col.originalWidth = col.width));
   }
 
   protected displayEmptyDataWarning(showWarning = true): void {
@@ -1348,9 +1329,9 @@ export class SlickVanillaGridBundle<TData = any> {
   }
 
   /** handler for when column definitions changes */
-  protected columnDefinitionsChanged(columnDefinitions?: Column[]): void {
-    if (columnDefinitions) {
-      this._columnDefinitions = columnDefinitions;
+  protected columnDefinitionsChanged(columns?: Column[]): void {
+    if (columns) {
+      this._columns = columns;
     }
     if (this._isGridInitialized) {
       this.updateColumnDefinitionsList(this.columnDefinitions);
@@ -1390,45 +1371,19 @@ export class SlickVanillaGridBundle<TData = any> {
   /** Load the Editor Collection asynchronously and replace the "collection" property when Promise resolves */
   protected loadEditorCollectionAsync(column: Column<TData>): void {
     if (column?.editor) {
-      const collectionAsync = column.editor.collectionAsync;
       column.editor.disabled = true; // disable the Editor DOM element, we'll re-enable it after receiving the collection with "updateEditorCollection()"
 
-      if (collectionAsync instanceof Promise) {
-        // wait for the "collectionAsync", once resolved we will save it into the "collection"
-        // the collectionAsync can be of 3 types HttpClient, HttpFetch or a Promise
-        collectionAsync.then((response: any | any[]) => {
-          if (Array.isArray(response)) {
-            this.updateEditorCollection(column, response); // from Promise
-          } else if (response?.status >= 200 && response.status < 300 && typeof response.json === 'function') {
-            if (response.bodyUsed) {
-              console.warn(
-                `[SlickGrid-Universal] The response body passed to collectionAsync was already read.` +
-                  `Either pass the dataset from the Response or clone the response first using response.clone()`
-              );
-            } else {
-              // from Fetch
-              (response as Response).json().then((data) => this.updateEditorCollection(column, data));
-            }
-          } else if (response?.content) {
-            this.updateEditorCollection(column, response['content']); // from http-client
-          }
-        });
-      } else if (this.rxjs?.isObservable(collectionAsync)) {
-        // wrap this inside a microtask at the end of the task to avoid timing issue since updateEditorCollection requires to call SlickGrid getColumns() method after columns are available
-        queueMicrotask(() => {
-          this.subscriptions.push(
-            (collectionAsync as Observable<any>).subscribe((resolvedCollection) => this.updateEditorCollection(column, resolvedCollection))
-          );
-        });
-      }
+      fetchAsPromise(column.editor.collectionAsync, this.rxjs).then((resolvedCollection) => {
+        this.updateEditorCollection(column, resolvedCollection);
+      });
     }
   }
 
   protected insertDynamicPresetColumns(columnId: string, gridPresetColumns: Column<TData>[]): void {
-    if (this._columnDefinitions) {
-      const columnPosition = this._columnDefinitions.findIndex((c) => c.id === columnId);
+    if (this._columns) {
+      const columnPosition = this._columns.findIndex((c) => c.id === columnId);
       if (columnPosition >= 0) {
-        const dynColumn = this._columnDefinitions[columnPosition];
+        const dynColumn = this._columns[columnPosition];
         if (dynColumn?.id === columnId && !gridPresetColumns.some((c) => c.id === columnId)) {
           columnPosition > 0 ? gridPresetColumns.splice(columnPosition, 0, dynColumn) : gridPresetColumns.unshift(dynColumn);
         }
@@ -1449,7 +1404,7 @@ export class SlickVanillaGridBundle<TData = any> {
         this.slickGrid,
         this.gridOptions.presets.columns
       );
-      if (gridPresetColumns && Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columnDefinitions)) {
+      if (gridPresetColumns && Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columns)) {
         // make sure that the dynamic columns are included in presets (1.Row Move, 2. Row Selection, 3. Row Detail)
         if (this.gridOptions.enableRowMoveManager) {
           const rmmColId = this.gridOptions?.rowMoveManager?.columnId ?? '_move';
@@ -1592,10 +1547,7 @@ export class SlickVanillaGridBundle<TData = any> {
     this._registeredResources.push(this.gridService, this.gridStateService);
 
     // when using Grouping/DraggableGrouping/Colspan register its Service
-    if (
-      (this.gridOptions.createPreHeaderPanel && this.gridOptions.createTopHeaderPanel) ||
-      (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping)
-    ) {
+    if (this.gridOptions.createPreHeaderPanel && (this.gridOptions.createTopHeaderPanel || !this.gridOptions.enableDraggableGrouping)) {
       this._registeredResources.push(this.headerGroupingService);
     }
 
@@ -1648,7 +1600,7 @@ export class SlickVanillaGridBundle<TData = any> {
       // we'll also add props, by mutation, required by the TreeDataService on the flat array like `__hasChildren`, `parentId` and anything else to work properly
       sortedDatasetResult = this.treeDataService.convertFlatParentChildToTreeDatasetAndSort(
         flatDatasetInput,
-        this._columnDefinitions || [],
+        this._columns || [],
         this.gridOptions
       );
       this.sharedService.hierarchicalDataset = sortedDatasetResult.hierarchical;

package/src/interfaces/slickerGridInstance.interface.ts

@@ -56,9 +56,6 @@ export interface SlickerGridInstance<TData = any> {
   /** Grid State Service */
   gridStateService: GridStateService;
 
-  /** @deprecated @use `headerGroupingService` */
-  groupingService: HeaderGroupingService;
-
   /** Grouping (and colspan) Service */
   headerGroupingService: HeaderGroupingService;