/** Angular Imports */ import { Component , OnInit , AfterViewInit } from '@angular/core' ; import { FormGroup , FormBuilder , FormControl , Validators } from '@angular/forms' ; import { Router , ActivatedRoute } from '@angular/router' ; import { DatePipe } from '@angular/common' ; /** Custom Services */ import { GroupsService } from '../groups.service' ; import { ClientsService } from '../../clients/clients.service' ; import { SettingsService } from 'app/settings/settings.service' ; /**
 * Create Group component.
 */ @ Component ( { selector : 'mifosx-create-group' , templateUrl : './create-group.component.html' , styleUrls : [ './create-group.component.scss' ] } ) export class CreateGroupComponent implements OnInit , AfterViewInit { /** Minimum date allowed. */ minDate = new Date ( 2000 , 0 , 1 ) ; /** Maximum date allowed. */ maxDate = new Date ( ) ; /** Group form. */ groupForm : FormGroup ; /** Office data. */ officeData : any ; /** Client data. */ clientsData : any = [ ] ; /** Staff data. */ staffData : any ; /** Client Members. */ clientMembers : any [ ] = [ ] ; /** ClientChoice. */ clientChoice = new FormControl ( '' ) ; param { FormBuilder } formBuilder param { ActivatedRoute } route param { Router } router param { ClientsService } clientsService param { GroupsService } groupService param { DatePipe } datePipe param { SettingsService } settingsService constructor ( private formBuilder , private route , private router , private clientsService , private groupService , private datePipe , private settingsService ) { this . route . data . subscribe ( ( data ) => { this . officeData = data . offices ; } ) ; } /**
     * Creates and sets the group form.
     */ ngOnInit ( ) { this . createGroupForm ( ) ; } /**
     * Subscribes to Clients search filter:
     */ ngAfterViewInit ( ) { this . clientChoice . valueChanges . subscribe ( ( value ) => { if ( value . length >= 2 ) { this . clientsService . getFilteredClients ( 'displayName' , 'ASC' , true , value , this . groupForm . get ( 'officeId' ) . value ) . subscribe ( ( data ) => { this . clientsData = data . pageItems ; } ) ; } } ) ; } /**
     * Creates the group form.
     */ createGroupForm ( ) { this . groupForm = this . formBuilder . group ( { 'name' : [ '' , [ Validators . required , Validators . pattern ( '(^[A-z]).*' ) ] ] , 'officeId' : [ '' , Validators . required ] , 'submittedOnDate' : [ '' , Validators . required ] , 'staffId' : [ '' ] , 'externalId' : [ '' ] , 'active' : [ false ] , } ) ; this . buildDependencies ( ) ; } /**
     * Sets the staff and clients data each time the user selects a new office.
     * Adds form control Activation Date if active.
     */ buildDependencies ( ) { this . groupForm . get ( 'officeId' ) . valueChanges . subscribe ( ( option ) => { this . groupService . getStaff ( option ) . subscribe ( data => { this . staffData = data [ 'staffOptions' ] ; if ( this . staffData === undefined ) { this . groupForm . controls [ 'staffId' ] . disable ( ) ; } else { this . groupForm . controls [ 'staffId' ] . enable ( ) ; } } ) ; } ) ; this . groupForm . get ( 'active' ) . valueChanges . subscribe ( ( bool ) => { if ( bool ) { this . groupForm . addControl ( 'activationDate' , new FormControl ( '' , Validators . required ) ) ; } else { this . groupForm . removeControl ( 'activationDate' ) ; } } ) ; } /**
     * Add client.
     */ addClient ( ) { if ( ! this . clientMembers . includes ( this . clientChoice . value ) ) { this . clientMembers . push ( this . clientChoice . value ) ; } } param index removeClient ( index ) { this . clientMembers . splice ( index , 1 ) ; } param { any } client returns { string } displayClient ( client ) { return client ? client . displayName : undefined ; } /**
     * Submits the group form and creates group,
     * if successful redirects to groups.
     */ submit ( ) { const submittedOnDate = this . groupForm . value . submittedOnDate ; const activationDate = this . groupForm . value . activationDate ; const dateFormat = this . settingsService . dateFormat ; this . groupForm . patchValue ( { submittedOnDate : this . datePipe . transform ( submittedOnDate , dateFormat ) , activationDate : this . datePipe . transform ( activationDate , dateFormat ) } ) ; const group = this . groupForm . value ; group . locale = this . settingsService . language . code ; group . dateFormat = dateFormat ; group . clientMembers = [ ] ; this . clientMembers . forEach ( ( client ) => group . clientMembers . push ( client . id ) ) ; this . groupService . createGroup ( group ) . subscribe ( ( response ) => { this . router . navigate ( [ '../groups' ] ) ; } ) ; } }