D-Net

import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core';

import {Value} from '../searchPages/searchUtils/searchHelperClasses.class';

import {ISVocabulariesService} from '../services/ISVocabularies.service';

import {RefineFieldResultsService} from '../services/refineFieldResults.service';

//Usage example

//<static-autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></static-autocomplete>

@Component({

    selector: 'static-autocomplete',

    styleUrls:  ['autoComplete.component.css'],

    host: {

       '(document:click)': 'handleClick($event)',

   },

    template: `

        <div class="custom-autocomplete">

           <div *ngIf = "showSelected && selectedValue != ''">

            <div class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >

              <span >{{showItem(item)}} </span>

              <span (click)="remove(item)" aria-hidden="true" title="Remove selection" class=" remove glyphicon glyphicon-remove"></span>

            </div>

          </div>

          <input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control  " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter()   >

          <div class="suggestions" *ngIf="filtered.length > 0">

                <ul class="list-group" >

                    <li  class="list-group-item"  >

                        Select:

                    </li>

                    <li  class="list-group-item"   *ngFor=" let item of filtered">

                        <a (click)="select(item)">{{showItem(item)}}</a>

                    </li>

                </ul>

          </div>

          <div class="messages">

            <div *ngIf="showLoading" class="alert alert-info row-fluid " role="alert">Loading...  <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></div>

            <div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{warningMessage}}</div>

            <div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>No results found</div>

          </div>

      </div>

        `

})

export class StaticAutoCompleteComponent {

    @Input() placeHolderMessage = "Search for entries";

    @Input() title = "Autocomplete";

    @Output() addItem = new EventEmitter(); // when selected list  changes update parent component

    @Output() selectedValueChanged = new EventEmitter(); // when changed  a method for filtering will be called

    @Output() listUpdated = new EventEmitter(); // when changed  a method for filtering will be called

    @Input() public list = []; // the entries resulted after filtering function

    @Input() public filtered = []; // the entries resulted after filtering function

    @Input() public selected = []; // the entries selected from user

    @Input() public keywordlimit = 3; // the minimum length of keyword

    @Input() public showSelected = true; // the minimum length of keyword

    @Input() public multipleSelections:boolean = true;

    @Input() public allowDuplicates:boolean = false;

    @Input() public selectedValue:string = '';

    @Input() public vocabularyId:string ;

    @Input() public fieldName:string ;

    @Input() public entityName:string ;

    @Input() public keyword = '';

    @Input() public type = 'search' //search, result, context, project

    public warningMessage = "";

    public infoMessage = "";

    public showLoading:boolean = false;

    public tries = 0;

    public showInput = true;

    public sub;

    public done = false;

    constructor ( private _vocabulariesService: ISVocabulariesService,private _refineService: RefineFieldResultsService, private myElement: ElementRef) {

    }

    ngOnDestroy(){

      if(this.sub && this.sub != undefined){

        this.sub.unsubscribe();

      }

    }

    ngOnInit () {

      if(this.list == undefined || this.list.length == 0){

        this.showLoading = true;

       if(this.vocabularyId){

        this.list = this._vocabulariesService.getVocabularyByType(this.vocabularyId, this.entityName);

        this.afterListFetchedActions();

      }else if(this.fieldName && this.entityName){

        this.list = this._refineService.getRefineFieldResultsByFieldName(this.fieldName,this.entityName);

        this.sub = this._refineService.getRefineFieldResultsByFieldName(this.fieldName,this.entityName).subscribe(

            data => {

                this.list  = data;

                this.afterListFetchedActions();

            },

            err => {

                console.error(err);

                this.warningMessage = "An Error occured..."

            }

        );

      }else{

        this.showLoading = false;

      }

    }else{

      this.afterListFetchedActions();

    }

    }

    public updateList(list){ // used in claim context autocomplete

      this.list = list;

      this.afterListFetchedActions()

    }

    private afterListFetchedActions(){

      this.showLoading = false;

      this.getSelectedNameFromGivenId();

      this.listUpdated.emit({

          value: this.list

      });

      if(this.list == null || this.list.length == 0 ){

        this.warningMessage = "There are no results";

        return;

      }

      this.done = true;

      if(this.keyword != ""){

        this.filter();

      }

    }

    filter() {

      if(this.done){

        this.infoMessage = "";

        this.filtered = [];

        if(this.keyword == ""){

          var cut = 5;

          if(this.list.length < 5){

            cut = this.list.length;

          }

           this.filtered =this.list.slice(0, cut);

          this.tries = 0;

          this.warningMessage = "";

        // } else if(this.keyword && this.keyword.length < this.keywordlimit){

        //   this.tries++;

        //   if(this.tries == this.keywordlimit -1 ){

        //     this.warningMessage = "Type at least " + this.keywordlimit + " characters";

        //     this.tries = 0;

        //   }

        }else{

          this.tries = 0;

          this.warningMessage = "";

           this.filtered = this.list.filter(function(el){

              return el.label.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1;

          }.bind(this));

        }

      }

    }

    remove(item:any){

      var index:number =this.checkIfExists(item,this.selected);

       if (index > -1) {

          this.selected.splice(index, 1);

      }

      if(!this.multipleSelections && this.selected.length == 0 ){

        this.showInput = true;

        this.selectedValue = "";

        this.selectedValueChanged.emit({

            value: this.selectedValue

        });

      }

    }

    select(item:any){

      // console.log("select"+this.selected.length  + item.id + " "+ item.label);

        if(this.multipleSelections){

          var index:number =this.checkIfExists(item,this.selected);

           if (index > -1 && !this.allowDuplicates) {

              this.keyword = "";

              this.filtered.splice(0, this.filtered.length);

              return;

          }

          else{

              this.selected.push(item);

              this.keyword = "";

              this.filtered.splice(0, this.filtered.length);

              this.addItem.emit({

                  value: item

              });

          }

      }else{

        this.selected.splice(0, this.selected.length);

        this.selected.push(item);

        this.filtered.splice(0, this.filtered.length);

        this.keyword = "";

        this.showInput = false;

        this.selectedValue = item.id;

        this.selectedValueChanged.emit({

            value: this.selectedValue

        });

      }

      console.log("selected"+this.selected.length  );

    }

    private checkIfExists(item:any,list):number{

       if(item.concept && item.concept.id ){

        for (var _i = 0; _i < list.length; _i++) {

            let itemInList = list[_i];

            if(item.concept.id == itemInList.concept.id){

                 return _i;

            }

         }

      }else if(item.id){

        for (var _i = 0; _i < list.length; _i++) {

            let itemInList = list[_i];

             if(item.id == itemInList.id){

                 return _i;

            }

         }

      }

      return -1;

    }

    showItem(item:any):string{

     if (item.name){ //search

         return item.name;

      }else if( item.concept && item.concept.label){ //context

         return item.concept.label;

      }else if (item.label){ //simple

         return item.label;

      }

    }

    private getSelectedNameFromGivenId(){

      if(this.list == null ){

        return;

      }

      for( var i = 0; i < this.list.length; i++){

        if(this.list[i].id == this.selectedValue){

          this.selectedValue = this.list[i].label;

          this.selected.push(this.list[i]);

          this.showInput = false;

        }

      }

    }

    handleClick(event){

     var clickedComponent = event.target;

     var inside = false;

     do {

         if (clickedComponent === this.myElement.nativeElement) {

             inside = true;

         }

        clickedComponent = clickedComponent.parentNode;

     } while (clickedComponent);

      if(!inside){

          this.filtered.splice(0, this.filtered.length);;

      }

  }

}