ngc-pagination - npm Package Compare versions

Comparing version 0.0.4 to 0.1.4

module/ngc-pagination.component.ts

@@ -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;

package.json

 {
   "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",

README.md

@@ -5,2 +5,4 @@ # ngc-pagination
 
+![](http://g.recordit.co/hMI2hoTtG7.gif)
+
 ## 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
 
-![](http://g.recordit.co/rH0P2bdttK.gif)
+![](http://g.recordit.co/a40l3UuTQe.gif)
 
@@ -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 @@ })
 
-![](http://g.recordit.co/69wMYPL8qj.gif)
+![](http://g.recordit.co/69wMYPL8qj.gif)
+
+
+`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:
+
+![](http://g.recordit.co/edCW9GNta4.gif)

New alerts

License Policy Violation

License

This 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

License

This 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

15323

increased by10.36%

Lines of code

198

increased by6.45%

Number of lines in readme file

252

increased by16.67%

No dependency changes