explore-services/src/app/landingPages/publication/publication.component.ts

338 lines
17 KiB
TypeScript

import {Component, ViewChild} from '@angular/core';
import {JSONP_PROVIDERS} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {PublicationService} from '../../services/publication.service';
import {PublicationInfo} from '../../entities/publicationInfo';
import { RouteParams} from '@angular/router-deprecated';
import { InlineClaimContextComponent} from '../../claimPages/inlineClaimContext/inlineClaimContext.component';
import { InlineClaimProjectComponent} from '../../claimPages/inlineClaimProject/inlineClaimProject.component';
@Component({
selector: 'publication',
//directives: [...ROUTER_DIRECTIVES],
template: `
<div >
<div class="container publication">
<div class="container-header" >
<h2 *ngIf="publicationInfo != null" >{{publicationInfo.title}}</h2 >
<div *ngIf="warningMessage.length > 0" class="alert alert-warning" role="alert">{{warningMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="alert alert-danger" role="alert">{{errorMessage}}</div>
</div>
<div class="row row-offcanvas row-offcanvas-right" >
<div class="col-xs-6 col-sm-9 sidebar-offcanvas" *ngIf="publicationInfo != null">
<p>
{{publicationInfo.authors}} ({{publicationInfo.date}})
</p>
<dl class="dl-horizontal">
<dt *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">Publisher: </dt>
<dd *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">{{publicationInfo.publisher}}</dd>
<dt *ngIf="publicationInfo.journal != undefined && publicationInfo.journal != ''">Journal: </dt>
<dd *ngIf="publicationInfo.journal != undefined && publicationInfo.journal != ''">{{publicationInfo.journal}}</dd>
<dt *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''"> Languages: </dt>
<dd *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''">{{publicationInfo.languages}}</dd>
<dt *ngIf="publicationInfo.types != undefined"> Types: </dt>
<dd *ngIf="publicationInfo.types != undefined">{{publicationInfo.types}}</dd>
<dt *ngIf="publicationInfo.subjects != undefined"> Subjects: </dt>
<dd *ngIf="publicationInfo.subjects != undefined"> {{publicationInfo.subjects}} </dd>
<dt *ngIf="publicationInfo.identifiers != undefined">Identifiers:</dt>
<dd>
<ul class="list-inline">
<li *ngFor="let key of publicationInfo.identifiers.keys()">
{{key}}: {{publicationInfo.identifiers.get(key)}} </li>
</ul>
</dd>
</dl>
<blockquote>
{{publicationInfo.description}}
</blockquote>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#citationsTab">References</a></li>
<li role="presentation"><a data-toggle="tab" href="#dataTab">Related Research Data</a></li>
<li role="presentation"><a data-toggle="tab" href="#similarTab">Similar Publications</a></li>
<li role="presentation" *ngIf="publicationInfo.bioentities != undefined"><a data-toggle="tab" href="#bioentitiesTab">Bioentities</a></li>
</ul>
<div class="tab-content">
<div id="citationsTab" class="tab-pane fade in active panel-body">
<div *ngIf="publicationInfo.references == undefined" class = "alert alert-info " >
There are no references
</div>
<div *ngIf="publicationInfo.references != undefined" >
<div *ngFor="let item of publicationInfo.references">
<p *ngIf=" item != undefined &&item['url'] != undefined">
<a class="custom-external" href="{{item['url']}}" target="_blank">
{{item['text']}}
</a>
</p>
<p *ngIf="item['url'] == undefined">
{{item['text']}}
</p>
</div>
</div>
</div>
<div id="dataTab" class="tab-pane fade panel-body">
<div *ngIf="publicationInfo.relatedResearchData == undefined" class = "alert alert-info " >
There are no related research data
</div>
<table *ngIf="publicationInfo.relatedResearchData != undefined" id="inferredTable" class="table table-striped">
<thead>
<tr role="row">
<th>Title</th>
<th>Trust</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let key of publicationInfo.relatedResearchData.keys()">
<td *ngIf="key != undefined">
<a class="custom-external" href="{{key}}" target="_blank">
{{publicationInfo.relatedResearchData.get(key)[0]}}
</a>
({{publicationInfo.relatedResearchData.get(key)[1]}})
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" [style.width] = "publicationInfo.relatedResearchData.get(key)[2]">
{{publicationInfo.relatedResearchData.get(key)[2]}}
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="similarTab" class="tab-pane fade panel-body">
<div *ngIf="publicationInfo.similarPublications == undefined" class = "alert alert-info " >
There are no similar publications
</div>
<table *ngIf="publicationInfo.similarPublications != undefined" id="similarTable" class="table table-striped">
<thead>
<tr>
<th>Title</th>
<th>Trust</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let key of publicationInfo.similarPublications.keys()">
<td *ngIf="key != undefined">
<a class="custom-external" href="{{key}}" target="_blank">
{{publicationInfo.similarPublications.get(key)[0]}}
</a>
({{publicationInfo.similarPublications.get(key)[1]}})
</td>
<td class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" [style.width] = "publicationInfo.similarPublications.get(key)[2]">
{{publicationInfo.similarPublications.get(key)[2]}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div *ngIf="publicationInfo.bioentities != undefined" id="bioentitiesTab" class="tab-pane fade panel-body">
<table id="bioentitiesTable" class="table table-striped">
<thead>
<tr>
<th>Bio Entity</th>
<th>Site Name</th>
</tr>
</thead>
<div *ngIf="publicationInfo.bioentities != undefined">
<tbody *ngFor="let key of publicationInfo.bioentities.keys()">
<div *ngIf="publicationInfo.bioentities.get(key) != undefined">
<tr *ngFor="let keyIn of publicationInfo.bioentities.get(key).keys()">
<td *ngIf="keyIn != undefined">
<a href="{{publicationInfo.bioentities.get(key).get(keyIn)}}" target="_blank">
{{keyIn}}
</a>
</td>
<td>
{{key}}
</td>
</tr>
</div>
</tbody>
</div>
</table>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3" *ngIf="publicationInfo != null">
<ul class="list-group mainFunctionsBlock">
<li class="list-group-item">
<dl class="functionsSection" *ngIf="publicationInfo.collectedFrom != undefined">
<dt >Collected from</dt>
<dd *ngFor="let key of publicationInfo.collectedFrom.keys()">
<a href="{{publicationInfo.collectedFrom.get(key)}}">
{{key}}
</a>
</dd>
</dl>
</li>
<li class="list-group-item">
<dl class="functionsSection" *ngIf="publicationInfo.collectedFrom != undefined">
<dt class="title">Download from</dt>
<dd class="line" *ngFor="let key of publicationInfo.collectedFrom.keys()">
<a href="{{publicationInfo.collectedFrom.get(key)}}">
{{key}}
</a>
</dd>
</dl>
</li>
<li class="list-group-item">
<dl class="functionsSection" *ngIf="publicationInfo.fundedByProjects != undefined">
<dt class="title">Funded By</dt>
<dd class="line" *ngFor="let key of publicationInfo.fundedByProjects.values()">
<a *ngIf="!key[5]" href="{{publicationInfo.fundedByProjects.get(key)}}">
{{key[0]?key[0]:key[1]}} | {{ (key[4])?key[4]:key[3]}} </a>
<a *ngIf="key[5]" href="{{publicationInfo.fundedByProjects.get(key)}}">
<mark>{{((key[0])?key[0]:key[1])}} | {{ ((key[4])?key[4]:key[3])}} </mark> </a>
</dd>
</dl>
<button (click)="toggleClaimProject()" class = "btn btn-default btn-xs" >Add more Projects</button>
<inline-claim-project *ngIf="result " inline="true" inlineType ="publication" [inlineEntity]="result" (projectAdded)="projectAdded($event)" ></inline-claim-project>
</li>
<li class="list-group-item">
<dl class="functionsSection" *ngIf="publicationInfo.fundedByProjects != undefined">
<dt class="title">Related to </dt>
<dd class="line" >
</dd>
</dl>
<button (click)=" toggleClaimContext()" class = "btn btn-default btn-xs" >Add Contexts</button>
<inline-claim-context inline="true" inlineType ="publication" [inlineEntity]="result" ></inline-claim-context>
</li>
</ul>
</div>
</div>
</div>
</div>
`,
providers:[JSONP_PROVIDERS, PublicationService],
directives:[InlineClaimContextComponent, InlineClaimProjectComponent]
})
export class PublicationComponent {
constructor (private _publicationService: PublicationService, private _routeParams: RouteParams) {
console.info('publication constructor');
this.params = _routeParams;
}
ngOnInit() {
this.getPublicationInfo();
}
publicationInfo: PublicationInfo;
params: RouteParams;
private result ;
private claimInline:string = "none" ;
@ViewChild (InlineClaimProjectComponent) inlineClaimProject : InlineClaimProjectComponent ;
@ViewChild (InlineClaimContextComponent) inlineClaimContext : InlineClaimContextComponent ;
public warningMessage = "";
public errorMessage = "";
getPublicationInfo() {
this.warningMessage = '';
this.errorMessage=""
if(this.params.get("articleId")==null || this.params.get("articleId")==''){
this.warningMessage="No valid publication id";
console.info("novalid");
}else{
console.info("do request");
this._publicationService.getPublicationInfo(this.params.get("articleId")).subscribe(
data => {
this.publicationInfo = data;
this.result = []
let result_ ={id: this.params.get("articleId"), type :"publication", source : "openaire", title: this.publicationInfo.title,url: '', result: '', accessRights: this.publicationInfo.bestlicense, embargoEndDate: ''};
this.result.push(result_);
},
err => {
console.error(err)
console.info("error");
this.errorMessage = 'No publication found';
}
);
}
}
/*
********* Methods for Inline Claim of project / publication *****
*/
toggleClaimProject(){
this.inlineClaimProject.toggle();
}
projectAdded($event){
var projects =$event.value;
if(projects){
for(var i=0; i < projects.length; i++){
if(this.publicationInfo.fundedByProjects == undefined) {
this.publicationInfo.fundedByProjects = new Map<string, string[]>();
}
var project =projects[i];
this.publicationInfo.fundedByProjects.set(project.projectId, new Array<string>());
this.publicationInfo.fundedByProjects.get(project.projectId)[0] = project.projectAcronym;
this.publicationInfo.fundedByProjects.get(project.projectId)[1] = project.projectName;
this.publicationInfo.fundedByProjects.get(project.projectId)[2] =project.selectedFunderId;
this.publicationInfo.fundedByProjects.get(project.projectId)[3] = project.selectedFunderName;
this.publicationInfo.fundedByProjects.get(project.projectId)[5] = "new";
}
}
}
toggleClaimContext(){
this.inlineClaimContext.toggle();
}
contextAdded($event){
var contexts =$event.value;
if(contexts){
for(var i=0; i < contexts.length; i++){
// if(this.publicationInfo.fundedByProjects == undefined) {
// this.publicationInfo.fundedByProjects = new Map<string, string[]>();
// }
// var context =contexts[i];
// this.publicationInfo.fundedByProjects.set(project.projectId, new Array<string>());
// this.publicationInfo.fundedByProjects.get(project.projectId)[0] = project.projectAcronym;
// this.publicationInfo.fundedByProjects.get(project.projectId)[1] = project.projectName;
// this.publicationInfo.fundedByProjects.get(project.projectId)[2] =project.selectedFunderId;
// this.publicationInfo.fundedByProjects.get(project.projectId)[3] = project.selectedFunderName;
}
}
}
}