Added pagination to the active requests page table

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

@@ -51,6 +51,13 @@
 
 <div>
   <app-filter-menu *ngIf="showFilterMenu" [state]="statesToFilter" [daStaff]="qaStaff['DA']" [aodStaff]="qaStaff['AOD']" [srdpStatus]="srdpOptions" [filters]="filters" (filterMenuEventEmitter)="emitFilterEvent($event)"></app-filter-menu>
+  <mat-paginator
+    [length]="(sortedActiveRequests$ | async)?.length"
+    [pageSize]="pageSize"
+    [pageSizeOptions]="pageSizeOptions"
+    (page)="changePage($event)"
+    >
+  </mat-paginator>
 </div>
 <table class="mr-2 ml-2 table table-bordered">
   <thead class="thead-light">
@@ -113,7 +120,7 @@
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="let request of sortedActiveRequests$ | async">
+    <tr *ngFor="let request of (sortedActiveRequests$ | async) | slice:pageStart:pageStop">
       <td>
         <button
           type="button"

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";
@@ -27,12 +28,13 @@ import { CapabilityLauncherService } from "../../services/capability-launcher.se
 import { DataRetrieverService } from "../../services/data-retriever.service";
 import { PollingDataUpdaterService } from "../../services/polling-data-updater.service";
 import { BehaviorSubject, combineLatest, Observable, Subject } from "rxjs";
-import { map, repeatWhen, scan, takeUntil, startWith } from "rxjs/operators";
+import { map, repeatWhen, scan, takeUntil, skip, startWith, take } from "rxjs/operators";
 import { Staff } from "../../model/staff";
 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;
+  }
 }

apps/web/src/app/workspaces/workspaces.module.ts

@@ -49,6 +49,7 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {MatInputModule} from '@angular/material/input';
+import {MatPaginatorModule} from '@angular/material/paginator';
 
 @NgModule({
     declarations: [
@@ -88,6 +89,7 @@ import {MatInputModule} from '@angular/material/input';
         MatFormFieldModule,
         MatSelectModule,
         MatInputModule,
+        MatPaginatorModule,
     ],
 })
 export class WorkspacesModule {}