Feature/extend symbol search component by asset sub classes (#2087)

* Add asset sub classes

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Extended the symbol search component by asset sub classes
+
 ## 1.282.0 - 2023-06-19
 
 ### Added

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html

@@ -22,7 +22,10 @@
       >
       <br />
       <small class="text-muted"
-        >{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency }}</small
+        >{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency
+        }}<ng-container *ngIf="lookupItem.assetSubClass">
+          · {{ lookupItem.assetSubClassString }}</ng-container
+        ></small
       >
     </mat-option>
   </ng-container>

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts

@@ -18,8 +18,9 @@ import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
+import { translate } from '@ghostfolio/ui/i18n';
 import { isString } from 'lodash';
-import { Observable, Subject, of, tap } from 'rxjs';
+import { Subject, tap } from 'rxjs';
 import {
   debounceTime,
   distinctUntilChanged,
@@ -56,8 +57,8 @@ export class SymbolAutocompleteComponent
   @ViewChild('symbolAutocomplete') public symbolAutocomplete: MatAutocomplete;
 
   public control = new FormControl();
-  public filteredLookupItems: LookupItem[] = [];
-  public filteredLookupItemsObservable: Observable<LookupItem[]> = of([]);
+  public filteredLookupItems: (LookupItem & { assetSubClassString: string })[] =
+    [];
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -89,6 +90,7 @@ export class SymbolAutocompleteComponent
         }),
         tap(() => {
           this.isLoading = true;
+
           this.changeDetectorRef.markForCheck();
         }),
         switchMap((query: string) => {
@@ -96,7 +98,13 @@ export class SymbolAutocompleteComponent
         })
       )
       .subscribe((filteredLookupItems) => {
-        this.filteredLookupItems = filteredLookupItems;
+        this.filteredLookupItems = filteredLookupItems.map((lookupItem) => {
+          return {
+            ...lookupItem,
+            assetSubClassString: translate(lookupItem.assetSubClass)
+          };
+        });
+
         this.isLoading = false;
 
         this.changeDetectorRef.markForCheck();