106 lines
4.4 KiB
TypeScript
106 lines
4.4 KiB
TypeScript
import {Component} from '@angular/core';
|
|
import {PluginBaseComponent, PluginEditEvent} from "../../utils/base-plugin.component";
|
|
import {HttpClient} from "@angular/common/http";
|
|
|
|
export class PluginOpenAIREProducts{
|
|
title:string ="OpenAIRE services for your community";
|
|
serviceIds = {"zenodo":true,"graph":true,"explore":true};
|
|
constructor() {
|
|
}
|
|
}
|
|
@Component({
|
|
selector: 'plugin-openaire-products',
|
|
template: `
|
|
<div *ngIf="pluginDefaultObject">
|
|
<div [class.fieldEditMode]="editMode">
|
|
<ng-container *ngIf="editMode">
|
|
<plugin-field-edit [value]="pluginObject && pluginObject.title?pluginObject.title:pluginDefaultObject.title"
|
|
type="text" field="title" (editClicked)="pluginEditEvent = $event" (changed)="valueChanged($event)" ></plugin-field-edit>
|
|
</ng-container>
|
|
|
|
<h3 [class.uk-invisible]=" (pluginEditEvent && pluginEditEvent.field == 'title')">
|
|
{{pluginObject && pluginObject.title?pluginObject.title:pluginDefaultObject.title}} </h3>
|
|
</div>
|
|
<div [class.fieldEditMode]="editMode && !editTemplate">
|
|
<div class="uk-child-width-1-3 uk-grid">
|
|
<ng-container *ngFor="let service of services">
|
|
<ng-container
|
|
*ngIf="editMode?services:(pluginObject?pluginObject.serviceIds[service.id]:pluginDefaultObject.serviceIds[service.id])">
|
|
|
|
<div class="uk-padding-xsmall">
|
|
|
|
<div class="uk-card uk-card-default ">
|
|
<div class="uk-card-media-top">
|
|
<img [src]="service.logo" width="100%" height="" alt="" class="uk-height-max-small">
|
|
</div>
|
|
<div class=" uk-height-max-large uk-padding-small">
|
|
<div class="uk-text-primary">{{service.name}}</div>
|
|
<div class="uk-h5 uk-margin-remove-vertical">{{service.tagline}}</div>
|
|
<div [innerHTML]="service.description" class="uk-text-truncate uk-text-small uk-text-meta"></div>
|
|
<a class="uk-link-text" [href]="service.webpage" target="_blank">Read more</a>
|
|
<ng-container *ngIf="editMode && !editTemplate">
|
|
<div class="uk-float-right">
|
|
<plugin-field-edit [value]=" pluginObject?pluginObject.serviceIds[service.id]:pluginDefaultObject.serviceIds[service.id]"
|
|
type="boolean" field="serviceIds" (editClicked)="pluginEditEvent = $event" (changed)="serviceChanged(service.id,$event)" >
|
|
</plugin-field-edit>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
|
|
})
|
|
export class PluginOpenaireProductsComponent extends PluginBaseComponent{
|
|
services = [];
|
|
excludedServiceIds = ["openaire_login","research_community_dashboard"]
|
|
get pluginObject():PluginOpenAIREProducts{
|
|
return this.plugin?this.plugin.object:null;
|
|
}
|
|
get pluginDefaultObject():PluginOpenAIREProducts{
|
|
return this.pluginTemplate?this.pluginTemplate.object:null;
|
|
}
|
|
constructor(http:HttpClient) {
|
|
super()
|
|
this.subscriptions.push(http.get("https://explore.openaire.eu/cache/get?url="+ encodeURIComponent("https://catalogue.openaire.eu/api/catalogue-resources?from=0&quantity=100&order=asc&orderField=name")).subscribe(res =>{
|
|
console.log(res)
|
|
this.services = res["results"].map( x=> {
|
|
x.id = x.id.split("openaire.")[1]
|
|
return x;
|
|
});
|
|
this.services = this.services.filter(x=> this.excludedServiceIds.indexOf(x.id) ==-1);
|
|
}))
|
|
|
|
}
|
|
ngOnInit(): void {
|
|
if(this.pluginTemplate && (!this.pluginDefaultObject || !this.pluginDefaultObject.title)){
|
|
this.pluginTemplate.object = new PluginOpenAIREProducts();
|
|
}
|
|
}
|
|
|
|
|
|
serviceChanged(id,$event:PluginEditEvent){
|
|
if(this.editTemplate){
|
|
this.pluginTemplate.object.serviceIds[id]=$event.value;
|
|
$event.value =this.pluginTemplate.object.serviceIds;
|
|
}else{
|
|
if(!this.plugin.object){
|
|
this.plugin.object =this.pluginDefaultObject? Object.assign(this.pluginDefaultObject): new PluginOpenAIREProducts();
|
|
}
|
|
console.log(this.plugin.object,this.plugin.object.serviceIds)
|
|
this.plugin.object.serviceIds[id]=$event.value;
|
|
$event.value =this.plugin.object.serviceIds;
|
|
}
|
|
|
|
this.valuesChanged.emit($event)
|
|
}
|
|
}
|