openaire-library/claims/claim-utils/claimProjectSearchForm.comp...

200 lines
6.7 KiB
TypeScript
Raw Normal View History

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;
import{EnvProperties} from '../../utils/properties/env-properties';
@Component({
selector: 'claim-projects-search-form',
template: `
<!--div class="uk-notification uk-notification-top-center"><div class="uk-notification-message uk-notification-message-primary" style="opacity: 1; margin-top: 0px; margin-bottom: 10px;">
<a href="#" class="uk-notification-close uk-close uk-icon" data-uk-close=""></a>
<div>A new project is selected.</div>
</div></div-->
<form class=" uk-animation uk-card uk-card-default uk-padding uk-padding-medium " >
<div class="uk-grid">
<div class="uk-grid uk-width-expand">
<div class="uk-width-auto@m uk-first-column">
<select class="uk-select uk-width-large" [(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.split("||").length > 0)?(funder.name.split("||")[0]+" ("+funder.name.split("||")[1]+")"):(funder.name)}}</option>
</select>
</div>
<div class="uk-width-expand@m">
<entities-autocomplete [(properties)]=properties entityType="project" [funderId]="selectedFunderId" [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Project name or ID'" title = "Projects" [multipleSelections]=true (addItem) = "select($event)" ></entities-autocomplete>
</div>
</div>
<helper div="link-project-form" styleName="uk-width-medium"></helper>
</div>
</form>
`
})
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();
@Input() public properties:EnvProperties;
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 : 'primary',
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(this.properties).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 );
}
}