Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added in pagination for transaction list

Browse source
This commit is contained in:
piratefinn 2017-09-06 17:51:56 +01:00
parent 2e27e7a43b
commit 6c52c09e43
7 changed files with 50 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/dashboard/dashboard.module.ts
View file

@ -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: [

26
src/app/dashboard/transaction-log.component.html
View file

@ -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 active">
<a class="page-link" href="#">1</a>
<li class="page-item" [class.disabled]="p.isFirstPage()">
<a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</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.

25
src/app/dashboard/transaction-log.component.ts
View file

@ -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() {
this.api.transList(this.logPage).subscribe(
loadTransactions(logPage: number) {
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