Added First and Last Page Options
This commit is contained in:
parent
082e23a7ec
commit
2b64d3028c
|
@ -23,7 +23,7 @@
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
||||||
<mat-card class="col">
|
<mat-card class="col">
|
||||||
<h5 class="card-title text-uppercase text-muted ">Email Notifications within <br>
|
<h5 class="card-title text-uppercase text-muted ">Email Notifications sent <br>
|
||||||
{{form.startDate |
|
{{form.startDate |
|
||||||
changed_date : 0}} - {{form.endDate |changed_date : 0}}</h5>
|
changed_date : 0}} - {{form.endDate |changed_date : 0}}</h5>
|
||||||
<span class="h2 font-weight-bold "><span style="color:green">{{topBarData[3]}}</span>/<span
|
<span class="h2 font-weight-bold "><span style="color:green">{{topBarData[3]}}</span>/<span
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
||||||
<mat-card class="col">
|
<mat-card class="col">
|
||||||
<h5 class="card-title text-uppercase text-muted ">Text Notifications within <br>
|
<h5 class="card-title text-uppercase text-muted ">Text Notifications sent <br>
|
||||||
{{form.startDate |
|
{{form.startDate |
|
||||||
changed_date : 0}} - {{form.endDate |changed_date : 0}}</h5>
|
changed_date : 0}} - {{form.endDate |changed_date : 0}}</h5>
|
||||||
<span class="h2 font-weight-bold"><span style="color:green">{{topBarData[5]}}</span>/<span
|
<span class="h2 font-weight-bold"><span style="color:green">{{topBarData[5]}}</span>/<span
|
||||||
|
@ -158,8 +158,13 @@
|
||||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
</table>
|
</table>
|
||||||
<mat-paginator #paginator [length]="topBarData[0]" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
|
<mat-paginator
|
||||||
(page)="updatePage($event)">
|
(page)="updatePage($event)"
|
||||||
|
[length]="totalItems"
|
||||||
|
[pageSize]="pageSize"
|
||||||
|
[showFirstLastButtons]="showFirstLastButtons"
|
||||||
|
[pageSizeOptions]="pageSizeOptions"
|
||||||
|
[pageIndex]="pageIndex">
|
||||||
</mat-paginator>
|
</mat-paginator>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
||||||
|
|
|
@ -90,9 +90,12 @@ export class GraphsComponent implements OnInit {
|
||||||
startDate: Date = new Date();
|
startDate: Date = new Date();
|
||||||
endDate: Date = new Date();
|
endDate: Date = new Date();
|
||||||
|
|
||||||
currentPage = 0;
|
pageIndex = 0;
|
||||||
|
totalItems = 0;
|
||||||
|
|
||||||
pageSize = 10;
|
pageSize = 10;
|
||||||
pageSizeOptions: number[] = [10, 20, 50, 100];
|
pageSizeOptions = [5, 10, 25];
|
||||||
|
showFirstLastButtons = true;
|
||||||
|
|
||||||
form: SearchForm = {
|
form: SearchForm = {
|
||||||
startDate: '',
|
startDate: '',
|
||||||
|
@ -104,8 +107,16 @@ export class GraphsComponent implements OnInit {
|
||||||
};
|
};
|
||||||
|
|
||||||
updatePage(event: PageEvent) {
|
updatePage(event: PageEvent) {
|
||||||
this.currentPage = event.pageIndex;
|
this.pageSize = event.pageSize;
|
||||||
this.graphService.getRawSearchData(this.form, this.currentPage).subscribe(searchResult => this.searchResult = searchResult);
|
this.pageIndex = event.pageIndex;
|
||||||
|
this.pageIndex = event.pageIndex;
|
||||||
|
this.graphService.getRawSearchData(this.form, this.pageIndex).subscribe(
|
||||||
|
searchResult => {this.searchResult = searchResult;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
cancelEvent(event) {
|
||||||
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
searchToday(): void {
|
searchToday(): void {
|
||||||
|
@ -175,6 +186,7 @@ export class GraphsComponent implements OnInit {
|
||||||
|
|
||||||
this.graphService.getTopBarData(this.form).subscribe(tempData => {
|
this.graphService.getTopBarData(this.form).subscribe(tempData => {
|
||||||
this.topBarData = tempData;
|
this.topBarData = tempData;
|
||||||
|
this.totalItems = this.topBarData[0];
|
||||||
});
|
});
|
||||||
this.graphService.getRawSearchData(this.form, 0).subscribe(searchResult => this.searchResult = searchResult);
|
this.graphService.getRawSearchData(this.form, 0).subscribe(searchResult => this.searchResult = searchResult);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue