-
-
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.
Merge pull request #1485 from ghiscoding/feat/custom-pagination
feat: allow providing a Custom Pagination Component
- Loading branch information
Showing
14 changed files
with
695 additions
and
151 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| <div class="custom-pagination"> | ||
| <span class="custom-pagination-settings"> | ||
| <span class="custom-pagination-count"> | ||
| <span class="page-info-from-to"> | ||
| <span class="item-from" aria-label="Page Item From" data-test="item-from"> | ||
| {{currentPagination?.dataFrom}} | ||
| </span>- | ||
| <span class="item-to" aria-label="Page Item To" data-test="item-to"> | ||
| {{currentPagination?.dataTo}} | ||
| </span> | ||
| of | ||
| </span> | ||
| <span class="page-info-total-items"> | ||
| <span class="total-items" aria-label="Total Items" data-test="total-items">{{currentPagination?.totalItems}}</span> | ||
| <span class="text-items"> items</span> | ||
| </span> | ||
| </span> | ||
| </span> | ||
| <div class="custom-pagination-nav"> | ||
| <nav aria-label="Page navigation"> | ||
| <ul class="custom-pagination-ul"> | ||
| <li class="li page-item seek-first" [class]="{ 'disabled' : isLeftPaginationDisabled() }"> | ||
| <a class="pagination-link mdi mdi-page-first icon-seek-first mdi-22px" aria-label="First Page" role="button" (click)="onFirstPageClicked($event)"></a> | ||
| </li> | ||
| <li class="li page-item seek-prev" [class]="{ 'disabled' : isLeftPaginationDisabled() }"> | ||
| <a class="pagination-link icon-seek-prev mdi mdi-chevron-down mdi-22px mdi-rotate-90" aria-label="Previous Page" role="button" (click)="onPreviousPageClicked($event)"></a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <div class="page-number"> | ||
| <span class="text-page">Page</span> | ||
| <span class="page-number" aria-label="Page Number" data-test="page-number-label">{{currentPagination?.pageNumber}}</span> | ||
| of | ||
| <span class="page-count" data-test="page-count">{{currentPagination?.pageCount}}</span> | ||
| </div> | ||
| <nav aria-label="Page navigation"> | ||
| <ul class="custom-pagination-ul"> | ||
| <li class="li page-item seek-next" [class]="{ 'disabled' : isRightPaginationDisabled() }" (click)="onNextPageClicked($event)"> | ||
| <a class="pagination-link icon-seek-next mdi mdi-chevron-down mdi-22px mdi-rotate-270" aria-label="Next Page" role="button" ></a> | ||
| </li> | ||
| <li class="li page-item seek-end" [class]="{ 'disabled' : isRightPaginationDisabled() }"> | ||
| <a class="pagination-link icon-seek-end mdi mdi-page-last mdi-22px" aria-label="Last Page" role="button" (click)="onLastPageClicked($event)"></a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </div> |
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,57 @@ | ||
| @use 'sass:color'; | ||
|
|
||
| .custom-pagination { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| margin: 10px; | ||
| font-size: 13px; | ||
|
|
||
| .custom-pagination-settings { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| margin-right: 30px; | ||
| } | ||
|
|
||
| .custom-pagination-nav { | ||
| display: flex; | ||
| align-items: center; | ||
| list-style-type: none; | ||
|
|
||
| .page-item { | ||
| display: flex; | ||
| width: 26px; | ||
| justify-content: center; | ||
| margin: 0; | ||
| &.disabled .pagination-link { | ||
| color: rgb(180, 179, 179); | ||
| background-color: rgb(180, 179, 179); | ||
| } | ||
| } | ||
|
|
||
| .page-number { | ||
| padding: 0 5px; | ||
| .page-number { | ||
| display: inline-flex; | ||
| justify-content: center; | ||
| width: 20px; | ||
| } | ||
| } | ||
|
|
||
| nav { | ||
| ul.custom-pagination-ul { | ||
| display: flex; | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0 5px; | ||
| color: #0d6efd; | ||
|
|
||
| .pagination-link { | ||
| color: #0d6efd; | ||
| &:hover { | ||
| color: color.adjust(#0d6efd, $lightness: 10%); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
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,99 @@ | ||
| import { Component, ElementRef } from '@angular/core'; | ||
| import type { BasePaginationComponent, PaginationMetadata, PaginationService, PubSubService, SlickGrid, Subscription } from '@slickgrid-universal/common'; | ||
|
|
||
| /** Custom Pagination Componnet, please note that you MUST `implements BasePaginationComponent` with required functions */ | ||
| @Component({ | ||
| templateUrl: './grid-custom-pager.component.html', | ||
| styleUrls: ['./grid-custom-pager.component.scss'], | ||
| }) | ||
| export class CustomPagerComponent implements BasePaginationComponent { | ||
| protected _paginationElement!: HTMLDivElement; | ||
| protected _subscriptions: Subscription[] = []; | ||
| protected _gridContainerElm?: HTMLElement; | ||
| protected _grid!: SlickGrid; | ||
| protected _paginationService!: PaginationService; | ||
| protected _pubSubService!: PubSubService; | ||
| currentPagination = {} as PaginationMetadata; | ||
|
|
||
| constructor(protected readonly elm: ElementRef) { } | ||
|
|
||
| init(grid: SlickGrid, paginationService: PaginationService, pubSubService: PubSubService) { | ||
| this._grid = grid; | ||
| this._paginationService = paginationService; | ||
| this._pubSubService = pubSubService; | ||
| this.currentPagination = this._paginationService.getFullPagination(); | ||
|
|
||
| // Anytime the pagination is initialized or has changes, | ||
| // we'll copy the data into a local object so that we can add binding to this local object | ||
| this._subscriptions.push( | ||
| this._pubSubService.subscribe<PaginationMetadata>('onPaginationRefreshed', paginationChanges => { | ||
| this.currentPagination.dataFrom = paginationChanges.dataFrom; | ||
| this.currentPagination.dataTo = paginationChanges.dataTo; | ||
| this.currentPagination.pageCount = paginationChanges.pageCount; | ||
| this.currentPagination.pageNumber = paginationChanges.pageNumber; | ||
| this.currentPagination.pageSize = paginationChanges.pageSize; | ||
| this.currentPagination.pageSizes = paginationChanges.pageSizes; | ||
| this.currentPagination.totalItems = paginationChanges.totalItems; | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| dispose() { | ||
| this._pubSubService.unsubscribeAll(this._subscriptions); | ||
| this.disposeElement(); | ||
| } | ||
|
|
||
| disposeElement() { | ||
| this._paginationElement.remove(); | ||
| } | ||
|
|
||
| renderPagination(containerElm: HTMLElement, position: 'top' | 'bottom' = 'top') { | ||
| this._gridContainerElm = containerElm; | ||
| this._paginationElement = this.elm.nativeElement; | ||
| this._paginationElement.id = 'pager'; | ||
| this._paginationElement.className = `pagination-container pager ${this._grid.getUID()}`; | ||
| this._paginationElement.style.width = '100%'; | ||
|
|
||
| if (position === 'top') { | ||
| // we can prepend the grid if we wish | ||
| this._paginationElement.classList.add('top'); | ||
| containerElm.prepend(this._paginationElement); | ||
| } else { | ||
| // or append it at the bottom | ||
| this._paginationElement.classList.add('bottom'); | ||
| containerElm.appendChild(this._paginationElement); | ||
| } | ||
| } | ||
|
|
||
| onFirstPageClicked(event: MouseEvent): void { | ||
| if (!this.isLeftPaginationDisabled()) { | ||
| this._paginationService.goToFirstPage(event); | ||
| } | ||
| } | ||
|
|
||
| onLastPageClicked(event: MouseEvent): void { | ||
| if (!this.isRightPaginationDisabled()) { | ||
| this._paginationService.goToLastPage(event); | ||
| } | ||
| } | ||
|
|
||
| onNextPageClicked(event: MouseEvent): void { | ||
| if (!this.isRightPaginationDisabled()) { | ||
| this._paginationService.goToNextPage(event); | ||
| } | ||
| } | ||
|
|
||
| onPreviousPageClicked(event: MouseEvent): void { | ||
| if (!this.isLeftPaginationDisabled()) { | ||
| this._paginationService.goToPreviousPage(event); | ||
| } | ||
| } | ||
|
|
||
| isLeftPaginationDisabled(): boolean { | ||
| return this.currentPagination.pageNumber === 1 || this.currentPagination.totalItems === 0; | ||
| } | ||
|
|
||
| isRightPaginationDisabled(): boolean { | ||
| return this.currentPagination.pageNumber === this.currentPagination.pageCount || this.currentPagination.totalItems === 0; | ||
| } | ||
| } |
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,35 @@ | ||
| <div id="demo-container" class="container-fluid"> | ||
| <h2> | ||
| Example 42: Custom Pagination | ||
| <span class="float-end"> | ||
| <a style="font-size: 18px" | ||
| target="_blank" | ||
| href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-custom-pagination.component.ts"> | ||
| <span class="mdi mdi-link-variant"></span> code | ||
| </a> | ||
| </span> | ||
| </h2> | ||
| <div class="subtitle"> | ||
| You can create a Custom Pagination by passing an Angular Custom Component and it must <code>implements BasePaginationComponent</code>. | ||
| Any of the pagination controls could be moved anywhere on the page (for example we purposely moved the page size away from the rest of the pagination elements). | ||
| </div> | ||
|
|
||
| <div> | ||
| <button class="btn btn-outline-secondary btn-icon" (click)="togglePaginationPosition()" data-text="toggle-pagination-btn"> | ||
| <span class="mdi mdi-swap-vertical"></span> | ||
| <span>Toggle Pagination Position</span> | ||
| </button> | ||
|
|
||
| <span class="margin-15px"> | ||
| Page Size | ||
| <input type="text" class="input is-small is-narrow" data-test="page-size-input" [(ngModel)]="pageSize" (ngModelChange)="setPaginationSize($event)" style="width: 55px"> | ||
| </span> | ||
| </div> | ||
|
|
||
| <angular-slickgrid gridId="grid42" | ||
| [columnDefinitions]="columnDefinitions" | ||
| [gridOptions]="gridOptions" | ||
| [dataset]="dataset" | ||
| (onAngularGridCreated)="angularGridReady($event.detail)"> | ||
| </angular-slickgrid> | ||
| </div> |
Oops, something went wrong.