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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/linking/claimDataset/claimDataset.component.ts
View File

@ -11,37 +11,53 @@ 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> -->
<form> <div class="panel">
<input #term [(ngModel)]="keyword"/> <div class="">
<button (click)="searchDatacite(term.value,10,1)" type="submit" class="btn btn-default">Search</button> <form>
</form> <div class="input-group">
<ul class="nav nav-tabs"> <span class="input-group-addon" id="basic-addon1">Dataset</span>
<li class="active"><a data-toggle="tab" href="#datacite">Datacite ({{resultsNum}})</a></li> <input class=" form-control" #term [(ngModel)]="keyword"/>
<li><a data-toggle="tab" href="#openaire">Openaire</a></li> <span class="input-group-btn">
</ul> <button (click)="searchDatacite(term.value,10,1)" type="submit" class="btn btn-default">Search</button>
<div class="tab-content"> </span>
<div id="datacite" class="tab-pane fade in active">
<div>
<div *ngIf="resultsNum != null && resultsNum > 0">
<p > {{resultsNum }} Total Results </p>
<paging-no-load [currentPage]="page" [totalResults]="resultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size" (pageChange)="pageChange($event)"> </paging-no-load>
</div>
<div >
<p *ngFor=" let item of results "> <publication-title [title]="item.title" [url]="'http://dx.doi.org/'+item.doi" > </publication-title> <button (click)="add(item, item.doi,'dataset','datacite',item.title,'http://dx.doi.org/'+item.doi)" type="button" class="btn btn-default">Select</button> </p>
</div>
</div> </div>
</div> </form>
<div id="openaire" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div> </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>
</ul>
<div class="tab-content">
<div id="datacite" class="tab-pane fade in active">
<div>
<div *ngIf="resultsNum != null && resultsNum > 0">
<p > {{resultsNum }} Total Results </p>
<paging-no-load [currentPage]="page" [totalResults]="resultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size" (pageChange)="pageChange($event)"> </paging-no-load>
</div>
<div >
<p *ngFor=" let item of results "> <publication-title [title]="item.title" [url]="'http://dx.doi.org/'+item.doi" > </publication-title> <button (click)="add(item, item.doi,'dataset','datacite',item.title,'http://dx.doi.org/'+item.doi)" type="button" class="btn btn-default">Select</button> </p>
</div>
</div>
</div>
<div id="openaire" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div>
</div>
</div>
`, `,
providers:[JSONP_PROVIDERS, SearchDataciteService] providers:[JSONP_PROVIDERS, SearchDataciteService]
}) })

83
src/app/linking/claimProject/claimProject.component.ts
View File

@ -8,60 +8,43 @@ 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="input-group">
<div class="dropdown"> <div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <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>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li (click)="funderChanged('0','Select funder:')"><a >Select funder:</a></li> <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> <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>
<h4>Select projects:</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" >
<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>
</li>
</ul> </ul>
</div>
<input *ngIf="selectedFunderId != '0'" id="community" type="text" class="form-control" placeholder="Search for Projects" [(ngModel)]=query (keyup)=filter() >
</div> </div>
<div class="selections" *ngIf="selectedProjects.length > 0"> <div class="suggestions" *ngIf="filteredList.length > 0">
<label for="selecteditems">Selected: </label> <ul class="list-group" >
<ul id ="selecteditems" class="nav nav-pills" > <li *ngFor=" let item of filteredList" class="list-group-item" >
<li *ngFor="let item of selectedProjects" role="presentation" (click)="remove(item)">{{item.projectId}} - {{item.projectAcronym}} - {{item.projectName}} <span class="badge">X</span> <a (click)="select(item)"> {{item.field[1]['@value']}}- {{item.field[3]['@value']}}</a>
</li> </li>
</ul> </ul>
</div> </div>
<!--<select [(ngModel)]="selectedCategory" (ngModelChange)="categoryChanged()" >
<option [ngValue]="'0'">Category:</option> <!-- <div class="selections" *ngIf="selectedProjects.length > 0">
<option *ngFor="let category of categories" [ngValue]="category.id">{{category.label}}</option> <label for="selecteditems">Selected: </label>
</select> <ul id ="selecteditems" class="nav nav-pills" >
<h4>Select concepts:</h4> <li *ngFor="let item of selectedProjects" role="presentation" (click)="remove(item)">{{item.projectId}} - {{item.projectAcronym}} - {{item.projectName}} <span class="badge">X</span>
<input id="community" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter() > </li>
<div class="suggestions" *ngIf="filteredList.length > 0"> </ul>
<ul class="list-group" *ngFor=" let item of filteredList" > </div>
<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 ]

121
src/app/linking/claimPublication/claimPublication.component.html
View File

@ -1,68 +1,77 @@
<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)" -->
<form> <div class="panel">
<input #term [(ngModel)]="keyword"/> <form>
<button type="submit" (click)="search(term.value,10,1)" class="btn btn-default">Search</button> <div class="input-group">
</form> <span class="input-group-addon" id="basic-addon1">Publication</span>
<ul class="nav nav-tabs"> <input class=" form-control" #term [(ngModel)]="keyword"/>
<li class="active"><a data-toggle="tab" href="#crossref">Crossref ({{crossrefResultsNum}})</a></li> <span class="input-group-btn">
<li><a data-toggle="tab" href="#openaire">Openaire ({{openaireResultsNum}})</a></li> <button type="submit" (click)="search(term.value,10,1)" class="btn btn-default">Search</button>
<li><a data-toggle="tab" href="#orcid">Orcid ({{orcidResultsNum}})</a></li> </span>
</ul>
<div class="tab-content">
<div id="crossref" class="tab-pane fade in active">
<div>
<div *ngIf="crossrefResultsNum != null && crossrefResultsNum > 0">
<p > {{crossrefResultsNum }} Total Results </p>
<paging-no-load [currentPage]="page" [totalResults]="crossrefResultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size" (pageChange)="pageChange($event)"> </paging-no-load>
</div>
<div >
<p *ngFor=" let item of crossrefResults "> <publication-title [title]="item.title" [url]="item.URL" > </publication-title> <button (click)="add(item,'crossref', 'publication', item.URL, item.title)" type="button" class="btn btn-default">Select</button> </p>
</div>
</div> </div>
</div> </form>
<div id="openaire" class="tab-pane fade"> </div>
<div class="panel">
<p>TODO put openaire results here...</p> <ul class="nav nav-tabs">
</div> <li class="active"><a data-toggle="tab" href="#crossref">Crossref ({{crossrefResultsNum}})</a></li>
<div id="orcid" class="tab-pane fade"> <li><a data-toggle="tab" href="#openaire">Openaire ({{openaireResultsNum}})</a></li>
<li><a data-toggle="tab" href="#orcid">Orcid ({{orcidResultsNum}})</a></li>
<p *ngIf="orcidResultsNum == null"> No authors found for keyword: {{keyword}} </p> </ul>
<div class="tab-content">
<div *ngIf="orcidResultsNum != null"> <div id="crossref" class="tab-pane fade in active">
<p> Not the right author? Choose one of these: </p> <div>
<div *ngIf="crossrefResultsNum != null && crossrefResultsNum > 0">
<div class="dropdown"> <p > {{crossrefResultsNum }} Total Results </p>
<button class=" btn btn-default dropdown-toggle" type= "button" data-toggle="dropdown" id="orcidDropDown" role="button" aria-haspopup="true" aria-expanded="true">Selected: {{authorGivenName}} {{authorFamilyName}}<span class="caret"></span></button> <paging-no-load [currentPage]="page" [totalResults]="crossrefResultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size" (pageChange)="pageChange($event)"> </paging-no-load>
<ul class="dropdown-menu" aria-labelledby="orcidDropDown">
<li *ngFor=" let item of authorIds let i = index" (click)="getOrcidResultsById(i)" role="button">
{{authorGivenNames[i]}} {{authorFamilyNames[i]}} : {{item}}
</li>
</ul>
</div>
<div>
<br/>
<h4> {{orcidResultsNum }} Total Results for author
<a target="_blank" href="http://orcid.org/{{authorId}}"> {{authorGivenName}} {{authorFamilyName}} : {{authorId}} </a>
</h4>
<br/>
<div *ngIf=" ((orcidResultsNum >0) && (totalPages > 1) && ( 0 < page && page <= totalPages )) " >
<paging-no-load [currentPage]="page" [totalResults]="orcidResultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size" (pageChange)="orcidPageChange($event)"> </paging-no-load>
</div> </div>
<div >
<p *ngFor=" let item of crossrefResults "> <publication-title [title]="item.title" [url]="item.URL" > </publication-title> <button (click)="add(item,'crossref', 'publication', item.URL, item.title)" type="button" class="btn btn-default">Select</button> </p>
</div>
</div>
</div>
<div id="openaire" class="tab-pane fade">
<div *ngIf=" orcidResultsNum > 0"> <p>TODO put openaire results here...</p>
<p *ngFor=" let item of orcidResultsToShow "> {{item['work-title']['title'].value}} ({{item['publication-date']['year'].value}}) </p> </div>
<div id="orcid" class="tab-pane fade">
<p *ngIf="orcidResultsNum == null"> No authors found for keyword: {{keyword}} </p>
<div *ngIf="orcidResultsNum != null">
<p> Not the right author? Choose one of these: </p>
<div class="dropdown">
<button class=" btn btn-default dropdown-toggle" type= "button" data-toggle="dropdown" id="orcidDropDown" role="button" aria-haspopup="true" aria-expanded="true">Selected: {{authorGivenName}} {{authorFamilyName}}<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="orcidDropDown">
<li *ngFor=" let item of authorIds let i = index" (click)="getOrcidResultsById(i)" role="button">
{{authorGivenNames[i]}} {{authorFamilyNames[i]}} : {{item}}
</li>
</ul>
</div>
<div>
<br/>
<h4> {{orcidResultsNum }} Total Results for author
<a target="_blank" href="http://orcid.org/{{authorId}}"> {{authorGivenName}} {{authorFamilyName}} : {{authorId}} </a>
</h4>
<br/>
<div *ngIf=" ((orcidResultsNum >0) && (totalPages > 1) && ( 0 < page && page <= totalPages )) " >
<paging-no-load [currentPage]="page" [totalResults]="orcidResultsNum" [navigateTo]="navigateTo" [term]="keyword" [size]="size" (pageChange)="orcidPageChange($event)"> </paging-no-load>
</div>
<div *ngIf=" orcidResultsNum > 0">
<p *ngFor=" let item of orcidResultsToShow "> {{item['work-title']['title'].value}} ({{item['publication-date']['year'].value}}) </p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

18
src/app/linking/claimPublication/claimPublication.component.ts
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;
}
}
} }

69
src/app/linking/linking.component.ts
View File

@ -8,32 +8,58 @@ 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">
<input #publication name="searchType" type="radio" [checked]="searchType === 'publication'" value="publication" (click)="searchType = publication.value" />Publication <md-radio-group class="default" [(value)]="searchType">
<input #dataset name="searchType" [checked]="searchType === 'dataset'" type="radio" value="dataset" (click)="searchType = dataset.value" />Dataset <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> </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>
</div> </div>
<div *ngIf=" show == 'context'" > <div *ngIf=" show == 'context'" >
@ -128,15 +154,18 @@ export class LinkingComponent {
} }
contextsChange($event) { contextsChange($event) {
this.contexts=$event.value; this.contexts=$event.value;
console.log($event.value); console.log($event.value);
} }
publicationsChange($event) { publicationsChange($event) {
this.publications=$event.value; this.publications=$event.value;
} }
datasetsChange($event) { datasetsChange($event) {
this.datasets=$event.value; this.datasets=$event.value;
} }
projectsChange($event) { projectsChange($event) {
this.projects=$event.value; this.projects=$event.value;
} }
typeChanged(type:string) {
this.searchType = type;
}
} }