import { Component , Input , OnDestroy , OnInit } from '@angular/core' ; import { FileSaverService } from 'ngx-filesaver' ; import { NgbActiveModal , NgbModal } from '@ng-bootstrap/ng-bootstrap' ; import { ToastService } from '../../../toast/toast.service' ; import { GeneralModalComponent } from '../general-modal/general-modal.component' ; import { CollectionParameters } from '../../../../services/models/api-parameter' ; import { APIGetMultiResponse } from '../../../../services/models/api-response' ; import { takeUntil } from 'rxjs/operators' ; import { ReplaySubject } from 'rxjs' ; import { FileMetadata } from '../../../components/file-explorer/model/metadata' ; import { FileElement } from '../../../components/file-explorer/model/file-element' ; import { FileService } from '../../../components/file-explorer/service/file.service' ; @ Component ( { selector : 'cmdb-add-attachments-modal' , templateUrl : './add-attachments-modal.component.html' , styleUrls : [ './add-attachments-modal.component.scss' ] } ) export class AddAttachmentsModalComponent implements OnInit , OnDestroy { /**
     * Global unsubscriber for http calls to the rest backend.
     */ private unSubscribe : ReplaySubject < void > = new ReplaySubject ( ) ; @ Input ( ) metadata : FileMetadata = new FileMetadata ( ) ; public inProcess : boolean = false ; public attachments : FileElement [ ] = [ ] ; public recordsTotal : number = 0 ; private dataMaxSize : number = 1024 * 1024 * 50 ; private readonly defaultApiParameter : CollectionParameters = { page : 1 , limit : 100 , order : 1 } ; constructor ( private fileService , private fileSaverService , private modalService , public activeModal , private toast ) { } public ngOnInit ( ) { this . fileService . getAllFilesList ( this . metadata ) . subscribe ( ( data ) => { this . attachments . push ( ... data . results ) ; this . recordsTotal = data . total ; } ) ; } param apiParameters Instance of  CollectionParameters param onScroll public getFiles ( apiParameters ? , onScroll = false ) { this . fileService . getAllFilesList ( this . metadata , apiParameters ? apiParameters : this . defaultApiParameter ) . subscribe ( ( data ) => { if ( onScroll ) { this . attachments . push ( ... data . results ) ; } else { this . attachments = data . results ; } this . recordsTotal = data . total ; this . inProcess = false ; } ) ; } param files public uploadFile ( files ) { if ( files . length > 0 ) { Array . from ( files ) . forEach ( ( file ) => { if ( this . checkFileSizeAllow ( file ) ) { this . checkFileExist ( file . name ) . then ( exist => { if ( exist ) { const promiseModal = this . replaceFileModal ( file . name ) . then ( result => { if ( result ) { this . attachments . push ( ... this . attachments . filter ( el => el . filename !== file . name ) ) ; return true ; } else { return false ; } } ) ; promiseModal . then ( value => { if ( value ) { this . postFile ( file ) ; } } ) ; } else { this . postFile ( file ) ; } } ) ; } } ) ; } } param value private checkFileExist ( value ) { return new Promise ( ( resolve ) => { this . fileService . getFileElement ( value , this . metadata ) . pipe ( takeUntil ( this . unSubscribe ) ) . subscribe ( ( ) => resolve ( true ) , ( ) => resolve ( false ) ) ; } ) ; } param file return private checkFileSizeAllow ( file ) { const maxSize = this . dataMaxSize ; if ( file . size > maxSize ) { this . toast . error ( `File size is more then 50 M/Bytes.` ) ; return false ; } return true ; } param file private postFile ( file ) { file . inProcess = true ; this . inProcess = true ; this . attachments = [ file ] . concat ( this . attachments ) ; this . fileService . postFile ( file , this . metadata ) . subscribe ( ( ) => { this . getFiles ( this . defaultApiParameter ) ; } , ( err ) => console . log ( err ) ) ; } private replaceFileModal ( filename ) { const modalComponent = this . modalService . open ( GeneralModalComponent ) ; modalComponent . componentInstance . title = `Replace ${ filename }` ; modalComponent . componentInstance . modalIcon = 'question-circle' ; modalComponent . componentInstance . modalMessage = `${ filename } already exists. Do you want to replace it?` ; modalComponent . componentInstance . subModalMessage = `A file with the same name already exists on this Object.
                                                        Replace it will overwrite its current contents` ; modalComponent . componentInstance . buttonDeny = 'Cancel' ; modalComponent . componentInstance . buttonAccept = 'Replace' ; return modalComponent . result ; } public ngOnDestroy ( ) { this . unSubscribe . next ( ) ; this . unSubscribe . complete ( ) ; } }