import { Component , EventEmitter , Input , OnChanges , OnDestroy , OnInit , Output , SimpleChanges } from '@angular/core' ; import { User } from '../../../models/user' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; import { Group } from '../../../models/group' ; import { takeUntil } from 'rxjs/operators' ; import { ReplaySubject } from 'rxjs' ; import { Right } from '../../../models/right' ; @ Component ( { selector : 'cmdb-user-form' , templateUrl : './user-form.component.html' , styleUrls : [ './user-form.component.scss' ] } ) export class UserFormComponent implements OnInit , OnChanges , OnDestroy { /**
     * Component un-subscriber.
     */ private subscriber : ReplaySubject < void > = new ReplaySubject < void > ( ) ; /**
     * Input if user data exists.
     */ @ Input ( ) public user : User ; /**
     * List of possible groups.
     */ @ Input ( ) public groups : Array < Group > = [ ] ; /**
     * List of possible auth providers.
     */ @ Input ( ) public providers : Array < any > = [ ] ; /**
     * User NgForm.
     */ public form : FormGroup ; /**
     * Output if submit was triggered.
     */ @ Output ( ) public submit : EventEmitter < User > = new EventEmitter < User > ( ) ; /**
     * Output if validation status was changed.
     */ @ Output ( ) public validation : EventEmitter < boolean > = new EventEmitter < boolean > ( ) ; @ Input ( ) cancel : boolean = true ; public preview : any = undefined ; constructor ( ) { this . form = new FormGroup ( { user_name : new FormControl ( '' , [ Validators . required ] ) , email : new FormControl ( '' , [ Validators . email ] ) , password : new FormControl ( '' , [ Validators . required ] ) , first_name : new FormControl ( null ) , last_name : new FormControl ( null ) , authenticator : new FormControl ( 'LocalAuthenticationProvider' , Validators . required ) , group_id : new FormControl ( 2 , Validators . required ) , image : new FormControl ( null ) } ) ; } public ngOnInit ( ) { this . form . statusChanges . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( status => { this . validation . emit ( status ) ; } ) ; } public get usernameControl ( ) : FormControl { return this . form . get ( 'user_name' ) as FormControl ; } public get emailControl ( ) : FormControl { return this . form . get ( 'email' ) as FormControl ; } public get passwordControl ( ) : FormControl { return this . form . get ( 'password' ) as FormControl ; } public get firstNameControl ( ) { return this . form . get ( 'first_name' ) as FormControl ; } public get lastNameControl ( ) { return this . form . get ( 'last_name' ) as FormControl ; } public get authenticatorControl ( ) { return this . form . get ( 'authenticator' ) as FormControl ; } public get groupControl ( ) { return this . form . get ( 'group_id' ) as FormControl ; } public get imageControl ( ) { return this . form . get ( 'image' ) as FormControl ; } public previewImage ( event ) { if ( event . target . files && event . target . files [ 0 ] ) { const reader = new FileReader ( ) ; reader . onload = ( eve ) => { this . preview = ( eve . target as FileReader ) . result ; this . imageControl . setValue ( this . preview ) ; } ; reader . readAsDataURL ( event . target . files [ 0 ] ) ; } } public removeImage ( ) { this . imageControl . setValue ( null ) ; this . preview = null ; } public onSubmit ( ) { this . form . markAllAsTouched ( ) ; if ( this . form . valid ) { this . submit . emit ( this . form . value as User ) ; } } param changes public ngOnChanges ( changes ) { if ( changes . user && changes . user . currentValue !== changes . user . previousValue ) { this . form . patchValue ( this . user ) ; this . preview = this . user . image ; this . form . markAllAsTouched ( ) ; } } /**
     * Auto un-subscribe by component destroy.
     */ public ngOnDestroy ( ) { this . subscriber . next ( ) ; this . subscriber . complete ( ) ; } }