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',
directives: [...ROUTER_DIRECTIVES,pagingFormatterNoLoad, PublicationTitleFormatter],
template: `
<!--
<h3>Selected Results:</h3>
<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>
</div>
<p><i>Fetches from Datacite </i></p>
-->
<div class="panel">
<div class="">
<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>
</span>
</div>
</form>
</div>
</div>
<div class="panel ">
<div class="">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#datacite">Datacite ({{resultsNum}})</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>
<p>Some content in menu 1.</p>
</div>
</div>
</div>
</div>
`,
providers:[JSONP_PROVIDERS, SearchDataciteService]
})

View File

@ -8,15 +8,15 @@ import {OpenaireProjectsService} from '../../services/openaireProjects.service';
@Component({
selector: 'claim-projects',
template: `
<div class="container" >
<div class="panel" >
<h3>Select Funder:</h3>
<!-- <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> -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div class="input-group">
<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}}
<span class="caret"></span>
</button>
@ -26,42 +26,25 @@ import {OpenaireProjectsService} from '../../services/openaireProjects.service';
</ul>
</div>
<h4>Select projects:</h4>
<input id="community" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter() >
<input *ngIf="selectedFunderId != '0'" id="community" type="text" class="form-control" placeholder="Search for Projects" [(ngModel)]=query (keyup)=filter() >
</div>
<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[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>
</ul>
</div>
<div class="selections" *ngIf="selectedProjects.length > 0">
<!-- <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>
<!--<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>
`,
providers:[ OpenaireProjectsService ]

View File

@ -1,20 +1,28 @@
<h3>Selected Results:</h3>
<!--<h3>Selected Results:</h3>
<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>
</div>
<p><i>Fetches from crossref </i></p>
-->
<!-- (keyup)="searchCrossref(term.value)" -->
<form>
<input #term [(ngModel)]="keyword"/>
<div class="panel">
<form>
<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>
</form>
<ul class="nav nav-tabs">
<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="#orcid">Orcid ({{orcidResultsNum}})</a></li>
</ul>
<div class="tab-content">
</span>
</div>
</form>
</div>
<div class="panel">
<ul class="nav nav-tabs">
<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="#orcid">Orcid ({{orcidResultsNum}})</a></li>
</ul>
<div class="tab-content">
<div id="crossref" class="tab-pane fade in active">
<div>
<div *ngIf="crossrefResultsNum != null && crossrefResultsNum > 0">
@ -65,4 +73,5 @@
</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:''};
console.info("Add result:"+result.id+" "+result.source+" "+item);
this.selectedPublications.push(result);
var index:number =this.crossrefResults.indexOf(item);
if (index > -1) {
this.crossrefResults.splice(index, 1);
}
//do not remove it from the list
// var index:number =this.crossrefResults.indexOf(item);
// if (index > -1) {
// this.crossrefResults.splice(index, 1);
// }
this.publicationsChange.emit({
value: this.selectedPublications
});
@ -202,4 +203,13 @@ search(term: string, size : number, page : number){
this.orcidResultsToShow=[];
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 {ClaimInsertComponent} from './insertClaim/insertClaim.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({
selector: 'linking',
//providers: [MdRadioDispatcher],
directives: [ROUTER_DIRECTIVES, ClaimContextComponent, ClaimPublicationComponent, ClaimSelectedComponent, ClaimInsertComponent,ClaimDatasetComponent, ClaimProjectsComponent],
template: `
<h1>Linking...</h1>
<h1>Linking Research Results</h1>
<div *ngIf=" show != 'claim'" class="row" >
<div class="col-sm-6">
<div *ngIf=" show=='result' " >
<form>
<input [(ngModel)]="keyword"/>
<button (click)="search()" type="submit" class="btn btn-default">Search</button>
<div class="resultType">
<!--<md-input class="demo-full-width default" placeholder="Search for Research Results" [(ngModel)]="keyword"></md-input>
<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 #dataset name="searchType" [checked]="searchType === 'dataset'" type="radio" value="dataset" (click)="searchType = dataset.value" />Dataset
</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>
</div>
<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 *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 *ngIf=" show=='project' " >
<claim-projects [selectedProjects]="projects" (projectsChange)="projectsChange($event)" > </claim-projects>
@ -129,14 +155,17 @@ export class LinkingComponent {
contextsChange($event) {
this.contexts=$event.value;
console.log($event.value);
}
publicationsChange($event) {
}
publicationsChange($event) {
this.publications=$event.value;
}
datasetsChange($event) {
}
datasetsChange($event) {
this.datasets=$event.value;
}
projectsChange($event) {
}
projectsChange($event) {
this.projects=$event.value;
}
}
typeChanged(type:string) {
this.searchType = type;
}
}