MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 22 Wiki Activity

add claim entities classes for linking, add an initial draft for generic autocomplete component 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@43933 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2016-10-04 13:56:04 +00:00
parent 69ba6571bc
commit 9eb6f1c7da
19 changed files with 388 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
portal-2/package.json
View File

@ -44,6 +44,7 @@
"angular2-universal": "~2.0.11", "angular2-universal": "~2.0.11",
"angular2-universal-polyfills": "~2.0.11", "angular2-universal-polyfills": "~2.0.11",
"body-parser": "^1.15.2", "body-parser": "^1.15.2",
"bootstrap": "^4.0.0-alpha.4",
"express": "^4.14.0", "express": "^4.14.0",
"methods": "~1.1.2", "methods": "~1.1.2",
"ng2-webstorage": "^1.2.2", "ng2-webstorage": "^1.2.2",

4
portal-2/src/app/app.ts
View File

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
// require('bootstrap');
import 'rxjs/Rx'; import 'rxjs/Rx';
//import {LocalStorageService} from "angular2-localstorage/LocalStorageEmitter"; //import {LocalStorageService} from "angular2-localstorage/LocalStorageEmitter";
@ -11,9 +12,8 @@ import 'rxjs/Rx';
@Component({ @Component({
selector: 'app', selector: 'app',
template: ` template: `
<div> <div>
<navbar></navbar> <navbar></navbar>
<main> <main>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>

255
portal-2/src/app/claimPages/claim-utils/claimContext.component.ts
View File

@ -1,136 +1,159 @@
import {Component, Input,Output, ElementRef, EventEmitter} from '@angular/core'; import {Component, Input,Output, ElementRef, EventEmitter} from '@angular/core';
import {Observable} from 'rxjs/Observable'; import {Observable} from 'rxjs/Observable';
import {ContextsService} from '../../services/contexts.service'; import {ContextsService} from '../../services/contexts.service';
import {ClaimContext} from '../../utils/entities/claimEntities.class';
@Component({ @Component({
selector: 'claim-contexts', selector: 'claim-contexts',
template: ` template: `
<div class="panel-body" > <div class="panel-body" *ngIf="!inline">
<div class="input-group" *ngIf="!inline"> <div class="input-group" >
<div class=" input-group-btn"> <div class=" input-group-btn">
<button class="btn btn-success dropdown-toggle" type="button" id="communityDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-success dropdown-toggle" type="button" id="communityDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{selectedCommunityLabel}}
</button>
<ul class="dropdown-menu" aria-labelledby="communityDropDown">
<li (click)="communityChanged('0','Community:')"><a >Community:</a></li>
<li *ngIf="communities" (click)="communityChanged(communities.id, communities.label)" ><a >{{communities.label}}</a></li>
</ul>
</div>
<div class="input-group-btn ">
<button class="btn btn-success dropdown-toggle" type="button" id="categoryDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{selectedCategoryLabel}}
</button>
<ul class="dropdown-menu" aria-labelledby="categoryDropDown">
<li (click)="categoryChanged('0','Category:')"><a >Category:</a></li>
<li *ngFor="let category of categories" (click)="categoryChanged(category.id, category.label)" ><a >{{category.label}}</a></li>
</ul>
</div>
<!--input id="community" type="text" class="validate filter-input form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter() -->
</div>
<autocomplete [(keyword)] = query [(filtered)] =filteredList [(selected)] =selectedList [showSelected]=false placeHolderMessage = "Search for contexts" title = "Contexts:" (keywordChange)="filter(query)" type="context"></autocomplete>
</div>
<div class="panel-body" *ngIf=" inline && showComponent ">
<div class=" form-horizontal">
<div class=" form-group ">
<button class="btn btn-xs btn-success dropdown-toggle" type="button" id="communityDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{selectedCommunityLabel}} {{selectedCommunityLabel}}
</button> </button>
<ul class="dropdown-menu" aria-labelledby="communityDropDown"> <ul class="dropdown-menu custom-hidden-dropdown-menu" aria-labelledby="communityDropDown">
<li (click)="communityChanged('0','Community:')"><a >Community:</a></li> <li (click)="communityChanged('0','Community:')"><a >Community:</a></li>
<li *ngIf="communities" (click)="communityChanged(communities.id, communities.label)" ><a >{{communities.label}}</a></li> <li *ngIf="communities" (click)="communityChanged(communities.id, communities.label)" ><a >{{communities.label}}</a></li>
</ul> </ul>
</div> </div>
<div class="input-group-btn "> <div class="form-group ">
<button class="btn btn-success dropdown-toggle" type="button" id="categoryDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-xs btn-success dropdown-toggle" type="button" id="categoryDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{selectedCategoryLabel}} {{selectedCategoryLabel}}
</button> </button>
<ul class="dropdown-menu" aria-labelledby="categoryDropDown"> <ul class="dropdown-menu custom-hidden-dropdown-menu" aria-labelledby="categoryDropDown">
<li (click)="categoryChanged('0','Category:')"><a >Category:</a></li> <li (click)="categoryChanged('0','Category:')"><a >Category:</a></li>
<li *ngFor="let category of categories" (click)="categoryChanged(category.id, category.label)" ><a >{{category.label}}</a></li> <li *ngFor="let category of categories" (click)="categoryChanged(category.id, category.label)" ><a >{{category.label}}</a></li>
</ul> </ul>
</div> </div>
<!--div class="form-group">
<input id="community" type="text" class="validate filter-input form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter() > <input id="community" type="text" class="validate filter-input input-sm form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter() >
</div-->
</div>
<autocomplete [(keyword)] = query [(filtered)] =filteredList [(selected)] =selectedList [showSelected]=false placeHolderMessage = "Search for contexts" title = "Contexts:" (keywordChange)="filter($event)" type="context"></autocomplete>
</div> </div>
<div class=" form-horizontal" *ngIf=" inline && showComponent "> <!--div class="suggestions" *ngIf="filteredList.length > 0">
<div class=" form-group ">
<button class="btn btn-xs btn-success dropdown-toggle" type="button" id="communityDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{selectedCommunityLabel}}
</button>
<ul class="dropdown-menu custom-hidden-dropdown-menu" aria-labelledby="communityDropDown">
<li (click)="communityChanged('0','Community:')"><a >Community:</a></li>
<li *ngIf="communities" (click)="communityChanged(communities.id, communities.label)" ><a >{{communities.label}}</a></li>
</ul>
</div>
<div class="form-group ">
<button class="btn btn-xs btn-success dropdown-toggle" type="button" id="categoryDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{selectedCategoryLabel}}
</button>
<ul class="dropdown-menu custom-hidden-dropdown-menu" aria-labelledby="categoryDropDown">
<li (click)="categoryChanged('0','Category:')"><a >Category:</a></li>
<li *ngFor="let category of categories" (click)="categoryChanged(category.id, category.label)" ><a >{{category.label}}</a></li>
</ul>
</div>
<div class="form-group">
<input id="community" type="text" class="validate filter-input input-sm form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter() >
</div>
</div>
<div class="suggestions" *ngIf="filteredList.length > 0">
<ul class="list-group" > <ul class="list-group" >
<li class="list-group-item" *ngFor=" let item of filteredList"> <li class="list-group-item" *ngFor=" let item of filteredList">
<a (click)="select(item)">{{item.label}}</a> <a (click)="select(item)">{{item.label}}</a>
</li> </li>
</ul> </ul>
</div> </div-->
</div>
<div *ngIf="warningMessage.length > 0" class="alert alert-warning" role="alert">{{warningMessage}}</div> <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 *ngIf="infoMessage.length > 0" class="alert alert-info" role="alert">{{infoMessage}}</div>
` `
}) })
export class ClaimContextComponent { export class ClaimContextComponent {
ngOnInit() {
this.getCommunities();
}
@Input() public inline:boolean = false ; // for claimed started from landing pages @Input() public inline:boolean = false ; // for claimed started from landing pages
@Input() public showComponent:boolean = true ; // for claimed started from landing pages @Input() public showComponent:boolean = true ; // for claimed started from landing pages
@Input() public selectedList = [];
@Input() public selectedCommunityId:string = "0";
@Input() public selectedCategoryId:string ="0";
@Output() cselectedCommunityChange = new EventEmitter();
@Output() selectedCategoryChange = new EventEmitter();
public query = ''; public query = '';
public filteredList = []; public filteredList = [];
@Input() public selectedList ;
public elementRef; public elementRef;
// @Output() contextsChange = new EventEmitter();
public communities:string[]; public communities:string[];
@Input() public selectedCommunityId:string = "0"; private selectedCommunityLabel:string = "Community:";
selectedCommunityLabel:string = "Community:";
@Output() cselectedCommunityChange = new EventEmitter();
public categories:string[]; public categories:string[];
@Input() public selectedCategoryId:string ="0"; private selectedCategoryLabel:string ="Category:";
selectedCategoryLabel:string ="Category:";
@Output() selectedCategoryChange = new EventEmitter();
public concepts:string[]; public concepts:string[];
public warningMessage = ""; public warningMessage = "";
public infoMessage = ""; public infoMessage = "";
ngOnInit() {
this.getCommunities();
}
constructor(private _contextService: ContextsService,myElement: ElementRef) { constructor(private _contextService: ContextsService,myElement: ElementRef) {
this.elementRef = myElement; this.elementRef = myElement;
} }
filter() { // filter() {
this.warningMessage = ""; // this.warningMessage = "";
this.infoMessage = ""; // this.infoMessage = "";
if(this.selectedCommunityId == "0"){ // if(this.selectedCommunityId == "0"){
this.warningMessage = "Please select Community"; // this.warningMessage = "Please select Community";
}else if (this.query !== ""){ // }else if (this.query !== ""){
this.warningMessage = ""; // this.warningMessage = "";
this.infoMessage = ""; // this.infoMessage = "";
if(this.selectedCategoryId == "0"){ // if(this.selectedCategoryId == "0"){
this.warningMessage = "Specify category for more concepts"; // this.warningMessage = "Specify category for more concepts";
} // }
this.filteredList = this.concepts.filter(function(el){ // this.filteredList = this.concepts.filter(function(el){
return el.label.toLowerCase().indexOf(this.query.toLowerCase()) > -1; // return el.label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
}.bind(this)); // }.bind(this));
if(this.filteredList.length == 0 ){ // if(this.filteredList.length == 0 ){
this.infoMessage = "No results found"; // this.infoMessage = "No results found";
} // }
}else{ // }else{
this.filteredList = []; // this.filteredList = [];
// }
//
// }
filter($event) {
var query = $event.value;
this.query = $event.value;
this.filteredList = this.concepts.filter(function(el){
return el.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
}.bind(this));
var list = [ ];
for (var _i = 0; _i < this.filteredList.length; _i++) {
let item = this.filteredList[_i];
var context: ClaimContext= { community: this.selectedCommunityLabel, category: this.selectedCategoryLabel, concept: item };
list.push(context);
} }
this.filteredList = list;
} }
select(item){ select(item){
this.query = ""; this.query = "";
this.filteredList = []; this.filteredList = [];
var context= { community: this.selectedCommunityLabel, category: this.selectedCategoryLabel, concept: item }; var context: ClaimContext= { community: this.selectedCommunityLabel, category: this.selectedCategoryLabel, concept: item };
var found:boolean = false; var found:boolean = false;
this.warningMessage = ""; this.warningMessage = "";
for (var _i = 0; _i < this.selectedList.length; _i++) { for (var _i = 0; _i < this.selectedList.length; _i++) {
@ -142,48 +165,26 @@ select(item){
} }
if (!found) { if (!found) {
this.selectedList.push(context); this.selectedList.push(context);
// this.contextsChange.emit({
// value: this.selectedList
// });
} }
// var index:number =this.selectedList.indexOf(context); }
// if (index == -1) {
// this.selectedList.push(context);
// this.contextsChange.emit({
// value: this.selectedList
// });
// }
} // handleClick(event){
// remove(item){ // var clickedComponent = event.target;
// var index:number =this.selectedList.indexOf(item); // var inside = false;
// if (index > -1) { // do {
// this.selectedList.splice(index, 1); // if (clickedComponent === this.elementRef.nativeElement) {
// inside = true;
// }
// clickedComponent = clickedComponent.parentNode;
// } while (clickedComponent);
// if(!inside){
// this.filteredList = [];
// } // }
// this.contextsChange.emit({
// value: this.selectedList
// });
// } // }
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 = [];
}
}
getCommunities () { getCommunities () {
this._contextService.getCommunities().subscribe( this._contextService.getCommunities().subscribe(
data => { data => {
this.communities = data.communities; this.communities = data.communities;
// var concept= ["{id: this.communities['id'], label: this.communities['label'] }"];
// this.filteredList.push(concept);
// this.concepts.push(concept);
}, },
err => console.error(err) err => console.error(err)
); );
@ -197,7 +198,9 @@ getCommunities () {
this.concepts = []; this.concepts = [];
this.filteredList = []; this.filteredList = [];
if (this.query !== ""){ if (this.query !== ""){
this.filter(); var event = {value: ""};
event.value = this.query;
this.filter(event);
} }
}, },
@ -211,8 +214,10 @@ getCommunities () {
data => { data => {
this.concepts = data.concept; this.concepts = data.concept;
if (this.query !== ""){ if (this.query !== ""){
this.filter(); var event = {value: ""};
} event.value = this.query;
this.filter(event);
}
}, },
err => console.error(err) err => console.error(err)
); );
@ -220,21 +225,21 @@ getCommunities () {
this.concepts=[]; this.concepts=[];
} }
} }
communityChanged(communityId:string, communityLabel:string){ communityChanged(communityId:string, communityLabel:string){
this.warningMessage = ""; this.warningMessage = "";
this.infoMessage = ""; this.infoMessage = "";
this.selectedCommunityId= communityId; this.selectedCommunityId= communityId;
this.selectedCommunityLabel= communityLabel; this.selectedCommunityLabel= communityLabel;
this.getCategories(); this.getCategories();
} }
categoryChanged(categoryId:string, categoryLabel:string){ categoryChanged(categoryId:string, categoryLabel:string){
this.warningMessage = ""; this.warningMessage = "";
this.infoMessage = ""; this.infoMessage = "";
this.selectedCategoryId = categoryId; this.selectedCategoryId = categoryId;
this.selectedCategoryLabel = categoryLabel; this.selectedCategoryLabel = categoryLabel;
this.getConcepts(); this.getConcepts();
} }
} }

3
portal-2/src/app/claimPages/claim-utils/claimDataset.component.ts
View File

@ -1,6 +1,7 @@
import { Component, Input, Output, EventEmitter} from '@angular/core'; import { Component, Input, Output, EventEmitter} from '@angular/core';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { SearchDataciteService } from '../../services/searchDatacite.service'; import { SearchDataciteService } from '../../services/searchDatacite.service';
import {ClaimResult} from '../../utils/entities/claimEntities.class';
@Component({ @Component({
@ -112,7 +113,7 @@ export class ClaimDatasetComponent {
} }
add(item, itemId,itemType,itemSource,itemTitle, itemUrl, date){ add(item, itemId,itemType,itemSource,itemTitle, itemUrl, date){
var result ; var result: ClaimResult ;
if(itemSource == 'datacite'){ if(itemSource == 'datacite'){
result = {id: itemId, type :itemType, source : itemSource, title: itemTitle,url: itemUrl, result: item, accessRights: 'OPEN', embargoEndDate: this.nextDate, date : date}; result = {id: itemId, type :itemType, source : itemSource, title: itemTitle,url: itemUrl, result: item, accessRights: 'OPEN', embargoEndDate: this.nextDate, date : date};
}else if (itemSource == 'openaire'){ }else if (itemSource == 'openaire'){

136
portal-2/src/app/claimPages/claim-utils/claimProject.component.ts
View File

@ -4,10 +4,12 @@ import {OpenaireProjectsService} from '../../services/openaireProjects.service';
import {ProjectService} from '../../services/project.service'; import {ProjectService} from '../../services/project.service';
import {ModalLoading} from '../../utils/modal/loading.component'; import {ModalLoading} from '../../utils/modal/loading.component';
import { Subject } from 'rxjs/Subject'; import { Subject } from 'rxjs/Subject';
import {ClaimProject} from '../../utils/entities/claimEntities.class';
@Component({ @Component({
selector: 'claim-projects', selector: 'claim-projects',
// styleUrls: ['/autoComplete.component.css'],
template: ` template: `
<div class="panel-body" > <div class="panel-body" >
@ -15,10 +17,9 @@ import { Subject } from 'rxjs/Subject';
<option [ngValue]="'0'">Funder:</option> <option [ngValue]="'0'">Funder:</option>
<option *ngFor="let funder of funders" [ngValue]="funder.field.field[1]['@value_original']">{{funder.field.field[1]['@value']}}</option> <option *ngFor="let funder of funders" [ngValue]="funder.field.field[1]['@value_original']">{{funder.field.field[1]['@value']}}</option>
</select> --> </select> -->
<form><!-- *ngIf=" !inline "-->
<form *ngIf=" !inline "> <div><!-- class="input-group"-->
<div class="input-group"> <div> <!-- class="input-group-btn" -->
<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"> <button type="button" class="btn btn-info dropdown-toggle" id="dropdownFunder" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{selectedFunderName}} {{selectedFunderName}}
</button> </button>
@ -28,10 +29,36 @@ import { Subject } from 'rxjs/Subject';
</ul> </ul>
</div> </div>
<input id="community" type="text" class="form-control" placeholder="Search for Projects" [(ngModel)]=query name="query" (keyup)="search()" > <!--input id="community" type="text" class="form-control" placeholder="Search for Projects" [(ngModel)]=query name="query" (keyup)="search()"-->
<!--autocomplete -->
<div class="bs-docs-grid">
<div class = "row-fluid form-inline auto-complete-box panel panel-default">
<div class="panel-heading">Projects</div>
<div class="panel-body">
<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 name="searchkeyword" type="text" class="auto-complete-input validate filter-input input-sm form-control " placeholder="Search for Projects" [(ngModel)]=query (keyup)=search() >
<div class="suggestions" ><!--*ngIf="filtered.length > 0"-->
<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 *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>
<!--autocomplete -->
</div> </div>
</form> </form>
<form *ngIf=" inline " class="form-horizontal"> <!--form *ngIf=" inline " class="form-horizontal">
<div class=""> <div class="">
<div class="form-group" > <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"> <button type="button" class="btn btn-xs btn-info dropdown-toggle" id="dropdownFunder" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@ -52,7 +79,7 @@ import { Subject } from 'rxjs/Subject';
<a (click)="select(item)"> {{(item.field[1]['@value'])?item.field[1]['@value']+" - ":""}} {{item.field[3]['@value']}}</a> <a (click)="select(item)"> {{(item.field[1]['@value'])?item.field[1]['@value']+" - ":""}} {{item.field[3]['@value']}}</a>
</li> </li>
</ul> </ul>
</div> </div-->
</div> </div>
@ -70,7 +97,6 @@ export class ClaimProjectsComponent {
@Input() public inline: boolean = false ; // for claimed started from landing pages @Input() public inline: boolean = false ; // for claimed started from landing pages
public query = ''; public query = '';
// public filteredList = [];
@Input() public selectedProjects=[] ; @Input() public selectedProjects=[] ;
public elementRef; public elementRef;
@ -84,50 +110,73 @@ export class ClaimProjectsComponent {
public infoMessage = ""; public infoMessage = "";
private searchTermStream = new Subject<string>(); private searchTermStream = new Subject<string>();
search() { filtered: Observable<{}> = this.searchTermStream
console.info("term changed!!!"); .debounceTime(300).distinctUntilChanged()
this.searchTermStream.next(this.query); }
filteredList: Observable<{}> = this.searchTermStream
.debounceTime(300).
distinctUntilChanged()
.switchMap((term: string) => this._projectService.searchForProjectsObs(term, this.selectedFunderId)); .switchMap((term: string) => this._projectService.searchForProjectsObs(term, this.selectedFunderId));
private tries:number = 0 ;
private keywordlimit = 3;
constructor(private _service: ProjectService, private _projectService: OpenaireProjectsService,myElement: ElementRef) {
constructor(private _service: ProjectService,private _projectService: OpenaireProjectsService,myElement: ElementRef) {
this.elementRef = myElement; 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";
} 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);
} }
} }
// 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){ select(item){
this.query = ""; 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.searchTermStream.next(this.query); //clear
var project: ClaimProject = { 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( this._service.getProjectDates(project.projectId).subscribe(
data => { data => {
project.startDate = data.startDate; project.startDate = data.startDate;
@ -152,6 +201,9 @@ select(item){
} }
} }
showItem(item):string{
return ((item.field[1]['@value'])?item.field[1]['@value']+" - ":"" ) + item.field[3]['@value'];
}
remove(item){ remove(item){
var index:number =this.selectedProjects.indexOf(item); var index:number =this.selectedProjects.indexOf(item);
if (index > -1) { if (index > -1) {

3
portal-2/src/app/claimPages/claim-utils/claimPublication.component.ts
View File

@ -3,6 +3,7 @@ import {Observable} from 'rxjs/Observable';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import {SearchCrossrefService} from '../../services/searchCrossref.service'; import {SearchCrossrefService} from '../../services/searchCrossref.service';
import {SearchOrcidService} from '../../services/searchOrcid.service'; import {SearchOrcidService} from '../../services/searchOrcid.service';
import {ClaimResult} from '../../utils/entities/claimEntities.class';
@Component({ @Component({
@ -227,7 +228,7 @@ private getCrossrefResults (term: string, size : number, page : number) {
private add(item, id, itemSource, itemType, itemUrl, itemTitle, date){ private add(item, id, itemSource, itemType, itemUrl, itemTitle, date){
var result ; var result: ClaimResult ;
if(itemSource == 'crossref'){ if(itemSource == 'crossref'){
date = (date == null) ? null : date.substring(0,10); date = (date == null) ? null : date.substring(0,10);
result = {id: id, type :itemType, source : itemSource, title: itemTitle,url: itemUrl, result: item, accessRights: 'OPEN', embargoEndDate: this.nextDate, date}; result = {id: id, type :itemType, source : itemSource, title: itemTitle,url: itemUrl, result: item, accessRights: 'OPEN', embargoEndDate: this.nextDate, date};

4
portal-2/src/app/claimPages/claim.module.ts
View File

@ -37,9 +37,9 @@ import {LinkingGenericComponent} from './linking/linkingGeneric.component';
import {InlineClaimContextComponent} from './inlineClaims/inlineClaimContext.component'; import {InlineClaimContextComponent} from './inlineClaims/inlineClaimContext.component';
import {InlineClaimProjectComponent} from './inlineClaims/inlineClaimProject.component'; import {InlineClaimProjectComponent} from './inlineClaims/inlineClaimProject.component';
import {InlineClaimResultComponent} from './inlineClaims/inlineClaimResult.component'; import {InlineClaimResultComponent} from './inlineClaims/inlineClaimResult.component';
import {ClaimEntityFormatter} from '../utils/claimEntityFormatter.component'; import {ClaimEntityFormatter} from '../utils/claimEntityFormatter.component';
import { Claim } from '../utils/entities/claim';
import { Claim } from '../utils/entities/claim';
//helpers //helpers
@NgModule({ @NgModule({

4
portal-2/src/app/claimPages/linking/linkingGeneric.component.ts
View File

@ -55,9 +55,9 @@ import { Router } from '@angular/router';
</div> </div>
</div> </div>
<div *ngIf=" show == 'claim' " > <div *ngIf=" show == 'claim' " >
<claim-selected [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects" [show]="show" <!--claim-selected [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects" [show]="show"
(showChange)="showChange($event)" (publicationsChange)="publicationsChange($event)" [showAccessRights]="'true'" [bulkMode]="bulkMode" (showChange)="showChange($event)" (publicationsChange)="publicationsChange($event)" [showAccessRights]="'true'" [bulkMode]="bulkMode"
[linkToResults]="(bulkMode)?false:true" > </claim-selected> [linkToResults]="(bulkMode)?false:true" > </claim-selected-->
<claim-selected-contexts [contexts]="contexts" [show]="show" <claim-selected-contexts [contexts]="contexts" [show]="show"
(showChange)="showChange($event)" > </claim-selected-contexts> (showChange)="showChange($event)" > </claim-selected-contexts>

9
portal-2/src/app/claimPages/linking/selected/selected.component.ts
View File

@ -1,4 +1,5 @@
import {Component, Input,Output, EventEmitter} from '@angular/core'; import {Component, Input,Output, EventEmitter} from '@angular/core';
import {ClaimResult,ClaimProject, ClaimContext} from '../../../utils/entities/claimEntities.class';
@Component({ @Component({
selector: 'claim-selected', selector: 'claim-selected',
@ -121,10 +122,10 @@ export class ClaimSelectedComponent {
} }
@Input() contexts; @Input() contexts: ClaimContext[];
@Input() projects; @Input() projects: ClaimProject[];
@Input() publications; @Input() publications: ClaimResult[];
@Input() datasets; @Input() datasets: ClaimResult[];
@Input() showAccessRights:boolean = false; @Input() showAccessRights:boolean = false;
@Input() show='home'; @Input() show='home';
@Input() inline:boolean = false; @Input() inline:boolean = false;

4
portal-2/src/app/claimPages/linking/selected/selectedContexts.component.ts
View File

@ -1,5 +1,5 @@
import {Component, Input,Output, EventEmitter} from '@angular/core'; import {Component, Input,Output, EventEmitter} from '@angular/core';
import {ClaimContext} from '../../../utils/entities/claimEntities.class';
@Component({ @Component({
selector: 'claim-selected-contexts', selector: 'claim-selected-contexts',
template: ` template: `
@ -31,7 +31,7 @@ export class ClaimSelectedContextsComponent {
} }
@Input() contexts; @Input() contexts:ClaimContext[];
@Input() componentClass:string = ""; //"" or "col-sm-6" for horizontal display (besides projects) @Input() componentClass:string = ""; //"" or "col-sm-6" for horizontal display (besides projects)
@Input() show='home'; @Input() show='home';
@Input() inline:boolean = false; @Input() inline:boolean = false;

4
portal-2/src/app/claimPages/linking/selected/selectedDatasets.component.ts
View File

@ -1,6 +1,6 @@
import {Component, Input,Output, EventEmitter,ViewChild} from '@angular/core'; import {Component, Input,Output, EventEmitter,ViewChild} from '@angular/core';
import {AlertModal} from '../../../utils/modal/alert'; import {AlertModal} from '../../../utils/modal/alert';
import {ClaimResult} from '../../../utils/entities/claimEntities.class';
@Component({ @Component({
selector: 'claim-selected-datasets', selector: 'claim-selected-datasets',
template: ` template: `
@ -51,7 +51,7 @@ export class ClaimSelectedDatasetsComponent {
@Input() datasets; @Input() datasets: ClaimResult[];
@Input() showAccessRights:boolean = false; @Input() showAccessRights:boolean = false;
@Input() inline:boolean = false; @Input() inline:boolean = false;
@Input() hideType; @Input() hideType;

3
portal-2/src/app/claimPages/linking/selected/selectedProjects.component.ts
View File

@ -1,4 +1,5 @@
import {Component, Input,Output, EventEmitter} from '@angular/core'; import {Component, Input,Output, EventEmitter} from '@angular/core';
import {ClaimProject} from '../../../utils/entities/claimEntities.class';
@Component({ @Component({
selector: 'claim-selected-projects', selector: 'claim-selected-projects',
@ -33,7 +34,7 @@ ngOnInit() {
} }
@Input() projects; @Input() projects: ClaimProject[];
@Input() show='home'; @Input() show='home';
@Input() inline:boolean = false; @Input() inline:boolean = false;
@Input() hideType; @Input() hideType;

3
portal-2/src/app/claimPages/linking/selected/selectedPublications.component.ts
View File

@ -1,5 +1,6 @@
import {Component, Input,Output, EventEmitter, ViewChild} from '@angular/core'; import {Component, Input,Output, EventEmitter, ViewChild} from '@angular/core';
import {AlertModal} from '../../../utils/modal/alert'; import {AlertModal} from '../../../utils/modal/alert';
import {ClaimResult} from '../../../utils/entities/claimEntities.class';
@Component({ @Component({
selector: 'claim-selected-publications', selector: 'claim-selected-publications',
@ -48,7 +49,7 @@ export class ClaimSelectedPublicationsComponent {
//2015-05-01 //2015-05-01
} }
@Input() publications; @Input() publications: ClaimResult[];
@Input() showAccessRights:boolean = false; @Input() showAccessRights:boolean = false;
@Input() inline:boolean = false; @Input() inline:boolean = false;
@Input() hideType; @Input() hideType;

5
portal-2/src/app/claimPages/linking/selected/selectedResults.component.ts
View File

@ -1,4 +1,5 @@
import {Component, Input,Output, EventEmitter} from '@angular/core'; import {Component, Input,Output, EventEmitter} from '@angular/core';
import {ClaimResult} from '../../../utils/entities/claimEntities.class';
@Component({ @Component({
selector: 'claim-selected-results', selector: 'claim-selected-results',
@ -47,8 +48,8 @@ export class ClaimSelectedResultsComponent {
@Input() publications; @Input() publications:ClaimResult[];
@Input() datasets; @Input() datasets:ClaimResult[];
@Input() showAccessRights:boolean = false; @Input() showAccessRights:boolean = false;
@Input() show='home'; @Input() show='home';
@Input() inline:boolean = false; @Input() inline:boolean = false;

2
portal-2/src/app/test/test.component.ts
View File

@ -6,7 +6,7 @@ import {Component, ElementRef} from '@angular/core';
template: ` template: `
<!--i-frame url="https://google.com" width="30%" height="250"></i-frame--> <!--i-frame url="https://google.com" width="30%" height="250"></i-frame-->
<div style ="width:30%; height:250px;" > <div style ="width:30%; height:250px;" >
<autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></autocomplete> <autocomplete [(filtered)] =filtered [(selected)] =selected [showSelected]=false placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)" ></autocomplete>
<div> <div>
Selected:: Selected::
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" > <span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >

25
portal-2/src/app/utils/autoComplete.component.css Normal file
View File

@ -0,0 +1,25 @@
.auto-complete-box{
}
.auto-complete-choice .remove {
cursor: pointer;
}
.auto-complete-choice{
background: grey none repeat scroll 0 0;
border-color: grey;
border-radius: 5px;
border-style: solid;
color: white;
margin: 3px;
padding: 1px;
}
.auto-complete-input {
border-radius:0;
border-color: white;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset;
}
.form-control. auto-complete-input {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset;
}
.auto-complete-box .suggestions.list-group-item {
padding: 5px 10px;
}

143
portal-2/src/app/utils/autoComplete.component.ts
View File

@ -1,46 +1,28 @@
import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core'; import {Component, ElementRef, Input, Output, EventEmitter} from '@angular/core';
import {Value} from '../searchPages/searchUtils/searchHelperClasses.class';
import {ClaimResult, ClaimContext, ClaimProject} from './entities/claimEntities.class';
//Usage example //Usage example
//<autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></autocomplete> //<autocomplete [(filtered)] =filtered [(selected)] =selected placeHolderMessage = "Search for countries" title = "Countries:" (keywordChange)="keywordChanged($event)"></autocomplete>
@Component({ @Component({
selector: 'autocomplete', selector: 'autocomplete',
styles: [` styleUrls: ['autoComplete.component.css'],
.auto-complete-box{ }
.auto-complete-choice .remove {
cursor: pointer;
}
.auto-complete-choice{
background: grey none repeat scroll 0 0;
border-color: grey;
border-radius: 5px;
border-style: solid;
color: white;
margin: 3px;
padding: 1px;
}
.auto-complete-input { border-radius:0; border-color: white; box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset; }
.form-control. auto-complete-input {box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset;}
.auto-complete-box .suggestions.list-group-item {
padding: 5px 10px;
}
`],
template: ` template: `
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class = "row-fluid form-inline auto-complete-box panel panel-default"> <div class = "row-fluid form-inline auto-complete-box panel panel-default">
<div class="panel-heading">{{title}}</div> <div class="panel-heading">{{title}}</div>
<div class="panel-body"> <div class="panel-body">
<span *ngIf = "showSelected">
<span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" > <span class="row-fluid show-grid auto-complete-choice" *ngFor="let item of selected" >
<span >{{item.label}} </span> <span >{{showItem(item)}} </span>
<span (click)="remove(item)" aria-hidden="true" class=" remove glyphicon glyphicon-remove"></span> <span (click)="remove(item)" aria-hidden="true" class=" remove glyphicon glyphicon-remove"></span>
</span>
</span> </span>
<input type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() > <input type="text" class="auto-complete-input validate filter-input input-sm form-control " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() >
<div class="suggestions" *ngIf="filtered.length > 0"> <div class="suggestions" *ngIf="filtered.length > 0">
<ul class="list-group" > <ul class="list-group" >
<li class="list-group-item" *ngFor=" let item of filtered"> <li class="list-group-item" *ngFor=" let item of filtered">
<a (click)="select(item)">{{item.label}}</a> <a (click)="select(item)">{{showItem(item)}}</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -56,18 +38,22 @@ export class AutocompleteComponent {
@Input() placeHolderMessage = "Search for entries"; @Input() placeHolderMessage = "Search for entries";
@Input() title = "Autocomplete"; @Input() title = "Autocomplete";
@Output() keywordChange = new EventEmitter(); // when changed a method for filtering will be called @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 filtered = []; // the entries resulted after filtering function @Input() public filtered = []; // the entries resulted after filtering function
@Input() public selected = []; // the entries selected from user @Input() public selected = []; // the entries selected from user
@Input() public keywordlimit = 3; // the minimum length of keyword @Input() public keywordlimit = 3; // the minimum length of keyword
@Input() public showSelected = true; // the minimum length of keyword
public keyword = ''; @Input() public keyword = '';
@Input() public type = 'search' //search, result, context, project
private warningMessage = ""; private warningMessage = "";
private infoMessage = ""; private infoMessage = "";
private tries = 0; private tries = 0;
constructor () {
console.info('project constructor');
constructor () {
console.info("Type"+this.type);
} }
filter() { filter() {
this.infoMessage = ""; this.infoMessage = "";
@ -84,54 +70,83 @@ export class AutocompleteComponent {
}else{ }else{
this.tries = 0; this.tries = 0;
this.warningMessage = ""; this.warningMessage = "";
// this.filtered = this.concepts.filter(function(el){
// return el.label.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1;
// }.bind(this));
this.keywordChange.emit({ this.keywordChange.emit({
value: this.keyword value: this.keyword
}); });
// this.filtered = this.countries.filter(function(el){
// return el.toLowerCase().indexOf(this.keyword.toLowerCase()) > -1;
// }.bind(this));
// if(this.filtered.length == 0 ){
// this.infoMessage = "No results found";
// }
} }
} }
remove(item:any){ remove(item:any){
var index:number =this.selected.indexOf(item); var index:number =this.checkIfExists(item,this.selected);
if (index > -1) { if (index > -1) {
this.selected.splice(index, 1); this.selected.splice(index, 1);
} }
} }
select(item:any){ select(item:any){
var index:number =this.selected.indexOf(item);
if (index > -1) { var index:number =this.checkIfExists(item,this.selected);
// this.warningMessage = "Already selected"; if (index > -1) {
this.keyword = ""; this.keyword = "";
this.filtered.splice(0, this.filtered.length); this.filtered.splice(0, this.filtered.length);
}else{ return;
this.selected.push(item); }
this.keyword = ""; else{
this.filtered.splice(0, this.filtered.length); 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 = [];
// }
// }
// 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.filtered = [];
// }
// }
} }

30
portal-2/src/app/utils/entities/claimEntities.class.ts Normal file
View File

@ -0,0 +1,30 @@
//Classes used in linking / inlinelinking when selecting an entity
export class ClaimResult{
public id: string;
public type: string;
public source: string;
public title: string;
public url: string;
public result: any;
public accessRights: string = "OPEN";
public embargoEndDate: string;
public date: string;
}
export class ClaimProject{
public funderId: string;
public funderName: string;
public projectId: string;
public projectName: string;
public projectAcronym: string;
public startDate: string;
public endDate: string;
}
export class ClaimContext{
public community: string;
public category: string;
public concept:any;
}

2
portal-2/src/app/utils/entities/entities.module.ts
View File

@ -13,6 +13,8 @@ import {PublicationInfo} from './publicationInfo';
import {SearchResult} from './searchResult'; import {SearchResult} from './searchResult';
import { DataProviderInfo } from './dataProviderInfo'; import { DataProviderInfo } from './dataProviderInfo';
import {ClaimResult, ClaimProject, ClaimContext} from './claimEntities.class';
@NgModule({ @NgModule({
imports: [ CommonModule, FormsModule ], imports: [ CommonModule, FormsModule ],
declarations: [ declarations: [