import { Component , Input , AfterViewInit } from '@angular/core' ; import { FormBuilder , Validators } from '@angular/forms' ; import { NgxTreeService } from '../ngx-tree-dnd.service' ; import { TreeModel , TreeConfig , TreeItemOptions } from '../models/tree-view.model' ; @ Component ( { selector : 'lib-ngx-tree-children' , templateUrl : './ngx-tree-dnd-children.component.html' } ) export class NgxTreeChildrenComponent implements AfterViewInit { showError : boolean ; config : TreeConfig ; element : TreeModel ; dragable : boolean ; itemOptions : TreeItemOptions ; childrensArray : TreeModel [ ] ; renameForm ; @ Input ( ) set setItem ( data ) { this . element = data ; this . itemOptions = { href : '#' , hidden : false , hideChildrens : false , position : this . treeService . getItemPosition ( this . element ) , draggable : true , edit : false , showActionButtons : true , currentlyDragging : false , destenationTop : false , destenationBottom : false , disabled : false , showExpandButton : true , showDeleteButton : true } ; if ( this . element . options ) { this . setOptions ( this . element . options ) ; this . element . options = this . itemOptions ; } else { this . element . options = this . itemOptions ; } this . enableSubscribers ( ) ; this . createForm ( ) ; } constructor ( private treeService , private fb ) { } enableSubscribers ( ) { this . treeService . config . subscribe ( ( config ) => { if ( config !== null ) { this . config = config ; } else { this . config = this . treeService . defaulConfig ; } if ( this . element . options . draggable ) { this . element . options . draggable = this . config . enableDragging ; } } ) ; } setOptions ( options ) { for ( const key of Object . keys ( options ) ) { this . setValue ( key , options ) ; } } setValue ( item , options ) { this . itemOptions [ item ] = options [ item ] ; } createForm ( ) { this . renameForm = this . fb . group ( { name : [ this . element . name || '' , [ Validators . required , Validators . minLength ( this . config . minCharacterLength ) ] ] , } ) ; } enableRenameMode ( element ) { element . options . edit = true ; this . treeService . startRenameItem ( element ) ; } submitAdd ( name , item ) { const d = `${ new Date ( ) . getFullYear ( ) }${ new Date ( ) . getDay ( ) }${ new Date ( ) . getTime ( ) }` ; const elemId = parseInt ( d , null ) ; this . treeService . addNewItem ( elemId , name , item ) ; this . element . options . hideChildrens = false ; } submitRename ( item ) { if ( this . renameForm . valid ) { this . showError = false ; this . treeService . finishRenameItem ( this . renameForm . value . name , item . id ) ; this . element . options . edit = false ; } else { this . showError = true ; } } onSubmitDelete ( item ) { if ( ! this . element . options . edit ) { this . treeService . deleteItem ( item . id ) ; } else { if ( item . name === null ) { this . treeService . deleteItem ( item . id ) ; } else { this . element . options . edit = false ; } } } ngAfterViewInit ( ) { } }