D-Net

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

import {Observable}       from 'rxjs/Observable';

import {SearchProjectsService} from '../../services/searchProjects.service';

import {ProjectService} from '../../landingPages/project/project.service';

// import {ModalLoading} from '../../utils/modal/loading.component';

import { Subject } from 'rxjs/Subject';

import {ClaimProject} from './claimEntities.class';

declare var UIkit:any;

@Component({

    selector: 'claim-projects-search-form',

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

    template: `

    <div>

      <form class=" uk-animation  uk-padding-small uk-panel  uk-background-muted " >

                <table class="uk-width-1-1 uk-table uk-table-responsive" ><tr>

                <td  >

               Search for projects

               </td></tr>

                <tr><td >

                 <select   class=""  [(ngModel)]="selectedFunderId" name="select_funder"  >

                   <option  value="0" (click)="funderChanged('0','Select funder:')">Select funder:</option>

                   <option *ngFor="let  funder of funders"  [value]="funder.id" (click)="funderChanged(funder.id,funder.name)">{{funder.name}}</option>

                 </select></td><td  >

                <entities-autocomplete entityType="project" [funderId]="selectedFunderId"  [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Type Keywords..'" title = "Projects:"  [multipleSelections]=true  (addItem) = "select($event)" ></entities-autocomplete>

                </td></tr></table>

        </form>

        <!--modal-loading [message]= "'Loading...'"></modal-loading-->

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

        <div *ngIf="infoMessage.length > 0" class="alert alert-info" role="alert">{{infoMessage}}</div-->

    </div>

        `

})

export class ClaimProjectsSearchFormComponent {

   ngOnInit() {

     this.getFunders();

   }

  //  @ViewChild (ModalLoading) loading : ModalLoading ;

  // @Input() public inline: boolean = false ; // for claimed started from landing pages

  public query = '';

  @Input() public selectedProjects=[] ;

  public elementRef;

  public funders:string[];

  public selectedFunderId:string ="0";

  selectedFunderName:string ="Select funder:";

  @Output() projectSelected = new EventEmitter();

  public projects:string[];

  public warningMessage = "";

  public infoMessage = "";

  // public searchTermStream = new Subject<string>();

  // filtered: Observable<{}>   = this.searchTermStream

  // .debounceTime(300).distinctUntilChanged()

  // .switchMap((term: string) =>   this._projectService.searchForProjectsObs(term, this.selectedFunderId));

  public tries:number = 0 ;

  public keywordlimit = 3;

constructor(private _service: ProjectService, private _projectService: SearchProjectsService, myElement: ElementRef) {

    this.elementRef = myElement;

}

// search() {

//   console.info("heeere "+this.query );

//   this.infoMessage = "";

//   // this.filtered = [];

//   if(this.query == ""){

//     this.tries = 0;

//     this.warningMessage = "";

//   } else if(this.query && this.query.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.query );

//

//     this.tries = 0;

//     this.warningMessage = "";

//     this.searchTermStream.next(this.query);

//

//   }

//

// }

select(item){

    this.query = "";

    // this.searchTermStream.next(this.query); //clear

    item = item.value;

    var project: ClaimProject = new ClaimProject();

    project.funderId = (this.selectedFunderId=="0")?item.funderId:this.selectedFunderId;

    project.funderName = (this.selectedFunderId=="0")?item.funderName:this.selectedFunderName;

    project.projectId = item.id;

    project.projectName = item.projectName;

    project.projectAcronym = item.projectAcronym;

    project.startDate = item.startDate;

    project.endDate = item.endDate;

    project.code = item.code;

    project.jurisdiction = item.jurisdiction;

    project.fundingLevel0 = item.fundingLevel0;

    console.log(item);

    // this._service.getProjectDates(project.projectId).subscribe(

    //   data => {

    //       project.startDate = data.startDate;

    //       project.endDate = data.endDate;

    //   },

    //   err => console.log(err)

    // );

    var index:number =this.selectedProjects.indexOf(project);

    var found:boolean = false;

    this.warningMessage = "";

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

        let item = this.selectedProjects[_i];

        if(item.projectId == project.projectId){

              found=true;

              this.warningMessage = "Project already in selected list";

        }

     }

    if (!found) {

      this.selectedProjects.push(project);

      this.projectSelected.emit({

        value: true

      });

      UIkit.notification({

          message : 'A new project is selected.',

          status  : 'info',

          timeout : 1000,

          pos     : 'top-center'

      });

    }else{

      UIkit.notification({

          message : 'The project is already on your list.',

          status  : 'warning',

          timeout : 1000,

          pos     : 'top-center'

      });

    }

}

showItem(item):string{

  return ((item.field[1]['@value'])?item.field[1]['@value']+" - ":"" ) + item.field[3]['@value'];

}

remove(item){

  var index:number =this.selectedProjects.indexOf(item);

   if (index > -1) {

      this.selectedProjects.splice(index, 1);

  }

}

handleClick(event){

 var clickedComponent = event.target;

 var inside = false;

 do {

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

         inside = true;

     }

    clickedComponent = clickedComponent.parentNode;

 } while (clickedComponent);

}

getFunders ()  {

  console.info("Getting Funders....");

  this._projectService.getFunders().subscribe(

    data => {

      this.funders = data[1];

      console.log("this.funders");

     },

    err => console.log(err)

  );

 }

  getProjects ()  {

    if(this.selectedFunderId != '0'){

    }

   }

funderChanged(funderId:string, funderName:string){

  this.selectedFunderId = funderId;

  this.selectedFunderName = funderName;

  console.info("Selected funder:"+this.selectedFunderId+ ' name:'+funderName );

}

}