import { Component , EventEmitter , OnDestroy , OnInit , Output } from '@angular/core' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; import { ImportService } from '../../import.service' ; import { Subscription } from 'rxjs' ; @ Component ( { selector : 'cmdb-select-file' , templateUrl : './select-file.component.html' , styleUrls : [ './select-file.component.scss' ] } ) export class SelectFileComponent implements OnInit , OnDestroy { private defaultFileFormat : string = '' ; public fileForm : FormGroup ; public fileName : string = 'Choose file' ; public selectedFileFormat : string = `.${ this . defaultFileFormat }` ; public importerTypes : any [ ] = [ ] ; private importerDefinitionSubscription : Subscription ; private fileFormatChangeSubscription : Subscription ; private fileChangeSubscription : Subscription ; @ Output ( ) public formatChange : EventEmitter < string > ; @ Output ( ) public fileChange : EventEmitter < File > ; public constructor ( private importService ) { this . formatChange = new EventEmitter < string > ( ) ; this . fileChange = new EventEmitter < File > ( ) ; this . importerDefinitionSubscription = new Subscription ( ) ; this . fileFormatChangeSubscription = new Subscription ( ) ; this . fileChangeSubscription = new Subscription ( ) ; this . fileForm = new FormGroup ( { fileFormat : new FormControl ( this . defaultFileFormat , Validators . required ) , file : new FormControl ( null , Validators . required ) , } ) ; } public ngOnInit ( ) { this . importerDefinitionSubscription = this . importService . getObjectImporters ( ) . subscribe ( importers => { this . importerTypes = importers ; } ) ; this . fileFormatChangeSubscription = this . fileFormat . valueChanges . subscribe ( ( format ) => { this . formatChange . emit ( format ) ; this . selectedFileFormat = `.${ format }` ; } ) ; this . fileChangeSubscription = this . file . valueChanges . subscribe ( ( file ) => { this . fileChange . emit ( file ) ; } ) ; } public ngOnDestroy ( ) { this . importerDefinitionSubscription . unsubscribe ( ) ; this . fileFormatChangeSubscription . unsubscribe ( ) ; this . fileChangeSubscription . unsubscribe ( ) ; } public get fileFormat ( ) { return this . fileForm . get ( 'fileFormat' ) ; } public get file ( ) { return this . fileForm . get ( 'file' ) ; } public selectFile ( files ) { if ( files . length > 0 ) { const file = files [ 0 ] ; this . fileForm . get ( 'file' ) . setValue ( file ) ; this . fileName = file . name ; } } }