SEAB-5762: Pagination for entry versions

src/app/shared/state/paginator.query.ts

@@ -25,9 +25,11 @@ export class PaginatorQuery extends Query<PaginatorState> {
   toolPageSize$: Observable<number> = this.select((state) => (this.router.url === '/' ? 10 : state.tool.pageSize));
   workflowPageSize$: Observable<number> = this.select((state) => (this.router.url === '/' ? 10 : state.workflow.pageSize));
   eventPageSize$: Observable<number> = this.select((state) => (this.router.url === '/' ? 10 : state.lambdaEvent.pageSize));
+  versionPageSize$: Observable<number> = this.select((state) => (this.router.url === '/' ? 10 : state.version.pageSize));
   toolPageIndex$: Observable<number> = this.select((state) => (this.router.url === '/' ? 0 : state.tool.pageIndex));
   workflowPageIndex$: Observable<number> = this.select((state) => (this.router.url === '/' ? 0 : state.workflow.pageIndex));
   eventPageIndex$: Observable<number> = this.select((state) => (this.router.url === '/' ? 0 : state.lambdaEvent.pageIndex));
+  versionPageIndex$: Observable<number> = this.select((state) => (this.router.url === '/' ? 0 : state.version.pageIndex));
   constructor(protected store: PaginatorStore, private router: Router) {
     super(store);
   }

src/app/shared/state/paginator.service.ts

@@ -5,7 +5,7 @@ import { PaginatorInfo, PaginatorStore } from './paginator.store';
 export class PaginatorService {
   constructor(private paginatorStore: PaginatorStore) {}
 
-  setPaginator(type: 'tool' | 'workflow' | 'lambdaEvent', pageSize: number, pageNumber: number): void {
+  setPaginator(type: 'tool' | 'workflow' | 'lambdaEvent' | 'version', pageSize: number, pageNumber: number): void {
     const paginatorInfo: PaginatorInfo = {
       pageSize: pageSize,
       pageIndex: pageNumber,
@@ -14,8 +14,10 @@ export class PaginatorService {
       this.setToolPaginatorSize(paginatorInfo);
     } else if (type === 'workflow') {
       this.setWorkflowPaginatorSize(paginatorInfo);
-    } else {
+    } else if (type === 'lambdaEvent') {
       this.setLambdaEventPaginatorSize(paginatorInfo);
+    } else {
+      this.setVersionPaginatorSize(paginatorInfo);
     }
   }
 
@@ -44,4 +46,12 @@ export class PaginatorService {
       };
     });
   }
+  setVersionPaginatorSize(paginatorInfo: PaginatorInfo) {
+    this.paginatorStore.update((state) => {
+      return {
+        ...state,
+        version: paginatorInfo,
+      };
+    });
+  }
 }

src/app/shared/state/paginator.store.ts

@@ -5,6 +5,7 @@ export interface PaginatorState {
   tool: PaginatorInfo;
   workflow: PaginatorInfo;
   lambdaEvent: PaginatorInfo;
+  version: PaginatorInfo;
 }
 
 export interface PaginatorInfo {
@@ -16,6 +17,7 @@ const initialState: PaginatorState = {
   tool: { pageSize: 10, pageIndex: 0 },
   workflow: { pageSize: 10, pageIndex: 0 },
   lambdaEvent: { pageSize: 10, pageIndex: 0 },
+  version: { pageSize: 10, pageIndex: 0 },
 };
 
 @Injectable({ providedIn: 'root' })

src/app/workflow/versions/versions.component.html

@@ -292,4 +292,11 @@
       data-cy="versionRow"
     ></tr>
   </table>
+  <mat-paginator
+    [pageSizeOptions]="[10, 20, 50]"
+    [length]="versionsLength"
+    [pageSize]="pageSize$ | async"
+    [pageIndex]="pageIndex$ | async"
+    showFirstLastButtons
+  ></mat-paginator>
 </div>

src/app/workflow/versions/versions.component.ts

@@ -22,7 +22,7 @@ import { AlertService } from '../../shared/alert/state/alert.service';
 import { DateService } from '../../shared/date.service';
 import { Dockstore } from '../../shared/dockstore.model';
 import { DockstoreService } from '../../shared/dockstore.service';
-import { Doi, EntryType, VersionVerifiedPlatform } from '../../shared/openapi';
+import { Doi, EntryType, VersionVerifiedPlatform, WorkflowsService } from '../../shared/openapi';
 import { ExtendedWorkflow } from '../../shared/models/ExtendedWorkflow';
 import { SessionQuery } from '../../shared/session/session.query';
 import { ExtendedWorkflowQuery } from '../../shared/state/extended-workflow.query';
@@ -36,11 +36,14 @@ import { ExtendedModule } from '@ngbracket/ngx-layout/extended';
 import { ViewWorkflowComponent } from '../view/view.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatLegacyChipsModule } from '@angular/material/legacy-chips';
-import { NgIf, NgClass, NgFor, JsonPipe, DatePipe, KeyValuePipe, KeyValue } from '@angular/common';
+import { NgIf, NgClass, NgFor, JsonPipe, DatePipe, KeyValuePipe, KeyValue, AsyncPipe } from '@angular/common';
 import { FlexModule } from '@ngbracket/ngx-layout/flex';
 import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip';
 import { DoiBadgeComponent } from 'app/shared/entry/doi/doi-badge/doi-badge.component';
+import { PaginatorService } from '../../shared/state/paginator.service';
+import { Observable } from 'rxjs';
+import { MatLegacyPaginator as MatPaginator, MatLegacyPaginatorModule } from '@angular/material/legacy-paginator';
 
 @Component({
   selector: 'app-versions-workflow',
@@ -67,28 +70,36 @@ import { DoiBadgeComponent } from 'app/shared/entry/doi/doi-badge/doi-badge.comp
     CommitUrlPipe,
     KeyValuePipe,
     DoiBadgeComponent,
+    AsyncPipe,
+    MatLegacyPaginatorModule,
   ],
 })
 export class VersionsWorkflowComponent extends Versions implements OnInit, OnChanges, AfterViewInit {
   faTag = faTag;
   faCodeBranch = faCodeBranch;
-  @Input() versions: Array<WorkflowVersion>;
+  versions: Array<WorkflowVersion>;
   @Input() workflowId: number;
   @Input() verifiedVersionPlatforms: Array<VersionVerifiedPlatform>;
+  @Input() publicPage: boolean;
   _selectedVersion: WorkflowVersion;
   Dockstore = Dockstore;
   @Input() set selectedVersion(value: WorkflowVersion) {
     if (value != null) {
       this._selectedVersion = value;
     }
   }
-  dataSource = new MatTableDataSource(this.versions);
+  dataSource: MatTableDataSource<WorkflowVersion>;
   @Output() selectedVersionChange = new EventEmitter<WorkflowVersion>();
   @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) protected paginator: MatPaginator;
   public WorkflowType = Workflow;
   workflow: ExtendedWorkflow;
   entryType = EntryType;
   DoiInitiatorEnum = Doi.InitiatorEnum;
+  type: 'workflow' | 'tool' | 'lambdaEvent' | 'version' = 'version';
+  public pageSize$: Observable<number>;
+  public pageIndex$: Observable<number>;
+  versionsLength: number;
   setNoOrderCols(): Array<number> {
     return [4, 5];
   }
@@ -97,6 +108,8 @@ export class VersionsWorkflowComponent extends Versions implements OnInit, OnCha
     dockstoreService: DockstoreService,
     dateService: DateService,
     private alertService: AlertService,
+    private paginatorService: PaginatorService,
+    private workflowsService: WorkflowsService,
     private extendedWorkflowQuery: ExtendedWorkflowQuery,
     protected sessionQuery: SessionQuery
   ) {
@@ -134,34 +147,44 @@ export class VersionsWorkflowComponent extends Versions implements OnInit, OnCha
     });
   }
 
-  ngAfterViewInit(): void {
-    this.dataSource.sort = this.sort;
-  }
+  ngAfterViewInit(): void {}
 
-  ngOnChanges() {
-    this.dataSource.data = this.versions;
-  }
+  ngOnChanges() {}
 
   ngOnInit() {
     this.extendedWorkflowQuery.extendedWorkflow$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((workflow) => {
       this.workflow = workflow;
       if (workflow) {
         this.defaultVersion = workflow.defaultVersion;
       }
-      this.dtOptions = {
-        bFilter: false,
-        bPaginate: false,
-        columnDefs: [
-          {
-            orderable: false,
-            targets: this.setNoOrderCols(),
-          },
-        ],
-      };
       this.publicPageSubscription();
     });
+    this.dataSource = new MatTableDataSource();
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+    this.loadVersions(this.publicPage);
   }
 
+  loadVersions(publicPage: boolean) {
+    if (publicPage) {
+      this.workflowsService
+        .getPublicWorkflowVersions(this.workflowId, this.paginator.pageSize, this.paginator.pageIndex, 'response')
+        .pipe(takeUntil(this.ngUnsubscribe))
+        .subscribe((versions) => {
+          this.dataSource.data = versions.body;
+          this.versionsLength = Number(versions.headers.get('X-total-count'));
+        });
+    } else {
+      this.workflowsService
+        .getWorkflowVersions(this.workflowId, this.paginator.pageSize, this.paginator.pageIndex, 'response')
+        .pipe(takeUntil(this.ngUnsubscribe))
+        .subscribe((versions) => {
+          this.dataSource.data = versions.body;
+          this.versionsLength = Number(versions.headers.get('X-total-count'));
+        });
+    }
+    this.paginatorService.setPaginator(this.type, this.paginator.pageSize, this.paginator.pageIndex);
+  }
   /**
    * Updates the version and emits an event for the parent component
    * @param {WorkflowVersion} version - version to make the selected version

src/app/workflow/workflow.component.html

@@ -334,11 +334,11 @@ <h3>
           <mat-tab id="versionsTab" label="Versions">
             <div *ngIf="(extendedWorkflow$ | async)?.workflowVersions.length > 0; else noVersionsVersionTab">
               <app-versions-workflow
-                [versions]="(extendedWorkflow$ | async)?.workflowVersions"
                 (selectedVersionChange)="onSelectedVersionChange($event)"
                 [verifiedSource]="(extendedWorkflow$ | async)?.verifiedSources"
                 [verifiedVersionPlatforms]="versionsWithVerifiedPlatforms"
                 [workflowId]="workflow?.id"
+                [publicPage]="publicPage"
                 [selectedVersion]="selectedVersion"
                 [canRead]="canRead"
                 [canWrite]="canWrite"