refactor(presets): merge duplicate column preset loading logic

Author: ghiscoding

frameworks/angular-slickgrid/src/library/components/__tests__/angular-slickgrid.component.spec.ts

@@ -161,6 +161,12 @@ const gridServiceStub = {
 const gridStateServiceStub = {
   init: vi.fn(),
   dispose: vi.fn(),
+  changeColumnsArrangement: vi.fn((columns) => {
+    const gridColumns = gridStateServiceStub.getAssociatedGridColumns(mockGrid, columns);
+    if (gridColumns && Array.isArray(gridColumns)) {
+      mockGrid.setColumns(gridColumns);
+    }
+  }),
   getAssociatedGridColumns: vi.fn(),
   getCurrentGridState: vi.fn(),
   needToPreserveRowSelection: vi.fn(),
@@ -1748,15 +1754,12 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
 
       it('should reflect columns in the grid', () => {
         const mockColsPresets = [{ columnId: 'firstName', width: 100 }];
-        const mockCols = [{ id: 'firstName', field: 'firstName', editorClass: undefined, hidden: false }];
-        const getAssocColSpy = vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue(mockCols);
-        const setColSpy = vi.spyOn(mockGrid, 'setColumns');
+        const changeColsSpy = vi.spyOn(gridStateServiceStub, 'changeColumnsArrangement');
 
         component.options = { presets: { columns: mockColsPresets } } as unknown as GridOption;
         component.initialization(slickEventHandler);
 
-        expect(getAssocColSpy).toHaveBeenCalledWith(mockGrid, mockColsPresets);
-        expect(setColSpy).toHaveBeenCalledWith(mockCols);
+        expect(changeColsSpy).toHaveBeenCalledWith(mockColsPresets, false);
       });
 
       it('should reflect columns with an extra checkbox selection column in the grid when "enableCheckboxSelector" is set', () => {
@@ -1766,15 +1769,14 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
           { id: '_checkbox_selector', field: '_checkbox_selector', editor: undefined, editorClass: undefined, hidden: false },
           { ...mockCol, editorClass: undefined, hidden: false },
         ];
-        const getAssocColSpy = vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
-        const setColSpy = vi.spyOn(mockGrid, 'setColumns');
+        vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
+        const changeColsSpy = vi.spyOn(gridStateServiceStub, 'changeColumnsArrangement');
 
         component.columns = mockCols;
         component.options = { ...gridOptions, enableCheckboxSelector: true, presets: { columns: mockColsPresets } } as unknown as GridOption;
         component.initialization(slickEventHandler);
 
-        expect(getAssocColSpy).toHaveBeenCalledWith(mockGrid, mockColsPresets);
-        expect(setColSpy).toHaveBeenCalledWith(mockCols);
+        expect(changeColsSpy).toHaveBeenCalledWith(mockColsPresets, false);
       });
 
       it('should reflect columns with an extra row detail column in the grid when "enableRowDetailView" is set', () => {
@@ -1784,8 +1786,8 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
           { id: '_detail_selector', field: '_detail_selector', editor: undefined, editorClass: undefined, hidden: false },
           { ...mockCol, editorClass: undefined, hidden: false },
         ];
-        const getAssocColSpy = vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
-        const setColSpy = vi.spyOn(mockGrid, 'setColumns');
+        vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
+        const changeColsSpy = vi.spyOn(gridStateServiceStub, 'changeColumnsArrangement');
 
         component.columns = mockCols;
         component.options = {
@@ -1796,8 +1798,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         } as GridOption;
         component.initialization(slickEventHandler);
 
-        expect(getAssocColSpy).toHaveBeenCalledWith(mockGrid, mockColsPresets);
-        expect(setColSpy).toHaveBeenCalledWith(mockCols);
+        expect(changeColsSpy).toHaveBeenCalledWith(mockColsPresets, false);
       });
 
       it('should reflect columns with an extra row move column in the grid when "enableRowMoveManager" is set', () => {
@@ -1807,15 +1808,14 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
           { id: '_move', field: '_move', editor: undefined, editorClass: undefined, hidden: false },
           { ...mockCol, editorClass: undefined, hidden: false },
         ];
-        const getAssocColSpy = vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
-        const setColSpy = vi.spyOn(mockGrid, 'setColumns');
+        vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
+        const changeColsSpy = vi.spyOn(gridStateServiceStub, 'changeColumnsArrangement');
 
         component.columns = mockCols;
         component.options = { ...gridOptions, enableRowMoveManager: true, presets: { columns: mockColsPresets } } as unknown as GridOption;
         component.initialization(slickEventHandler);
 
-        expect(getAssocColSpy).toHaveBeenCalledWith(mockGrid, mockColsPresets);
-        expect(setColSpy).toHaveBeenCalledWith(mockCols);
+        expect(changeColsSpy).toHaveBeenCalledWith(mockColsPresets, false);
       });
 
       it('should reflect 3 dynamic columns (1-RowMove, 2-RowSelection, 3-RowDetail) when all associated extension flags are enabled', () => {
@@ -1827,8 +1827,8 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
           { id: '_detail_selector', field: '_detail_selector', editor: undefined, editorClass: undefined, hidden: false },
           { ...mockCol, editorClass: undefined, hidden: false },
         ];
-        const getAssocColSpy = vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
-        const setColSpy = vi.spyOn(mockGrid, 'setColumns');
+        vi.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
+        const changeColsSpy = vi.spyOn(gridStateServiceStub, 'changeColumnsArrangement');
 
         component.columns = mockCols;
         component.options = {
@@ -1841,8 +1841,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         } as unknown as GridOption;
         component.initialization(slickEventHandler);
 
-        expect(getAssocColSpy).toHaveBeenCalledWith(mockGrid, mockColsPresets);
-        expect(setColSpy).toHaveBeenCalledWith(mockCols);
+        expect(changeColsSpy).toHaveBeenCalledWith(mockColsPresets, false);
       });
 
       it('should execute backend service "init" method when set', () => {

frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts

@@ -39,7 +39,6 @@ import {
   SlickGrid,
   SlickgridConfig,
   SlickGroupItemMetadataProvider,
-  sortPresetColumns,
   SortService,
   TreeDataService,
   unsubscribeAll,
@@ -1410,46 +1409,13 @@ export class AngularSlickgridComponent<TData = any> implements AfterViewInit, On
     }
   }
 
-  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 */
   protected loadColumnPresetsWhenDatasetInitialized() {
     // if user entered some Columns "presets", we need to reflect them all in the grid
     if (Array.isArray(this.options.presets?.columns) && this.options.presets.columns.length > 0) {
-      const gridPresetColumns: Column[] = this.gridStateService.getAssociatedGridColumns(this.slickGrid, this.options.presets.columns);
-      if (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.options.enableRowMoveManager) {
-          const rmmColId = this.options?.rowMoveManager?.columnId ?? '_move';
-          this.insertDynamicPresetColumns(rmmColId, gridPresetColumns);
-        }
-        if (this.options.enableCheckboxSelector) {
-          const chkColId = this.options?.checkboxSelector?.columnId ?? '_checkbox_selector';
-          this.insertDynamicPresetColumns(chkColId, gridPresetColumns);
-        }
-        if (this.options.enableRowDetailView) {
-          const rdvColId = this.options?.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.
-        gridPresetColumns.forEach((col) => (col.originalWidth = col.width));
-
-        // finally sort and set the new presets columns (including checkbox selector if need be)
-        const orderedColumns = sortPresetColumns(this._columnDefinitions, gridPresetColumns);
-        this.slickGrid.setColumns(orderedColumns);
-      }
+      // delegate to GridStateService for centralized column arrangement logic
+      // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
+      this.gridStateService.changeColumnsArrangement(this.options.presets.columns, false);
     }
   }
 

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

@@ -40,7 +40,6 @@ import {
   SlickGrid,
   SlickgridConfig,
   SlickGroupItemMetadataProvider,
-  sortPresetColumns,
   SortService,
   TreeDataService,
   type Observable,
@@ -1306,46 +1305,13 @@ export class AureliaSlickgridCustomElement {
     }
   }
 
-  protected insertDynamicPresetColumns(columnId: string, gridPresetColumns: Column[]) {
-    if (this._columns) {
-      const columnPosition = this._columns.findIndex((c) => c.id === columnId);
-      if (columnPosition >= 0) {
-        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);
-        }
-      }
-    }
-  }
-
   /** Load any possible Columns Grid Presets */
   protected loadColumnPresetsWhenDatasetInitialized() {
     // if user entered some Columns "presets", we need to reflect them all in the grid
     if (this.options.presets && Array.isArray(this.options.presets.columns) && this.options.presets.columns.length > 0) {
-      const gridPresetColumns: Column[] = this.gridStateService.getAssociatedGridColumns(this.grid, this.options.presets.columns);
-      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.options.enableRowMoveManager) {
-          const rmmColId = this.options?.rowMoveManager?.columnId ?? '_move';
-          this.insertDynamicPresetColumns(rmmColId, gridPresetColumns);
-        }
-        if (this.options.enableCheckboxSelector) {
-          const chkColId = this.options?.checkboxSelector?.columnId ?? '_checkbox_selector';
-          this.insertDynamicPresetColumns(chkColId, gridPresetColumns);
-        }
-        if (this.options.enableRowDetailView) {
-          const rdvColId = this.options?.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.
-        gridPresetColumns.forEach((col) => (col.originalWidth = col.width));
-
-        // finally sort and set the new presets columns (including checkbox selector if need be)
-        const orderedColumns = sortPresetColumns(this._columns, gridPresetColumns);
-        this.grid.setColumns(orderedColumns);
-      }
+      // delegate to GridStateService for centralized column arrangement logic
+      // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
+      this.gridStateService.changeColumnsArrangement(this.options.presets.columns, false);
     }
   }
 

frameworks/slickgrid-react/src/components/slickgrid-react.tsx

@@ -22,7 +22,6 @@ import {
   SlickGrid,
   SlickgridConfig,
   SlickGroupItemMetadataProvider,
-  sortPresetColumns,
   SortService,
   TreeDataService,
   type AutocompleterEditor,
@@ -1410,46 +1409,13 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     }
   }
 
-  protected insertDynamicPresetColumns(columnId: string, gridPresetColumns: Column<TData>[]) {
-    if (this._columns) {
-      const columnPosition = this._columns.findIndex((c) => c.id === columnId);
-      if (columnPosition >= 0) {
-        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);
-        }
-      }
-    }
-  }
-
   /** Load any possible Columns Grid Presets */
   protected loadColumnPresetsWhenDatasetInitialized() {
     // if user entered some Columns "presets", we need to reflect them all in the grid
     if (this.grid && this.options.presets && Array.isArray(this.options.presets.columns) && this.options.presets.columns.length > 0) {
-      const gridPresetColumns: Column<TData>[] = this.gridStateService.getAssociatedGridColumns(this.grid, this.options.presets.columns);
-      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.options.enableRowMoveManager) {
-          const rmmColId = this.options?.rowMoveManager?.columnId ?? '_move';
-          this.insertDynamicPresetColumns(rmmColId, gridPresetColumns);
-        }
-        if (this.options.enableCheckboxSelector) {
-          const chkColId = this.options?.checkboxSelector?.columnId ?? '_checkbox_selector';
-          this.insertDynamicPresetColumns(chkColId, gridPresetColumns);
-        }
-        if (this.options.enableRowDetailView) {
-          const rdvColId = this.options?.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.
-        gridPresetColumns.forEach((col) => (col.originalWidth = col.width));
-
-        // finally sort and set the new presets columns (including checkbox selector if need be)
-        const orderedColumns = sortPresetColumns(this._columns, gridPresetColumns);
-        this.grid.setColumns(orderedColumns);
-      }
+      // delegate to GridStateService for centralized column arrangement logic
+      // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
+      this.gridStateService.changeColumnsArrangement(this.options.presets.columns, false);
     }
   }
 

frameworks/slickgrid-vue/src/components/SlickgridVue.vue

@@ -23,7 +23,6 @@ import {
   SlickGrid,
   SlickgridConfig,
   SlickGroupItemMetadataProvider,
-  sortPresetColumns,
   SortService,
   TreeDataService,
   type AutocompleterEditor,
@@ -1276,46 +1275,13 @@ function loadEditorCollectionAsync(column: Column) {
   }
 }
 
-function insertDynamicPresetColumns(columnId: string, gridPresetColumns: Column<any>[]) {
-  if (_columnDefinitions.value) {
-    const columnPosition = _columnDefinitions.value.findIndex((c) => c.id === columnId);
-    if (columnPosition >= 0) {
-      const dynColumn = _columnDefinitions.value[columnPosition] as Column;
-      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 */
 function loadColumnPresetsWhenDatasetInitialized() {
   // if user entered some Columns "presets", we need to reflect them all in the grid
   if (_gridOptions.value.presets && Array.isArray(_gridOptions.value.presets.columns) && _gridOptions.value.presets.columns.length > 0) {
-    const gridPresetColumns: Column<any>[] = gridStateService.getAssociatedGridColumns(grid!, _gridOptions.value.presets.columns);
-    if (gridPresetColumns && Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(_columnDefinitions.value)) {
-      // make sure that the dynamic columns are included in presets (1.Row Move, 2. Row Selection, 3. Row Detail)
-      if (_gridOptions.value.enableRowMoveManager) {
-        const rmmColId = _gridOptions.value?.rowMoveManager?.columnId ?? '_move';
-        insertDynamicPresetColumns(rmmColId, gridPresetColumns);
-      }
-      if (_gridOptions.value.enableCheckboxSelector) {
-        const chkColId = _gridOptions.value?.checkboxSelector?.columnId ?? '_checkbox_selector';
-        insertDynamicPresetColumns(chkColId, gridPresetColumns);
-      }
-      if (_gridOptions.value.enableRowDetailView) {
-        const rdvColId = _gridOptions.value?.rowDetailView?.columnId ?? '_detail_selector';
-        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.
-      gridPresetColumns.forEach((col) => (col.originalWidth = col.width));
-
-      // finally sort and set the new presets columns (including checkbox selector if need be)
-      const orderedColumns = sortPresetColumns(_columnDefinitions.value, gridPresetColumns);
-      grid?.setColumns(orderedColumns);
-    }
+    // delegate to GridStateService for centralized column arrangement logic
+    // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
+    gridStateService.changeColumnsArrangement(_gridOptions.value.presets.columns, false);
   }
 }
 

package.json

@@ -26,6 +26,7 @@
     "clean": "remove --glob {demos,frameworks,frameworks-plugins,packages}/*/dist --glob=packages/*/tsconfig.tsbuildinfo --stat",
     "cypress": "cypress open --config-file test/cypress.config.ts",
     "cypress:ci": "cypress run --config-file test/cypress.config.ts",
+    "cypress:install": "pnpm exec cypress install",
     "sass:bundle": "pnpm -r --stream --filter=./packages/common run sass:bundle",
     "build:universal": "tsc --build ./tsconfig.packages.json && pnpm sass:bundle",
     "build:frameworks": "pnpm -r --stream --filter=\"./{demos,frameworks,frameworks-plugins}/**\" run build",