diff --git a/frontend/src/app/angor/project/project.component.html b/frontend/src/app/angor/project/project.component.html index d072bf16c9..939cb96460 100644 --- a/frontend/src/app/angor/project/project.component.html +++ b/frontend/src/app/angor/project/project.component.html @@ -133,6 +133,9 @@

Angor Project

+ + diff --git a/frontend/src/app/angor/project/project.component.ts b/frontend/src/app/angor/project/project.component.ts index e20a56c7d4..773f2ba02f 100644 --- a/frontend/src/app/angor/project/project.component.ts +++ b/frontend/src/app/angor/project/project.component.ts @@ -17,6 +17,8 @@ export class ProjectComponent implements OnInit { projectInvestments$: Observable | 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; + }); + } } diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index bbb564767c..134f604742 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -603,9 +603,17 @@ export class ApiService { ); } - getAngorProjectInvestments(angorId: string): Observable { + getAngorProjectInvestments(angorId: string, from?: number, limit?: number): Observable { + 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( - this.apiBaseUrl + this.apiBasePath + '/api/v1/query/Angor/projects/' + angorId + '/investments' + this.apiBaseUrl + this.apiBasePath + '/api/v1/query/Angor/projects/' + angorId + '/investments/' + queryString ); } }