ngc-pagination - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

index.ts

 export * from './module/ngc-pagination.module';
+export * from './module/ngc-pagination.component';

module/ngc-pagination.component.ts

@@ -1,3 +0,15 @@
-import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter, OnInit, ChangeDetectorRef } from '@angular/core';
 
+export class NgcPaginationModel {
+  totalItens: number;
+  itensPerPage: number;
+  currentPage: number;
+  range?: number;
+  change_after?: boolean;
+  totalPages? :number;
+  pagination?: number[];
+  exibition? : number[];
+}
+
 @Component({
@@ -11,26 +23,19 @@ selector: 'ngc-pagination',
   styleUrls: ['./ngc-pagination.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 
-export class NgcPaginationComponent {
-  @Output() public pageChanged;
-  private config;
-  private pagination;
-  private pageState;
+export class NgcPaginationComponent implements OnInit {
+  @Output() public paginationEvents: EventEmitter<any>;
+  @Input() public config: BehaviorSubject<NgcPaginationModel>;
 
-  constructor() {
-    this.pageChanged = new EventEmitter();
-    this.pageState = 'start';
+  constructor(private cd: ChangeDetectorRef) {
+    this.paginationEvents = new EventEmitter();
+  }
 
-    this.config = {
-      totalItens: 500,
-      itensPerPage: 5,
-      currentPage: 1,
-      range: 11,
-      change_after: false,
-    }
-
-    this.config.totalPages = this.config.totalItens < this.config.itensPerPage ? 1 : Math.round(this.config.totalItens / this.config.itensPerPage);
-    this.createPagination();
-    this.createExibition();
+  ngOnInit() {
+    this.config.subscribe( v => {
+      this.createPagination();
+      this.createExibition();
+      this.cd.markForCheck();
+    });
   }
@@ -40,3 +45,3 @@
 
-    let temp_current_page = this.config.currentPage;
+    let temp_current_page = this.config.getValue().currentPage;
 
@@ -48,3 +53,3 @@ switch(e) {
       case "lastPage":
-        temp_current_page= this.config.totalPages;
+        temp_current_page = this.config.getValue().totalPages;
       break;
@@ -61,15 +66,16 @@ case "prevPage":
 
-    if(!this.config.change_after) {
-      this.config.currentPage = temp_current_page;
+    if(!this.config.getValue().change_after) {
+      this.config.getValue().currentPage = temp_current_page;
+      this.createExibition();
     }
 
-    this.createExibition();
-    this.pageChanged.emit({goTo: temp_current_page, e: e});
+    this.paginationEvents.emit({goTo: temp_current_page, e: e});
   }
 
   private createPagination() {
-    this.config.pagination = [];
+    this.config.getValue().totalPages = this.config.getValue().totalItens < this.config.getValue().itensPerPage ? 1 : Math.round(this.config.getValue().totalItens / this.config.getValue().itensPerPage);
+    this.config.getValue().pagination = [];
 
-    for(let i = 0;i < this.config.totalPages; i++) {
-      this.config.pagination.push(i+1);
+    for(let i = 0;i < this.config.getValue().totalPages; i++) {
+      this.config.getValue().pagination.push(i+1);
     }
@@ -79,6 +85,6 @@ }
   private createExibition() {
-    let start = Math.floor((this.config.currentPage-1) - this.config.range/2 < 0 ? 0 : this.config.currentPage-this.config.range/2);
-    let end = Math.floor(this.config.currentPage < this.config.range/2 ? this.config.range : (this.config.currentPage) + this.config.range/2);
+    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);
+    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.pagination.length;
+    let diff = end - this.config.getValue().pagination.length;
     if( diff > 0) {
@@ -89,4 +95,4 @@ end -= diff;
 
-    this.config.exibition = this.config.pagination.slice(start, end);
+    this.config.getValue().exibition = this.config.getValue().pagination.slice(start, end);
   }
 }

package.json

 {
   "name": "ngc-pagination",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Simple pagination for Angular v2+",
@@ -29,2 +29,3 @@ "scripts": {
     "@angular/platform-server": "^4.0.0",
+    "rxjs": "^5.4.2",
     "typescript": "^2.4.1",
@@ -31,0 +32,0 @@ "zone.js": "^0.6.23"

README.md

@@ -1,2 +0,2 @@
-# @ngc-pagination
+# ngc-pagination
 
@@ -52,1 +52,103 @@ Simple pagination for Angular v2+
 
+
+1 - config our pagination
+
+```Typescript
+
+    import { NgcPaginationModel } from 'ngc-pagination';
+    import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+    /*
+
+    @Component({ ... });
+
+    */
+
+    export class MyComponent {
+
+        private paginationConfig: BehaviorSubject<NgcPaginationModel>;
+
+        constructor() {
+            createPagination();
+        }
+
+        // pagination config to send to component
+
+        createPagination() {
+            this.paginationConfig = new BehaviorSubject({
+                totalItens: 300,
+                itensPerPage: 10,
+                currentPage: 1,
+                range: 10,
+                change_after: false
+            });
+        }
+
+        // to listener ngc-pagination events.
+        events(event) {
+            console.log(event);
+        }
+    }
+
+```
+
+
+2 - Our pagination template
+
+```HTML
+    <ngc-pagination #pagination [config]="paginationConfig" (paginationEvents)="events($event)">
+
+     <!-- 
+     
+        WARNING, I'm using the Angular Material buttons with md-button directive and <md-icon> to 
+        show icons in this template, if you not using the Angular Material in your project you need 
+        to remove the all directives md-button in all <button> tags below and remove all <md-icon> 
+        below and change to simple text.
+    
+     -->
+
+      <button md-button 
+      (click)="pagination.goTo('firstPage')"
+      [disabled]="pagination.config.getValue().currentPage <= 1">
+        <md-icon class="material-content-icon">
+          first_page
+        </md-icon>
+      </button>
+
+      <button md-button 
+      (click)="pagination.goTo('prevPage')"
+      [disabled]="pagination.config.getValue().currentPage <= 1">
+        <md-icon class="material-content-icon">
+          chevron_left
+        </md-icon>
+      </button>
+
+      <button md-button 
+      class="page" *ngFor="let page of pagination.config.getValue().exibition" 
+      [class.active]="page === pagination.config.getValue().currentPage"
+      (click)="page !== pagination.config.getValue().currentPage ? pagination.goTo('pageChanged', page) : undefined">
+        {{page}}
+      </button>
+
+      <button md-button 
+      (click)="pagination.goTo('nextPage')" 
+      [disabled]="pagination.config.getValue().currentPage >= pagination.config.getValue().totalPages" 
+      class="material-content-icon">
+        <md-icon class="material-content-icon">
+          chevron_right
+        </md-icon>
+      </button>
+
+      <button md-button 
+      (click)="pagination.goTo('lastPage')"
+      [disabled]="pagination.config.getValue().currentPage >= pagination.config.getValue().totalPages" 
+      class="material-icons">
+        <md-icon class="material-content-icon">
+          last_page
+        </md-icon>
+      </button>
+    </ngc-pagination>
+```
+
+
+

tsconfig.json

@@ -8,3 +8,3 @@ {
     "emitDecoratorMetadata": true,
-    "strictNullChecks": true,
+    "strictNullChecks": false,
     "noImplicitAny": false,
@@ -11,0 +11,0 @@ "module": "es2015",

tsconfig.publish.json

 {
   "compilerOptions": {
-    "baseUrl": ".",
     "declaration": true,
@@ -8,3 +7,3 @@ "stripInternal": true,
     "emitDecoratorMetadata": true,
-    "strictNullChecks": true,
+    "strictNullChecks": false,
     "noImplicitAny": false,
@@ -22,6 +21,7 @@ "module": "es2015",
     ],
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": false
   },
   "files": [
-    "./module/ngc-pagination.module.ts"
+    "./module/ngc-pagination.module.ts",
+    "./index.ts"
   ],
@@ -28,0 +28,0 @@ "exclude": [

No alert changes

Improved metrics

Total package byte prevSize

11424

increased by29.23%

Lines of code

171

increased by3.64%

Number of lines in readme file

154

increased by196.15%

Worsened metrics

Dependency count

9

increased by12.5%

Number of package files

11

decreased by-8.33%

Dependency changes

• + Addedrxjs@^5.4.2