ngc-pagination
Advanced tools
ngc-pagination - npm Package Compare versions
Comparing version 0.0.4 to 0.1.4
@@ -13,2 +13,3 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject'; | ||
| exibition? : number[]; | ||
| disabledWhenChange?: boolean; | ||
| } | ||
@@ -30,5 +31,7 @@ | ||
| @Input() public config: BehaviorSubject<NgcPaginationModel>; | ||
| private buttonsDisabled: boolean; | ||
| constructor(private cd: ChangeDetectorRef) { | ||
| this.paginationEvents = new EventEmitter(); | ||
| this.buttonsDisabled = false; | ||
| } | ||
@@ -38,3 +41,2 @@ | ||
| this.config.subscribe( v => { | ||
| this.useDefaultValues(); | ||
@@ -48,17 +50,24 @@ this.createPagination(); | ||
| private useDefaultValues() { | ||
| if(!this.config.getValue().currentPage) { | ||
| if (!this.config.getValue().currentPage) { | ||
| this.config.getValue().currentPage = 1; | ||
| } | ||
| if(!this.config.getValue().range) { | ||
| if (!this.config.getValue().range) { | ||
| this.config.getValue().range = 10; | ||
| } | ||
| if(!this.config.getValue().itensPerPage) { | ||
| if (!this.config.getValue().itensPerPage) { | ||
| this.config.getValue().itensPerPage = 10; | ||
| } | ||
| if(this.config.getValue().change_after === undefined) { | ||
| if (this.config.getValue().change_after === undefined) { | ||
| this.config.getValue().change_after = false; | ||
| } | ||
| if (this.config.getValue().disabledWhenChange === undefined) { | ||
| this.config.getValue().disabledWhenChange = false; | ||
| } | ||
| else { | ||
| this.buttonsDisabled = false; | ||
| } | ||
| } | ||
@@ -70,3 +79,3 @@ | ||
| switch(e) { | ||
| switch (e) { | ||
| case "firstPage": | ||
@@ -88,3 +97,3 @@ temp_current_page = 1; | ||
| if(!this.config.getValue().change_after) { | ||
| if (!this.config.getValue().change_after) { | ||
| this.config.getValue().currentPage = temp_current_page; | ||
@@ -94,2 +103,6 @@ this.createExibition(); | ||
| if (this.config.getValue().disabledWhenChange === true) { | ||
| this.buttonsDisabled = true; | ||
| } | ||
| this.paginationEvents.emit({goTo: temp_current_page, event: e}); | ||
@@ -102,3 +115,3 @@ } | ||
| for(let i = 0;i < this.config.getValue().totalPages; i++) { | ||
| for (let i = 0; i < this.config.getValue().totalPages; i++) { | ||
| this.config.getValue().pagination.push(i+1); | ||
@@ -109,3 +122,3 @@ } | ||
| private createExibition() { | ||
| let start = Math.floor((this.config.getValue().currentPage-1) - this.config.getValue().range/2 < 0 ? 0 : this.config.getValue().currentPage-this.config.getValue().range/2); | ||
@@ -115,3 +128,3 @@ let end = Math.floor(this.config.getValue().currentPage < this.config.getValue().range/2 ? this.config.getValue().range : (this.config.getValue().currentPage) + this.config.getValue().range/2); | ||
| let diff = end - this.config.getValue().pagination.length; | ||
| if( diff > 0) { | ||
| if (diff > 0) { | ||
| end -= diff; | ||
@@ -118,0 +131,0 @@ start -= diff; |
| { | ||
| "name": "ngc-pagination", | ||
| "version": "0.0.4", | ||
| "description": "Simple pagination for Angular v2+", | ||
| "version": "0.1.4", | ||
| "description": "Simple pagination for Angular v4+", | ||
| "scripts": { | ||
@@ -6,0 +6,0 @@ "start": "tsc", |
@@ -5,2 +5,4 @@ # ngc-pagination | ||
|  | ||
| ## Installation | ||
@@ -80,12 +82,7 @@ | ||
| range: 10, // 10 is the default | ||
| change_after: false // false is the default | ||
| change_after: false, // false is the default, | ||
| disabledWhenChange: false // false is the default | ||
| }); | ||
| } | ||
| /* | ||
| change_after property when is true, all user events isn't applied into the view when the | ||
| current page is changed. A good example of your usage is if you want to update the current | ||
| page in the UI only your request is done for example. | ||
| */ | ||
| // to listener ngc-pagination events. | ||
@@ -103,5 +100,5 @@ events(event) { | ||
| ```HTML | ||
| <ngc-pagination #pagination | ||
| [config]="paginationConfig" | ||
| (paginationEvents)="events($event)"> | ||
| <ngc-pagination #pagination | ||
| [config]="paginationConfig" | ||
| (paginationEvents)="events($event)"> | ||
@@ -123,3 +120,3 @@ <!-- | ||
| (click)="pagination.goTo('firstPage')" | ||
| [disabled]="pagination.config.getValue().currentPage <= 1"> | ||
| [disabled]="pagination.config.getValue().currentPage <= 1 || pagination.buttonsDisabled"> | ||
| <md-icon class="material-content-icon"> | ||
@@ -132,3 +129,3 @@ first_page | ||
| (click)="pagination.goTo('prevPage')" | ||
| [disabled]="pagination.config.getValue().currentPage <= 1"> | ||
| [disabled]="pagination.config.getValue().currentPage <= 1 || pagination.buttonsDisabled"> | ||
| <md-icon class="material-content-icon"> | ||
@@ -139,5 +136,6 @@ chevron_left | ||
| <button md-button | ||
| class="page" *ngFor="let page of pagination.config.getValue().exibition" | ||
| <button class="page" md-button | ||
| *ngFor="let page of pagination.config.getValue().exibition" | ||
| [class.active]="page === pagination.config.getValue().currentPage" | ||
| [disabled]="pagination.buttonsDisabled" | ||
| (click)="page !== pagination.config.getValue().currentPage ? pagination.goTo('pageChanged', page) : undefined"> | ||
@@ -149,4 +147,3 @@ {{page}} | ||
| (click)="pagination.goTo('nextPage')" | ||
| [disabled]="pagination.config.getValue().currentPage >= pagination.config.getValue().totalPages" | ||
| class="material-content-icon"> | ||
| [disabled]="pagination.config.getValue().currentPage >= pagination.config.getValue().totalPages || pagination.buttonsDisabled"> | ||
| <md-icon class="material-content-icon"> | ||
@@ -157,6 +154,5 @@ chevron_right | ||
| <button md-button | ||
| (click)="pagination.goTo('lastPage')" | ||
| [disabled]="pagination.config.getValue().currentPage >= pagination.config.getValue().totalPages" | ||
| class="material-icons"> | ||
| <button | ||
| md-button (click)="pagination.goTo('lastPage')" | ||
| [disabled]="pagination.config.getValue().currentPage >= pagination.config.getValue().totalPages || pagination.buttonsDisabled"> | ||
| <md-icon class="material-content-icon"> | ||
@@ -171,3 +167,3 @@ last_page | ||
|  | ||
|  | ||
@@ -177,3 +173,3 @@ | ||
| If you need change the currentPage | ||
| You can change the `currentPage` anytime | ||
@@ -198,4 +194,12 @@ ```Typescript | ||
| If `change_after` property is `true` you can update the view after 2s 'simulating a request' | ||
| ## API | ||
| `change_after` property when is true, all user events isn't applied into the view when the | ||
| current page is changed. A good example of your usage is if you want to update the current | ||
| page in the UI when the request is done for example. | ||
| Sample: | ||
| If `change_after` property is `true` the view is updated after 2s 'simulating a request' | ||
| ```Typescript | ||
@@ -217,3 +221,3 @@ | ||
| this.paginationConfig.next({ | ||
| ...this.paginationConfig.getValue(), | ||
| ...this.paginationConfig.getValue(), // get the first values | ||
| currentPage: event.goTo | ||
@@ -228,2 +232,34 @@ }) | ||
|  | ||
|  | ||
| `disabledWhenChange` property when is true, any button is clicked, all buttons is disabled | ||
| and the pagination wait for the `next()` method to enable buttons | ||
| Sample: | ||
| ```Typescript | ||
| createPagination() { | ||
| this.paginationConfig = new BehaviorSubject({ | ||
| totalItens: 300, | ||
| change_after: true, | ||
| disabledWhenChange: true | ||
| }); | ||
| // passing (paginationEvents)="events($event)" to listener ngc-pagination events | ||
| events(event) { | ||
| // simulate request | ||
| setTimeout( () => { | ||
| // simulate send new values | ||
| this.paginationConfig.next({ | ||
| ...this.paginationConfig.getValue(), // get the first values | ||
| currentPage: event.goTo | ||
| }) | ||
| },1000); | ||
| } | ||
| } | ||
| ``` | ||
| See the behavior below when that code run: | ||
|  |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.36%
15323
- Lines of code
- increased by6.45%
198
- Number of lines in readme file
- increased by16.67%
252
No dependency changes