diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts index b47780ce4..9e153d173 100644 --- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts +++ b/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' }, diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts index 0022b5659..2ccf56751 100644 --- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts +++ b/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 ] }) diff --git a/libs/ui/src/lib/currency-selector/currency-selector.component.ts b/libs/ui/src/lib/currency-selector/currency-selector.component.ts index e9cdcbc5d..c38b44c20 100644 --- a/libs/ui/src/lib/currency-selector/currency-selector.component.ts +++ b/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 @@ -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) => { - this.filteredCurrencies = val; + .subscribe((values) => { + 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 diff --git a/libs/ui/src/lib/currency-selector/currency-selector.module.ts b/libs/ui/src/lib/currency-selector/currency-selector.module.ts index 20de0ad15..ac4d12096 100644 --- a/libs/ui/src/lib/currency-selector/currency-selector.module.ts +++ b/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 {} diff --git a/libs/ui/src/lib/symbol-autocomplete/abstract-mat-form-field.ts b/libs/ui/src/lib/shared/abstract-mat-form-field.ts similarity index 100% rename from libs/ui/src/lib/symbol-autocomplete/abstract-mat-form-field.ts rename to libs/ui/src/lib/shared/abstract-mat-form-field.ts 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 654a634ff..26b8cf59b 100644 --- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts +++ b/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: {