Added in pagination for transaction list
This commit is contained in:
parent
2e27e7a43b
commit
6c52c09e43
7 changed files with 50 additions and 15 deletions
5
package-lock.json
generated
5
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in a new issue