D-Net

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

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

import {ClaimResult, ClaimContext, ClaimProject} from './entities/claimEntities.class';

//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'],

    template: `

  <div class="bs-docs-grid">

    <div class = "row-fluid  form-inline auto-complete-box panel panel-default">

      <div class="panel-heading">{{title}}</div>

      <div class="panel-body">

        <span *ngIf = "showSelected">

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

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

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

          </span>

        </span>

        <input  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"   *ngFor=" let item of filtered">

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

                  </li>

              </ul>

        </div>

        <div *ngIf="warningMessage.length > 0" class="alert alert-warning row-fluid " role="alert">{{warningMessage}}</div>

        <div *ngIf="filtered.length == 0 && keyword.length >=3 " class="alert alert-info row-fluid " role="alert">No results Found</div>

      </div>

    </div>

  </div>

        `

})

export class StaticAutocompleteComponent {

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

    @Input() title = "Autocomplete";

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

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

    @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 keyword = '';

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

    private warningMessage = "";

    private infoMessage = "";

    private tries = 0;

    constructor () {

      console.info("Type"+this.type);

    }

    filter() {

      this.infoMessage = "";

      this.filtered = [];

      if(this.keyword == ""){

        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.keywordChange.emit({

           value: this.keyword

         });

      }

    }

    remove(item:any){

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

       if (index > -1) {

          this.selected.splice(index, 1);

      }

    }

    select(item:any){

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

         if (index > -1) {

            this.keyword = "";

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

            return;

        }

        else{

            this.selected.push(item);

            this.keyword = "";

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

        }

    }

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

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

        console.log("context");

        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;

      }

    }

    // handleClick(event){

    //  var clickedComponent = event.target;

    //  var inside = false;

    //  do {

    //      if (clickedComponent === this.elementRef.nativeElement) {

    //          inside = true;

    //      }

    //     clickedComponent = clickedComponent.parentNode;

    //  } while (clickedComponent);

    //   if(!inside){

    //       this.filteredList = [];

    //   }

    // }

}