From d84840bf51c7409bf4a777cd911ae80706b4bb9e Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <119250923+theDRB123@users.noreply.github.com>
Date: Fri, 30 May 2025 00:08:35 +0530
Subject: [PATCH 1/2] Add paging to UI

---
 .../app/angor/project/project.component.html  |  3 +++
 .../app/angor/project/project.component.ts    | 24 ++++++++++++++++++-
 frontend/src/app/services/api.service.ts      |  6 +++--
 3 files changed, 30 insertions(+), 3 deletions(-)

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 @@ <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>
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<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;
+    });
+  }
 }
diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index bbb564767c..80f3df9295 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -603,9 +603,11 @@ export class ApiService {
     );
   }
 
-  getAngorProjectInvestments(angorId: string): Observable<AngorProjectInvestment[]> {
+  getAngorProjectInvestments(angorId: string, from: number, limit: number): Observable<AngorProjectInvestment[]> {
     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' +
+      (from == undefined ? '' : '?offset=' + from) + 
+      (limit == undefined ? '' : '&limit=' + limit)
     );
   }
 }

From f171411f447a8c624a15d0d8a9deff603b7e2450 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <119250923+theDRB123@users.noreply.github.com>
Date: Fri, 30 May 2025 09:35:57 +0530
Subject: [PATCH 2/2] Fixed queryparms on apiservice

---
 frontend/src/app/services/api.service.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index 80f3df9295..134f604742 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -603,11 +603,17 @@ export class ApiService {
     );
   }
 
-  getAngorProjectInvestments(angorId: string, from: number, limit: number): 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' +
-      (from == undefined ? '' : '?offset=' + from) + 
-      (limit == undefined ? '' : '&limit=' + limit)
+      this.apiBaseUrl + this.apiBasePath + '/api/v1/query/Angor/projects/' + angorId + '/investments/' + queryString
     );
   }
 }