From 1579367d538bb43a3a54c162314cae2a9877fb61 Mon Sep 17 00:00:00 2001
From: omkarg01 <omkargujja01@gmail.com>
Date: Fri, 2 Jan 2026 03:46:00 +0530
Subject: [PATCH] Task/Lazy load platforms through API

---
 ...eate-or-update-account-dialog.component.ts | 45 +++++++++++--------
 apps/client/src/app/services/data.service.ts  |  5 +++
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts
index 5e18f25cf..83fad091e 100644
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts
+++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts
@@ -59,7 +59,7 @@ export class GfCreateOrUpdateAccountDialogComponent implements OnDestroy {
   public accountForm: FormGroup;
   public currencies: string[] = [];
   public filteredPlatforms: Observable<Platform[]>;
-  public platforms: Platform[];
+  public platforms: Platform[] = [];
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -71,10 +71,8 @@ export class GfCreateOrUpdateAccountDialogComponent implements OnDestroy {
   ) {}
 
   public ngOnInit() {
-    const { currencies, platforms } = this.dataService.fetchInfo();
-
+    const { currencies } = this.dataService.fetchInfo();
     this.currencies = currencies;
-    this.platforms = platforms;
 
     this.accountForm = this.formBuilder.group({
       accountId: [{ disabled: true, value: this.data.account.id }],
@@ -83,23 +81,32 @@ export class GfCreateOrUpdateAccountDialogComponent implements OnDestroy {
       currency: [this.data.account.currency, Validators.required],
       isExcluded: [this.data.account.isExcluded],
       name: [this.data.account.name, Validators.required],
-      platformId: [
-        this.platforms.find(({ id }) => {
-          return id === this.data.account.platformId;
-        }),
-        this.autocompleteObjectValidator()
-      ]
+      platformId: [null, this.autocompleteObjectValidator()] // Initialize as null
     });
 
-    this.filteredPlatforms = this.accountForm
-      .get('platformId')
-      .valueChanges.pipe(
-        startWith(''),
-        map((value) => {
-          const name = typeof value === 'string' ? value : value?.name;
-          return name ? this.filter(name as string) : this.platforms.slice();
-        })
-      );
+    this.dataService.fetchPlatforms().subscribe(({ platforms }) => {
+      this.platforms = platforms;
+
+      // Update platformId after platforms are loaded
+      const selectedPlatform = this.platforms.find(({ id }) => {
+        return id === this.data.account.platformId;
+      });
+
+      this.accountForm.patchValue({
+        platformId: selectedPlatform
+      });
+
+      // Set up filteredPlatforms observable
+      this.filteredPlatforms = this.accountForm
+        .get('platformId')
+        .valueChanges.pipe(
+          startWith(''),
+          map((value) => {
+            const name = typeof value === 'string' ? value : value?.name;
+            return name ? this.filter(name as string) : this.platforms.slice();
+          })
+        );
+    });
   }
 
   public autoCompleteCheck() {
diff --git a/apps/client/src/app/services/data.service.ts b/apps/client/src/app/services/data.service.ts
index 31b0fef73..2cda1d475 100644
--- a/apps/client/src/app/services/data.service.ts
+++ b/apps/client/src/app/services/data.service.ts
@@ -42,6 +42,7 @@ import {
   MarketDataDetailsResponse,
   MarketDataOfMarketsResponse,
   OAuthResponse,
+  PlatformsResponse,
   PortfolioDetails,
   PortfolioDividendsResponse,
   PortfolioHoldingResponse,
@@ -197,6 +198,10 @@ export class DataService {
     );
   }
 
+  public fetchPlatforms(): Observable<PlatformsResponse> {
+    return this.http.get<PlatformsResponse>('/api/v1/platforms');
+  }
+
   public fetchAccounts({ filters }: { filters?: Filter[] } = {}) {
     const params = this.buildFiltersAsQueryParams({ filters });