import { Component , OnDestroy , OnInit } from '@angular/core' ; import { ConfigEditBaseComponent } from '../config.edit' ; import { CmdbType , CmdbTypeSection } from '../../../../models/cmdb-type' ; import { CollectionParameters } from '../../../../../services/models/api-parameter' ; import { TypeService } from '../../../../services/type.service' ; import { takeUntil } from 'rxjs/operators' ; import { APIGetMultiResponse } from '../../../../../services/models/api-response' ; import { ReplaySubject } from 'rxjs' ; import { CmdbMode } from '../../../../modes.enum' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; import { ToastService } from "../../../../../layout/toast/toast.service" ; @ Component ( { selector : 'cmdb-section-ref-field-edit' , templateUrl : './section-ref-field-edit.component.html' } ) export class SectionRefFieldEditComponent extends ConfigEditBaseComponent implements OnInit , OnDestroy { protected protected subscriber : ReplaySubject < void > = new ReplaySubject < void > ( ) ; /**
     * Name form control.
     */ public nameControl : FormControl = new FormControl ( '' , Validators . required ) ; /**
     * Label form control.
     */ public labelControl : FormControl = new FormControl ( '' , Validators . required ) ; /**
     * Type form control.
     */ public typeControl : FormControl = new FormControl ( undefined , Validators . required ) ; /**
     * Type form control.
     */ public sectionNameControl : FormControl = new FormControl ( undefined , Validators . required ) ; /**
     * Type form control.
     */ public selectedFieldsControl : FormControl = new FormControl ( [ ] , Validators . required ) ; /**
     * Reference form control.
     */ public referenceGroup : FormGroup = new FormGroup ( { type_id : this . typeControl , section_name : this . sectionNameControl , selected_fields : this . selectedFieldsControl } ) ; /**
     * Sections from the selected type.
     */ public typeSections : Array < CmdbTypeSection > = [ ] ; /**
     * Selected section
     */ public selectedSection : CmdbTypeSection ; /**
     * Types load right now?
     */ public loading : boolean = false ; /**
     * Total number of types.
     */ public totalTypes : number = 0 ; /**
     * Current loading page
     */ public currentPage : number = 1 ; private private maxPage : number = 1 ; /**
     * Type switch active.
     */ public selectDisabled : boolean = false ; constructor ( private typeService , private toast ) { super ( ) ; } param page private static getApiParameters ( page = 1 ) { return { filter : undefined , limit : 10 , sort : 'public_id' , order : 1 , page } as CollectionParameters ; } public ngOnInit ( ) { this . form . addControl ( 'name' , this . nameControl ) ; this . form . addControl ( 'label' , this . labelControl ) ; this . form . addControl ( 'reference' , this . referenceGroup ) ; if ( this . mode === CmdbMode . Edit ) { if ( this . data ?. reference ?. type_id ) { this . loadPresetType ( this . data . reference . type_id ) ; } } this . disableControlOnEdit ( this . nameControl ) ; this . patchData ( this . data , this . form ) ; this . triggerAPICall ( ) ; } private loadPresetType ( publicID ) { this . loading = true ; this . typeService . getType ( publicID ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( apiResponse ) => { this . typeSections = apiResponse . render_meta . sections ; this . selectedSection = this . typeSections . find ( s => s . name === this . data . reference . section_name ) ; } , error => this . toast . error ( error . error . message , { headerName : 'Field error: ' + this . nameControl . value } ) ) . add ( ( ) => this . loading = false ) ; } public triggerAPICall ( ) { if ( this . maxPage && ( this . currentPage <= this . maxPage ) ) { this . loadTypesFromApi ( ) ; this . currentPage += 1 ; } } private loadTypesFromApi ( ) { this . loading = true ; this . typeService . getTypes ( SectionRefFieldEditComponent . getApiParameters ( this . currentPage ) ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( apiResponse ) => { this . types = [ ... this . types , ... apiResponse . results as Array < CmdbType > ] ; this . totalTypes = apiResponse . total ; this . maxPage = apiResponse . pager . total_pages ; } ) . add ( ( ) => this . loading = false ) ; } param publicID public onTypeChange ( publicID ) { if ( publicID ) { this . data . reference . type_id = publicID ; this . typeSections = this . getSectionsFromType ( publicID ) ; } else { this . data . reference . type_id = undefined ; this . typeSections = [ ] ; } this . unsetReferenceSubData ( ) ; } private unsetReferenceSubData ( ) { this . data . reference . section_name = undefined ; this . sectionNameControl . setValue ( undefined ) ; this . data . reference . selected_fields = undefined ; this . selectedFieldsControl . setValue ( undefined ) ; this . selectedSection = undefined ; } param typeID public getSectionsFromType ( typeID ) { return this . types . find ( t => t . public_id === typeID ) . render_meta . sections ; } param section public onSectionChange ( section ) { if ( ! section ) { this . data . reference . section_name = undefined ; } else { this . data . reference . section_name = section . name ; } this . selectedSection = section ; this . data . reference . selected_fields = undefined ; } public onSectionFieldsChange ( fields ) { this . data . reference . selected_fields = fields ; } param change param idx public onLabelChange ( change , idx ) { this . data [ idx ] = change ; const field = this . fields . find ( x => x . name === `${ this . data . name }-field` ) ; const fieldIdx = this . data . fields . indexOf ( field ) ; if ( fieldIdx > - 1 ) { this . data . fields [ fieldIdx ] . label = change ; } } param name public onNameChange ( name ) { const oldName = this . data . name ; const fieldIdx = this . data . fields . indexOf ( `${ oldName }-field` ) ; const field = this . fields . find ( x => x . name === `${ oldName }-field` ) ; this . data . fields [ fieldIdx ] = `${ name }-field` ; field . name = `${ name }-field` ; } /**
     * Destroy component.
     */ public ngOnDestroy ( ) { this . subscriber . next ( ) ; this . subscriber . complete ( ) ; } }