openaire-library/deposit/depositResult.component.ts

317 lines
14 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="Deposit {{requestFor}}" type="other"></schema2jsonld>
<div class="uk-container uk-margin-top">
<!--div class="uk-article-title custom-article-title">
Deposit {{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 || (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="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-->
<div *ngIf="fetchDataproviders.searchUtils.totalResults > 0">
<h2 *ngIf="organization" 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>
</h2>
</div>
<div *ngIf="fetchDataproviders.searchUtils.totalResults > 0">
<p class="uk-text-meta">Please use the information below and contact your repository to deposit your <span class="uk-text-lowercase">{{requestFor}}</span>.</p>
<!--showDataProviders [dataProviders]=dataProviders></showDataProviders-->
<div class = "uk-text-right" *ngIf = "fetchDataproviders.searchUtils.totalResults > 10">
<!--a [href] = "linkToSearchDataproviders">
View all {{fetchDataproviders.searchUtils.totalResults | number}} results <span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
</span>
</a-->
<a [queryParams]="routerHelper.createQueryParams(['organizationId', 'og'], [organizationId, 'and'])"
routerLinkActive="router-link-active" [routerLink]="linkToSearchDataproviders" class="uk-button uk-button-text">
View all {{fetchDataproviders.searchUtils.totalResults | number}} results
</a>
</div>
<search-result [(results)]="fetchDataproviders.results"
[(status)]= "fetchDataproviders.searchUtils.status"
type="dataprovider" urlParam="datasourceId" [showOrganizations] = false
[custom_class]="'other-results'" [(properties)] =properties>
</search-result>
</div>
<div *ngIf="(fetchDataproviders.searchUtils.totalResults == 0 && status == errorCodes.DONE)
|| status == errorCodes.NOT_FOUND || status == errorCodes.ERROR || status == errorCodes.NOT_AVAILABLE" class = "alert alert-warning">
<div *ngIf="organization">
<span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.ERROR">
An error occured.
</span>
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="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="organizationId == ''">
No ID for organization.
</div>
<!--You can still deposit your {{requestFor}} in
<a href="{{zenodo}}" target="_blank">OpenAIRE's Zenodo catch-all repository (<i class="custom-external"></i>)</a>
hosted by CERN.-->
</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>
<helper position="right" before="false"></helper>
</div>
<!--helper position="right" styleName=" uk-width-1-5"></helper-->
</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 = "";
public status: number;
public warningMessage: string = "";
public fetchDataproviders : FetchDataproviders;
public linkToSearchDataproviders: 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 description = "Deposit "+this.requestFor;
var title = "Openaire, repositories, open access, content provider, compatibility, organization, deposit "+ this.requestFor;
this.seoService.createLinkForCanonicalURL(false);
this.updateTitle(title);
this.updateDescription(description);
}
ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
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();
}
});
console.info('depositResult init');
this.sub = this.route.queryParams.subscribe(params => {
this.organizationId = params['organizationId'];
console.info("Id is :"+this.organizationId);
if(this.organizationId){
this.getOrganizationInfo();
}
this.selectedId = "";
});
}
ngDoCheck() {
if(this.organizationId == "" || this.organizationId == undefined) {
this.organizationId = "";
this.status = this.errorCodes.ERROR;
}
}
ngOnDestroy() {
this.sub.unsubscribe();
if(this.piwiksub){
this.piwiksub.unsubscribe();
}
}
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, 1, 10, this.properties);
//}
this.linkToSearchDataproviders = this.properties.searchLinkToDataProviders;
}
private getOrganizationInfo () {
console.info("inside getOrganizationInfo of component");
this._organizationService.getOrganizationInfo(this.organizationId,this.properties).subscribe(
data => {
if(data == null) {
this.status = this.errorCodes.NOT_FOUND;
} else {
this.organization = data.title;
this.status = this.errorCodes.DONE;
this.searchDataproviders();
}
},
err => {
//console.log(err)
if(err.status == '404') {
this.status = this.errorCodes.NOT_FOUND;
console.info("not found");
} else if(err.status == '500') {
this.status = this.errorCodes.ERROR;
console.info("error");
} else {
this.status = this.errorCodes.NOT_AVAILABLE;
console.info("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) {
console.info("organization selected");
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'");
}
}