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';

import {Observable}       from 'rxjs/Observable';

import { Subject } from 'rxjs/Subject';

import {OpenaireProjectsService} from '../services/openaireProjects.service';

//Usage example

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

@Component({

    selector: 'dynamic-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"-->

      <div class="custom-autocomplete">

        <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)=search()   >

        <div class="suggestions" >

              <ul class="list-group" >

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

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

                  </li>

              </ul>

        </div>

        <div class="messages">

          <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>

    </div>

  </div-->

`

})

export class DynamicAutocompleteComponent {

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

    @Input() title = "Autocomplete";

    @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

    // @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 selectedFunderId = "";

    @Input() searchTermStream = new Subject<string>();

    @Input() filtered: Observable<{}> = this.searchTermStream

    .debounceTime(300).distinctUntilChanged()

    .switchMap((term: string) => this.service(term));

    private warningMessage = "";

    private infoMessage = "";

    private tries = 0;

  constructor(private _projectService: OpenaireProjectsService,myElement: ElementRef) {

      // this.elementRef = myElement;

  }

  service(term) {

    console.info("In service: "+ projects);

      var projects = this._projectService.searchForProjectsObs(term, "");

      console.info("Results: "+ projects);

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

      }

     return projects;

  }

  search() {

    console.info("heeere "+this.keyword );

    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{

      console.info("doo the search "+this.keyword );

      this.tries = 0;

      this.warningMessage = "";

      this.searchTermStream.next(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{

      console.log("type "+this.type);

      if(this.type == "search"){

        console.log("Value");

      }else if(this.type == "context"){

        console.log("context");

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

            let itemInList = list[_i];

            console.log("itemiL "+itemInList.concept.id);

            console.log("item "+item.concept.id);

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

                 return _i;

            }

         }

      }else if(this.type == "project"){

        console.log("project");

      }else {

          console.log("no----");

      }

      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 = [];

    //   }

    // }

}