From f37fea92fb59e0c440b6c38480d71322c91a9b93 Mon Sep 17 00:00:00 2001
From: Nathan Bockisch <nbockisc@nrao.edu>
Date: Wed, 7 Sep 2022 16:31:45 -0400
Subject: [PATCH] WS-1193: Added pagination to the active requests page
---
.../active-capability-requests.component.html | 9 ++++++++-
.../active-capability-requests.component.ts | 18 ++++++++++++++++++
.../src/app/workspaces/workspaces.module.ts | 2 ++
3 files changed, 28 insertions(+), 1 deletion(-)
diff --git a/apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.html b/apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.html
index 5a5c37eea..63912dda6 100644
--- a/apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.html
+++ b/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"
diff --git a/apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.ts b/apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.ts
index 6dbff58a2..448be2513 100644
--- a/apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.ts
+++ b/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;
+ }
}
diff --git a/apps/web/src/app/workspaces/workspaces.module.ts b/apps/web/src/app/workspaces/workspaces.module.ts
index 7dbaec480..b32cd6c33 100644
--- a/apps/web/src/app/workspaces/workspaces.module.ts
+++ b/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 {}
--
GitLab