From 2b64d3028c602eb38f4aaf963b619ac08118c052 Mon Sep 17 00:00:00 2001
From: Nile Walker <niwal7@morgan.edu>
Date: Tue, 2 Mar 2021 08:51:26 -0500
Subject: [PATCH] Added First and Last Page Options

---
 src/app/graphs/graphs.component.html | 15 ++++++++++-----
 src/app/graphs/graphs.component.ts   | 20 ++++++++++++++++----
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/app/graphs/graphs.component.html b/src/app/graphs/graphs.component.html
index c5356e0..1f33797 100644
--- a/src/app/graphs/graphs.component.html
+++ b/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>
diff --git a/src/app/graphs/graphs.component.ts b/src/app/graphs/graphs.component.ts
index a96daa6..d352208 100644
--- a/src/app/graphs/graphs.component.ts
+++ b/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);
   }