442 lines
23 KiB
TypeScript
442 lines
23 KiB
TypeScript
import {Component, Input} from '@angular/core';
|
|
import {Router, ActivatedRoute} from '@angular/router';
|
|
import {Title, Meta} from '@angular/platform-browser';
|
|
|
|
import {Observable} from 'rxjs/Observable';
|
|
import {ErrorCodes} from '../utils/properties/errorCodes';
|
|
|
|
import{EnvProperties} from '../utils/properties/env-properties';
|
|
|
|
import {RouterHelper} from '../utils/routerHelper.class';
|
|
import {FetchDataproviders} from '../utils/fetchEntitiesClasses/fetchDataproviders.class';
|
|
import {SearchDataprovidersService} from '../services/searchDataproviders.service';
|
|
import {OrganizationService} from '../services/organization.service';
|
|
import {PiwikService} from '../utils/piwik/piwik.service';
|
|
import { SEOService } from '../sharedComponents/SEO/SEO.service';
|
|
|
|
import {ZenodoInformationClass} from './utils/zenodoInformation.class';
|
|
|
|
@Component({
|
|
selector: 'deposit-result',
|
|
template: `
|
|
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle" >
|
|
<div uk-grid uk-grid>
|
|
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
|
|
<schema2jsonld *ngIf="url" [URL]="url" name="Share {{requestFor}}" type="other"></schema2jsonld>
|
|
|
|
<div class="uk-container uk-margin-top">
|
|
<div class="uk-article-title custom-article-title uk-margin-bottom">
|
|
Share {{requestFor}}
|
|
</div>
|
|
<helper position="top"></helper>
|
|
<div class="uk-grid helper-grid">
|
|
<helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>
|
|
<div class="uk-width-expand">
|
|
<!--div *ngIf="status != errorCodes.LOADING" class="uk-margin-bottom uk-margin-top">
|
|
<h3>See if your institution has a repository </h3>
|
|
|
|
<form class= "uk-grid">
|
|
<div class="uk-width-1-2 ">
|
|
<entities-autocomplete [(properties)]=properties fieldId="organization" (click)="warningMessage = ''" [entityType]="'organization'"
|
|
[depositType]=compatibility [showSelected]=true [placeHolderMessage] = "'Organization name'"
|
|
[title] = "'Organizations'" [multipleSelections]=false (selectedValueChanged)="valueChanged($event)">
|
|
</entities-autocomplete>
|
|
</div>
|
|
<button class=" uk-button portal-button" type="submit" (click)="organizationSelected(selectedId)" >
|
|
Locate
|
|
</button>
|
|
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-animation-fade" role="alert">{{warningMessage}}</div>
|
|
</form>
|
|
</div-->
|
|
|
|
<h4 *ngIf=" organization && (fetchDataproviders.searchUtils.status == errorCodes.DONE ||
|
|
(fetchDataproviders.searchUtils.status == errorCodes.LOADING && !fetchDataproviders.loadPaging && fetchDataproviders.oldTotalResults > 0))"
|
|
class="organization">
|
|
<a *ngIf="organization['url']!=''" href="{{organization.url}}" target="_blank">
|
|
<span><i class="custom-external"></i>{{organization['name']}}</span>
|
|
</a>
|
|
<span *ngIf="organization['url']==''">{{organization['name']}}</span>
|
|
</h4>
|
|
|
|
<div *ngIf="subjectResults" class="uk-width-1-1 uk-margin uk-padding uk-panel uk-background-muted">
|
|
<form class= "uk-margin uk-text-center uk-margin-top">
|
|
<input type="text" [(ngModel)]="subject" class=" uk-input uk-width-1-2" name="subject" placeholder="Search for classifications..." />
|
|
|
|
<button class=" uk-button portal-button" type="submit" (click)="newSubject()" >
|
|
Search
|
|
</button>
|
|
</form>
|
|
<div *ngIf="subject.length > 0" class=" uk-text-center ">
|
|
<span>Keywords: {{subject}}<span>
|
|
<a class=" " (click)="subject=''; newSubject()"> <span aria-hidden="true" class="uk-icon-button icon-button-small ">
|
|
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
|
|
</span>
|
|
</a>
|
|
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="uk-text-meta"
|
|
*ngIf=" fetchDataproviders.searchUtils.status == errorCodes.DONE ||
|
|
(fetchDataproviders.searchUtils.status == errorCodes.LOADING && !fetchDataproviders.loadPaging && fetchDataproviders.oldTotalResults > 0)">
|
|
Please use the information below and contact your repository to deposit your <span class="uk-text-lowercase">{{requestFor}}</span>.
|
|
</p>
|
|
|
|
<div *ngIf="fetchDataproviders.searchUtils.status == errorCodes.DONE ||
|
|
(fetchDataproviders.searchUtils.status == errorCodes.LOADING && !fetchDataproviders.loadPaging && fetchDataproviders.oldTotalResults > 0)"
|
|
class="uk-align-center uk-margin-remove-bottom">
|
|
<search-paging [type]="'content providers'" [(searchUtils)] = "fetchDataproviders.searchUtils" [(results)] = "fetchDataproviders.results"
|
|
[(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues"
|
|
[loadPaging]="fetchDataproviders.loadPaging" [oldTotalResults]="fetchDataproviders.oldTotalResults">
|
|
</search-paging>
|
|
</div>
|
|
|
|
<div *ngIf="status == errorCodes.LOADING || fetchDataproviders.searchUtils.status == errorCodes.LOADING"
|
|
class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span class="loading-gif uk-align-center" ></span>
|
|
</div>
|
|
|
|
<div *ngIf="fetchDataproviders.searchUtils.status == errorCodes.DONE" class=" uk-margin uk-margin-remove-top other-results">
|
|
<div *ngFor="let result of fetchDataproviders.results" [title] = "result.compatibilityUNKNOWN ? 'Incompatible content provider' : ''" [class]="'uk-margin-small-top uk-card uk-padding-small uk-animation-fade '+(result.compatibilityUNKNOWN ? 'li-disabled ' : 'uk-card-default' ) ">
|
|
<h5>
|
|
<span *ngIf="!result.compatibilityUNKNOWN" class="" title ="Compatible Content Provider" >
|
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="check" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline></svg>
|
|
</span>
|
|
<a *ngIf="!result.compatibilityUNKNOWN" [queryParams]="{datasourceId: result.id}" routerLinkActive="router-link-active" routerLink="/search/dataprovider">
|
|
<span *ngIf="result['title'].name" [innerHTML]="result['title'].name"></span>
|
|
<span *ngIf="!result['title'].name">[no title available]</span>
|
|
</a>
|
|
<p *ngIf="result.compatibilityUNKNOWN && result['title'].name" [innerHTML]="result['title'].name"></p>
|
|
<p *ngIf="result.compatibilityUNKNOWN && !result['title'].name">[no title available]</p>
|
|
</h5>
|
|
|
|
<approved-by-community [contentProviderId]="result.id"></approved-by-community>
|
|
<span *ngIf="result['type'] != undefined && result['type'] != ''" class="uk-label custom-label label-blue label-dataprovider" title="Type"> {{result['type']}}</span>
|
|
<span *ngIf="result['compatibility'] != undefined && result['compatibility'] != ''" class="uk-label custom-label label-compatibility" title="Compatibility">{{result.compatibility}}</span>
|
|
|
|
<div *ngIf="subjectResults && result['organizations'] != undefined && result['organizations'].length > 0">
|
|
<span> Organization: </span>
|
|
<span *ngFor="let organization of result['organizations'].slice(0,10) let i=index">
|
|
<!--a *ngIf="organization.url != undefined" href="{{organization.url}}"-->
|
|
<a *ngIf="organization.id" [queryParams]="{organizationId: organization.id}" routerLinkActive="router-link-active" routerLink="/search/organization">
|
|
{{organization.name}}</a><span
|
|
|
|
*ngIf="!organization.id">
|
|
{{organization.name}}</span><span
|
|
|
|
*ngIf="(i < result['organizations'].length-1) && (i < 9)">,</span>
|
|
</span>
|
|
<span *ngIf="result['organizations'].length > 10">...</span>
|
|
</div>
|
|
<div *ngIf="result['countries'] && result['countries'].length > 0">
|
|
Country: <span *ngFor="let country of result['countries'].slice(0,10) let i = index">{{country}}{{(i < ( result['countries'].slice(0,10).length-1))?", ":""}}{{(i == result['countries'].slice(0,10).length-1 && result['countries'].length > 10)?"...":""}}</span>
|
|
</div>
|
|
<div *ngIf="result['websiteURL'] != undefined && result['websiteURL'] != ''">
|
|
<span>Website URL: </span>
|
|
<span>
|
|
<a href="{{result['websiteURL']}}" target="_blank" class="custom-external custom-icon">
|
|
{{result['websiteURL']}}
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div *ngIf="result['OAIPMHURL'] != undefined && result['OAIPMHURL'] != ''">
|
|
<span>OAI-PMH URL: </span>
|
|
<span>
|
|
<a href="{{result['OAIPMHURL']}}" target="_blank" class="custom-external custom-icon">
|
|
{{result['OAIPMHURL']}}
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
<div *ngIf="subjectResults && result['subjects'] && result['subjects'].length > 0">
|
|
Subject: <span *ngFor="let subject of result['subjects'].slice(0,10) let i = index">{{subject}}{{(i < ( result['subjects'].slice(0,10).length-1))?", ":""}}{{(i == result['subjects'].slice(0,10).length-1 && result['subjects'].length > 10)?"...":""}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="!subjectResults">
|
|
<div *ngIf="status == errorCodes.NOT_FOUND || status == errorCodes.ERROR ||
|
|
status == errorCodes.NOT_AVAILABLE || status == errorCodes.NONE" class = "alert alert-warning">
|
|
<div *ngIf="status == errorCodes.NOT_FOUND && organizationId != ''">
|
|
No organization with ID: {{organizationId}} found.
|
|
</div>
|
|
<div *ngIf="status == errorCodes.ERROR && organizationId != ''">
|
|
An error occured.
|
|
</div>
|
|
<span *ngIf="status == errorCodes.NOT_AVAILABLE && organizationId != ''">
|
|
Service temprorarily unavailable. Please try again later.
|
|
</span>
|
|
<div *ngIf="status == errorCodes.NONE">
|
|
No ID for organization.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="status == errorCodes.DONE && fetchDataproviders.searchUtils.status != errorCodes.DONE
|
|
&& fetchDataproviders.searchUtils.status != errorCodes.LOADING" class = "alert alert-warning">
|
|
<span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.ERROR">
|
|
An error occured.
|
|
</span>
|
|
<span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.NOT_AVAILABLE">
|
|
Service temprorarily unavailable. Please try again later.
|
|
</span>
|
|
<span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.OUT_OF_BOUND">
|
|
Requested page out of bounds.
|
|
</span>
|
|
<div *ngIf="!subjectResults">
|
|
No content providers found for institution:
|
|
<a *ngIf="organization['url']!=''" target="_blank" href="{{organization.url}}">
|
|
<span>{{organization['name']}} (<i class="custom-external"></i>)</span>
|
|
</a>
|
|
<span *ngIf="organization['url']==''">{{organization['name']}}</span>
|
|
.
|
|
</div>
|
|
<div *ngIf="subjectResults">
|
|
No content providers found<span *ngIf="subject != ''"> with classification "{{subject}}"</span>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-width-1-5">
|
|
<helper position="right" before="true"></helper>
|
|
|
|
<div class="uk-card uk-card-default uk-card-body portal-card">
|
|
Deposit your {{requestFor}} in
|
|
<a href="{{zenodoInformation.url}}" target="_blank" uk-tooltip="title: Zenodo is OpenAIRE's catch-all repository hosted by CERN.">
|
|
{{zenodoInformation.name}} (<i class="custom-external"></i>)</a>
|
|
<div class="uk-margin-top" *ngIf="zenodoInformation && zenodoInformation.shareInZenodoUrl">
|
|
<a href="{{zenodoInformation.shareInZenodoUrl}}">More Zenodo communities</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!--div *ngIf="fetchDataproviders.results.length > 0" class="uk-card uk-card-default uk-card-body portal-card uk-margin-small-top">
|
|
Compatibility is mpla mpla
|
|
</div-->
|
|
|
|
<helper position="right" before="false"></helper>
|
|
</div>
|
|
</div>
|
|
<button class=" uk-button uk-button-primary uk-margin-small-top" type="submit" (click)="goToDeposit()">
|
|
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span> Back
|
|
</button>
|
|
<helper position="bottom"></helper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
`
|
|
})
|
|
|
|
export class DepositResultComponent {
|
|
@Input() zenodoInformation: ZenodoInformationClass;
|
|
@Input() compatibility: string = '';
|
|
@Input() piwikSiteId = null;
|
|
// Type of entity: Publication or Research Data
|
|
@Input() requestFor: string = "Publications";
|
|
|
|
public organization: {"name": string, "url": string};
|
|
public organizationId: string = "";
|
|
|
|
// Id of the new selected organization to be searched
|
|
public selectedId: string = "";
|
|
|
|
@Input() subjectResults: boolean = false;
|
|
@Input() subject: string = "";
|
|
|
|
public status: number;
|
|
public warningMessage: string = "";
|
|
|
|
public fetchDataproviders : FetchDataproviders;
|
|
public linkToSearchDataproviders: string = "";
|
|
|
|
public parameterNames:string[] =[];
|
|
public parameterValues:string[] =[];
|
|
|
|
public routerHelper:RouterHelper = new RouterHelper();
|
|
public errorCodes:ErrorCodes = new ErrorCodes();
|
|
|
|
sub: any; piwiksub: any;
|
|
properties:EnvProperties;
|
|
url=null;
|
|
|
|
constructor ( private _router: Router,
|
|
private route: ActivatedRoute,
|
|
private _searchDataprovidersService: SearchDataprovidersService,
|
|
private _organizationService: OrganizationService,
|
|
private _meta: Meta,
|
|
private _title: Title,
|
|
private _piwikService:PiwikService,
|
|
private seoService: SEOService) {
|
|
|
|
this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);
|
|
|
|
this.status = this.errorCodes.LOADING;
|
|
|
|
|
|
var title = "Deposit "+this.requestFor;
|
|
var description = "Openaire, repositories, open access, content provider, compatibility, organization, deposit "+ this.requestFor;
|
|
|
|
this.updateTitle(title);
|
|
this.updateDescription(description);
|
|
|
|
}
|
|
ngOnInit() {
|
|
this.route.data
|
|
.subscribe((data: { envSpecific: EnvProperties }) => {
|
|
this.properties = data.envSpecific;
|
|
this.seoService.createLinkForCanonicalURL(this.properties.baseLink+this._router.url, false);
|
|
this.updateUrl(data.envSpecific.baseLink+this._router.url);
|
|
this.url = data.envSpecific.baseLink+this._router.url;
|
|
|
|
if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
|
|
this.piwiksub = this._piwikService.trackView(this.properties, "Deposit "+this.requestFor, this.piwikSiteId).subscribe();
|
|
}
|
|
});
|
|
|
|
this.sub = this.route.queryParams.subscribe(params => {
|
|
this.fetchDataproviders.searchUtils.page = (params['page']=== undefined)?1:+params['page'];
|
|
|
|
if(this.subjectResults) {
|
|
this.status = this.errorCodes.DONE;
|
|
|
|
this.subject = params['subject'];
|
|
if(!this.subject) {
|
|
this.subject = "";
|
|
}
|
|
this.parameterNames.push('subject');
|
|
this.parameterValues.push(this.subject);
|
|
|
|
this.searchDataprovidersBySubject();
|
|
} else {
|
|
if(this.organizationId) {
|
|
this.searchDataproviders();
|
|
} else {
|
|
this.organizationId = params['organizationId'];
|
|
this.parameterNames.push('organizationId');
|
|
this.parameterValues.push(this.organizationId);
|
|
|
|
if(this.organizationId){
|
|
this.getOrganizationInfo();
|
|
}
|
|
}
|
|
this.selectedId = "";
|
|
}
|
|
});
|
|
}
|
|
|
|
ngDoCheck() {
|
|
if(!this.subjectResults && (this.organizationId == "" || this.organizationId == undefined)) {
|
|
this.organizationId = "";
|
|
this.status = this.errorCodes.NONE;
|
|
this.fetchDataproviders.searchUtils.status = this.errorCodes.NONE;
|
|
}
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.sub.unsubscribe();
|
|
if(this.piwiksub){
|
|
this.piwiksub.unsubscribe();
|
|
}
|
|
}
|
|
|
|
public newSubject() {
|
|
this._router.navigate( ['participate/deposit-subject-result'], { queryParams: { "subject": this.subject } } );
|
|
}
|
|
|
|
public searchDataprovidersBySubject() {
|
|
this.parameterNames = [];
|
|
this.parameterValues = [];
|
|
this.parameterNames.push('subject');
|
|
this.parameterValues.push(this.subject);
|
|
|
|
this.fetchDataproviders.getResultsBySubjectsForDeposit( (this.subject =="")?"*":this.subject, this.requestFor, this.fetchDataproviders.searchUtils.page, this.fetchDataproviders.searchUtils.size, this.properties);
|
|
this.linkToSearchDataproviders = this.properties.searchLinkToDataProviders;
|
|
}
|
|
|
|
private searchDataproviders() {
|
|
// if(this.organization != undefined) {
|
|
// this.fetchDataproviders.getResults(this.organization.name, false, 1, 10);
|
|
// } else if(this.organizationId != undefined) {
|
|
this.fetchDataproviders.getResultsForDeposit( this.organizationId,this.requestFor, this.fetchDataproviders.searchUtils.page, this.fetchDataproviders.searchUtils.size, this.properties);
|
|
//}
|
|
this.linkToSearchDataproviders = this.properties.searchLinkToDataProviders;
|
|
}
|
|
|
|
private getOrganizationInfo () {
|
|
this.fetchDataproviders.oldTotalResults = 0;
|
|
this.fetchDataproviders.searchUtils.totalResults = 0;
|
|
|
|
this._organizationService.getOrganizationNameAndUrlById(this.organizationId,this.properties).subscribe(
|
|
data => {
|
|
if(data == null) {
|
|
this.status = this.errorCodes.NOT_FOUND;
|
|
this.fetchDataproviders.searchUtils.status = this.errorCodes.NONE;
|
|
} else {
|
|
this.organization = data;
|
|
this.status = this.errorCodes.DONE;
|
|
this.searchDataproviders();
|
|
}
|
|
},
|
|
err => {
|
|
//console.log(err)
|
|
this.handleError("Error getting organization name and url for id: "+this.organizationId, err);
|
|
|
|
this.fetchDataproviders.searchUtils.status = this.errorCodes.NONE;
|
|
if(err.status == '404') {
|
|
this.status = this.errorCodes.NOT_FOUND;
|
|
} else if(err.status == '500') {
|
|
this.status = this.errorCodes.ERROR;
|
|
} else {
|
|
this.status = this.errorCodes.NOT_AVAILABLE;
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
public goToDeposit() {
|
|
if(this.requestFor == "Publications") {
|
|
this._router.navigate( ['participate/deposit-publications'] );
|
|
} else if(this.requestFor == "Research Data") {
|
|
this._router.navigate( ['participate/deposit-datasets'] );
|
|
}
|
|
}
|
|
|
|
public valueChanged($event){
|
|
this.selectedId = $event.value;
|
|
}
|
|
|
|
public organizationSelected(id: string) {
|
|
if(id && id.length > 0 && id != this.organizationId){
|
|
this.organization = null;
|
|
this.status = this.errorCodes.LOADING;
|
|
|
|
if(this.requestFor == "Publications") {
|
|
this._router.navigate( ['participate/deposit-publications-result'], { queryParams: { "organizationId": id } } );
|
|
} else if(this.requestFor == "Research Data") {
|
|
this._router.navigate( ['participate/deposit-datasets-result'], { queryParams: { "organizationId": id } } );
|
|
}
|
|
} else {
|
|
this.warningMessage = "No new organization selected";
|
|
}
|
|
}
|
|
|
|
private updateDescription(description:string) {
|
|
this._meta.updateTag({content:description},"name='description'");
|
|
this._meta.updateTag({content:description},"property='og:description'");
|
|
}
|
|
private updateTitle(title:string){
|
|
var _prefix ="OpenAIRE | ";
|
|
var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title);
|
|
this._title.setTitle(_title);
|
|
this._meta.updateTag({content:_title},"property='og:title'");
|
|
}
|
|
private updateUrl(url:string){
|
|
this._meta.updateTag({content:url},"property='og:url'");
|
|
}
|
|
|
|
private handleError(message: string, error) {
|
|
console.error("Deposit Result Page: "+message, error);
|
|
}
|
|
}
|