import { Component , Input , OnDestroy , OnInit } from '@angular/core' ; import { CmdbMode } from '../../../framework/modes.enum' ; import { FormArray , FormBuilder , FormControl , FormGroup , Validators } from '@angular/forms' ; import { ExternalSystemService } from '../../../settings/services/external-system.service' ; import { DndDropEvent , DropEffect } from 'ngx-drag-drop' ; import { ExportdJobBaseStepComponent } from '../exportd-job-base-step.component' ; import { ReplaySubject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; @ Component ( { selector : 'cmdb-task-destinations-step' , templateUrl : './exportd-job-destinations-step.component.html' , styleUrls : [ './exportd-job-destinations-step.component.scss' ] } ) export class ExportdJobDestinationsStepComponent extends ExportdJobBaseStepComponent implements OnInit , OnDestroy { private subscriber : ReplaySubject < void > = new ReplaySubject < void > ( ) ; @ Input ( ) set preData ( data ) { if ( data !== undefined ) { if ( data . destination ) { this . destinationForm = this . formBuilder . group ( { destination : new FormArray ( [ ] ) } ) ; this . destinationForm . removeControl ( 'destination' ) ; const forArray = this . formBuilder . array ( [ ] ) ; for ( const source of data . destination ) { forArray . push ( this . formBuilder . group ( { className : new FormControl ( '' , Validators . required ) , parameter : this . formBuilder . array ( [ ] ) } ) ) ; } this . destinationForm . addControl ( 'destination' , forArray ) ; this . destinationForm . patchValue ( data ) ; let i = 0 ; while ( i < forArray . controls . length ) { for ( let c = 0 ; c < data . destination [ i ] . parameter . length ; c ++ ) { const control = forArray . controls [ i ] . get ( 'parameter' ) as FormArray ; let required = false ; let description = '' ; const classname = forArray . controls [ i ] . get ( 'className' ) . value ; if ( classname !== '' && classname !== undefined ) { this . externalService . getExternSystemParams ( classname ) . subscribe ( params => { required = params [ c ] . required ; description = params [ c ] . description ; control . push ( this . createParameters ( '' , '' , description , required ) ) ; this . destinationForm . addControl ( 'destination' , forArray ) ; this . destinationForm . patchValue ( data ) ; } ) ; } } i ++ ; } this . destinationForm . addControl ( 'destination' , forArray ) ; this . destinationForm . patchValue ( data ) ; } } } @ Input ( ) public mode : CmdbMode ; public externalSystemList : any [ ] = [ ] ; public externalSystems : any [ ] = [ ] ; public destinationForm : FormGroup ; readonly DESTINATION = 'destination' ; constructor ( private formBuilder , private externalService ) { super ( ) ; } public ngOnInit ( ) { this . destinationForm = this . formBuilder . group ( { destination : this . formBuilder . array ( [ this . createDestination ( ) ] ) } ) ; this . externalService . getExternSystemList ( ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( data => { this . externalSystemList = data ; } , error => { } , ( ) => { for ( const className of this . externalSystemList ) { this . externalService . getExternSystemParams ( className ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( params => { this . externalSystems . push ( { name : className , parameter : params } ) ; } ) ; } } ) ; } public ngOnDestroy ( ) { this . subscriber . next ( ) ; this . subscriber . complete ( ) ; } private createDestination ( ) { return this . formBuilder . group ( { className : new FormControl ( '' , Validators . required ) , parameter : this . formBuilder . array ( [ this . createParameters ( ) ] ) } ) ; } private createParameters ( name = '' , value = '' , description = '' , required = false ) { return this . formBuilder . group ( { name : new FormControl ( name , Validators . required ) , value : new FormControl ( value , Validators . required ) , required : new FormControl ( required , Validators . required ) , description : new FormControl ( description , Validators . required ) } ) ; } private getDestinationAsFormArray ( ) { return this . destinationForm . controls [ this . DESTINATION ] as FormArray ; } public addDestination ( ) { const control = this . getDestinationAsFormArray ( ) ; control . push ( this . createDestination ( ) ) ; } public addParameters ( event ) { const control = this . getDestinationAsFormArray ( ) . at ( event ) . get ( 'parameter' ) as FormArray ; control . push ( this . createParameters ( ) ) ; } public delDestination ( index ) { const control = this . getDestinationAsFormArray ( ) ; control . removeAt ( index ) ; } public delParameter ( index , event ) { const control = this . getDestinationAsFormArray ( ) . at ( event ) . get ( 'parameter' ) as FormArray ; control . removeAt ( index ) ; } public onDraggedParameter ( item , control , effect ) { control . get ( 'name' ) . setValue ( item . data . name ) ; control . get ( 'description' ) . setValue ( item . data . description ) ; control . get ( 'required' ) . setValue ( item . data . required ) ; control . get ( 'value' ) . setValue ( item . data . default ) ; } public onDraggedSystem ( item , control , index , effect ) { control . get ( 'className' ) . setValue ( item . data . name ) ; let externalSystemParams = [ ] ; this . externalService . getExternSystemParams ( item . data . name ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( params => { externalSystemParams = params as [ ] ; } , error => console . log ( error ) , ( ) => { const controlArray = this . getDestinationAsFormArray ( ) . at ( index ) . get ( 'parameter' ) as FormArray ; controlArray . clear ( ) ; for ( const param of externalSystemParams ) { controlArray . push ( this . createParameters ( param . name , param . default , param . description , param . required ) ) ; } } ) ; } }