diff --git a/matsen-tool/src/app/partners/partners.component.html b/matsen-tool/src/app/partners/partners.component.html index f157aa3..6dc35cc 100644 --- a/matsen-tool/src/app/partners/partners.component.html +++ b/matsen-tool/src/app/partners/partners.component.html @@ -36,7 +36,11 @@ - diff --git a/matsen-tool/src/app/partners/partners.component.ts b/matsen-tool/src/app/partners/partners.component.ts index 20c6678..ec1dc78 100644 --- a/matsen-tool/src/app/partners/partners.component.ts +++ b/matsen-tool/src/app/partners/partners.component.ts @@ -5,7 +5,8 @@ import {MatTableDataSource, MatTableModule} from "@angular/material/table"; import {ActivatedRoute, RouterLink, RouterLinkActive} from "@angular/router"; import {Subscription} from "rxjs"; import {PartnerJsonld, PartnerService} from "@app/core/api/v1"; -import {MatPaginator, MatPaginatorIntl, MatPaginatorModule} from "@angular/material/paginator"; +import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator"; +import {NumberInput} from "@angular/cdk/coercion"; @Component({ selector: 'app-partners', @@ -19,11 +20,17 @@ export class PartnersComponent implements OnInit, AfterViewInit { @ViewChild(MatPaginator) paginator: MatPaginator; protected partnersSub: Subscription; - protected partners: Array = []; + protected partners: Array; + protected length: number; + protected pageEvent: PageEvent; + protected pageSize: NumberInput; + protected pageIndex: NumberInput; + protected currentPageIndex: number; + protected pageSizeOptions = [10]; - dataType!: string; - displayedColumns: string[] = ['pos', 'name', 'address', 'website']; - dataSource = new MatTableDataSource(this.partners); + protected dataType!: string; + protected displayedColumns: string[]; + protected dataSource; constructor( private _liveAnnouncer: LiveAnnouncer, @@ -35,20 +42,21 @@ export class PartnersComponent implements OnInit, AfterViewInit { this.partnersSub = new Subscription(); this.partners = []; + this.displayedColumns = ['pos', 'name', 'address', 'website']; + + this.dataSource = new MatTableDataSource(this.partners); + this.pageEvent = new PageEvent(); + this.length = 0; + this.pageSize = 10; + this.pageIndex = 0; + this.currentPageIndex = 1; } ngOnInit() { this.dataType = this.route.snapshot.data['dataType']; console.log('Data Type:', this.dataType); - this.partnersSub = this.partnerService.partnersGetCollection(1, "asc", this.dataType).subscribe( - data => { - this.partners = data["hydra:member"]; - - this.dataSource.data = this.partners; - console.log(this.partners); - } - ); + this.getData(); console.log(this.dataSource.data); } @@ -70,4 +78,28 @@ export class PartnersComponent implements OnInit, AfterViewInit { this._liveAnnouncer.announce('Sorting cleared'); } } + + getData() + { + this.partnersSub = this.partnerService.partnersGetCollection(this.currentPageIndex, "asc", this.dataType).subscribe( + data => { + this.partners = data["hydra:member"]; + this.dataSource = new MatTableDataSource(this.partners); + this.length = Number(data["hydra:totalItems"]); + this.paginator.length = this.length; + } + ); + console.log(this.dataSource.data); + } + + + handlePageEvent(e: PageEvent) { + this.pageEvent = e; + this.length = e.length; + this.pageSize = e.pageSize; + this.pageIndex = e.pageIndex; + this.currentPageIndex = this.pageIndex.valueOf() + 1; + this.getData(); + } + }