I have total 7 records getting from graphql call. I am displaying 2 records on 0th page. Then on each page i should get 2 records. And paginator component should say 1-2 of7. But somehow it is saying 1-2 of 2 and next arrow is disabled. So I cant send request to backend to get next page's data. I am implementing server side pagination using mat-paginator. How to set total count correctly so that my next arrow will be enabled.
HTML
<mat-paginator
#paginator
(page)="PageEvents($event)"
></mat-paginator>
history.component.ts
import { SnackbarService } from './../../../shared/snackbar/snackbar.service';
import { AccountService } from './../../../services/account.service';
import {
Component,
OnInit,
SimpleChanges,
ViewChild,
OnChanges,
AfterViewInit,
Input
} from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import {
OidcSecurityService,
PublicConfiguration,
OidcClientNotification,
} from 'angular-auth-oidc-client';
import { Observable } from 'rxjs';
import { HistoricalPaymentUsingGraphql } from '../../../Model/historical-payment-graphql.model';
import { HistoricalPayment } from '../../../Model/historical-payment.model';
import { ModelService } from '../../../services/model.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { merge } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { switchMap } from 'rxjs/operators';
import { catchError } from 'rxjs/operators';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-history',
templateUrl: './history.component.html',
styleUrls: ['./history.component.css'],
})
export class HistoryComponent implements OnInit, OnChanges {
@Input() loanNumber: string;
data: string[];
output: HistoricalPaymentUsingGraphql[];
pageSize: number;
totalNumberOfRecords: number;
pageNumber: number;
configuration: PublicConfiguration;
userDataChanged$: Observable<OidcClientNotification<any>>;
userData: any;
isAuthenticated$: Observable<boolean>;
payments: HistoricalPaymentUsingGraphql[];
greenHilightIdentifiers: string[] = ['SR', 'SRA', 'AP', 'RP', 'PA', 'SWA'];
numberofLoanFeeTransactions: number;
numberofPaymentTransactions: number;
numberofPaymentsUnapplied:number;
displayedColumns: string[] = [
'transactionDate',
'identifier',
'description',
'effectiveDate',
'paidToDate',
'amountPosted',
'principalAmount',
'principalBalanceAfterTransaction',
'interestAmount',
'escrowAmount',
'escrowBalanceAfterTransaction',
'lateChargeAmount',
'unappliedFundsAmount',
'unappliedFundsBalanceAfterTransaction',
];
errorMessage: string;
dataSource: MatTableDataSource<HistoricalPaymentUsingGraphql>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(
public oidcSecurityService: OidcSecurityService,
private spinner: NgxSpinnerService,
private accountService: AccountService,
private modelService: ModelService,
private snackbarService: SnackbarService
) {
this.pageNumber = 0;
this.totalNumberOfRecords = 7;
}
ngOnInit(): void {
this.pageNumber = 0;
this.payments = [];
this.configuration = this.oidcSecurityService.configuration;
this.isAuthenticated$ = this.oidcSecurityService.isAuthenticated$;
this.data = new Array();
this.output = new Array();
if (this.loanNumber === undefined) {
return;
}
// this.accountService.getPaymentHistory(this.loanNumber).subscribe(
// (data) => {
// this.assignPayments(data.historicalPayments);
// },
// (error) => {}
// );
this.getPaymentHistory(this.loanNumber, this.pageNumber);
// this.dataSource.paginator = this.paginator;
}
ngOnChanges(changes: SimpleChanges): void {
this.pageNumber = 0;
this.payments = [];
this.data = new Array();
this.output = new Array();
if (this.loanNumber === undefined) {
return;
}
this.getPaymentHistory(this.loanNumber, this.pageNumber);
this.modelService.updateModel();
//this.dataSource.paginator = this.paginator;
}
PageEvents(event: any){
console.log("event", event);
const pageSize = event.pageSize;
const currentPage = event.pageIndex + 1;
this.getPaymentHistory('21', event.pageIndex);
// this.defaultPayload.pageSize = pageSize;
// this.defaultPayload.currentPage = currentPage;
// this.getDataService(this.defaultPayload)
}
getBackColor(identifier: string) {
const searchTerm = identifier.trim();
if (this.greenHilightIdentifiers.some((e) => e === searchTerm)) {
return { 'background-color': '#cbf8cb' };
}
return { 'background-color': 'White' };
}
getPaymentHistory(loanNumber: string, pageNumber: number) {
debugger;
this.showSpinner();
this.accountService.getPaymentHistoryUsingGraphql('1987074',pageNumber, 2 ).subscribe(
(data) => {
debugger;
this.totalNumberOfRecords = data.data.consolidatedPaymentTransactions.totalCount;
this.paginator.length = this.totalNumberOfRecords;
this.paginator.pageSize = 2;
this.assignPayments(data.data.consolidatedPaymentTransactions.items);
// this.numberofLoanFeeTransactions = data.data.loanFeeTransactions.items.length;
// this.numberofPaymentTransactions = data.data.paymentTransactions.items.length;
//this.numberofPaymentsUnapplied = data.data.paymentsUnapplied.items.length;
console.log("Length - " + this.numberofPaymentTransactions);
// this.assignPayments(data.data.loanFeeTransactions.items,
// data.data.paymentTransactions.items, data.data.paymentsUnapplied.items);
this.hideSpinner();
},
(error) => {
this.hideSpinner();
this.showError('Failed to load Payment History');
}
);
}
private assignPayments(consolidatedPaymentTransactions: HistoricalPaymentUsingGraphql[]) {
this.payments = consolidatedPaymentTransactions;
this.updateDataSource(this.payments);
}
private updateDataSource(paymentList: HistoricalPaymentUsingGraphql[]) {
this.dataSource = new MatTableDataSource(paymentList);
this.dataSource.paginator = this.paginator;
this.paginator.length = this.totalNumberOfRecords;
// this.paginator.hasNextPage = true;
this.dataSource.sort = this.sort;
this.paginator.length = this.totalNumberOfRecords;
}
private getData(paymentList: HistoricalPaymentUsingGraphql[]) {
debugger;
for (let i = 0; i < paymentList.length; i++){
var val = JSON.stringify(paymentList[i]);
if(this.data.indexOf(val) < 0){
this.data.push(val);
this.output.push(paymentList[i]);
}
}
}
/**
onChangePage(event: PageEvent) {
const pageSize = +event.pageSize; // get the pageSize
const currentPage = +event.pageIndex + 1; // get the current page
this.service.paginationData(pageSize, currentPage); // call the service
}*/
showSpinner() {
this.spinner.show(undefined, {
type: 'ball-spin-clockwise',
});
}
hideSpinner() {
this.spinner.hide();
}
private showError(error: string) {
this.errorMessage = error;
this.snackbarService.show(error, 'danger');
}
}