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 3babc14bc..788c96ac6 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 @@ -4,14 +4,24 @@ import { Inject, OnDestroy } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { + AbstractControl, + FormBuilder, + FormGroup, + ValidatorFn, + Validators +} from '@angular/forms'; 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 { Subject } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; +import { map, startWith } from 'rxjs/operators'; -import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces'; +import { + CreateOrUpdateAccountDialogParams, + Platform +} from './interfaces/interfaces'; @Component({ host: { class: 'h-100' }, @@ -23,7 +33,8 @@ import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces'; export class CreateOrUpdateAccountDialog implements OnDestroy { public accountForm: FormGroup; public currencies: string[] = []; - public platforms: { id: string; name: string }[]; + public platforms: Platform[]; + public filteredPlatforms: Observable; private unsubscribeSubject = new Subject(); @@ -47,8 +58,22 @@ export class CreateOrUpdateAccountDialog implements OnDestroy { currency: [this.data.account.currency, Validators.required], isExcluded: [this.data.account.isExcluded], name: [this.data.account.name, Validators.required], - platformId: [this.data.account.platformId] + platformId: [ + this.platforms.find( + (platform) => platform.id === this.data.account.platformId + ), + this._autocompleteObjectValidator() + ] }); + this.filteredPlatforms = this.accountForm + .get('platformId') + .valueChanges.pipe( + startWith(''), + map((value) => { + const name = typeof value === 'string' ? value : value?.name; + return name ? this._filter(name as string) : this.platforms.slice(); + }) + ); } public onCancel() { @@ -63,9 +88,8 @@ export class CreateOrUpdateAccountDialog implements OnDestroy { id: this.accountForm.controls['accountId'].value, isExcluded: this.accountForm.controls['isExcluded'].value, name: this.accountForm.controls['name'].value, - platformId: this.accountForm.controls['platformId'].value + platformId: this.accountForm.controls['platformId'].value.id }; - if (this.data.account.id) { (account as UpdateAccountDto).id = this.data.account.id; } else { @@ -79,4 +103,33 @@ export class CreateOrUpdateAccountDialog implements OnDestroy { this.unsubscribeSubject.next(); this.unsubscribeSubject.complete(); } + + public autoCompleteCheck() { + const inputValue = this.accountForm.controls['platformId'].value; + const matchingEntry = this.platforms.find( + (platform) => platform.name === inputValue + ); + this.accountForm.controls['platformId'].setValue(matchingEntry); + } + + displayFn(platform: Platform) { + return platform && platform.name ? platform.name : ''; + } + + private _filter(value: string): Platform[] { + const filterValue = value.toLowerCase(); + + return this.platforms.filter((platformEntry) => + platformEntry.name.toLowerCase().includes(filterValue) + ); + } + + private _autocompleteObjectValidator(): ValidatorFn { + return (control: AbstractControl): { [key: string]: any } | null => { + if (typeof control.value === 'string') { + return { invalidAutocompleteObject: { value: control.value } }; + } + return null; + }; + } } diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html index 2d068dde1..5774faa6b 100644 --- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html +++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html @@ -42,12 +42,23 @@
Platform - - - {{ platform.name }} + + - + {{platformEntry.name}} + +
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 528835f9a..b5c3984a1 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 @@ -7,6 +7,7 @@ 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 { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.component'; @@ -21,6 +22,7 @@ import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.c MatFormFieldModule, MatInputModule, MatSelectModule, + MatAutocompleteModule, ReactiveFormsModule ] }) diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/interfaces/interfaces.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/interfaces/interfaces.ts index ffe4f14f6..6252fcfd5 100644 --- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/interfaces/interfaces.ts +++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/interfaces/interfaces.ts @@ -3,3 +3,8 @@ import { Account } from '@prisma/client'; export interface CreateOrUpdateAccountDialogParams { account: Account; } + +export interface Platform { + id: string; + name: string; +}