Changes in linking layout

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@42943 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2016-06-17 13:50:59 +00:00
parent 63b6131dcf
commit e1f6f3c5c1
5 changed files with 202 additions and 155 deletions

View File

@ -11,15 +11,29 @@ import {SearchDataciteService} from '../../services/searchDatacite.service';
selector: 'claim-dataset', selector: 'claim-dataset',
directives: [...ROUTER_DIRECTIVES,pagingFormatterNoLoad, PublicationTitleFormatter], directives: [...ROUTER_DIRECTIVES,pagingFormatterNoLoad, PublicationTitleFormatter],
template: ` template: `
<!--
<h3>Selected Results:</h3> <h3>Selected Results:</h3>
<div > <div >
<p *ngFor=" let item of selectedDatasets "> <publication-title [title]="item.result.title" [url]="'http://dx.doi.org/'+item.result.doi" > </publication-title> {{item.result.doi}} --{{item.result.publisher}}<button type="button" class="close" (click)="remove(item)" aria-label="Close"> <span aria-hidden="true">&times;</span></button> </p> <p *ngFor=" let item of selectedDatasets "> <publication-title [title]="item.result.title" [url]="'http://dx.doi.org/'+item.result.doi" > </publication-title> {{item.result.doi}} --{{item.result.publisher}}<button type="button" class="close" (click)="remove(item)" aria-label="Close"> <span aria-hidden="true">&times;</span></button> </p>
</div> </div>
<p><i>Fetches from Datacite </i></p> -->
<div class="panel">
<div class="">
<form> <form>
<input #term [(ngModel)]="keyword"/> <div class="input-group">
<span class="input-group-addon" id="basic-addon1">Dataset</span>
<input class=" form-control" #term [(ngModel)]="keyword"/>
<span class="input-group-btn">
<button (click)="searchDatacite(term.value,10,1)" type="submit" class="btn btn-default">Search</button> <button (click)="searchDatacite(term.value,10,1)" type="submit" class="btn btn-default">Search</button>
</span>
</div>
</form> </form>
</div>
</div>
<div class="panel ">
<div class="">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#datacite">Datacite ({{resultsNum}})</a></li> <li class="active"><a data-toggle="tab" href="#datacite">Datacite ({{resultsNum}})</a></li>
<li><a data-toggle="tab" href="#openaire">Openaire</a></li> <li><a data-toggle="tab" href="#openaire">Openaire</a></li>
@ -40,8 +54,10 @@ import {SearchDataciteService} from '../../services/searchDatacite.service';
<h3>Menu 1</h3> <h3>Menu 1</h3>
<p>Some content in menu 1.</p> <p>Some content in menu 1.</p>
</div> </div>
</div> </div>
</div>
</div>
`, `,
providers:[JSONP_PROVIDERS, SearchDataciteService] providers:[JSONP_PROVIDERS, SearchDataciteService]
}) })

View File

@ -8,15 +8,15 @@ import {OpenaireProjectsService} from '../../services/openaireProjects.service';
@Component({ @Component({
selector: 'claim-projects', selector: 'claim-projects',
template: ` template: `
<div class="container" > <div class="panel" >
<h3>Select Funder:</h3>
<!-- <select [(ngModel)]="selectedFunderId" (ngModelChange)="funderChanged()" > <!-- <select [(ngModel)]="selectedFunderId" (ngModelChange)="funderChanged()" >
<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> -->
<div class="dropdown"> <div class="input-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{selectedFunderName}} {{selectedFunderName}}
<span class="caret"></span> <span class="caret"></span>
</button> </button>
@ -26,42 +26,25 @@ import {OpenaireProjectsService} from '../../services/openaireProjects.service';
</ul> </ul>
</div> </div>
<h4>Select projects:</h4> <input *ngIf="selectedFunderId != '0'" id="community" type="text" class="form-control" placeholder="Search for Projects" [(ngModel)]=query (keyup)=filter() >
<input id="community" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter() > </div>
<div class="suggestions" *ngIf="filteredList.length > 0"> <div class="suggestions" *ngIf="filteredList.length > 0">
<ul class="list-group" > <ul class="list-group" >
<li *ngFor=" let item of filteredList" class="list-group-item" > <li *ngFor=" let item of filteredList" class="list-group-item" >
<a (click)="select(item)">{{item.field[0]['@value']}} - {{item.field[1]['@value']}}- {{item.field[3]['@value']}}</a> <a (click)="select(item)"> {{item.field[1]['@value']}}- {{item.field[3]['@value']}}</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="selections" *ngIf="selectedProjects.length > 0">
<!-- <div class="selections" *ngIf="selectedProjects.length > 0">
<label for="selecteditems">Selected: </label> <label for="selecteditems">Selected: </label>
<ul id ="selecteditems" class="nav nav-pills" > <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 *ngFor="let item of selectedProjects" role="presentation" (click)="remove(item)">{{item.projectId}} - {{item.projectAcronym}} - {{item.projectName}} <span class="badge">X</span>
</li> </li>
</ul> </ul>
</div> </div>
<!--<select [(ngModel)]="selectedCategory" (ngModelChange)="categoryChanged()" > -->
<option [ngValue]="'0'">Category:</option>
<option *ngFor="let category of categories" [ngValue]="category.id">{{category.label}}</option>
</select>
<h4>Select concepts:</h4>
<input id="community" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter() >
<div class="suggestions" *ngIf="filteredList.length > 0">
<ul class="list-group" *ngFor=" let item of filteredList" >
<li class="list-group-item" >
<a (click)="select(item)">{{item.label}}</a>
</li>
</ul>
</div>
<div class="selections" *ngIf="selectedProjects.length > 0">
<label for="selecteditems">Selected: </label>
<ul id ="selecteditems" class="nav nav-pills" *ngFor="let item of selectedProjects" >
<li role="presentation" (click)="remove(item)">{{item.concept.label}} <span class="badge">X</span>
</li>
</ul>
</div>-->
</div> </div>
`, `,
providers:[ OpenaireProjectsService ] providers:[ OpenaireProjectsService ]

View File

@ -1,14 +1,22 @@
<h3>Selected Results:</h3> <!--<h3>Selected Results:</h3>
<div > <div >
<p *ngFor=" let item of selectedPublications "> <publication-title [title]="item.result.title" [url]="item.result.URL" > </publication-title> {{item.result.DOI}} --{{item.result.publisher}} <button (click)="remove(item)" type="button" class="btn btn-default">Remove</button></p> <p *ngFor=" let item of selectedPublications "> <publication-title [title]="item.result.title" [url]="item.result.URL" > </publication-title> {{item.result.DOI}} --{{item.result.publisher}} <button (click)="remove(item)" type="button" class="btn btn-default">Remove</button></p>
</div> </div>
<p><i>Fetches from crossref </i></p> -->
<!-- (keyup)="searchCrossref(term.value)" --> <!-- (keyup)="searchCrossref(term.value)" -->
<div class="panel">
<form> <form>
<input #term [(ngModel)]="keyword"/> <div class="input-group">
<span class="input-group-addon" id="basic-addon1">Publication</span>
<input class=" form-control" #term [(ngModel)]="keyword"/>
<span class="input-group-btn">
<button type="submit" (click)="search(term.value,10,1)" class="btn btn-default">Search</button> <button type="submit" (click)="search(term.value,10,1)" class="btn btn-default">Search</button>
</span>
</div>
</form> </form>
</div>
<div class="panel">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#crossref">Crossref ({{crossrefResultsNum}})</a></li> <li class="active"><a data-toggle="tab" href="#crossref">Crossref ({{crossrefResultsNum}})</a></li>
<li><a data-toggle="tab" href="#openaire">Openaire ({{openaireResultsNum}})</a></li> <li><a data-toggle="tab" href="#openaire">Openaire ({{openaireResultsNum}})</a></li>
@ -66,3 +74,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>

View File

@ -174,10 +174,11 @@ search(term: string, size : number, page : number){
var result ={id: item.DOI, type :itemType, source : itemSource, title: itemTitle,url: itemUrl, result: item, accessRights: 'OPEN', embargoEndDate:''}; var result ={id: item.DOI, type :itemType, source : itemSource, title: itemTitle,url: itemUrl, result: item, accessRights: 'OPEN', embargoEndDate:''};
console.info("Add result:"+result.id+" "+result.source+" "+item); console.info("Add result:"+result.id+" "+result.source+" "+item);
this.selectedPublications.push(result); this.selectedPublications.push(result);
var index:number =this.crossrefResults.indexOf(item); //do not remove it from the list
if (index > -1) { // var index:number =this.crossrefResults.indexOf(item);
this.crossrefResults.splice(index, 1); // if (index > -1) {
} // this.crossrefResults.splice(index, 1);
// }
this.publicationsChange.emit({ this.publicationsChange.emit({
value: this.selectedPublications value: this.selectedPublications
}); });
@ -202,4 +203,13 @@ search(term: string, size : number, page : number){
this.orcidResultsToShow=[]; this.orcidResultsToShow=[];
this.orcidResultsToShow = this.orcidResults.slice(($event.value-1)*this.size, $event.value*this.size); this.orcidResultsToShow = this.orcidResults.slice(($event.value-1)*this.size, $event.value*this.size);
} }
isSelected(item){
var index:number =this.selectedPublications.indexOf(item);
if (index > -1) {
return true;
}else{
return false;
}
}
} }

View File

@ -8,29 +8,55 @@ import {ClaimDatasetComponent} from './claimDataset/claimDataset.component';
import {ClaimSelectedComponent} from './selected/selected.component'; import {ClaimSelectedComponent} from './selected/selected.component';
import {ClaimInsertComponent} from './insertClaim/insertClaim.component'; import {ClaimInsertComponent} from './insertClaim/insertClaim.component';
import {ClaimProjectsComponent} from './claimProject/claimProject.component'; import {ClaimProjectsComponent} from './claimProject/claimProject.component';
// import { MD_RADIO_DIRECTIVES, MdRadioDispatcher } from '@angular2-material/radio';
// import { MD_INPUT_DIRECTIVES } from '@angular2-material/input';
@Component({ @Component({
selector: 'linking', selector: 'linking',
//providers: [MdRadioDispatcher],
directives: [ROUTER_DIRECTIVES, ClaimContextComponent, ClaimPublicationComponent, ClaimSelectedComponent, ClaimInsertComponent,ClaimDatasetComponent, ClaimProjectsComponent], directives: [ROUTER_DIRECTIVES, ClaimContextComponent, ClaimPublicationComponent, ClaimSelectedComponent, ClaimInsertComponent,ClaimDatasetComponent, ClaimProjectsComponent],
template: ` template: `
<h1>Linking...</h1> <h1>Linking Research Results</h1>
<div *ngIf=" show != 'claim'" class="row" > <div *ngIf=" show != 'claim'" class="row" >
<div class="col-sm-6"> <div class="col-sm-6">
<div *ngIf=" show=='result' " > <div *ngIf=" show=='result' " >
<form> <form>
<input [(ngModel)]="keyword"/>
<button (click)="search()" type="submit" class="btn btn-default">Search</button> <!--<md-input class="demo-full-width default" placeholder="Search for Research Results" [(ngModel)]="keyword"></md-input>
<div class="resultType">
<md-radio-group class="default" [(value)]="searchType">
<md-radio-button [value]="publication" [checked]="searchType === 'publication'" >Publication</md-radio-button>
<md-radio-button [value]="dataset" [checked]="searchType != 'publication'">Dataset</md-radio-button>
</md-radio-group> -->
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{(searchType === 'publication')?"Publication":"Dataset"}} <span class="caret"></span></button>
<ul class="dropdown-menu">
<li (click)="typeChanged('publication')" ><a >Publication</a></li>
<li (click)="typeChanged('dataset')" ><a >Dataset</a></li>
</ul>
</div>
<!-- <div class="resultType">
<span class="input-group-addon">
<input #publication name="searchType" type="radio" [checked]="searchType === 'publication'" value="publication" (click)="searchType = publication.value" />Publication <input #publication name="searchType" type="radio" [checked]="searchType === 'publication'" value="publication" (click)="searchType = publication.value" />Publication
<input #dataset name="searchType" [checked]="searchType === 'dataset'" type="radio" value="dataset" (click)="searchType = dataset.value" />Dataset <input #dataset name="searchType" [checked]="searchType === 'dataset'" type="radio" value="dataset" (click)="searchType = dataset.value" />Dataset
</div> </div>
</span>-->
<input class=" form-control" [(ngModel)]="keyword"/>
<span class="input-group-btn">
<button (click)="search()" type="submit" class="btn btn-default">Search</button>
</span>
</div>
</form> </form>
</div> </div>
<div *ngIf=" show=='publication' "> <div *ngIf=" show=='publication' ">
<claim-publication [keyword]="keyword" [selectedPublications]="publications" (publicationsCahnge)="publicationsChange($event)" > </claim-publication> <claim-publication [keyword]="keyword" [selectedPublications]="publications" (publicationsChange)="publicationsChange($event)" > </claim-publication>
</div> </div>
<div *ngIf=" show=='dataset' " > <div *ngIf=" show=='dataset' " >
<claim-dataset [keyword]="keyword" [selectedDatasets]="datasets" (datasetsCahnge)="datasetsChange($event)" > </claim-dataset> <claim-dataset [keyword]="keyword" [selectedDatasets]="datasets" (datasetsChange)="datasetsChange($event)" > </claim-dataset>
</div> </div>
<div *ngIf=" show=='project' " > <div *ngIf=" show=='project' " >
<claim-projects [selectedProjects]="projects" (projectsChange)="projectsChange($event)" > </claim-projects> <claim-projects [selectedProjects]="projects" (projectsChange)="projectsChange($event)" > </claim-projects>
@ -139,4 +165,7 @@ datasetsChange($event) {
projectsChange($event) { projectsChange($event) {
this.projects=$event.value; this.projects=$event.value;
} }
typeChanged(type:string) {
this.searchType = type;
}
} }