From 88185dd244a23330c05048acb7de80eca8376bcb Mon Sep 17 00:00:00 2001 From: Hristo Anastasov Date: Tue, 9 Feb 2021 16:26:59 +0200 Subject: [PATCH 01/13] feat(paginator): expose paging events #8923 --- CHANGELOG.md | 8 + .../src/lib/grids/grid-base.directive.ts | 66 ++--- .../src/lib/paginator/interfaces.ts | 16 + .../lib/paginator/paginator.component.html | 41 ++- .../lib/paginator/paginator.component.spec.ts | 277 ++++++++++++++++-- .../src/lib/paginator/paginator.component.ts | 102 ++++--- .../test-utils/paginator-functions.spec.ts | 42 +++ 7 files changed, 450 insertions(+), 102 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/paginator/interfaces.ts create mode 100644 projects/igniteui-angular/src/lib/test-utils/paginator-functions.spec.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 05ce9603529..38a3075ff64 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,12 @@ All notable changes for each version of this project will be documented in this - The `igx-drop-down-item` now allows for `igxPrefix`, `igxSuffix` and `igx-divider` directives to be passed as `ng-content` and they will be renderer accordingly in the item's content. - `IgxGrid` - Added support for exporting grouped data. +- `IgxPaginator` + - `paging` and `pagingDone` events are now emitted. + - `pageChange` and `perPageChange` event is now hidden and for internal use onlu, it only serves two way data binding + - `page` setter no longer emits paging events. Only the `paginate` method will emit corresponding events. + + ### General - `IgxDialog` - The dialog content has been moved inside the dialog window container in the template. This means that if you have added something in-between the opening and closing tags of the dialog, you may have to adjust its styling a bit since that content is now rendered inside a container that has padding on it. @@ -31,6 +37,8 @@ All notable changes for each version of this project will be documented in this - `IgxSnackbar` - `show` and `hide` methods have been deprecated. `open` and `close` should be used instead. - `IgxGrid` + - **Breaking Change**: + - The grid no longer exposes the `page` and `perPage` properties, the `onPagingDone`, `perPageChange` and `pageChange` events. - Added new property `selectRowOnClick` that determines whether clicking over a row will change its selection state or not. Set to `true` by default. - `IgxHierarchicalGrid` - Added new property `selectRowOnClick` that determines whether clicking over a row will change its selection state or not. Set to `true` by default. diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 785ad28a5f8..84e2a0e021f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -150,7 +150,7 @@ import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/gri import { IgxSnackbarComponent } from '../snackbar/snackbar.component'; import { v4 as uuidv4 } from 'uuid'; import { IgxActionStripComponent } from '../action-strip/action-strip.component'; -import { DeprecateProperty } from '../core/deprecateDecorators'; +import { DeprecateMethod, DeprecateProperty } from '../core/deprecateDecorators'; let FAKE_ROW_ID = -1; @@ -286,35 +286,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements @Output() public onScroll = new EventEmitter(); - /** - * Emitted after the current page is changed. - * - * @example - * ```html - * - * ``` - * ```typescript - * public onPageChange(page: number) { - * this.currentPage = page; - * } - * ``` - */ + /** @hidden @internal */ @Output() public pageChange = new EventEmitter(); - /** - * Emitted when `perPage` property value of the grid is changed. - * - * @example - * ```html - * - * ``` - * ```typescript - * public onPerPageChange(perPage: number) { - * this.perPage = perPage; - * } - * ``` - */ + /** @hidden @internal */ @Output() public perPageChange = new EventEmitter(); @@ -622,6 +598,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements public onFilteringDone = new EventEmitter(); /** + * @deprecated Use `IgxPaginator` outputs instead. * Emitted when paging is performed. * * @remarks @@ -631,6 +608,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * ``` */ + @DeprecateProperty('Use the corresponding event emiited by the `igx-paginator`. See https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#angular-pagination-template') @Output() public onPagingDone = new EventEmitter(); @@ -1419,7 +1397,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements this.selectionService.clear(true); this._perPage = val; this.perPageChange.emit(this._perPage); - this.page = 0; + + if (this.totalPages !== 0 && this._page >= this.totalPages) { + this.page = this.totalPages - 1; + } + this.endEdit(true); this.notifyChanges(); } @@ -4042,6 +4024,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements } /** + * @deprecated Use `IgxPaginator` corresponding method instead. * Gets the total number of pages. * * @example @@ -4049,14 +4032,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * const totalPages = this.grid.totalPages; * ``` */ + @DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`. See https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#angular-pagination-template') public get totalPages(): number { if (this.pagingState) { return this.pagingState.metadata.countPages; } - return this._totalRecords >= 0 ? Math.ceil(this._totalRecords / this.perPage) : -1; + return this._totalRecords >= 0 ? Math.ceil(this._totalRecords / this._perPage) : -1; } /** + * @deprecated Use `IgxPaginator` corresponding method instead. * Gets if the current page is the first page. * * @example @@ -4064,11 +4049,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * const firstPage = this.grid.isFirstPage; * ``` */ + @DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`. See https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#angular-pagination-template') public get isFirstPage(): boolean { - return this.page === 0; + return this._page === 0; } /** + * @deprecated Use `IgxPaginator` corresponding method instead. * Goes to the next page, if the grid is not already at the last page. * * @example @@ -4076,13 +4063,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * this.grid1.nextPage(); * ``` */ + @DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`. See https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#angular-pagination-template') public nextPage(): void { - if (!this.isLastPage) { - this.page += 1; - } + this.paginate(this._page + 1); } /** + * @deprecated Use `IgxPaginator` corresponding methods instead. * Goes to the previous page, if the grid is not already at the first page. * * @example @@ -4090,10 +4077,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * this.grid1.previousPage(); * ``` */ + @DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`. See https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#angular-pagination-template') public previousPage(): void { - if (!this.isFirstPage) { - this.page -= 1; - } + this.paginate(this._page - 1); } /** @@ -4120,6 +4106,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements } /** + * @deprecated * Returns if the current page is the last page. * * @example @@ -4127,8 +4114,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * const lastPage = this.grid.isLastPage; * ``` */ + @DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`. See https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#angular-pagination-template') public get isLastPage(): boolean { - return this.page + 1 >= this.totalPages; + return this._page + 1 >= this.totalPages; } /** @@ -6642,7 +6630,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements // eslint-disable-next-line prefer-const for (let [row, set] of selectionMap) { - row = this.paging ? row + (this.perPage * this.page) : row; + row = this.paging ? row + (this._perPage * this._page) : row; row = isRemote ? row - this.virtualizationState.startIndex : row; if (!source[row] || source[row].detailsData !== undefined) { continue; @@ -6758,7 +6746,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements const rowIndex = inCollection.indexOf(row); const page = Math.floor(rowIndex / this.perPage); - if (this.page !== page) { + if (this._page !== page) { delayScrolling = true; this.page = page; } diff --git a/projects/igniteui-angular/src/lib/paginator/interfaces.ts b/projects/igniteui-angular/src/lib/paginator/interfaces.ts new file mode 100644 index 00000000000..084d42a2e98 --- /dev/null +++ b/projects/igniteui-angular/src/lib/paginator/interfaces.ts @@ -0,0 +1,16 @@ +import { IBaseEventArgs, CancelableBrowserEventArgs } from '../core/utils'; + +/** + * The event arguments after a page is changed. + * `oldPage` is the last active page, `newPage` is the current page. + */ +export interface IPagingDoneEventArgs extends IBaseEventArgs { + oldPage: number; + newPage: number; +} + +/** + * The event arguments before a page is changed. + * `oldPage` is the currently active page, `newPage` is the page that will be active if the operation completes succesfully. + */ +export interface IPagingEventArgs extends CancelableBrowserEventArgs, IPagingDoneEventArgs { } diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.html b/projects/igniteui-angular/src/lib/paginator/paginator.component.html index bf190f61d25..862dbce20c0 100644 --- a/projects/igniteui-angular/src/lib/paginator/paginator.component.html +++ b/projects/igniteui-angular/src/lib/paginator/paginator.component.html @@ -1,7 +1,11 @@
- @@ -11,10 +15,24 @@