WS-1193: Added pagination to the active requests page

Screen_Recording_2022-09-07_at_2.07.25_PM

apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.ts

@@ -17,6 +17,7 @@
  * along with Workspaces.  If not, see <https://www.gnu.org/licenses/>.
  */
 import { Component, OnInit, OnDestroy } from "@angular/core";
+import { SlicePipe } from "@angular/common";
 import { Title } from "@angular/platform-browser";
 import { ActivatedRoute, Router, Params } from "@angular/router";
 import { Capability } from "../../model/capability";
@@ -33,6 +34,7 @@ import {ActiveRequestsService} from "../../services/active-requests.service";
 import {StorageService} from "../../../shared/storage/storage.service";
 import { Filter } from "./components/filter-menu/filter-menu.component";
 import { FormControl } from "@angular/forms";
+import { PageEvent } from '@angular/material/paginator';
 
 export const defaultSortOrder = "desc"
 
@@ -71,6 +73,12 @@ export class ActiveCapabilityRequestsComponent implements OnInit, OnDestroy {
   filteredAodStaff: Observable<Staff[]>;
   filteredDaStaff: Observable<Staff[]>;
 
+  // Needed for pagination of requests table
+  pageSize: number;
+  pageSizeOptions = [5, 10, 20, 40];
+  pageStart: number;
+  pageStop: number;
+
   public statesToFilter = [
     {"name":"Complete"},
     {"name":"Submitted"},
@@ -154,6 +162,10 @@ export class ActiveCapabilityRequestsComponent implements OnInit, OnDestroy {
     this.qaStaff = [];
     this.getRoutes()
 
+    this.pageSize = this.pageSizeOptions[1];
+    this.pageStart = 0;
+    this.pageStop = this.pageSize;
+
     // get list of enabled capabilities
     const enabledCapabilitiesObserver = {
       next: (capabilities) => {
@@ -539,4 +551,10 @@ export class ActiveCapabilityRequestsComponent implements OnInit, OnDestroy {
   staffSelectDisplay(staff: Staff): string {
     return "";
   }
+
+  // Handles event when paginator changes page size or moves to next page
+  changePage(pageChange: PageEvent) {
+    this.pageStart = pageChange.pageIndex * pageChange.pageSize;
+    this.pageStop = this.pageStart + pageChange.pageSize;
+  }
 }