Added First and Last Page Options

This commit is contained in:
Nile Walker 2021-03-02 08:51:26 -05:00
parent 082e23a7ec
commit 2b64d3028c
2 changed files with 26 additions and 9 deletions

View File

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

View File

@ -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);
} }