import { Component , Input , Output , EventEmitter } from '@angular/core' ; import { FileElement } from './model/element' ; import { MatMenu , MatMenuTrigger } from '@angular/material/menu' ; import { Observable } from 'rxjs/Observable' ; import { MatDialog } from '@angular/material/dialog' ; import { NewFolderDialogComponent } from './modals/newFolderDialog/newFolderDialog.component' ; import { RenameDialogComponent } from './modals/renameDialog/renameDialog.component' ; @ Component ( { selector : 'file-explorer' , templateUrl : './file-explorer.component.html' , styleUrls : [ './file-explorer.component.css' ] } ) export class FileExplorerComponent { constructor ( public dialog ) { } @ Input ( ) fileElements : FileElement [ ] ; @ Input ( ) canNavigateUp : string ; @ Input ( ) path : string ; @ Output ( ) folderAdded = new EventEmitter < { name : string ; } > ( ) ; @ Output ( ) elementRemoved = new EventEmitter < FileElement > ( ) ; @ Output ( ) elementRenamed = new EventEmitter < FileElement > ( ) ; @ Output ( ) elementMoved = new EventEmitter < { element : FileElement ; moveTo : FileElement ; } > ( ) ; @ Output ( ) navigatedDown = new EventEmitter < FileElement > ( ) ; @ Output ( ) navigatedUp = new EventEmitter ( ) ; deleteElement ( element ) { this . elementRemoved . emit ( element ) ; } navigate ( element ) { if ( element . isFolder ) { this . navigatedDown . emit ( element ) ; } } navigateUp ( ) { this . navigatedUp . emit ( ) ; } moveElement ( element , moveTo ) { this . elementMoved . emit ( { element : element , moveTo : moveTo } ) ; } openNewFolderDialog ( ) { let dialogRef = this . dialog . open ( NewFolderDialogComponent ) ; dialogRef . afterClosed ( ) . subscribe ( res => { if ( res ) { this . folderAdded . emit ( { name : res } ) ; } } ) ; } openRenameDialog ( element ) { let dialogRef = this . dialog . open ( RenameDialogComponent ) ; dialogRef . afterClosed ( ) . subscribe ( res => { if ( res ) { element . name = res ; this . elementRenamed . emit ( element ) ; } } ) ; } openMenu ( event , viewChild ) { event . preventDefault ( ) ; viewChild . openMenu ( ) ; } }