From 58d9816f0146fa119c4618f6809131d5d33aa19b Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 21 Jun 2023 16:09:18 +0200
Subject: [PATCH] Feature/extend symbol search component by asset sub classes
 (#2087)

* Add asset sub classes

* Update changelog
---
 CHANGELOG.md                                     |  6 ++++++
 .../symbol-autocomplete.component.html           |  5 ++++-
 .../symbol-autocomplete.component.ts             | 16 ++++++++++++----
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc01fb02c..3f2275bcd 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
index 47cb8bcb4..bc6a6dcc3 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
+++ b/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>
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
index 2b6bc45ca..e9c1dd8a1 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
+++ b/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();