Refactoring

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

@@ -15,12 +15,12 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
 import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
+import { Currency } from '@ghostfolio/common/interfaces/currency.interface';
 import { Platform } from '@prisma/client';
 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' },

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

@@ -1,15 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 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 { GfCurrencySelectorModule } from '@ghostfolio/ui/currency-selector/currency-selector.module';
+
 import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.component';
 
 @NgModule({
@@ -17,7 +17,7 @@ import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.c
   imports: [
     CommonModule,
     FormsModule,
-    GfCurrencyAutocompleteModule,
+    GfCurrencySelectorModule,
     GfSymbolIconModule,
     MatAutocompleteModule,
     MatButtonModule,
@@ -25,7 +25,6 @@ import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.c
     MatDialogModule,
     MatFormFieldModule,
     MatInputModule,
-    MatSelectModule,
     ReactiveFormsModule
   ]
 })

libs/ui/src/lib/currency-selector/currency-selector.component.ts

@@ -16,10 +16,10 @@ import {
 } from '@angular/material/autocomplete';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
+import { Currency } from '@ghostfolio/common/interfaces/currency.interface';
+import { AbstractMatFormField } from '@ghostfolio/ui/shared/abstract-mat-form-field';
 import { Subject } from 'rxjs';
 import { map, startWith, takeUntil } from 'rxjs/operators';
-import { Currency } from '@ghostfolio/common/interfaces/currency.interface';
-import { AbstractMatFormField } from '../symbol-autocomplete/abstract-mat-form-field';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27,15 +27,15 @@ import { AbstractMatFormField } from '../symbol-autocomplete/abstract-mat-form-f
     '[attr.aria-describedBy]': 'describedBy',
     '[id]': 'id'
   },
-  selector: 'gf-currency-autocomplete',
-  styleUrls: ['./currency-selector.component.scss'],
-  templateUrl: 'currency-selector.component.html',
   providers: [
     {
       provide: MatFormFieldControl,
       useExisting: CurrencySelectorComponent
     }
-  ]
+  ],
+  selector: 'gf-currency-autocomplete',
+  styleUrls: ['./currency-selector.component.scss'],
+  templateUrl: 'currency-selector.component.html'
 })
 export class CurrencySelectorComponent
   extends AbstractMatFormField<Currency>
@@ -81,10 +81,12 @@ export class CurrencySelectorComponent
       .pipe(
         takeUntil(this.unsubscribeSubject),
         startWith(''),
-        map((value) => (value ? this.filter(value) : this.currencies.slice()))
+        map((value) => {
+          return value ? this.filter(value) : this.currencies.slice();
+        })
       )
-      .subscribe((val) => {
+      .subscribe((values) => {
-        this.filteredCurrencies = val;
+        this.filteredCurrencies = values;
       });
   }
 
@@ -96,17 +98,6 @@ export class CurrencySelectorComponent
     return this.input?.empty;
   }
 
-  private filter(value: Currency | string) {
-    const filterValue =
-      typeof value === 'string'
-        ? value?.toLowerCase()
-        : value?.value.toLowerCase();
-
-    return this.currencies.filter((currency) =>
-      currency.value.toLowerCase().startsWith(filterValue)
-    );
-  }
-
   public focus() {
     this.input.focus();
   }
@@ -138,6 +129,17 @@ export class CurrencySelectorComponent
     this.unsubscribeSubject.complete();
   }
 
+  private filter(value: Currency | string) {
+    const filterValue =
+      typeof value === 'string'
+        ? value?.toLowerCase()
+        : value?.value.toLowerCase();
+
+    return this.currencies.filter((currency) => {
+      return currency.value.toLowerCase().startsWith(filterValue);
+    });
+  }
+
   private validateRequired() {
     const requiredCheck = super.required
       ? !super.value.label || !super.value.value

libs/ui/src/lib/currency-selector/currency-selector.module.ts

@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
 import { CurrencySelectorComponent } from './currency-selector.component';
 
 @NgModule({
@@ -16,9 +16,8 @@ import { CurrencySelectorComponent } from './currency-selector.component';
     MatAutocompleteModule,
     MatFormFieldModule,
     MatInputModule,
-    MatProgressSpinnerModule,
     ReactiveFormsModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class GfCurrencyAutocompleteModule {}
+export class GfCurrencySelectorModule {}

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

@@ -19,6 +19,7 @@ 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 { AbstractMatFormField } from '@ghostfolio/ui/shared/abstract-mat-form-field';
 import { isString } from 'lodash';
 import { Subject, tap } from 'rxjs';
 import {
@@ -29,8 +30,6 @@ import {
   takeUntil
 } from 'rxjs/operators';
 
-import { AbstractMatFormField } from './abstract-mat-form-field';
-
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {