import { Component , OnDestroy , OnInit } from '@angular/core' ; import { FormBuilder , FormGroup , Validators } from '@angular/forms' ; import { ActivatedRoute , Router } from '@angular/router' ; import { CustomValidators } from 'ng2-validation' ; import { StaffService } from '../model/staff.service' ; import { User } from '../model/user' ; import { UserDataService } from '../model/user-data.service' ; import forIn from 'lodash-es/forIn' ; import moment from 'moment' ; import { environment } from '../../environments/environment' ; @ Component ( { templateUrl : './user-form.component.html' } ) export class UserFormComponent implements OnInit , OnDestroy { mode : string = '' ; id : number = 0 ; parameters : any = { } ; user : User = new User ( ) ; errorMessage : string = '' ; form : FormGroup ; formErrors : any ; submitted : boolean = false ; statusTypes : any = { } ; constructor ( private userDataService , private staffService , private router , private activatedRoute , private formBuilder ) { this . form = formBuilder . group ( { username : [ '' , Validators . compose ( [ Validators . required , CustomValidators . rangeLength ( [ 3 , 15 ] ) , Validators . pattern ( '^[A-Za-z0-9_-]{3,15}$' ) ] ) ] , email : [ '' , Validators . compose ( [ Validators . required , CustomValidators . email ] ) ] , password : [ '' , Validators . compose ( [ Validators . minLength ( 6 ) ] ) ] , confirmed_at : [ '' , Validators . compose ( [ ] ) ] , blocked_at : [ '' , Validators . compose ( [ ] ) ] , status : [ '' , Validators . compose ( [ Validators . required ] ) ] } , { validator : validateDateTime ( [ 'confirmed_at' , 'blocked_at' ] ) } ) ; this . statusTypes = UserDataService . getStatusTypes ( ) ; this . form . valueChanges . subscribe ( data => this . onValueChanged ( data ) ) ; } setFormErrors ( errorFields ) { for ( const key in errorFields ) { if ( ! errorFields . hasOwnProperty ( key ) ) { continue ; } this . formErrors [ key ] . valid = false ; this . formErrors [ key ] . message = errorFields [ key ] ; } } setFormField ( field , value ) { this . form . controls [ field ] . setValue ( value ) ; } resetFormErrors ( ) { this . formErrors = { username : { valid : true , message : '' } , email : { valid : true , message : '' } , password : { valid : true , message : '' } , confirmed_at : { valid : true , message : '' } , blocked_at : { valid : true , message : '' } , role : { valid : true , message : '' } , status : { valid : true , message : '' } } ; } isValid ( field ) { let isValid = false ; if ( this . form . controls [ field ] . touched === false ) { isValid = true ; } else if ( this . form . controls [ field ] . touched === true && this . form . controls [ field ] . valid === true ) { isValid = true ; } return isValid ; } onValueChanged ( _data ? ) { if ( ! this . form ) { return ; } const form = this . form ; for ( const field of Object . keys ( this . formErrors ) ) { const control = form . get ( field ) ; if ( control && control . dirty ) { this . formErrors [ field ] . valid = true ; this . formErrors [ field ] . message = '' ; } } } resetUser ( ) { this . user = new User ( ) ; this . user . username = '' ; this . user . email = '' ; this . user . password = '' ; this . user . confirmed_at = '' ; this . user . blocked_at = '' ; this . user . status = 10 ; this . setUserToForm ( ) ; } ngOnInit ( ) { this . resetFormErrors ( ) ; this . resetUser ( ) ; this . parameters = this . activatedRoute . params . subscribe ( params => { if ( typeof params [ 'id' ] !== 'undefined' ) { this . id = Number . parseInt ( params [ 'id' ] , 10 ) ; this . errorMessage = '' ; this . userDataService . getUserById ( this . id ) . subscribe ( user => { this . user = user ; this . setUserToForm ( ) ; this . mode = 'update' ; } , error => { if ( error . status === 401 || error . status === 403 ) { this . staffService . unauthorizedAccess ( error ) ; } else { this . errorMessage = error . data . message ; } } ) ; } else { this . mode = 'create' ; } } ) ; } ngOnDestroy ( ) { this . parameters . unsubscribe ( ) ; this . user = new User ( ) ; } onSubmit ( ) { this . submitted = true ; this . resetFormErrors ( ) ; this . setFormToUser ( ) ; if ( this . mode === 'create' ) { this . userDataService . addUser ( this . user ) . subscribe ( result => { if ( result . success ) { this . router . navigate ( [ '/user' ] ) ; } else { this . submitted = false ; } } , error => { this . submitted = false ; if ( error . status === 422 ) { this . setFormErrors ( JSON . parse ( error . data . message ) ) ; } else if ( error . status === 401 || error . status === 403 ) { this . staffService . unauthorizedAccess ( error ) ; } else { this . errorMessage = error . data . message ; } } ) ; } else if ( this . mode === 'update' ) { this . userDataService . updateUserById ( this . user ) . subscribe ( result => { if ( result . success ) { this . router . navigate ( [ '/user' ] ) ; } else { this . submitted = false ; } } , error => { this . submitted = false ; if ( error . status === 422 ) { this . setFormErrors ( JSON . parse ( error . data . message ) ) ; } else if ( error . status === 401 || error . status === 403 ) { this . staffService . unauthorizedAccess ( error ) ; } else { this . errorMessage = error . data . message ; } } ) ; } } private setUserToForm ( ) { forIn ( this . user , ( value , key ) => { if ( typeof this . form . controls [ key ] !== 'undefined' ) { if ( key === 'confirmed_at' || key === 'blocked_at' ) { if ( value === null || value === '' ) { this . form . controls [ key ] . setValue ( '' ) ; } else if ( moment . isMoment ( value ) ) { this . form . controls [ key ] . setValue ( value . format ( environment . customDateTimeFormat . apiFormat ) ) ; } else if ( moment . unix ( value ) . isValid ( ) ) { this . form . controls [ key ] . setValue ( new Date ( moment . unix ( value ) . format ( 'YYYY-MM-DD HH:mm:ss' ) ) ) ; } else { this . form . controls [ key ] . setValue ( '' ) ; } } else { this . form . controls [ key ] . setValue ( value ) ; } } } ) ; } private setFormToUser ( ) { forIn ( this . form . getRawValue ( ) , ( value , key ) => { if ( this . user . hasOwnProperty ( key ) ) { if ( key === 'confirmed_at' || key === 'blocked_at' ) { if ( moment . isMoment ( value ) ) { this . user [ key ] = String ( value . unix ( ) ) ; } else if ( moment ( value ) . isValid ( ) ) { this . user [ key ] = String ( moment ( value ) . unix ( ) ) ; } else { this . user [ key ] = '' ; } } else { ( this . user as any ) [ key ] = value ; } } } ) ; } } function validateDateTime ( fieldKeys ) { return ( group ) => { for ( const fieldKey of fieldKeys ) { const field = group . controls [ fieldKey ] ; if ( typeof field !== 'undefined' && field . value !== '' && field . value !== null ) { if ( moment ( field . value , environment . customDateTimeFormat . parseInput , false ) . isValid ( ) === false ) { return field . setErrors ( { validateDateTime : true } ) ; } } } } ; }