Add paging to UI (#44)

* Add paging to UI

* Fixed queryparms on apiservice

Author: theDRB123

frontend/src/app/angor/project/project.component.html

@@ -133,6 +133,9 @@ <h1>Angor Project</h1>
         </tr>
         </tbody>
       </table>
+      <ngb-pagination [collectionSize]="(projectStats$ | async)?.investorCount" [pageSize]="investmentsPerPage"
+        [(page)]="investmentPage" (pageChange)="onInvestmentPageChange($event)" [boundaryLinks]="true">
+      </ngb-pagination>
       </div>
     </div>
   </ng-container>

frontend/src/app/angor/project/project.component.ts

@@ -17,6 +17,8 @@ export class ProjectComponent implements OnInit {
   projectInvestments$: Observable<AngorProjectInvestment[]> | null = null;
   isLoading = true;
   error: HttpErrorResponse | null = null;
+  investmentPage: number = 1;
+  investmentsPerPage: number = 10;
 
   constructor(
     private route: ActivatedRoute,
@@ -42,7 +44,9 @@ export class ProjectComponent implements OnInit {
         return this.apiService.getAngorProjectStats$(angorId).pipe(
           switchMap(stats => {
             this.projectStats$ = of(stats);
-            return this.apiService.getAngorProjectInvestments(angorId);
+            const limit = this.investmentsPerPage;           
+            const offset = (this.investmentPage - 1) * limit;
+            return this.apiService.getAngorProjectInvestments(angorId, offset, limit);
           }),
           map(investments => {
             this.projectInvestments$ = of(investments);
@@ -63,4 +67,22 @@ export class ProjectComponent implements OnInit {
     )
       .subscribe();
   }
+
+  onInvestmentPageChange(newPage: number): void {
+    this.investmentPage = newPage;
+    this.angorId$.pipe(
+      switchMap(angorId => {
+        if (!angorId) {
+          throw new Error('Angor ID is missing.');
+        }
+        this.isLoading = true;
+        const limit = this.investmentsPerPage;
+        const offset = (this.investmentPage - 1) * limit;
+        return this.apiService.getAngorProjectInvestments(angorId, offset, limit);
+      })
+    ).subscribe(investments => {
+      this.projectInvestments$ = of(investments);
+      this.isLoading = false;
+    });
+  }
 }

frontend/src/app/services/api.service.ts

@@ -603,9 +603,17 @@ export class ApiService {
     );
   }
 
-  getAngorProjectInvestments(angorId: string): Observable<AngorProjectInvestment[]> {
+  getAngorProjectInvestments(angorId: string, from?: number, limit?: number): Observable<AngorProjectInvestment[]> {
+    const queryParams = new URLSearchParams();
+    if (from) {
+      queryParams.append('offset', from.toString());
+    }
+    if (limit) {
+      queryParams.append('limit', limit.toString());
+    }
+    const queryString = queryParams.toString();
     return this.httpClient.get<AngorProjectInvestment[]>(
-      this.apiBaseUrl + this.apiBasePath + '/api/v1/query/Angor/projects/' + angorId + '/investments'
+      this.apiBaseUrl + this.apiBasePath + '/api/v1/query/Angor/projects/' + angorId + '/investments/' + queryString
     );
   }
 }