feat(paging): ability to jump to page n with page links (closes #496)
#544
Conversation
Data table paging - Capability to jump to page n. A new parameter 'pageLinkCount' on the Paging-Bar Component that is a number and will create the amount of page links that can be clicked on to jump to a certain page. Closes #496
jeremysmartt
changed the title
| @@ -12,16 +12,19 @@ | |||
| <ng-content></ng-content> | |||
| </div> | |||
| <div class="td-paging-bar-navigation"> | |||
| <button md-icon-button type="button" *ngIf="firstLast" [disabled]="isMinPage()" (click)="firstPage()"> | |||
| <button id="firstPageButton" md-icon-button type="button" *ngIf="firstLast" [disabled]="isMinPage()" (click)="firstPage()"> | |||
There was a problem hiding this comment.
when using id's, it can get tricky since there will be id duplication when using 2 td-paging-bar components on screen, so we have to dynamically create an id (could be a number) and increase it on every constructor.
There was a problem hiding this comment.
Something like [id]="'td-paging-bar-' + id + '-first-page'"
| <md-icon>{{ isRTL ? 'skip_next' : 'skip_previous' }}</md-icon> | ||
| </button> | ||
| <button md-icon-button type="button" [disabled]="isMinPage()" (click)="prevPage()"> | ||
| <md-icon>{{ isRTL ? 'navigate_next' : 'navigate_before' }}</md-icon> | ||
| </button> | ||
| <ng-template *ngIf="pageLinkCount > 0" let-link let-index="index" ngFor [ngForOf]="pageLinks"> | ||
| <button id="{{'pageLinkCount' + index}}" md-icon-button type="button" [color]="page === link ? 'accent' : ''" (click)="navigateToPage(link)">{{link}}</button> |
There was a problem hiding this comment.
Same as above, and we can probably do [id]="'td-paging-bar-' + id + '-page-link-' + index"
| }); | ||
| }); | ||
|
|
||
| @Component({ |
There was a problem hiding this comment.
For the most part, its good to separate test cases like you did. But we can make the inputs dynamic so we change them in the unit test on the fly and see if what we expected happens.
e.g.
What should happen if i change pageSizeAll to false on the fly and then back
or
What should happen if i change the pageLinks
There was a problem hiding this comment.
code checked in for this
| * _calculatePageLinks?: function | ||
| * Calculates the page links that should be shown to the user based on the current state of the paginator | ||
| */ | ||
| private _calculatePageLinks(): void { |
…inkCount is 2 or less
emoralesb05
changed the title
n with page links (closes #496)
… paginators on the same page
…n changing value, and then testing for the new value.
…the way to send and back
…on per page setting
…covalent into feature/jump-to-page-n
|
LGTM 💥 |
Description
Data table paging - Capability to jump to page n. A new parameter 'pageLinkCount' on the Paging-Bar Component that is a number and will create the amount of page links that can be clicked on to jump to a certain page.
Also added all the other missing unit tests for all the other paging parameters.
Closes #496
What's included?
Test Steps
src/app/components/components/paging/paging.component.htmlGeneral Tests for Every PR
ng serve --aotstill works.npm run lintpasses.npm testpasses and code coverage is not lower.npm run buildstill works.Screenshots or link to CodePen/Plunker/JSfiddle