@ -4,12 +4,20 @@ 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 { Platform } from '@prisma/client' ;
import { Observable , Subject } from 'rxjs' ;
import { map , startWith } from 'rxjs/operators' ;
import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces' ;
@ -23,7 +31,8 @@ import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces';
export class CreateOrUpdateAccountDialog implements OnDestroy {
public accountForm : FormGroup ;
public currencies : string [ ] = [ ] ;
public platforms : { id : string ; name : string } [ ] ;
public filteredPlatforms : Observable < Platform [ ] > ;
public platforms : Platform [ ] ;
private unsubscribeSubject = new Subject < void > ( ) ;
@ -34,7 +43,7 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
private formBuilder : FormBuilder
) { }
ngOnInit() {
public ngOnInit() {
const { currencies , platforms } = this . dataService . fetchInfo ( ) ;
this . currencies = currencies ;
@ -47,8 +56,41 @@ 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 ( ( { id } ) = > {
return 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 autoCompleteCheck() {
const inputValue = this . accountForm . controls [ 'platformId' ] . value ;
if ( typeof inputValue === 'string' ) {
const matchingEntry = this . platforms . find ( ( { name } ) = > {
return name === inputValue ;
} ) ;
if ( matchingEntry ) {
this . accountForm . controls [ 'platformId' ] . setValue ( matchingEntry ) ;
}
}
}
public displayFn ( platform : Platform ) {
return platform ? . name ? ? '' ;
}
public onCancel() {
@ -63,7 +105,7 @@ 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 ? ? null
} ;
if ( this . data . account . id ) {
@ -79,4 +121,22 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
this . unsubscribeSubject . next ( ) ;
this . unsubscribeSubject . complete ( ) ;
}
private autocompleteObjectValidator ( ) : ValidatorFn {
return ( control : AbstractControl ) = > {
if ( control . value && typeof control . value === 'string' ) {
return { invalidAutocompleteObject : { value : control.value } } ;
}
return null ;
} ;
}
private filter ( value : string ) : Platform [ ] {
const filterValue = value . toLowerCase ( ) ;
return this . platforms . filter ( ( { name } ) = > {
return name . toLowerCase ( ) . startsWith ( filterValue ) ;
} ) ;
}
}