-
-
Notifications
You must be signed in to change notification settings - Fork 120
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(backend): extract Pagination into its own Service to expose methods
- with this new Service, user can now programmatically change page from its application since the Pagination Service is now exposed to the outside
- Loading branch information
1 parent
388503d
commit 4a4a708
Showing
13 changed files
with
982 additions
and
250 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
89 changes: 48 additions & 41 deletions
89
src/app/modules/angular-slickgrid/components/slick-pagination.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 |
|---|---|---|
| @@ -1,44 +1,51 @@ | ||
| <div class="slick-pagination"> | ||
| <div class="slick-pagination-nav"> | ||
| <nav aria-label="Page navigation"> | ||
| <ul class="pagination"> | ||
| <li class="page-item" [ngClass]="(pageNumber === 1 || totalItems === 0) ? 'disabled' : ''"> | ||
| <a class="page-link icon-seek-first fa fa-angle-double-left" aria-label="First" (click)="changeToFirstPage($event)"> | ||
| </a> | ||
| </li> | ||
| <li class="page-item" [ngClass]="(pageNumber === 1 || totalItems === 0) ? 'disabled' : ''"> | ||
| <a class="page-link icon-seek-prev fa fa-angle-left" aria-label="Previous" (click)="changeToPreviousPage($event)"> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <div class="slick-pagination" *ngIf="pager"> | ||
| <div class="slick-pagination-nav"> | ||
| <nav aria-label="Page navigation"> | ||
| <ul class="pagination"> | ||
| <li class="page-item" [ngClass]="(pager?.pageNumber === 1 || pager?.totalItems === 0) ? 'disabled' : ''"> | ||
| <a class="page-link icon-seek-first fa fa-angle-double-left" aria-label="First" | ||
| (click)="changeToFirstPage($event)"> | ||
| </a> | ||
| </li> | ||
| <li class="page-item" [ngClass]="(pager?.pageNumber === 1 || pager?.totalItems === 0) ? 'disabled' : ''"> | ||
| <a class="page-link icon-seek-prev fa fa-angle-left" aria-label="Previous" | ||
| (click)="changeToPreviousPage($event)"> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <div class="slick-page-number"> | ||
| <span>{{textPage}}</span> | ||
| <input type="text" class="form-control" [value]="pageNumber" size="1" [readOnly]="totalItems === 0" (change)="changeToCurrentPage($event)"> | ||
| <span>{{textOf}}</span><span> {{pageCount}}</span> | ||
| </div> | ||
|
|
||
| <nav aria-label="Page navigation"> | ||
| <ul class="pagination"> | ||
| <li class="page-item" [ngClass]="(pageNumber === pageCount || totalItems === 0) ? 'disabled' : ''"> | ||
| <a class="page-link icon-seek-next text-center fa fa-lg fa-angle-right" aria-label="Next" (click)="changeToNextPage($event)"> | ||
| </a> | ||
| </li> | ||
| <li class="page-item" [ngClass]="(pageNumber === pageCount || totalItems === 0) ? 'disabled' : ''"> | ||
| <a class="page-link icon-seek-end fa fa-lg fa-angle-double-right" aria-label="Last" (click)="changeToLastPage($event)"> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <div class="slick-page-number"> | ||
| <span>{{textPage}}</span> | ||
| <input type="text" class="form-control" [value]="pager?.pageNumber" size="1" [readOnly]="pager?.totalItems === 0" | ||
| (change)="changeToCurrentPage($event)"> | ||
| <span>{{textOf}}</span><span> {{pager?.pageCount}}</span> | ||
| </div> | ||
| <span class="slick-pagination-settings"> | ||
| <select id="items-per-page-label" [value]="itemsPerPage" (change)="onChangeItemPerPage($event)"> | ||
| <option value="{{pageSize}}" *ngFor="let pageSize of paginationPageSizes;">{{pageSize}}</option> | ||
| </select> | ||
| <span>{{textItemsPerPage}}</span>, | ||
| <span class="slick-pagination-count"> | ||
| <span>{{dataFrom}}-{{dataTo}} {{textOf}} {{totalItems}} {{textItems}}</span> | ||
| </span> | ||
|
|
||
| <nav aria-label="Page navigation"> | ||
| <ul class="pagination"> | ||
| <li class="page-item" | ||
| [ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''"> | ||
| <a class="page-link icon-seek-next text-center fa fa-lg fa-angle-right" aria-label="Next" | ||
| (click)="changeToNextPage($event)"> | ||
| </a> | ||
| </li> | ||
| <li class="page-item" | ||
| [ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''"> | ||
| <a class="page-link icon-seek-end fa fa-lg fa-angle-double-right" aria-label="Last" | ||
| (click)="changeToLastPage($event)"> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| <span class="slick-pagination-settings"> | ||
| <select id="items-per-page-label" [value]="pager?.itemsPerPage" (change)="changeItemPerPage($event)"> | ||
| <option value="{{pageSize}}" *ngFor="let pageSize of pager?.availablePageSizes;">{{pageSize}}</option> | ||
| </select> | ||
| <span>{{textItemsPerPage}}</span>, | ||
| <span class="slick-pagination-count"> | ||
| <span>{{pager?.from}}-{{pager?.to}} {{textOf}} {{pager?.totalItems}} {{textItems}}</span> | ||
| </span> | ||
| </div> | ||
| </span> | ||
| </div> |
Oops, something went wrong.