-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(entity-table): add pagination (#707)
* feat(entity-table) Pagination * lint * wip * chore(build): build warn ng-packagr No name was provided for external module * wip * refactor(entity-table-paginator) refector individual input as options * Update workspace.component.ts * wip * Update entity-table-paginator.component.html * Update entity-table-paginator.component.ts * fix(context-service) refer to issue #702 - message stored in base.json * refactor(entity-table) translation and paginationOptions processing * fix(entity-table) deprecation warnint on event * fix(entity-table) wrong last record used when clicking on a row (outside checkbox) Co-authored-by: Marc-André Barbeau <[email protected]>
- Loading branch information
2 people
authored and
Marc-André Barbeau
committed
Sep 8, 2020
1 parent
8f4f372
commit afde233
Showing
23 changed files
with
357 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
packages/common/src/lib/entity/entity-table-paginator/entity-table-paginator.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <mat-paginator | ||
| [disabled]="disabled" | ||
| [hidePageSize]="hidePageSize" | ||
| [length]="length" | ||
| [pageIndex]="pageIndex" | ||
| [pageSize]="pageSize" | ||
| [pageSizeOptions]="pageSizeOptions" | ||
| [showFirstLastButtons]="showFirstLastButtons" | ||
| (page)="emitPaginator()"> | ||
| </mat-paginator> |
Empty file.
139 changes: 139 additions & 0 deletions
139
packages/common/src/lib/entity/entity-table-paginator/entity-table-paginator.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| import { | ||
| Component, | ||
| Input, | ||
| ChangeDetectionStrategy, | ||
| OnInit, | ||
| ViewChild, | ||
| Output, | ||
| EventEmitter, | ||
| OnDestroy | ||
| } from '@angular/core'; | ||
|
|
||
| import { | ||
| EntityStore | ||
| } from '../shared'; | ||
| import { MatPaginator, PageEvent } from '@angular/material/paginator'; | ||
| import { BehaviorSubject, Subscription } from 'rxjs'; | ||
| import { LanguageService } from '@igo2/core'; | ||
| import { EntityTablePaginatorOptions } from './entity-table-paginator.interface'; | ||
|
|
||
| @Component({ | ||
| selector: 'igo-entity-table-paginator', | ||
| templateUrl: './entity-table-paginator.component.html', | ||
| styleUrls: ['./entity-table-paginator.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class EntityTablePaginatorComponent implements OnInit, OnDestroy { | ||
|
|
||
| public disabled: boolean = false; | ||
| public hidePageSize: boolean = false; | ||
| public pageIndex: number = 0; | ||
| public pageSize: number = 50; | ||
| public pageSizeOptions: number[] = [5, 10, 20, 50, 100, 200]; | ||
| public showFirstLastButtons: boolean = true; | ||
| private entitySortChange$$: Subscription; | ||
| private paginationLabelTranslation$$: Subscription[] = []; | ||
|
|
||
| @Input() entitySortChange$: BehaviorSubject<boolean> = new BehaviorSubject(false); | ||
| /** | ||
| * Entity store | ||
| */ | ||
| @Input() store: EntityStore<object>; | ||
|
|
||
| /** | ||
| * Paginator options | ||
| */ | ||
| @Input() | ||
| paginatorOptions: EntityTablePaginatorOptions; | ||
|
|
||
| /** | ||
| * Event emitted when the paginator changes the page size or page index. | ||
| */ | ||
| @Output() page: EventEmitter<PageEvent>; | ||
|
|
||
| public length: number = 0; | ||
|
|
||
| /** | ||
| * Paginator emitted. | ||
| */ | ||
| @Output() paginatorChange: EventEmitter<MatPaginator> = new EventEmitter<MatPaginator>(); | ||
|
|
||
| constructor(private languageService: LanguageService) { } | ||
|
|
||
| @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; | ||
|
|
||
| ngOnInit() { | ||
| this.store.stateView.count$.subscribe((count) => { | ||
| this.length = count; | ||
| this.emitPaginator(); | ||
| }); | ||
| this.entitySortChange$$ = this.entitySortChange$.subscribe(() => { | ||
| if (this.paginator) { | ||
| this.paginator.firstPage(); | ||
| } | ||
| }); | ||
| this.initPaginatorOptions(); | ||
| this.translateLabels(); | ||
| } | ||
|
|
||
| initPaginatorOptions() { | ||
| this.disabled = this.paginatorOptions?.disabled || this.disabled; | ||
| this.hidePageSize = this.paginatorOptions?.hidePageSize || this.hidePageSize; | ||
| this.pageIndex = this.paginatorOptions?.pageIndex || this.pageIndex; | ||
| this.pageSize = this.paginatorOptions?.pageSize || this.pageSize; | ||
| this.pageSizeOptions = this.paginatorOptions?.pageSizeOptions || this.pageSizeOptions; | ||
| this.showFirstLastButtons = this.paginatorOptions?.showFirstLastButtons || this.showFirstLastButtons; | ||
| } | ||
|
|
||
| translateLabels() { | ||
|
|
||
| this.paginationLabelTranslation$$.push( | ||
| this.languageService.translate.get('igo.common.paginator.firstPageLabel').subscribe((label: string) => { | ||
| this.paginator._intl.firstPageLabel = label; | ||
| })); | ||
|
|
||
| this.paginator._intl.getRangeLabel = this.rangeLabel; | ||
|
|
||
| this.paginationLabelTranslation$$.push( | ||
| this.languageService.translate.get('igo.common.paginator.itemsPerPageLabel').subscribe((label: string) => { | ||
| this.paginator._intl.itemsPerPageLabel = label; | ||
| })); | ||
| this.paginationLabelTranslation$$.push( | ||
| this.languageService.translate.get('igo.common.paginator.lastPageLabel').subscribe((label: string) => { | ||
| this.paginator._intl.lastPageLabel = label; | ||
| })); | ||
| this.paginationLabelTranslation$$.push( | ||
| this.languageService.translate.get('igo.common.paginator.nextPageLabel').subscribe((label: string) => { | ||
| this.paginator._intl.nextPageLabel = label; | ||
| })); | ||
| this.paginationLabelTranslation$$.push( | ||
| this.languageService.translate.get('igo.common.paginator.previousPageLabel').subscribe((label: string) => { | ||
| this.paginator._intl.previousPageLabel = label; | ||
| })); | ||
| } | ||
|
|
||
| rangeLabel = (page: number, pageSize: number, length: number) => { | ||
| const of: BehaviorSubject<string> = new BehaviorSubject(''); | ||
|
|
||
| this.paginationLabelTranslation$$.push( | ||
| this.languageService.translate.get('igo.common.paginator.of').subscribe((label: string) => { | ||
| of.next(label); | ||
| })); | ||
| if (length === 0 || pageSize === 0) { return `0 ${of.value} ${length}`; } | ||
| length = Math.max(length, 0); | ||
| const startIndex = page * pageSize; | ||
| const endIndex = startIndex < length ? | ||
| Math.min(startIndex + pageSize, length) : | ||
| startIndex + pageSize; | ||
| return `${startIndex + 1} - ${endIndex} ${of.value} ${length}`; | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.entitySortChange$$.unsubscribe(); | ||
| this.paginationLabelTranslation$$.map(sub => sub.unsubscribe()); | ||
| } | ||
|
|
||
| emitPaginator() { | ||
| this.paginatorChange.emit(this.paginator); | ||
| } | ||
| } |
8 changes: 8 additions & 0 deletions
8
packages/common/src/lib/entity/entity-table-paginator/entity-table-paginator.interface.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| export interface EntityTablePaginatorOptions { | ||
| disabled?: boolean; // Whether the component is disabled. | ||
| hidePageSize?: boolean; // Whether to hide the page size selection UI from the user. | ||
| pageIndex?: number; // The zero-based page index of the displayed list of items. | ||
| pageSize?: number; // Number of items to display on a page. | ||
| pageSizeOptions?: number[]; // The set of provided page size options to display to the user. | ||
| showFirstLastButtons?: boolean; // Whether to show the first/last buttons UI to the user. | ||
| } |
Oops, something went wrong.