fix(presets): dynamic columns should be auto-inserted with Grid Presets

package.json

@@ -57,12 +57,12 @@
     "new-release": "npm run release, note that yarn is not supported with release-it and will throw an error"
   },
   "dependencies": {
-    "@slickgrid-universal/common": "~2.6.2",
-    "@slickgrid-universal/custom-footer-component": "~2.6.2",
-    "@slickgrid-universal/empty-warning-component": "~2.6.2",
+    "@slickgrid-universal/common": "~2.6.3",
+    "@slickgrid-universal/custom-footer-component": "~2.6.3",
+    "@slickgrid-universal/empty-warning-component": "~2.6.3",
     "@slickgrid-universal/event-pub-sub": "~2.6.2",
-    "@slickgrid-universal/pagination-component": "~2.6.2",
-    "@slickgrid-universal/row-detail-view-plugin": "~2.6.2",
+    "@slickgrid-universal/pagination-component": "~2.6.3",
+    "@slickgrid-universal/row-detail-view-plugin": "~2.6.3",
     "aurelia-event-aggregator": "^1.0.3",
     "aurelia-framework": "^1.4.1",
     "aurelia-i18n": "^4.0.4",
@@ -77,13 +77,13 @@
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.6",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@slickgrid-universal/composite-editor-component": "~2.6.2",
-    "@slickgrid-universal/custom-tooltip-plugin": "~2.6.2",
-    "@slickgrid-universal/excel-export": "~2.6.2",
-    "@slickgrid-universal/graphql": "~2.6.2",
-    "@slickgrid-universal/odata": "~2.6.2",
-    "@slickgrid-universal/rxjs-observable": "~2.6.2",
-    "@slickgrid-universal/text-export": "~2.6.2",
+    "@slickgrid-universal/composite-editor-component": "~2.6.3",
+    "@slickgrid-universal/custom-tooltip-plugin": "~2.6.3",
+    "@slickgrid-universal/excel-export": "~2.6.3",
+    "@slickgrid-universal/graphql": "~2.6.3",
+    "@slickgrid-universal/odata": "~2.6.3",
+    "@slickgrid-universal/rxjs-observable": "~2.6.3",
+    "@slickgrid-universal/text-export": "~2.6.3",
     "@types/bluebird": "^3.5.38",
     "@types/dompurify": "^3.0.0",
     "@types/fnando__sparkline": "^0.3.4",

src/aurelia-slickgrid/custom-elements/__tests__/aurelia-slickgrid.spec.ts

@@ -1487,6 +1487,59 @@ describe('Aurelia-Slickgrid Component instantiated via Constructor', () => {
         expect(setColSpy).toHaveBeenCalledWith(mockCols);
       });
 
+      it('should reflect columns with an extra row detail column in the grid when "enableRowDetailView" is set', () => {
+        const mockColsPresets = [{ columnId: 'firstName', width: 100 }];
+        const mockCol = { id: 'firstName', field: 'firstName' };
+        const mockCols = [{ id: '_detail_selector', field: '_detail_selector', editor: undefined, internalColumnEditor: {} }, mockCol];
+        const getAssocColSpy = jest.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
+        const setColSpy = jest.spyOn(mockGrid, 'setColumns');
+
+        customElement.columnDefinitions = mockCols;
+        customElement.columnDefinitionsChanged();
+        customElement.gridOptions = { ...gridOptions, enableRowDetailView: true, presets: { columns: mockColsPresets } } as unknown as GridOption;
+        customElement.initialization(slickEventHandler);
+
+        expect(getAssocColSpy).toHaveBeenCalledWith(mockGrid, mockColsPresets);
+        expect(setColSpy).toHaveBeenCalledWith(mockCols);
+      });
+
+      it('should reflect columns with an extra row move column in the grid when "enableRowMoveManager" is set', () => {
+        const mockColsPresets = [{ columnId: 'firstName', width: 100 }];
+        const mockCol = { id: 'firstName', field: 'firstName' };
+        const mockCols = [{ id: '_move', field: '_move', editor: undefined, internalColumnEditor: {} }, mockCol];
+        const getAssocColSpy = jest.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
+        const setColSpy = jest.spyOn(mockGrid, 'setColumns');
+
+        customElement.columnDefinitions = mockCols;
+        customElement.columnDefinitionsChanged();
+        customElement.gridOptions = { ...gridOptions, enableRowMoveManager: true, presets: { columns: mockColsPresets } } as unknown as GridOption;
+        customElement.initialization(slickEventHandler);
+
+        expect(getAssocColSpy).toHaveBeenCalledWith(mockGrid, mockColsPresets);
+        expect(setColSpy).toHaveBeenCalledWith(mockCols);
+      });
+
+      it('should reflect 3 dynamic columns (1-RowMove, 2-RowSelection, 3-RowDetail) when all associated extension flags are enabled', () => {
+        const mockColsPresets = [{ columnId: 'firstName', width: 100 }];
+        const mockCol = { id: 'firstName', field: 'firstName' };
+        const mockCols = [
+          { id: '_move', field: '_move', editor: undefined, internalColumnEditor: {} },
+          { id: '_checkbox_selector', field: '_checkbox_selector', editor: undefined, internalColumnEditor: {} },
+          { id: '_detail_selector', field: '_detail_selector', editor: undefined, internalColumnEditor: {} },
+          mockCol
+        ];
+        const getAssocColSpy = jest.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
+        const setColSpy = jest.spyOn(mockGrid, 'setColumns');
+
+        customElement.columnDefinitions = mockCols;
+        customElement.columnDefinitionsChanged();
+        customElement.gridOptions = { ...gridOptions, enableCheckboxSelector: true, enableRowDetailView: true, enableRowMoveManager: true, presets: { columns: mockColsPresets } } as unknown as GridOption;
+        customElement.initialization(slickEventHandler);
+
+        expect(getAssocColSpy).toHaveBeenCalledWith(mockGrid, mockColsPresets);
+        expect(setColSpy).toHaveBeenCalledWith(mockCols);
+      });
+
       it('should execute backend service "init" method when set', () => {
         const mockPagination = { pageNumber: 1, pageSizes: [10, 25, 50], pageSize: 10, totalItems: 100 };
         const mockGraphqlOptions = { datasetName: 'users', extraQueryArguments: [{ field: 'userId', value: 123 }] } as GraphqlServiceOption;

src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.ts

@@ -1175,27 +1175,47 @@ export class AureliaSlickgridCustomElement {
     }
   }
 
+  protected insertDynamicPresetColumns(columnId: string, gridPresetColumns: Column[]) {
+    if (this._columnDefinitions) {
+      const columnPosition = this._columnDefinitions.findIndex(c => c.id === columnId);
+      if (columnPosition >= 0) {
+        const dynColumn = this._columnDefinitions[columnPosition];
+        if (dynColumn?.id === columnId && !gridPresetColumns.some(c => c.id === columnId)) {
+          columnPosition > 0
+            ? gridPresetColumns.splice(columnPosition, 0, dynColumn)
+            : gridPresetColumns.unshift(dynColumn);
+        }
+      }
+    }
+  }
+
   /** Load any possible Columns Grid Presets */
   private loadColumnPresetsWhenDatasetInitialized() {
     // if user entered some Columns "presets", we need to reflect them all in the grid
     if (this.gridOptions.presets && Array.isArray(this.gridOptions.presets.columns) && this.gridOptions.presets.columns.length > 0) {
-      const gridColumns: Column[] = this.gridStateService.getAssociatedGridColumns(this.grid, this.gridOptions.presets.columns);
-      if (gridColumns && Array.isArray(gridColumns) && gridColumns.length > 0) {
-        // make sure that the checkbox selector is also visible if it is enabled
+      const gridPresetColumns: Column[] = this.gridStateService.getAssociatedGridColumns(this.grid, this.gridOptions.presets.columns);
+      if (gridPresetColumns && Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columnDefinitions)) {
+        // 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';
+          this.insertDynamicPresetColumns(rmmColId, gridPresetColumns);
+        }
         if (this.gridOptions.enableCheckboxSelector) {
-          const checkboxColumn = (Array.isArray(this._columnDefinitions) && this._columnDefinitions.length > 0) ? this._columnDefinitions[0] : null;
-          if (checkboxColumn && checkboxColumn.id === '_checkbox_selector' && gridColumns[0].id !== '_checkbox_selector') {
-            gridColumns.unshift(checkboxColumn);
-          }
+          const chkColId = this.gridOptions?.checkboxSelector?.columnId ?? '_checkbox_selector';
+          this.insertDynamicPresetColumns(chkColId, gridPresetColumns);
+        }
+        if (this.gridOptions.enableRowDetailView) {
+          const rdvColId = this.gridOptions?.rowDetailView?.columnId ?? '_detail_selector';
+          this.insertDynamicPresetColumns(rdvColId, gridPresetColumns);
         }
 
         // keep 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.
-        gridColumns.forEach(col => col.originalWidth = col.width);
+        gridPresetColumns.forEach(col => col.originalWidth = col.width);
 
         // finally set the new presets columns (including checkbox selector if need be)
-        this.grid.setColumns(gridColumns);
-        this.sharedService.visibleColumns = gridColumns;
+        this.grid.setColumns(gridPresetColumns);
+        this.sharedService.visibleColumns = gridPresetColumns;
       }
     }
   }

test/mockSlickEvent.ts

@@ -1,12 +1,12 @@
-import { SlickEvent, SlickEventHandler } from '@slickgrid-universal/common';
+import { SlickEvent, SlickEventData, SlickEventHandler } from '@slickgrid-universal/common';
 
 // interface PubSubEvent {
 //   name: string;
 //   handler: (args: any) => void;
 // }
 
 export class MockSlickEvent implements SlickEvent {
-  private _handlers = [];
+  private _handlers: any[] = [];
 
   notify(args: any, event?: any, scope?: any) {
     scope = scope || this;
@@ -19,21 +19,21 @@ export class MockSlickEvent implements SlickEvent {
     return returnValue;
   }
 
-  subscribe(handler: (data: any, e?: any) => void): any {
-    this._handlers.push(handler);
+  subscribe(fn: (data: any, e?: any) => void): any {
+    this._handlers.push(fn);
   }
 
-  unsubscribe(handler: (data: any, e?: any) => void) {
+  unsubscribe(fn?: (e: SlickEventData | Event, data?: any) => void) {
     this._handlers.forEach((handlerFn, index) => {
-      if (handlerFn === handler) {
+      if (handlerFn === fn) {
         this._handlers.splice(index, 1);
       }
     });
   }
 }
 
 export class MockSlickEventHandler implements SlickEventHandler {
-  private _handlers = [];
+  private _handlers: any[] = [];
 
   notify(eventName: string, data?: any) {
     const pubSub = this._handlers.find(subscription => subscription.name === eventName);