Skip to content

Commit

Permalink
fix(filter): Grid Preset Filters should work with Tree Data View (#522)
Browse files Browse the repository at this point in the history 
* fix(filter): Grid Preset Filters should work with Tree Data View
- the Tree Data must execute pre-filtering with Tree Data when having Grid Preset Filters
  • Loading branch information
@ghiscoding
ghiscoding authored Jul 14, 2020
1 parent bacec1f commit f574fe4
Show file tree
Hide file tree
Showing 10 changed files with 213 additions and 147 deletions.
2 changes: 1 addition & 1 deletion src/app/examples/grid-rowselection.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export class GridRowSelectionComponent implements OnInit {
// the RECOMMENDED is to use "dataContextIds" since that will always work even with Pagination, while "gridRowIndexes" is only good for 1 page
rowSelection: {
// gridRowIndexes: [2], // the row position of what you see on the screen (UI)
dataContextIds: [3, 12, 13, 522] // (recommended) select by the your data object IDs
dataContextIds: [3, 12, 13, 522] // (recommended) select by your data object IDs
}
},
};
Expand Down
7 changes: 5 additions & 2 deletions src/app/examples/grid-tree-data-parent-child.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export class GridTreeDataParentChildComponent implements OnInit {
{ id: 'duration', name: 'Duration', field: 'duration', minWidth: 90, filterable: true },
{
id: 'percentComplete', name: '% Complete', field: 'percentComplete', minWidth: 120, maxWidth: 200,
sortable: true, filterable: true, filter: { model: Filters.slider, operator: '>=' },
sortable: true, filterable: true, filter: { model: Filters.compoundSlider, operator: '>=' },
formatter: Formatters.percentCompleteBar, type: FieldType.number,
},
{
Expand Down Expand Up @@ -104,6 +104,9 @@ export class GridTreeDataParentChildComponent implements OnInit {
// change header/cell row height for material design theme
headerRowHeight: 45,
rowHeight: 40,
presets: {
filters: [{ columnId: 'percentComplete', searchTerms: [25], operator: '>=' }]
},

// use Material Design SVG icons
contextMenu: {
Expand Down Expand Up @@ -175,7 +178,7 @@ export class GridTreeDataParentChildComponent implements OnInit {
// force a resort because of the tree data structure
setTimeout(() => {
const titleColumn = this.columnDefinitions.find(col => col.id === 'title');
this.angularGrid.sortService.onLocalSortChanged(this.gridObj, this.dataViewObj, [{ columnId: 'title', sortCol: titleColumn, sortAsc: true }]);
this.angularGrid.sortService.onLocalSortChanged(this.gridObj, [{ columnId: 'title', sortCol: titleColumn, sortAsc: true }]);

// scroll into the position, after insertion cycle, where the item was added
const rowIndex = this.dataViewObj.getRowById(newItem.id);
Expand Down
17 changes: 9 additions & 8 deletions src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,7 @@ const mockGrid = {
invalidate: jest.fn(),
getActiveCellNode: jest.fn(),
getColumns: jest.fn(),
getData: () => mockDataView,
getSelectionModel: jest.fn(),
getEditorLock: () => mockGetEditorLock,
getOptions: jest.fn(),
Expand Down Expand Up @@ -598,7 +599,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
component.gridOptions = { enableFiltering: true } as GridOption;
component.ngAfterViewInit();

expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid);
});

it('should bind local sort when "enableSorting" is set', () => {
Expand All @@ -607,7 +608,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
component.gridOptions = { enableSorting: true } as GridOption;
component.ngAfterViewInit();

expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid);
});
});

Expand Down Expand Up @@ -1024,7 +1025,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
} as GridOption;
component.ngAfterViewInit();

expect(bindBackendSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
expect(bindBackendSpy).toHaveBeenCalledWith(mockGrid);
expect(initSpy).toHaveBeenCalledWith(mockGraphqlOptions, mockPagination, mockGrid);
});

Expand All @@ -1041,7 +1042,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
} as GridOption;
component.ngAfterViewInit();

expect(bindBackendSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
expect(bindBackendSpy).toHaveBeenCalledWith(mockGrid);
});

it('should call bind local sorting when "enableSorting" is set and "useLocalSorting" is set as well', () => {
Expand All @@ -1058,7 +1059,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
} as GridOption;
component.ngAfterViewInit();

expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid);
});

it('should call bind backend filtering when "enableFiltering" is set', () => {
Expand All @@ -1070,7 +1071,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
component.ngAfterViewInit();

expect(initSpy).toHaveBeenCalledWith(mockGrid);
expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid);
expect(populateSpy).not.toHaveBeenCalled();
});

Expand All @@ -1088,7 +1089,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
} as GridOption;
component.ngAfterViewInit();

expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
expect(bindLocalSpy).toHaveBeenCalledWith(mockGrid);
});

it('should reflect column filters when "enableFiltering" is set', () => {
Expand All @@ -1107,7 +1108,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
component.ngAfterViewInit();

expect(initSpy).toHaveBeenCalledWith(mockGrid);
expect(bindBackendSpy).toHaveBeenCalledWith(mockGrid, mockDataView);
expect(bindBackendSpy).toHaveBeenCalledWith(mockGrid);
expect(populateSpy).not.toHaveBeenCalled();
});

Expand Down
87 changes: 50 additions & 37 deletions src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -367,6 +367,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
if (!this._isDatasetInitialized && this.gridOptions.enableCheckboxSelector) {
this.loadRowSelectionPresetWhenExists();
}
this.loadPresetsWhenDatasetInitialized();
this._isDatasetInitialized = true;

// also update the hierarchical dataset
Expand Down Expand Up @@ -487,49 +488,34 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
);
}

// if user entered some Columns "presets", we need to reflect them all in the grid
if (gridOptions.presets && Array.isArray(gridOptions.presets.columns) && gridOptions.presets.columns.length > 0) {
const gridColumns: Column[] = this.gridStateService.getAssociatedGridColumns(grid, gridOptions.presets.columns);
if (gridColumns && Array.isArray(gridColumns) && gridColumns.length > 0) {
// make sure that the checkbox selector is also visible if it is enabled
if (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);
}
if (!this.customDataView) {
// bind external sorting (backend) when available or default onSort (dataView)
if (gridOptions.enableSorting) {
// bind external sorting (backend) unless specified to use the local one
if (gridOptions.backendServiceApi && !gridOptions.backendServiceApi.useLocalSorting) {
this.sortService.bindBackendOnSort(grid);
} else {
this.sortService.bindLocalOnSort(grid);
}

// finally set the new presets columns (including checkbox selector if need be)
grid.setColumns(gridColumns);
}
}

// bind external sorting (backend) when available or default onSort (dataView)
if (gridOptions.enableSorting && !this.customDataView) {
// bind external sorting (backend) unless specified to use the local one
if (gridOptions.backendServiceApi && !gridOptions.backendServiceApi.useLocalSorting) {
this.sortService.bindBackendOnSort(grid, dataView);
} else {
this.sortService.bindLocalOnSort(grid, dataView);
}
}

// bind external filter (backend) when available or default onFilter (dataView)
if (gridOptions.enableFiltering && !this.customDataView) {
this.filterService.init(grid);
// bind external filter (backend) when available or default onFilter (dataView)
if (gridOptions.enableFiltering) {
this.filterService.init(grid);

// if user entered some Filter "presets", we need to reflect them all in the DOM
if (gridOptions.presets && Array.isArray(gridOptions.presets.filters) && gridOptions.presets.filters.length > 0) {
this.filterService.populateColumnFilterSearchTermPresets(gridOptions.presets.filters);
}
// bind external filter (backend) unless specified to use the local one
if (gridOptions.backendServiceApi && !gridOptions.backendServiceApi.useLocalFiltering) {
this.filterService.bindBackendOnFilter(grid, dataView);
} else {
this.filterService.bindLocalOnFilter(grid, dataView);
// bind external filter (backend) unless specified to use the local one
if (gridOptions.backendServiceApi && !gridOptions.backendServiceApi.useLocalFiltering) {
this.filterService.bindBackendOnFilter(grid);
} else {
this.filterService.bindLocalOnFilter(grid);
}
}

// load any presets if any (after dataset is initialized)
this.loadPresetsWhenDatasetInitialized();
}


// if user set an onInit Backend, we'll run it right away (and if so, we also need to run preProcess, internalPostProcess & postProcess)
if (gridOptions.backendServiceApi) {
const backendApi = gridOptions.backendServiceApi;
Expand Down Expand Up @@ -812,6 +798,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
if (!this._isDatasetInitialized && (this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection)) {
this.loadRowSelectionPresetWhenExists();
}
this.loadPresetsWhenDatasetInitialized();
this._isDatasetInitialized = true;
}
}
Expand Down Expand Up @@ -917,6 +904,32 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
}
}

private loadPresetsWhenDatasetInitialized() {
if (this.gridOptions && !this.customDataView) {
// if user entered some Filter "presets", we need to reflect them all in the DOM
if (this.gridOptions.presets && Array.isArray(this.gridOptions.presets.filters) && this.gridOptions.presets.filters.length > 0) {
this.filterService.populateColumnFilterSearchTermPresets(this.gridOptions.presets.filters);
}

// 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
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);
}
}

// finally set the new presets columns (including checkbox selector if need be)
this.grid.setColumns(gridColumns);
}
}
}
}

/**
* local grid, check if we need to show the Pagination
* if so then also check if there's any presets and finally initialize the PaginationService
Expand Down Expand Up @@ -1016,7 +1029,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
}

// we will display the custom footer only when there's no Pagination
if (!this.gridOptions.enablePagination) {
if (!this.gridOptions.enablePagination && !this._isPaginationInitialized) {
this.showCustomFooter = this.gridOptions.hasOwnProperty('showCustomFooter') ? this.gridOptions.showCustomFooter : false;
this.customFooterOptions = this.gridOptions.customFooterOptions || {};
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -517,7 +517,7 @@ describe('headerMenuExtension', () => {
instance.onCommand.notify({ column: mockSortedCols[1].sortCol, grid: gridStub, command: 'sort-desc' }, new Slick.EventData(), gridStub);

expect(previousSortSpy).toHaveBeenCalled();
expect(localSortSpy).toHaveBeenCalledWith(gridStub, dataViewStub, mockSortedOuput);
expect(localSortSpy).toHaveBeenCalledWith(gridStub, mockSortedOuput);
expect(onCommandSpy).toHaveBeenCalled();
expect(setSortSpy).toHaveBeenCalled();
});
Expand Down
2 changes: 1 addition & 1 deletion src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,7 @@ export class HeaderMenuExtension implements Extension {
this.sortService.onBackendSortChanged(event, { multiColumnSort: true, sortCols: sortedColsWithoutCurrent, grid: this.sharedService.grid });
emitterType = EmitterType.remote;
} else if (this.sharedService.dataView) {
this.sortService.onLocalSortChanged(this.sharedService.grid, this.sharedService.dataView, sortedColsWithoutCurrent);
this.sortService.onLocalSortChanged(this.sharedService.grid, sortedColsWithoutCurrent);
emitterType = EmitterType.local;
} else {
// when using customDataView, we will simply send it as a onSort event with notify
Expand Down
Loading

0 comments on commit f574fe4

Please sign in to comment.