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

import {Component, Input,Output, ElementRef, EventEmitter, ViewChild} from '@angular/core';
import {JSONP_PROVIDERS}  from '@angular/http';
import {Observable}       from 'rxjs/Observable';
import { RouteParams, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {OpenaireProjectsService} from '../../../services/openaireProjects.service';
import {Loading} from '../../../common/modal/loading.component';

@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 == 'false')">
               <div class="input-group">
                <div class="input-group-btn"  >
                   <button type="button"  class="btn btn-info dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{selectedFunderName}}
                   </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <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><!-- (keyup)=filter() *ngIf="selectedFunderId != '0'"  -->
                <input  id="community" type="text" class="form-control"   placeholder="Search for Projects" [(ngModel)]=query   >
                <span  class="input-group-btn"  >
                  <button type="submit" (click)="filter()"  class="btn btn-default" >Search</button>
                </span>
              </div>
            </form>
            <form *ngIf="(inline == 'true')" class="form-horizontal">
               <div class="">
                <div class="form-group"  >
                   <button type="button"  class="btn btn-xs btn-info dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{selectedFunderName}}
                   </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <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><!-- (keyup)=filter() *ngIf="selectedFunderId != '0'"  -->
                <div class="form-group">  <input  id="community" type="text" class="form-control input-sm"   placeholder="Search for Projects" [(ngModel)]=query   ></div>
                <div  class="form-group"  >
                  <button type="submit" (click)="filter()"  class="btn btn-xs btn-default" >Search</button>
                </div>
              </div>
            </form>
                <div class="suggestions" *ngIf="filteredList.length > 0">
                    <ul class="list-group"  >
                        <li  *ngFor=" let item of filteredList" 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 class="selections"  *ngIf="selectedProjects.length > 0">
                  <label for="selecteditems">Selected: </label>
                    <ul id ="selecteditems" class="nav nav-pills" >
                        <li   *ngFor="let item of selectedProjects" role="presentation"  (click)="remove(item)">{{item.projectId}} - {{item.projectAcronym}} - {{item.projectName}} <span class="badge">X</span>
                        </li>
                    </ul>
                </div>
-->

        </div>
        <loading [message]= "'Loading...'"></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>
        `,
    providers:[ OpenaireProjectsService ],
    directives: [Loading]

})
export class ClaimProjectsComponent {
   ngOnInit() {
     console.info("Claim projects - init ....");
this.getFunders();

}
@Input() public inline= 'false' ; // for claimed started from landing pages
public query = '';
public filteredList = [];
@Input() public selectedProjects=[] ;
public elementRef;
@Output() projectsChange = new EventEmitter();

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

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

// @ViewChild (Loading) loading : Loading ;


constructor(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 = "";
    this.filteredList = [];
    var project= { funderId: this.selectedFunderId,funderName: this.selectedFunderName, projectId: item.field[0]['@value'], projectName: item.field[3]['@value'] , projectAcronym: item.field[1]['@value'] };
    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.projectsChange.emit({
         value: this.selectedProjects
       });
    }

}
remove(item){
  var index:number =this.selectedProjects.indexOf(item);
   if (index > -1) {
      this.selectedProjects.splice(index, 1);
  }
  this.projectsChange.emit({
    value: this.selectedProjects
  });
}
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 = [];
  }
}
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 );

}

}