feat: Add autocomplete currency selector

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts

@@ -20,6 +20,7 @@ import { Observable, Subject } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
 import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces';
+import { Currency } from '@ghostfolio/common/interfaces/currency.interface';
 
 @Component({
   host: { class: 'h-100' },
@@ -30,7 +31,7 @@ import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces';
 })
 export class CreateOrUpdateAccountDialog implements OnDestroy {
   public accountForm: FormGroup;
-  public currencies: string[] = [];
+  public currencies: Currency[] = [];
   public filteredPlatforms: Observable<Platform[]>;
   public platforms: Platform[];
 
@@ -46,7 +47,10 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
   public ngOnInit() {
     const { currencies, platforms } = this.dataService.fetchInfo();
 
-    this.currencies = currencies;
+    this.currencies = currencies.map((currency) => ({
+      label: currency,
+      value: currency
+    }));
     this.platforms = platforms;
 
     this.accountForm = this.formBuilder.group({

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -20,11 +20,10 @@
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Currency</mat-label>
-        <mat-select formControlName="currency">
-          <mat-option *ngFor="let currency of currencies" [value]="currency"
-            >{{ currency }}</mat-option
-          >
-        </mat-select>
+        <gf-currency-autocomplete
+          formControlName="currency"
+          [currencies]="currencies"
+        />
       </mat-form-field>
     </div>
     <div>

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts

@@ -9,7 +9,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
-
+import { GfCurrencyAutocompleteModule } from '@ghostfolio/ui/currency-selector/currency-selector.module';
 import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.component';
 
 @NgModule({
@@ -17,6 +17,7 @@ import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.c
   imports: [
     CommonModule,
     FormsModule,
+    GfCurrencyAutocompleteModule,
     GfSymbolIconModule,
     MatAutocompleteModule,
     MatButtonModule,

libs/common/src/lib/interfaces/currency.interface.ts

@@ -0,0 +1,4 @@
+export interface Currency {
+  label: string;
+  value: string;
+}