Added First and Last Page Options

src/app/graphs/graphs.component.html

@@ -23,7 +23,7 @@
     </mat-card>
 
     <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 |
        changed_date : 0}} - {{form.endDate |changed_date : 0}}</h5>
       <span class="h2 font-weight-bold "><span style="color:green">{{topBarData[3]}}</span>/<span
@@ -31,7 +31,7 @@
     </mat-card>
 
     <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 |
        changed_date : 0}} - {{form.endDate |changed_date : 0}}</h5>
       <span class="h2 font-weight-bold"><span style="color:green">{{topBarData[5]}}</span>/<span
@@ -158,9 +158,14 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <mat-paginator #paginator [length]="topBarData[0]" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
-    (page)="updatePage($event)">
-  </mat-paginator>
+    <mat-paginator
+    (page)="updatePage($event)"
+    [length]="totalItems"
+    [pageSize]="pageSize"
+    [showFirstLastButtons]="showFirstLastButtons"
+    [pageSizeOptions]="pageSizeOptions"
+    [pageIndex]="pageIndex">
+</mat-paginator>
   </mat-card>
 
 </div>

src/app/graphs/graphs.component.ts

@@ -90,9 +90,12 @@ export class GraphsComponent implements OnInit {
   startDate: Date = new Date();
   endDate: Date = new Date();
 
-  currentPage = 0;
+  pageIndex = 0;
+  totalItems = 0;
+
   pageSize = 10;
-  pageSizeOptions: number[] = [10, 20, 50, 100];
+  pageSizeOptions = [5, 10, 25];
+  showFirstLastButtons = true;
 
   form: SearchForm = {
     startDate: '',
@@ -104,8 +107,16 @@ export class GraphsComponent implements OnInit {
   };
 
   updatePage(event: PageEvent) {
-    this.currentPage = event.pageIndex;
-    this.graphService.getRawSearchData(this.form, this.currentPage).subscribe(searchResult => this.searchResult = searchResult);
+    this.pageSize = event.pageSize;
+    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 {
@@ -175,6 +186,7 @@ export class GraphsComponent implements OnInit {
 
     this.graphService.getTopBarData(this.form).subscribe(tempData => {
       this.topBarData = tempData;
+      this.totalItems = this.topBarData[0];
     });
     this.graphService.getRawSearchData(this.form, 0).subscribe(searchResult => this.searchResult = searchResult);
   }