Added in pagination for transaction list

package-lock.json

@@ -5586,6 +5586,11 @@
         "moment": "2.18.1"
       }
     },
+    "ngx-pagination": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-3.0.1.tgz",
+      "integrity": "sha1-WoAA5AwEJNnEHJ1tWSVi4VR6vyQ="
+    },
     "no-case": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz",

package.json

@@ -33,6 +33,7 @@
     "ng2-charts": "1.6.0",
     "ng2-validation-manager": "^0.3.1",
     "ngx-bootstrap": "1.6.6",
+    "ngx-pagination": "^3.0.1",
     "rxjs": "5.4.2",
     "ts-helpers": "1.1.2",
     "webpack": "3.5.4",

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TabsModule } from 'ngx-bootstrap/tabs';
+import { NgxPaginationModule } from 'ngx-pagination';
 import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';
 
 import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
@@ -37,6 +38,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
   imports: [
     BrowserModule,
     HttpModule,
+    NgxPaginationModule,
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
     AuthModule,

src/app/dashboard/dashboard.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ChartsModule } from 'ng2-charts/ng2-charts';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { NgxPaginationModule } from 'ngx-pagination';
 
 import { DashboardComponent } from './dashboard.component';
 import { DashboardCustomerComponent } from './dashboard-customer.component';
@@ -26,6 +27,7 @@ import { TransactionResultComponent } from '../shared/transaction-result.compone
     ReactiveFormsModule,
     ChartsModule,
     BsDropdownModule,
+    NgxPaginationModule,
     DashboardRoutingModule,
   ],
   declarations: [

src/app/dashboard/transaction-log.component.html

@@ -16,19 +16,29 @@
               </tr>
             </thead>
             <tbody>
-              <tr transaction-result *ngFor="let transaction of transactionList" [transaction]="transaction"></tr>
+              <tr transaction-result *ngFor="let transaction of transactionList | paginate: paginateConfig" [transaction]="transaction"></tr>
             </tbody>
           </table>
+          <pagination-template #p="paginationApi"
+          [id]="paginateConfig.id"
+          (pageChange)="loadTransactions($event)">
           <ul class="pagination">
-            <li class="page-item"><a class="page-link" href="#">Prev</a></li>
+             <li class="page-item" [class.disabled]="p.isFirstPage()">
-            <li class="page-item active">
+               <a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</a>
-              <a class="page-link" href="#">1</a>
+             </li>
+             <li *ngFor="let page of p.pages" class="page-item" [class.active]="p.getCurrent() === page.value">
+                <a class="page-link clickable" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
+                    <span>{{ page.label }}</span>
+                </a>
+                <div class="page-link" *ngIf="p.getCurrent() === page.value">
+                    <span>{{ page.label }}</span>
+                </div>
+            </li>
+            <li class="page-item" [class.disabled]="p.isLastPage()">
+              <a class="page-link clickable" *ngIf="!p.isLastPage()" (click)="p.next()">Next</a>
             </li>
-            <li class="page-item"><a class="page-link" href="#">2</a></li>
-            <li class="page-item"><a class="page-link" href="#">3</a></li>
-            <li class="page-item"><a class="page-link" href="#">4</a></li>
-            <li class="page-item"><a class="page-link" href="#">Next</a></li>
           </ul>
+          </pagination-template>
         </div>
         <div *ngIf="noTransactionList" class="card-block">
           No Transactions available.

src/app/dashboard/transaction-log.component.ts

@@ -1,7 +1,11 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { ApiService } from '../providers/api-service';
-import { TransactionResultComponent } from '../shared/transaction-result.component';
+// import { PaginatePipe } from 'ngx-pagination';
+import {PaginationInstance} from 'ngx-pagination';
+// import { PaginationControlsComponent } from 'ngx-pagination';
+// import { PaginationControlsDirective } from 'ngx-pagination';
+// import { TransactionResultComponent } from '../shared/transaction-result.component';
 import * as moment from 'moment';
 import 'rxjs/add/operator/map';
 
@@ -15,7 +19,13 @@ export class TransactionLogComponent {
   noTransactionList = true;
   myDate: any;
   minDate: any;
-  logPage: any = 1;
+
+  public paginateConfig: PaginationInstance = {
+        id: 'transpaginate',
+        itemsPerPage: 10,
+        currentPage: 1,
+        totalItems: 0
+    };
 
   constructor(
   private http: Http,
@@ -27,7 +37,7 @@ export class TransactionLogComponent {
 
   ngOnInit(): void {
     this.getMinDate();
-    this.loadTransactions();
+    this.loadTransactions(1);
   }
 
   getMinDate(){
@@ -43,12 +53,15 @@ export class TransactionLogComponent {
     }
   }
 
-  loadTransactions() {
+  loadTransactions(logPage: number) {
-    this.api.transList(this.logPage).subscribe(
+    console.log(logPage);
+    this.api.transList(logPage).subscribe(
       result => {
         if(result.transactions.length > 0) {
           this.transactionList = result.transactions;
-          console.log(this.transactionList);
+          //TODO Rename in server
+          this.paginateConfig.totalItems = result.page_no;
+          this.paginateConfig.currentPage = logPage;
           this.noTransactionList = false;
         } else {
         // handle the case when the transactionList is empty

src/scss/_custom.scss

@@ -1,5 +1,7 @@
 // Here you can add other styles
-
+.clickable {
+  cursor: pointer;
+}
 // white title font variant on type-2 as defined in _widgets.css
 .horizontal-bars {
   padding: 0;