import { Component , Input , SimpleChanges , Output , EventEmitter } from '@angular/core' ; import { IconService } from 'app/shared/icon.service' ; import { Icon } from 'app/shared/models/icon.model' ; import { Package } from 'app/shared/models/package.model' ; import { Observable } from 'rxjs/Observable' ; import { Alias } from 'app/shared/models/alias.model' ; @ Component ( { selector : 'mdi-icon-search' , templateUrl : './iconSearch.component.html' , styleUrls : [ './iconSearch.component.scss' ] , providers : [ IconService ] } ) export class IconSearchComponent { @ Input ( 'icon' ) icon : Icon ; @ Output ( 'iconChange' ) iconChange : EventEmitter < Icon > = new EventEmitter < Icon > ( ) ; @ Input ( 'icons' ) icons : Icon [ ] = null ; @ Input ( 'exclude' ) exclude : Icon [ ] = [ ] ; @ Input ( 'multiple' ) multiple : boolean = false ; @ Input ( 'package' ) package : Package ; @ Input ( 'disabled' ) disabled : boolean ; constructor ( private iconService ) { } s : Icon = null ; isDisabled : boolean = true ; search = ( text$ ) => text$ . debounceTime ( 200 ) . map ( term => term === '' ? [ ] : this . selectableIcons . filter ( v => { let ex = this . exclude . map ( i => i . id ) ; if ( ex . indexOf ( v . id ) != - 1 ) { return false ; } if ( v . name . indexOf ( term . toLowerCase ( ) ) > - 1 ) { return true ; } for ( let a of v . aliases ) { if ( a . name . indexOf ( term . toLowerCase ( ) ) > - 1 ) { return true ; } } return false ; } ) . sort ( ( a , b ) => { return a . name == term ? - 1 : 1 ; } ) . slice ( 0 , 10 ) ) ; formatter = ( x ) => { this . icon = x ; this . iconChange . emit ( this . icon ) ; return x . name ; } ; iconList : Icon [ ] = [ ] ; selectableIcons : Icon [ ] = [ ] ; async ngOnInit ( ) { if ( ! this . package ) { this . disabled = true ; return ; } this . iconList = await this . iconService . getAdminIcons ( this . package . id ) ; let ex = this . exclude . map ( i => i . id ) ; this . selectableIcons = this . iconList . filter ( i => { return ! ( ex . indexOf ( i . id ) > - 1 ) ; } ) ; if ( this . icon ) { this . icon = this . selectableIcons . find ( i => i . id === this . icon . id ) ; this . s = this . icon ; } this . isDisabled = false ; } async ngOnChanges ( changes ) { if ( changes . icon ) { if ( changes . icon . currentValue == null ) { this . s = null ; } } if ( changes . package ) { await this . ngOnInit ( ) ; } } } class SelectableIcon extends Icon { constructor ( icon ) { super ( icon . name , icon . data ) ; } public selected : boolean = false ; }