diff --git a/src/app/shared/state/paginator.query.ts b/src/app/shared/state/paginator.query.ts index b913677e1..17980377a 100644 --- a/src/app/shared/state/paginator.query.ts +++ b/src/app/shared/state/paginator.query.ts @@ -25,9 +25,11 @@ export class PaginatorQuery extends Query { toolPageSize$: Observable = this.select((state) => (this.router.url === '/' ? 10 : state.tool.pageSize)); workflowPageSize$: Observable = this.select((state) => (this.router.url === '/' ? 10 : state.workflow.pageSize)); eventPageSize$: Observable = this.select((state) => (this.router.url === '/' ? 10 : state.lambdaEvent.pageSize)); + versionPageSize$: Observable = this.select((state) => (this.router.url === '/' ? 10 : state.version.pageSize)); toolPageIndex$: Observable = this.select((state) => (this.router.url === '/' ? 0 : state.tool.pageIndex)); workflowPageIndex$: Observable = this.select((state) => (this.router.url === '/' ? 0 : state.workflow.pageIndex)); eventPageIndex$: Observable = this.select((state) => (this.router.url === '/' ? 0 : state.lambdaEvent.pageIndex)); + versionPageIndex$: Observable = this.select((state) => (this.router.url === '/' ? 0 : state.version.pageIndex)); constructor(protected store: PaginatorStore, private router: Router) { super(store); } diff --git a/src/app/shared/state/paginator.service.ts b/src/app/shared/state/paginator.service.ts index 6d684aaa1..7ad55e401 100644 --- a/src/app/shared/state/paginator.service.ts +++ b/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, + }; + }); + } } diff --git a/src/app/shared/state/paginator.store.ts b/src/app/shared/state/paginator.store.ts index ed503eb77..b6001a9aa 100644 --- a/src/app/shared/state/paginator.store.ts +++ b/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' }) diff --git a/src/app/workflow/versions/versions.component.html b/src/app/workflow/versions/versions.component.html index 381b95401..a47dc74fd 100644 --- a/src/app/workflow/versions/versions.component.html +++ b/src/app/workflow/versions/versions.component.html @@ -292,4 +292,11 @@ data-cy="versionRow" > + diff --git a/src/app/workflow/versions/versions.component.ts b/src/app/workflow/versions/versions.component.ts index ca825a2a9..fe8bfd390 100644 --- a/src/app/workflow/versions/versions.component.ts +++ b/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,14 +70,17 @@ 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; + versions: Array; @Input() workflowId: number; @Input() verifiedVersionPlatforms: Array; + @Input() publicPage: boolean; _selectedVersion: WorkflowVersion; Dockstore = Dockstore; @Input() set selectedVersion(value: WorkflowVersion) { @@ -82,13 +88,18 @@ export class VersionsWorkflowComponent extends Versions implements OnInit, OnCha this._selectedVersion = value; } } - dataSource = new MatTableDataSource(this.versions); + dataSource: MatTableDataSource; @Output() selectedVersionChange = new EventEmitter(); @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; + public pageIndex$: Observable; + versionsLength: number; setNoOrderCols(): Array { 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,13 +147,9 @@ 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) => { @@ -148,20 +157,34 @@ export class VersionsWorkflowComponent extends Versions implements OnInit, OnCha 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 diff --git a/src/app/workflow/workflow.component.html b/src/app/workflow/workflow.component.html index 575d09099..972154f9b 100644 --- a/src/app/workflow/workflow.component.html +++ b/src/app/workflow/workflow.component.html @@ -334,11 +334,11 @@