Asset sub class options filtered based on selected asset class

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -56,7 +56,10 @@ import ms from 'ms';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
 
-import { AssetProfileDialogParams } from './interfaces/interfaces';
+import {
+  AssetProfileDialogParams,
+  SelectOptionValue
+} from './interfaces/interfaces';
 
 @Component({
   host: { class: 'd-flex flex-column h-100' },
@@ -76,20 +79,30 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
   assetProfileFormElement: ElementRef<HTMLFormElement>;
 
   public assetProfileClass: string;
+  public assetProfileSubClass: string;
 
-  public assetClasses = Object.keys(AssetClass).map((assetClass) => {
-    return { id: assetClass, label: translate(assetClass) };
-  });
-
-  public assetSubClasses = Object.keys(AssetSubClass).map((assetSubClass) => {
-    return { id: assetSubClass, label: translate(assetSubClass) };
+  public assetClasses = Object.keys(AssetClass).map((id) => {
+    return { id, label: translate(id) };
   });
+  public allAssetSubClasses = Object.keys(AssetSubClass).reduce(
+    (acc, id) => {
+      acc[id] = {
+        id,
+        label: translate(id)
+      };
+      return acc;
+    },
+    {} as Record<AssetSubClass, SelectOptionValue>
+  );
+  public assetSubClasses: SelectOptionValue[] = [];
 
   public assetProfile: AdminMarketDataDetails['assetProfile'];
 
+  public assetClassControl = new FormControl<AssetClass>(undefined);
+  public assetSubClassControl = new FormControl<AssetSubClass>(undefined);
   public assetProfileForm = this.formBuilder.group({
-    assetClass: new FormControl<AssetClass>(undefined),
-    assetSubClass: new FormControl<AssetSubClass>(undefined),
+    assetClass: this.assetClassControl,
+    assetSubClass: this.assetSubClassControl,
     comment: '',
     countries: '',
     currency: '',
@@ -125,7 +138,6 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
     }
   );
 
-  public assetProfileSubClass: string;
   public benchmarks: Partial<SymbolProfile>[];
 
   public countries: {
@@ -218,6 +230,49 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
         }
       });
 
+    this.assetClassControl.valueChanges
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((assetClass) => {
+        switch (assetClass) {
+          case AssetClass.ALTERNATIVE_INVESTMENT:
+            this.assetSubClasses = [
+              this.allAssetSubClasses[AssetSubClass.COLLECTIBLE]
+            ];
+            break;
+          case AssetClass.COMMODITY:
+            this.assetSubClasses = [
+              this.allAssetSubClasses[AssetSubClass.COMMODITY],
+              this.allAssetSubClasses[AssetSubClass.PRECIOUS_METAL]
+            ];
+            break;
+          case AssetClass.EQUITY:
+            this.assetSubClasses = [
+              this.allAssetSubClasses[AssetSubClass.ETF],
+              this.allAssetSubClasses[AssetSubClass.PRIVATE_EQUITY],
+              this.allAssetSubClasses[AssetSubClass.STOCK]
+            ];
+            break;
+          case AssetClass.FIXED_INCOME:
+            this.assetSubClasses = [
+              this.allAssetSubClasses[AssetSubClass.BOND],
+              this.allAssetSubClasses[AssetSubClass.MUTUALFUND]
+            ];
+            break;
+          case AssetClass.LIQUIDITY:
+            this.assetSubClasses = [
+              this.allAssetSubClasses[AssetSubClass.CRYPTOCURRENCY]
+            ];
+            break;
+          default:
+            this.assetSubClasses = [];
+            break;
+        }
+
+        this.assetSubClassControl.setValue(this.assetSubClasses[0]?.id);
+
+        this.changeDetectorRef.markForCheck();
+      });
+
     this.dataService
       .fetchMarketDataBySymbol({
         dataSource: this.data.dataSource,

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -316,7 +316,6 @@
         <mat-form-field appearance="outline" class="w-100 without-hint">
           <mat-label i18n>Asset Sub Class</mat-label>
           <mat-select formControlName="assetSubClass">
-            <mat-option [value]="null" />
             @for (assetSubClass of assetSubClasses; track assetSubClass) {
               <mat-option [value]="assetSubClass.id">{{
                 assetSubClass.label

apps/client/src/app/components/admin-market-data/asset-profile-dialog/interfaces/interfaces.ts

@@ -1,6 +1,6 @@
 import { ColorScheme } from '@ghostfolio/common/types';
 
-import { DataSource } from '@prisma/client';
+import { AssetSubClass, DataSource } from '@prisma/client';
 
 export interface AssetProfileDialogParams {
   colorScheme: ColorScheme;
@@ -9,3 +9,8 @@ export interface AssetProfileDialogParams {
   locale: string;
   symbol: string;
 }
+
+export interface SelectOptionValue {
+  id: AssetSubClass;
+  label: string;
+}