explore-services/portal-2/src/app/claimPages/linking/claimProject/claimProject.component.ts

import {Component, Input,Output, ElementRef, EventEmitter, ViewChild} from '@angular/core';
import {Observable}       from 'rxjs/Observable';
import {OpenaireProjectsService} from '../../../services/openaireProjects.service';
import {ProjectService} from '../../../services/project.service';
import {ModalLoading} from '../../../utils/modal/loading.component';
import { Subject } from 'rxjs/Subject';


@Component({
    selector: 'claim-projects',
    template: `
        <div class="panel-body" >

          <!--  <select  [(ngModel)]="selectedFunderId" (ngModelChange)="funderChanged()" >
              <option   [ngValue]="'0'">Funder:</option>
              <option *ngFor="let funder of funders" [ngValue]="funder.field.field[1]['@value_original']">{{funder.field.field[1]['@value']}}</option>
            </select> -->

            <form *ngIf=" !inline ">
               <div class="input-group">
                <div  class="input-group-btn"  >
                   <button type="button"  class="btn btn-info dropdown-toggle" id="dropdownFunder" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{selectedFunderName}}
                   </button>
                  <ul class="dropdown-menu " aria-labelledby="dropdownFunder">
                    <li  (click)="funderChanged('0','Select funder:')"><a  >Select funder:</a></li>
                    <li *ngFor="let funder of funders"  (click)="funderChanged(funder.field.field[1]['@value_original'],funder.field.field[1]['@value'])"  ><a  >{{funder.field.field[1]['@value']}}</a></li>

                  </ul>
                </div>
                <input  id="community" type="text" class="form-control"   placeholder="Search for Projects" [(ngModel)]=query  name="query"  (keyup)="search()" >
              </div>
            </form>
            <form *ngIf=" inline " class="form-horizontal">
               <div class="">
                <div class="form-group"  >
                   <button type="button"  class="btn btn-xs btn-info dropdown-toggle" id="dropdownFunder" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{selectedFunderName}}
                   </button>
                  <ul class="dropdown-menu custom-hidden-dropdown-menu" aria-labelledby="dropdownFunder">
                    <li  (click)="funderChanged('0','Select funder:')"><a  >Select funder:</a></li>
                    <li *ngFor="let funder of funders"  (click)="funderChanged(funder.field.field[1]['@value_original'],funder.field.field[1]['@value'])"  ><a  >{{funder.field.field[1]['@value']}}</a></li>

                  </ul>
                </div>
                <div class="form-group">  <input  id="community" type="text" class="form-control input-sm"  (keyup)="search(query)"  placeholder="Search for Projects" [(ngModel)]=query   name="query" ></div>
              </div>
            </form>
            <div class="suggestions" >
                    <ul class="list-group"  >
                        <li  *ngFor=" let item of filteredList | async " class="list-group-item" >
                            <a (click)="select(item)"> {{(item.field[1]['@value'])?item.field[1]['@value']+" - ":""}} {{item.field[3]['@value']}}</a>
                        </li>
                    </ul>
            </div>


        </div>
        <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>
        `

})
export class ClaimProjectsComponent {
   ngOnInit() {
     this.getFunders();
   }
   @ViewChild (ModalLoading) loading : ModalLoading ;

  @Input() public inline: boolean = false ; // for claimed started from landing pages
  public query = '';
  // public filteredList = [];
  @Input() public selectedProjects=[] ;
  public elementRef;

  public funders:string[];
  @Input() public selectedFunderId:string ="0";
  selectedFunderName:string ="Select funder:";
  @Output() cselectedFunderChange = new EventEmitter();

  public projects:string[];
  public warningMessage = "";
  public infoMessage = "";

  private searchTermStream = new Subject<string>();
search() {
  console.info("term changed!!!");
  this.searchTermStream.next(this.query); }
filteredList: Observable<{}> = this.searchTermStream
  .debounceTime(300).
  distinctUntilChanged()
  .switchMap((term: string) =>   this._projectService.searchForProjectsObs(term, this.selectedFunderId));


constructor(private _service: ProjectService,private _projectService: OpenaireProjectsService,myElement: ElementRef) {
    this.elementRef = myElement;
}

filter() {
  console.info("Search projects");
  if (this.selectedFunderId == '0' ){
    this.warningMessage = "Please select a funder first";
    this.infoMessage = "";
  }else if ( this.query == "" || this.query.length < 3){
    this.warningMessage = "Please type a keyword, containing at least 3 characters"
    this.infoMessage = "";
  }else{
    this.warningMessage = "";
    this.infoMessage = "";
    this.loading.open();
    this._projectService.searchForProjects(this.query, this.selectedFunderId).subscribe(
      data => {
        this.filteredList =(data == null)?[]:data;
        this.infoMessage = (data == null)?"No Results found":"";
        this.loading.close();
       },
      err => {
        console.error(err);
        this.loading.close();
        this.warningMessage = "An error occured";

      }
    );
  }
}

select(item){
    this.query = "";
    var project= { funderId: this.selectedFunderId,funderName: this.selectedFunderName, projectId: item.field[0]['@value'], projectName: item.field[3]['@value'] , projectAcronym: item.field[1]['@value'], startDate: null, endDate: null };
    this._service.getProjectDates(project.projectId).subscribe(
      data => {
          project.startDate = data.startDate;
          project.endDate = data.endDate;
      },
      err => console.error(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);

    }

}
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);
  // if(!inside){
  //   this.query = "";
  //   this.filteredList = this.searchTermStream
  //     .debounceTime(300).
  //     distinctUntilChanged()
  //     .switchMap((term: string) =>  this._projectService.searchForProjectsObs(term, this.selectedFunderId));
  // }
}
getFunders ()  {
  console.info("Getting Funders....");
  this._projectService.getFunders().subscribe(
    data => {
      this.funders = data;
     },
    err => console.error(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 );

}

}