Task/Lazy load platforms through API

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: [
+      platformId: [null, this.autocompleteObjectValidator()] // Initialize as null
-        this.platforms.find(({ id }) => {
-          return id === this.data.account.platformId;
-        }),
-        this.autocompleteObjectValidator()
-      ]
     });
 
-    this.filteredPlatforms = this.accountForm
+    this.dataService.fetchPlatforms().subscribe(({ platforms }) => {
-      .get('platformId')
+      this.platforms = platforms;
-      .valueChanges.pipe(
+
-        startWith(''),
+      // Update platformId after platforms are loaded
-        map((value) => {
+      const selectedPlatform = this.platforms.find(({ id }) => {
-          const name = typeof value === 'string' ? value : value?.name;
+        return id === this.data.account.platformId;
-          return name ? this.filter(name as string) : this.platforms.slice();
+      });
-        })
+
-      );
+      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() {

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 });