wip pagination

matsen-tool/src/app/partners/partners.component.html

@@ -36,7 +36,12 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
 
-<mat-paginator [pageSizeOptions]="[5, 10, 20]"
+<mat-paginator [pageSizeOptions]="[10]"
+               [length]="length"
+               (page)="handlePageEvent($event)"
+               [pageSize]="pageSize"
+               [pageIndex]="pageIndex"
+               
                showFirstLastButtons
                aria-label="Select page of periodic elements">
 </mat-paginator>

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<PartnerJsonld> = [];
+    protected partners: Array<PartnerJsonld>;
+    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,38 @@ 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.length = Number(data["hydra:totalItems"]);
+                console.log('GET DATA:');
+                console.log('length:' + this.length);
+                console.log('page index:' + this.pageIndex);
+                console.log('page size:' + this.pageSize);
+                this.dataSource.data = this.partners;
+                console.log(this.partners);
+            }
+        );
+        console.log(this.dataSource.data);
+    }
+
+
+    handlePageEvent(e: PageEvent) {
+        console.log(e);
+        this.pageEvent = e;
+        this.length = e.length;
+        this.pageSize = e.pageSize;
+        this.pageIndex = e.pageIndex;
+        console.log('PAGE EVENT:');
+        console.log('length:' + this.length);
+        console.log('page index:' + this.pageIndex);
+        console.log('page size:' + this.pageSize);
+
+        this.currentPageIndex = this.pageIndex.valueOf() + 1;
+        this.getData();
+    }
+
 }