Skip to content

Commit

Permalink
fix(state): Grid View/Columns dynamically should work w/row move
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Jun 17, 2021
1 parent b53790b commit a7cf1df
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 16 deletions.
19 changes: 14 additions & 5 deletions packages/common/src/services/__tests__/gridState.service.spec.ts
View file
Expand Up @@ -174,13 +174,17 @@ describe('GridStateService', () => {

describe('changeColumnsArrangement method', () => {
const rowCheckboxColumnMock: Column = { id: '_checkbox_selector', field: '_checkbox_selector', minWidth: 50 };
const rowDetailColumnMock: Column = { id: '_detail_selector', field: '_detail_selector', minWidth: 50 };
const rowMoveColumnMock: Column = { id: '_move', field: '_move', minWidth: 50 };
let presetColumnsMock: CurrentColumn[];
let columnsWithoutCheckboxMock: Column[];
let allColumnsMock: Column[];

beforeEach(() => {
allColumnsMock = [
rowCheckboxColumnMock,
rowDetailColumnMock,
rowMoveColumnMock,
{ id: 'field1', field: 'field1', width: 100, cssClass: 'red' },
{ id: 'field2', field: 'field2', width: 150, headerCssClass: 'blue' },
{ id: 'field3', field: 'field3' },
Expand All @@ -199,19 +203,24 @@ describe('GridStateService', () => {
});

afterEach(() => {
gridOptionMock.enableCheckboxSelector = false;
gridOptionMock.enableRowDetailView = false;
gridOptionMock.enableRowMoveManager = false;
jest.clearAllMocks();
});

it('should call the method and expect slickgrid "setColumns" and "autosizeColumns" to be called with newest columns', () => {
gridOptionMock.enableCheckboxSelector = true;
gridOptionMock.enableRowDetailView = true;
gridOptionMock.enableRowMoveManager = true;
jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(allColumnsMock);
const setColsSpy = jest.spyOn(gridStub, 'setColumns');
const autoSizeSpy = jest.spyOn(gridStub, 'autosizeColumns');
const pubSubSpy = jest.spyOn(mockPubSub, 'publish');

service.changeColumnsArrangement(presetColumnsMock);

expect(setColsSpy).toHaveBeenCalledWith([rowCheckboxColumnMock, ...columnsWithoutCheckboxMock]);
expect(setColsSpy).toHaveBeenCalledWith([rowCheckboxColumnMock, rowDetailColumnMock, rowMoveColumnMock, ...columnsWithoutCheckboxMock]);
expect(autoSizeSpy).toHaveBeenCalled();
expect(pubSubSpy).not.toHaveBeenCalledWith('onFullResizeByContentRequested');
});
Expand All @@ -225,7 +234,7 @@ describe('GridStateService', () => {

service.changeColumnsArrangement(presetColumnsMock, false);

expect(setColsSpy).toHaveBeenCalledWith([rowCheckboxColumnMock, ...columnsWithoutCheckboxMock]);
expect(setColsSpy).toHaveBeenCalledWith(columnsWithoutCheckboxMock);
expect(autoSizeSpy).not.toHaveBeenCalled();
expect(pubSubSpy).toHaveBeenCalledWith('onFullResizeByContentRequested', { caller: 'GridStateService' });
});
Expand All @@ -240,7 +249,7 @@ describe('GridStateService', () => {

service.changeColumnsArrangement(presetColumnsMock, false);

expect(setColsSpy).toHaveBeenCalledWith([rowCheckboxColumnMock, ...columnsWithoutCheckboxMock]);
expect(setColsSpy).toHaveBeenCalledWith(columnsWithoutCheckboxMock);
expect(autoSizeSpy).not.toHaveBeenCalled();
expect(pubSubSpy).not.toHaveBeenCalledWith('onFullResizeByContentRequested', { caller: 'GridStateService' });
});
Expand All @@ -253,7 +262,7 @@ describe('GridStateService', () => {

service.changeColumnsArrangement(presetColumnsMock, false, true);

expect(setColsSpy).toHaveBeenCalledWith([rowCheckboxColumnMock, ...columnsWithoutCheckboxMock]);
expect(setColsSpy).toHaveBeenCalledWith(columnsWithoutCheckboxMock);
expect(autoSizeSpy).not.toHaveBeenCalled();
expect(pubSubSpy).toHaveBeenCalledWith('onFullResizeByContentRequested', { caller: 'GridStateService' });
});
Expand All @@ -269,7 +278,7 @@ describe('GridStateService', () => {

service.changeColumnsArrangement(presetColumnsMock, false);

expect(setColsSpy).toHaveBeenCalledWith([rowCheckboxColumnMock, ...columnsWithoutCheckboxMock]);
expect(setColsSpy).toHaveBeenCalledWith(columnsWithoutCheckboxMock);
expect(autoSizeSpy).not.toHaveBeenCalled();
});
});
Expand Down
43 changes: 32 additions & 11 deletions packages/common/src/services/gridState.service.ts
View file
Expand Up @@ -110,26 +110,29 @@ export class GridStateService {
*/
changeColumnsArrangement(definedColumns: CurrentColumn[], triggerAutoSizeColumns = true, triggerColumnsFullResizeByContent = false) {
if (Array.isArray(definedColumns) && definedColumns.length > 0) {
const gridColumns: Column[] = this.getAssociatedGridColumns(this._grid, definedColumns);
const newArrangedColumns: Column[] = this.getAssociatedGridColumns(this._grid, definedColumns);

if (gridColumns && Array.isArray(gridColumns) && gridColumns.length > 0) {
if (newArrangedColumns && Array.isArray(newArrangedColumns) && newArrangedColumns.length > 0) {
// make sure that the checkbox selector is still visible in the list when it is enabled
if (this._gridOptions.enableCheckboxSelector && Array.isArray(this.sharedService.allColumns)) {
const checkboxColumnIdx = this.sharedService.allColumns.findIndex(col => col.id === '_checkbox_selector');
const associatedGridCheckboxColumnIdx = gridColumns.findIndex(col => col.id === '_checkbox_selector');
if (checkboxColumnIdx >= 0 && associatedGridCheckboxColumnIdx === -1) {
const checkboxColumn = this.sharedService.allColumns[checkboxColumnIdx];
checkboxColumnIdx === 0 ? gridColumns.unshift(checkboxColumn) : gridColumns.splice(checkboxColumnIdx, 0, checkboxColumn);
if (Array.isArray(this.sharedService.allColumns)) {
if (this._gridOptions.enableCheckboxSelector) {
this.addColumnDynamicWhenFeatureEnabled('_checkbox_selector', this.sharedService.allColumns, newArrangedColumns);
}
if (this._gridOptions.enableRowDetailView) {
this.addColumnDynamicWhenFeatureEnabled('_detail_selector', this.sharedService.allColumns, newArrangedColumns);
}
if (this._gridOptions.enableRowMoveManager) {
this.addColumnDynamicWhenFeatureEnabled('_move', this.sharedService.allColumns, newArrangedColumns);
}
}

// 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 || col.originalWidth);
newArrangedColumns.forEach(col => col.originalWidth = col.width || col.originalWidth);

// finally set the new presets columns (including checkbox selector if need be)
this._grid.setColumns(gridColumns);
this.sharedService.visibleColumns = gridColumns;
this._grid.setColumns(newArrangedColumns);
this.sharedService.visibleColumns = newArrangedColumns;

// resize the columns to fit the grid canvas
if (triggerAutoSizeColumns) {
Expand Down Expand Up @@ -467,6 +470,24 @@ export class GridStateService {
// private methods
// ------------------

/**
* Add certain column(s), when the feature is/are enabled, to an output column definitions array (by reference).
* Basically some features (for example: Row Selection, Row Detail, Row Move) will be added as column(s) dynamically and internally by the lib,
* we just ask the developer to enable the feature, via flags, and internally the lib will create the necessary column.
* So specifically for these column(s) and feature(s), we need to re-add them internally when the user calls the `changeColumnsArrangement()` method.
* @param {String} dynamicColumnName - the column name that will be re-added (if it wasn't already found in the output array) dynamically
* @param {Array<Column>} fullColumnDefinitions - full column definitions array that includes every columns (including Row Selection, Row Detail, Row Move when enabled)
* @param {Array<Column>} newArrangedColumns - output array that will be use to show in the UI (it could have less columns than fullColumnDefinitions array since user might hide some columns)
*/
addColumnDynamicWhenFeatureEnabled(dynamicColumnName: string, fullColumnDefinitions: Column[], newArrangedColumns: Column[]) {
const checkboxColumnIdx = fullColumnDefinitions.findIndex(col => col.id === dynamicColumnName);
const associatedGridCheckboxColumnIdx = newArrangedColumns.findIndex(col => col.id === dynamicColumnName);
if (checkboxColumnIdx >= 0 && associatedGridCheckboxColumnIdx === -1) {
const checkboxColumn = fullColumnDefinitions[checkboxColumnIdx];
checkboxColumnIdx === 0 ? newArrangedColumns.unshift(checkboxColumn) : newArrangedColumns.splice(checkboxColumnIdx, 0, checkboxColumn);
}
}

/**
* Bind a SlickGrid Extension Event to a Grid State change event
* @param extension name
Expand Down
Binary file modified packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip
View file
Binary file not shown.

0 comments on commit a7cf1df

Please sign in to comment.