Refactoring

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

@@ -58,8 +58,8 @@ import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
 
 import {
-  AssetProfileDialogParams,
+  AssetClassSelectOption,
-  SelectOption
+  AssetProfileDialogParams
 } from './interfaces/interfaces';
 
 @Component({
@@ -79,21 +79,24 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
   @ViewChild('assetProfileFormElement')
   assetProfileFormElement: ElementRef<HTMLFormElement>;
 
-  public assetProfileClass: string;
+  public assetProfile: AdminMarketDataDetails['assetProfile'];
-  public assetProfileSubClass: string;
 
-  public assetClassOptions = Object.keys(AssetClass).map((id) => {
+  public assetClassLabel: string;
-    return { id, label: translate(id) } as SelectOption;
+  public assetSubClassLabel: string;
-  });
-  public assetSubClassOptions: SelectOption[] = [];
 
-  public assetProfile: AdminMarketDataDetails['assetProfile'];
+  public assetClassOptions: AssetClassSelectOption[] = Object.keys(AssetClass)
+    .map((id) => {
+      return { id, label: translate(id) } as AssetClassSelectOption;
+    })
+    .sort((a, b) => {
+      return a.label.localeCompare(b.label);
+    });
+
+  public assetSubClassOptions: AssetClassSelectOption[] = [];
 
-  public assetClassControl = new FormControl<AssetClass>(undefined);
-  public assetSubClassControl = new FormControl<AssetSubClass>(undefined);
   public assetProfileForm = this.formBuilder.group({
-    assetClass: this.assetClassControl,
+    assetClass: new FormControl<AssetClass>(undefined),
-    assetSubClass: this.assetSubClassControl,
+    assetSubClass: new FormControl<AssetSubClass>(undefined),
     comment: '',
     countries: '',
     currency: '',
@@ -221,19 +224,22 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
         }
       });
 
-    this.assetClassControl.valueChanges
+    this.assetProfileForm
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .get('assetClass')
+      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((assetClass) => {
         const assetSubClasses = ASSET_CLASS_MAPPING.get(assetClass) ?? [];
 
-        this.assetSubClassOptions = assetSubClasses.map((assetSubClass) => {
+        this.assetSubClassOptions = assetSubClasses
-          return {
+          .map((assetSubClass) => {
-            id: assetSubClass,
+            return {
-            label: translate(assetSubClass)
+              id: assetSubClass,
-          };
+              label: translate(assetSubClass)
-        });
+            };
+          })
+          .sort((a, b) => a.label.localeCompare(b.label));
 
-        this.assetSubClassControl.setValue(null);
+        this.assetProfileForm.get('assetSubClass').setValue(null);
 
         this.changeDetectorRef.markForCheck();
       });
@@ -247,8 +253,8 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
       .subscribe(({ assetProfile, marketData }) => {
         this.assetProfile = assetProfile;
 
-        this.assetProfileClass = translate(this.assetProfile?.assetClass);
+        this.assetClassLabel = translate(this.assetProfile?.assetClass);
-        this.assetProfileSubClass = translate(this.assetProfile?.assetSubClass);
+        this.assetSubClassLabel = translate(this.assetProfile?.assetSubClass);
         this.countries = {};
 
         this.isBenchmark = this.benchmarks.some(({ id }) => {

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

@@ -209,8 +209,8 @@
         <gf-value
           i18n
           size="medium"
-          [hidden]="!assetProfileClass"
+          [hidden]="!assetClassLabel"
-          [value]="assetProfileClass"
+          [value]="assetClassLabel"
           >Asset Class</gf-value
         >
       </div>
@@ -218,8 +218,8 @@
         <gf-value
           i18n
           size="medium"
-          [hidden]="!assetProfileSubClass"
+          [hidden]="!assetSubClassLabel"
-          [value]="assetProfileSubClass"
+          [value]="assetSubClassLabel"
           >Asset Sub Class</gf-value
         >
       </div>
@@ -306,7 +306,7 @@
             <mat-option [value]="null" />
             @for (
               assetClassOption of assetClassOptions;
-              track assetClassOption
+              track assetClassOption.id
             ) {
               <mat-option [value]="assetClassOption.id">{{
                 assetClassOption.label
@@ -322,7 +322,7 @@
             <mat-option [value]="null" />
             @for (
               assetSubClassOption of assetSubClassOptions;
-              track assetSubClassOption
+              track assetSubClassOption.id
             ) {
               <mat-option [value]="assetSubClassOption.id">{{
                 assetSubClassOption.label

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

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

libs/common/src/lib/config.ts

@@ -36,16 +36,18 @@ export const warnColorRgb = {
 
 export const ASSET_CLASS_MAPPING = new Map<AssetClass, AssetSubClass[]>([
   [AssetClass.ALTERNATIVE_INVESTMENT, [AssetSubClass.COLLECTIBLE]],
-  [
+  [AssetClass.COMMODITY, [AssetSubClass.PRECIOUS_METAL]],
-    AssetClass.COMMODITY,
-    [AssetSubClass.COMMODITY, AssetSubClass.PRECIOUS_METAL]
-  ],
   [
     AssetClass.EQUITY,
-    [AssetSubClass.ETF, AssetSubClass.PRIVATE_EQUITY, AssetSubClass.STOCK]
+    [
+      AssetSubClass.ETF,
+      AssetSubClass.MUTUALFUND,
+      AssetSubClass.PRIVATE_EQUITY,
+      AssetSubClass.STOCK
+    ]
   ],
-  [AssetClass.FIXED_INCOME, [AssetSubClass.BOND, AssetSubClass.MUTUALFUND]],
+  [AssetClass.FIXED_INCOME, [AssetSubClass.BOND]],
-  [AssetClass.LIQUIDITY, [AssetSubClass.BOND, AssetSubClass.CRYPTOCURRENCY]],
+  [AssetClass.LIQUIDITY, [AssetSubClass.CRYPTOCURRENCY]],
   [AssetClass.REAL_ESTATE, []]
 ]);