[plugins-functionality | WIP] add graph info
This commit is contained in:
argirok
parent
e177918b5d
commit
e2b34b13ee
|
|
@ -217,7 +217,7 @@
|
|||
<div class="uk-flex uk-flex-middle" *ngIf="resultCounts && resultCounts.other > 0 && isEntityEnabled('orp')
|
||||
&& isRouteEnabled(searchLinkToResults) &&
|
||||
isVisible('other')">
|
||||
<icon [name]="'integration_instructions'" [type]="'outlined'" [ratio]="2" [flex]="true"
|
||||
<icon [name]="'apps'" [type]="'outlined'" [ratio]="2" [flex]="true"
|
||||
[customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
|
||||
<a [queryParams]="getParamsForSearchLink('other')" [routerLink]="properties.searchLinkToAdvancedResults"
|
||||
class="uk-link-reset uk-flex uk-flex-column">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<div class="uk-background-muted">
|
||||
<div class="uk-position-relative">
|
||||
<div class="uk-section uk-section-large">
|
||||
<div class="uk-container">
|
||||
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
|
||||
<div>
|
||||
<div style="max-width: 550px;">
|
||||
<h2>{{pluginObject.title}}</h2>
|
||||
<div class="">
|
||||
{{pluginObject.paragraph1}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<img class="uk-visible@m uk-height-1-1 uk-position-top-right"
|
||||
src="assets/common-assets/common/graph-nodes.svg" alt="Graph nodes" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-section uk-padding-remove-top">
|
||||
<div class="uk-container">
|
||||
<div class="uk-width-1-2@m uk-margin-auto uk-margin-small-top uk-text-center" style="max-width: 600px;">
|
||||
<div>
|
||||
{{pluginObject.paragraph2}}
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
{{pluginObject.contributeLine}}
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<a [href]="pluginObject.url.url" [target]="pluginObject.url.target"
|
||||
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
|
||||
{{pluginObject.url.linkText}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {PluginBaseComponent, PluginBaseInfo, PluginURL} from "../../utils/base-plugin.component";
|
||||
|
||||
export class PluginGraphInfo extends PluginBaseInfo{
|
||||
title:string ="How? It's about open data and collaboration"
|
||||
paragraph1:string = `Gateway is built on the OpenAIRE Graph, one of the largest open scholarly record collections worldwide. Conceived as a public and transparent good, populated out of data sources trusted by scientists, the OpenAIRE Graph brings discovery, monitoring, and assessment of science back in the hands of the scientific community. `;
|
||||
paragraph2:string = "Within a constantly emerging scholarly communication environment, the OpenAIRE Graph is a moving target, continuously integrating new sources, new types or research objects, and embedding access measures. We therefore welcome the community to work with us to improve all its aspects: its coverage (geographic and thematic), quality (disambiguation and semantics) and access (APIs). ";
|
||||
contributeLine:string = "Find information about the OpenAIRE Graph, how to test it and contribute to improving it. ";
|
||||
url:PluginURL= new PluginURL("https://www.openaire.eu/blogs/the-openaire-research-graph","Learn more. Contribute")
|
||||
|
||||
compare(oldObject): any {
|
||||
let newObj= super.compare(oldObject);
|
||||
console.log(newObj)
|
||||
return newObj;
|
||||
}
|
||||
}
|
||||
@Component({
|
||||
selector: 'plugin-graph-info',
|
||||
templateUrl: 'plugin-graph-info.component.html'
|
||||
})
|
||||
export class PluginGraphInfoComponent extends PluginBaseComponent<PluginGraphInfo>{
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
|
||||
import {PluginGraphInfo} from "./plugin-graph-info.component";
|
||||
|
||||
@Component({
|
||||
selector: 'plugin-graph-info-form',
|
||||
template: `
|
||||
<div *ngIf="pluginObject" class="uk-padding-xsmall">
|
||||
<plugin-field-edit [value]="pluginObject.title"
|
||||
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
|
||||
<div class="uk-margin-top">
|
||||
<plugin-field-edit [value]="pluginObject.paragraph1"
|
||||
type="textarea" field="paragraph1" (changed)="valueChanged($event)"></plugin-field-edit>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<plugin-field-edit [value]="pluginObject.paragraph2" class="uk-margin-xsmall-top"
|
||||
type="textarea" field="paragraph2" (changed)="valueChanged($event)"></plugin-field-edit>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<plugin-field-edit [value]="pluginObject.contributeLine" class="uk-margin-xsmall-top"
|
||||
type="text" field="contributeLine" (changed)="valueChanged($event)"></plugin-field-edit>
|
||||
</div>
|
||||
<div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Link</div>
|
||||
<div class="uk-margin-small-top">
|
||||
<plugin-field-edit [value]=" pluginObject.url.url"
|
||||
type="text" field="url"
|
||||
(changed)="urlValueChanged($event)"></plugin-field-edit>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<plugin-field-edit [value]=" pluginObject.url.linkText"
|
||||
type="text" field="linkText" placeholder="Link text"
|
||||
(changed)="urlValueChanged($event)"></plugin-field-edit>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
|
||||
})
|
||||
export class PluginGraphInfoFormComponent extends PluginBaseFormComponent<PluginGraphInfo> {
|
||||
constructor() {
|
||||
super()
|
||||
|
||||
}
|
||||
|
||||
urlValueChanged($event: PluginEditEvent) {
|
||||
|
||||
this.pluginObject.url[$event.field] = $event.value;
|
||||
$event.value = this.pluginObject.url;
|
||||
this.valuesChanged.emit({field: "url", value: $event.value, type: 'parent'})
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {PluginsService} from "../../../../services/plugins.service";
|
||||
import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module";
|
||||
import {InputModule} from "../../../../sharedComponents/input/input.module";
|
||||
import {PluginGraphInfoComponent} from "./plugin-graph-info.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule, PluginFieldEditModule, InputModule
|
||||
],
|
||||
providers: [
|
||||
PluginsService
|
||||
],
|
||||
declarations: [PluginGraphInfoComponent],
|
||||
exports: [PluginGraphInfoComponent]
|
||||
})
|
||||
export class PluginGraphInfoModule {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {PluginsFormComponent} from "./pluginsForm.component";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', component: PluginsFormComponent}
|
||||
])
|
||||
]
|
||||
})
|
||||
export class PluginsFormRoutingModule { }
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<div class="uk-flex">
|
||||
<aside id="sidebar_main" class="uk-sticky" uk-sticky="start: 0; end: .sidebar_main_swipe">
|
||||
<div sidebar-content>
|
||||
<div class="back">
|
||||
<a *ngIf="!editSubmenuOpen" (click)="editView = false; selectedTemplate = null; selectedPlugin = null;"
|
||||
class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<div class="uk-width-auto">
|
||||
<icon name="west" ratio="1.3"
|
||||
[flex]="true"></icon>
|
||||
</div>
|
||||
<span class="uk-text-small">Plugins list</span>
|
||||
</a>
|
||||
<div *ngIf="editSubmenuOpen" class="back uk-margin-bottom">
|
||||
<a (click)="editSubmenuOpen = false" class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<div class="uk-width-auto">
|
||||
<icon name="west" ratio="1.3"
|
||||
[flex]="true"></icon>
|
||||
</div>
|
||||
<span class="uk-text-small">Plugin Options</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div *ngIf="templateForm" class="uk-width-auto uk-margin-top uk-margin-left">
|
||||
<button class="uk-button uk-button-default uk-margin-right"
|
||||
(click)="reset()" [class.uk-disabled]="!templateForm.dirty"
|
||||
[disabled]="!templateForm.dirty || showLoading">Reset
|
||||
</button>
|
||||
<button class="uk-button uk-button-primary"
|
||||
[class.uk-disabled]="templateForm.invalid || !templateForm.dirty || templateForm.disabled"
|
||||
(click)="saveConfirmed(index)"
|
||||
[disabled]="templateForm.invalid ||!templateForm.dirty || templateForm.disabled || showLoading">Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu_section uk-margin-top uk-margin-left">
|
||||
|
||||
|
||||
<form *ngIf="!selectTemplateView" [formGroup]="templateForm" >
|
||||
<div *ngIf="!editSubmenuOpen" class="uk-text-small uk-margin-small-left">Enable
|
||||
<mat-slide-toggle [checked]="templateForm.get('active').value"
|
||||
(change)="templateForm.get('active').setValue($event.checked); templateForm.markAsDirty()"></mat-slide-toggle>
|
||||
</div>
|
||||
<plugin-wrapper-form [pluginTemplate]="selectedTemplate" [plugin]="this.templateForm.getRawValue()"
|
||||
(changed)="pluginFieldChanged($event)"
|
||||
[pluginObject]="this.selectedPlugin.object"
|
||||
[editSubmenuOpen]="editSubmenuOpen" ></plugin-wrapper-form>
|
||||
<ng-container *ngIf="selectedTemplate || selectedPlugin">
|
||||
<div *ngIf="attrFormArray.controls.length > 0"
|
||||
class="uk-heading-divider uk-text-small uk-width-1-1 uk-margin-bottom uk-text-meta">
|
||||
<div class="uk-grid">
|
||||
<div>Plugin settings</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngFor="let attrForm of attrFormArray.controls; let i=index"
|
||||
class="uk-width-1-1 uk-grid uk-child-width-1-2 uk-margin-top" uk-grid>
|
||||
<div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'text'" input
|
||||
[formInput]="attrForm.get('value')"
|
||||
[placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="text"></div>
|
||||
<div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'URL'" input
|
||||
[formInput]="attrForm.get('value')"
|
||||
[placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="URL"
|
||||
[validators]="urlValidator"></div>
|
||||
<div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'boolean'" input
|
||||
[formInput]="attrForm.get('value')"
|
||||
[placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="select"
|
||||
[options]="[{label: 'yes', value:true}, {label: 'no', value:false}]"></div>
|
||||
<div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'HTML'"
|
||||
class="uk-width-1-1">
|
||||
<label>
|
||||
{{selectedTemplate.settings[attrForm.get('key').value].name}}:
|
||||
</label>
|
||||
<ckeditor [readonly]="false"
|
||||
debounce="500"
|
||||
[formControl]="attrForm.get('value')"
|
||||
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
|
||||
removeButtons: 'Save,NewPage,DocProps,Preview,Print,' +
|
||||
'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
|
||||
'CreateDiv,Flash,PageBreak,' +
|
||||
'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',
|
||||
extraPlugins: 'divarea'}">
|
||||
</ckeditor>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div page-content class="uk-width-1-1">
|
||||
<div inner>
|
||||
<div> <!--class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">-->
|
||||
|
||||
<div *ngIf="showLoading" class="uk-position-center">
|
||||
<loading></loading>
|
||||
</div>
|
||||
<ng-container *ngIf="editView">
|
||||
<plugin-wrapper *ngIf="this.templateForm" [pluginTemplate]="selectedTemplate"
|
||||
[plugin]="this.templateForm.getRawValue()"
|
||||
[pluginObject]="this.selectedPlugin.object"
|
||||
class="uk-width-1-1"></plugin-wrapper>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,421 @@
|
|||
import {Component, ElementRef, OnInit} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {HelpContentService} from "../../../services/help-content.service";
|
||||
import {
|
||||
FormArray,
|
||||
FormGroup,
|
||||
UntypedFormArray,
|
||||
UntypedFormBuilder,
|
||||
UntypedFormGroup,
|
||||
ValidatorFn,
|
||||
Validators
|
||||
} from "@angular/forms";
|
||||
import {Page} from "../../../utils/entities/adminTool/page";
|
||||
import {EnvProperties} from '../../../utils/properties/env-properties';
|
||||
import {HelperFunctions} from "../../../utils/HelperFunctions.class";
|
||||
import {Subscriber} from "rxjs";
|
||||
import {properties} from "../../../../../environments/environment";
|
||||
import {PortalUtils} from "../../portal/portalHelper";
|
||||
import {Option} from "../../../sharedComponents/input/input.component";
|
||||
import {Title} from "@angular/platform-browser";
|
||||
import {ClearCacheService} from "../../../services/clear-cache.service";
|
||||
import {NotificationHandler} from "../../../utils/notification-handler";
|
||||
import {PluginsService} from "../../../services/plugins.service";
|
||||
import {Plugin} from "../../../utils/entities/adminTool/plugin";
|
||||
import {StringUtils} from "../../../utils/string-utils.class";
|
||||
import {Portal} from "../../../utils/entities/adminTool/portal";
|
||||
import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
|
||||
import {PluginUtils} from "../utils/pluginUtils";
|
||||
import {CommunityService} from "../../../connect/community/community.service";
|
||||
import {CommunityInfo} from "../../../connect/community/communityInfo";
|
||||
import {PluginEditEvent} from "../utils/base-plugin.form.component";
|
||||
|
||||
@Component({
|
||||
selector: 'plugins-form',
|
||||
templateUrl: './pluginsForm.component.html',
|
||||
})
|
||||
export class PluginsFormComponent implements OnInit {
|
||||
private selectedId: string;
|
||||
public pluginsByPlacement: Map<string,{plugin:Plugin, template:PluginTemplate}[]> = new Map();
|
||||
public plugins: Plugin[] = [];
|
||||
public pluginTemplates: PluginTemplate[] = [];
|
||||
public selectedTemplate: PluginTemplate = null;
|
||||
public selectedPlugin: Plugin = null;
|
||||
public editView = false;
|
||||
public selectTemplateView = false;
|
||||
public templateForm: UntypedFormGroup;
|
||||
public pagesCtrl: UntypedFormArray;
|
||||
urlValidator: ValidatorFn = StringUtils.urlValidator;
|
||||
private searchText: RegExp = new RegExp('');
|
||||
public keyword: string = "";
|
||||
public properties: EnvProperties = properties;
|
||||
public formPages: Page[] = [];
|
||||
public showLoading: boolean = true;
|
||||
private subscriptions: any[] = [];
|
||||
public allPages: Option[] = [];
|
||||
public pluginUtils = new PluginUtils();
|
||||
selectedCommunityPid = null;
|
||||
public portalUtils: PortalUtils = new PortalUtils();
|
||||
private index: number;
|
||||
public portal: string;
|
||||
public selectedPageId: string;
|
||||
public community: Portal;
|
||||
public page: Page;
|
||||
public templateView = false;
|
||||
public templateCode:string = null;
|
||||
public template;
|
||||
public selectedPlacementView = "all";
|
||||
communityInfo:CommunityInfo = null;
|
||||
editSubmenuOpen = false;
|
||||
constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router,
|
||||
private communityService: CommunityService,
|
||||
private title: Title, private _helpContentService: HelpContentService,
|
||||
private _pluginsService: PluginsService, private _fb: UntypedFormBuilder,
|
||||
private _clearCacheService: ClearCacheService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.title.setTitle('Administrator Dashboard | Plugins');
|
||||
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
|
||||
community => {
|
||||
this.communityInfo = community;
|
||||
}));
|
||||
this.subscriptions.push(this.route.params.subscribe(params => {
|
||||
|
||||
this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
|
||||
this.selectedCommunityPid = params.community;
|
||||
|
||||
this.subscriptions.push(this.route.queryParams.subscribe(params => {
|
||||
HelperFunctions.scroll();
|
||||
this.selectedPageId = params['pageId'];
|
||||
if (this.portal && this.selectedPageId) {
|
||||
this.getPage(this.selectedPageId);
|
||||
}
|
||||
if (!this.selectedPageId && !this.templateView) {
|
||||
this._router.navigate(['../pages'], {relativeTo: this.route});
|
||||
}
|
||||
}));
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
} else if (value instanceof Function) {
|
||||
value();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getTemplateById(id) {
|
||||
for (let template of this.pluginTemplates) {
|
||||
if (template._id == id) {
|
||||
return template;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getPage(pageId: string) {
|
||||
this.showLoading = true;
|
||||
this.subscriptions.push(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal).subscribe(
|
||||
page => {
|
||||
if (this.properties.adminToolsPortalType != page.portalType) {
|
||||
this._router.navigate(['./pageContents']);
|
||||
} else {
|
||||
this.page = page;
|
||||
this.getPagePlugins();
|
||||
}
|
||||
},
|
||||
error => this.handleError('System error retrieving page', error)));
|
||||
}
|
||||
|
||||
getPagePlugins() {
|
||||
this.showLoading = true;
|
||||
this.subscriptions.push(this._pluginsService.getPluginTemplatesByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe(
|
||||
templates => {
|
||||
this.pluginTemplates = templates;
|
||||
|
||||
this.subscriptions.push(this._pluginsService.getPluginsByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe(
|
||||
plugins => {
|
||||
this.plugins = plugins;
|
||||
this.pluginsByPlacement = new Map();
|
||||
for(let pos of this.pluginUtils.placementsOptions){
|
||||
this.pluginsByPlacement.set(pos.value,[]);
|
||||
}
|
||||
let self = this;
|
||||
this.pluginTemplates.forEach(_ => {
|
||||
let plugin:Plugin = null;
|
||||
for(let pl of plugins){
|
||||
if (pl.templateId == _._id){
|
||||
plugin = pl;
|
||||
}
|
||||
}
|
||||
if(!plugin){
|
||||
plugin = new Plugin(this.selectedPageId, this.selectedCommunityPid,_);
|
||||
this.plugins.push(plugin);
|
||||
}
|
||||
plugin.object = PluginUtils.initializeObjectAndCompare(_.code,plugin.object)
|
||||
this.pluginsByPlacement.get(plugin.placement).push({plugin: plugin, template: _ });
|
||||
});
|
||||
for(let placement of this.pluginUtils.placementsOptions){
|
||||
this.pluginsByPlacement.get(placement.value).sort(function (a, b) {
|
||||
return a.plugin.order - b.plugin.order;
|
||||
})
|
||||
}
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving plugins', error)));
|
||||
|
||||
},
|
||||
error => this.handleError('System error retrieving templates', error)));
|
||||
}
|
||||
|
||||
public edit(plugin:Plugin, template:PluginTemplate, placement, index) {
|
||||
this.editView = true;
|
||||
this.selectedPlugin = JSON.parse(JSON.stringify(plugin)); // deep copy object with nested objects
|
||||
this.selectedTemplate = template;
|
||||
this.index = index;
|
||||
this.pagesCtrl = this._fb.array([], Validators.required);
|
||||
this.templateForm = this._fb.group({
|
||||
_id: this._fb.control(plugin._id),
|
||||
pid: this._fb.control(this.selectedCommunityPid),
|
||||
page: this._fb.control(plugin.page),
|
||||
templateCode: this._fb.control(plugin.templateCode, Validators.required),
|
||||
templateId: this._fb.control(plugin.templateId, Validators.required),
|
||||
placement: this._fb.control(plugin.placement),
|
||||
order: this._fb.control(plugin.order),
|
||||
active: this._fb.control(plugin.active),
|
||||
values: this._fb.array([]),
|
||||
});
|
||||
|
||||
if (template.settings) {
|
||||
for (let attrKey of Object.keys(template.settings)) {
|
||||
(this.templateForm.get("values") as FormArray).push(this._fb.group({
|
||||
'key': this._fb.control(attrKey),
|
||||
'value': this._fb.control(plugin.settingsValues[attrKey]?plugin.settingsValues[attrKey]:template.settings[attrKey].value)
|
||||
}
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public newPluginSelectTemplate() {
|
||||
this.selectedPlugin = null;
|
||||
this.editView = true;
|
||||
if(!this.templateView) {
|
||||
this.selectedTemplate = null;
|
||||
this.selectTemplateView = true;
|
||||
}else{
|
||||
this.newPlugin( Object.assign({}, this.template));
|
||||
}
|
||||
}
|
||||
|
||||
public newPlugin(template) {
|
||||
this.selectedTemplate = template;
|
||||
this.templateForm = this._fb.group({
|
||||
_id: this._fb.control(null),
|
||||
pid: this._fb.control(this.selectedCommunityPid),
|
||||
page: this._fb.control(this.selectedPageId),
|
||||
code: this._fb.control(this.selectedTemplate.code, Validators.required),
|
||||
placement: this._fb.control(this.selectedTemplate.placement),
|
||||
order: this._fb.control(""),
|
||||
active: this._fb.control(false),
|
||||
isPriorTo: this._fb.control(false),
|
||||
values: this._fb.array([]),
|
||||
object: this._fb.control({})
|
||||
});
|
||||
for (let attrKey of Object.keys(this.selectedTemplate.settings)) {
|
||||
(this.templateForm.get("values") as FormArray).push(this._fb.group({
|
||||
key: this._fb.control(attrKey),
|
||||
value: this._fb.control(this.selectedTemplate.settings[attrKey].value ? this.selectedTemplate.settings[attrKey].value : ""),
|
||||
}));
|
||||
|
||||
}
|
||||
this.selectTemplateView = false;
|
||||
|
||||
}
|
||||
|
||||
public saveConfirmed(index) {
|
||||
this.showLoading = true;
|
||||
let plugin: Plugin = <Plugin>this.templateForm.getRawValue();
|
||||
plugin.object = this.selectedPlugin.object;
|
||||
plugin.settingsValues = new Map<string, string>();
|
||||
for (let fields of this.templateForm.getRawValue().values) {
|
||||
plugin.settingsValues[fields.key] = fields.value;
|
||||
}
|
||||
let update = (plugin._id) ? true : false;
|
||||
this.savePlugin(plugin,update, this.index)
|
||||
}
|
||||
public savePlugin(plugin, update, index){
|
||||
this.subscriptions.push(this._pluginsService.savePlugin(plugin, this.properties.adminToolsAPIURL).subscribe(
|
||||
saved => {
|
||||
this.savedSuccessfully(saved, update, index);
|
||||
this.editView = false;
|
||||
this.selectTemplateView = false;
|
||||
this.selectedTemplate = null;
|
||||
this.selectedPlugin = null;
|
||||
},
|
||||
error => this.handleUpdateError("System error creating template", error)
|
||||
));
|
||||
}
|
||||
|
||||
public savedSuccessfully(plugin: Plugin, update: boolean, index) {
|
||||
console.log(plugin.placement, index, update)
|
||||
if (update) {
|
||||
this.pluginsByPlacement.get(plugin.placement)[index].plugin = plugin;
|
||||
} else {
|
||||
this.plugins.push(plugin);
|
||||
}
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
public filterPlugins(plugin: Plugin, template: PluginTemplate): boolean {
|
||||
let values =[];
|
||||
for(let key of this.getKeys(plugin.settingsValues)){
|
||||
values.push(plugin.settingsValues[key]);
|
||||
}
|
||||
return this.searchText.toString() == '' || (plugin.templateCode + ' ' +values.join(' ') + (template?(template.name + ' ' +template.description):'')).match(this.searchText) != null;
|
||||
}
|
||||
|
||||
|
||||
handleUpdateError(message: string, error = null) {
|
||||
if (error) {
|
||||
console.log('Server responded: ' + error);
|
||||
}
|
||||
NotificationHandler.rise(message, 'danger');
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
handleError(message: string, error = null) {
|
||||
if (error) {
|
||||
console.log('Server responded: ' + error);
|
||||
}
|
||||
NotificationHandler.rise(message, 'danger');
|
||||
this.showLoading = false;
|
||||
}
|
||||
|
||||
getPages() {
|
||||
this.showLoading = true;
|
||||
this.subscriptions.push(this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe(
|
||||
pages => {
|
||||
this.allPages = [];
|
||||
pages.forEach(page => {
|
||||
this.allPages.push({
|
||||
label: page.name + " [" + page.portalType + "]",
|
||||
value: page
|
||||
});
|
||||
});
|
||||
this.showLoading = false;
|
||||
},
|
||||
error => this.handleError('System error retrieving pages', error)
|
||||
));
|
||||
}
|
||||
|
||||
get attrFormArray() {
|
||||
|
||||
return this.templateForm.get("values") as FormArray;
|
||||
|
||||
}
|
||||
|
||||
attributeTypeChanged(form) {
|
||||
let type = form.get("value").get("type");
|
||||
form.get("value").setValue("");
|
||||
if (type == "boolean") {
|
||||
form.get("value").setValue(false);
|
||||
}
|
||||
}
|
||||
|
||||
public getPagesAsString(pageIds): string {
|
||||
|
||||
let pages = [];
|
||||
for (let id of pageIds) {
|
||||
pages.push(this.allPages.filter(option => option.value._id == id).map((option => option.value.name)));
|
||||
|
||||
}
|
||||
return pages.join(", ");
|
||||
}
|
||||
|
||||
public getPageById(pageId) {
|
||||
for (let option of this.allPages) {
|
||||
if (option.value._id == pageId) {
|
||||
return option.value;
|
||||
}
|
||||
}
|
||||
return pageId;
|
||||
}
|
||||
|
||||
getKeys(obj) {
|
||||
return obj?Object.keys(obj):[];
|
||||
}
|
||||
|
||||
reset() {
|
||||
if (this.selectedPlugin) {
|
||||
|
||||
this.edit(this.pluginsByPlacement.get(this.selectedTemplate.placement)[this.index].plugin, this.selectedTemplate, this.selectedTemplate.placement, this.index)
|
||||
} else {
|
||||
this.newPlugin(this.selectedTemplate)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public togglePlugin(status: boolean, id: string,i, placement) {
|
||||
this.index = i;
|
||||
this.selectedTemplate = this.pluginsByPlacement.get(placement)[i].template;
|
||||
if(id) {
|
||||
this.subscriptions.push(this._pluginsService.togglePages(id, status, this.properties.adminToolsAPIURL).subscribe(
|
||||
() => {
|
||||
|
||||
this.pluginsByPlacement.get(placement)[i].plugin.active = status;
|
||||
this._clearCacheService.clearCache("Plugin's status changed");
|
||||
this._clearCacheService.purgeBrowserCache("Plugin's status changed", this.portal);
|
||||
},
|
||||
error => this.handleUpdateError('System error changing the status of Plugin', error)
|
||||
));
|
||||
}else{
|
||||
let plugin = this.pluginsByPlacement.get(placement)[i].plugin;
|
||||
plugin.active = status;
|
||||
this.savePlugin(plugin, true, i);
|
||||
}
|
||||
}
|
||||
pluginFieldChanged($event:PluginEditEvent){
|
||||
if($event.type == "open-submenu"){
|
||||
this.editSubmenuOpen = true;
|
||||
return;
|
||||
}
|
||||
if($event.type == "close-submenu"){
|
||||
|
||||
this.editSubmenuOpen = false;
|
||||
return;
|
||||
}
|
||||
this.selectedPlugin.object[$event.field]=$event.value;
|
||||
this.templateForm.markAsDirty();
|
||||
}
|
||||
|
||||
public swap(pluginToMoveUp, pluginToMoveDown, placement ){
|
||||
this.showLoading = true;
|
||||
let moveUpGroup = this.pluginsByPlacement.get(placement)[pluginToMoveUp];
|
||||
let moveDownGroup = this.pluginsByPlacement.get(placement)[pluginToMoveDown];
|
||||
this.pluginsByPlacement.get(placement)[pluginToMoveUp] = moveDownGroup;
|
||||
this.pluginsByPlacement.get(placement)[pluginToMoveDown] = moveUpGroup;
|
||||
this.move(moveUpGroup.plugin,true, pluginToMoveDown, placement);
|
||||
this.move(moveDownGroup.plugin,false, pluginToMoveUp, placement);
|
||||
this.showLoading = false;
|
||||
}
|
||||
public move(plugin: Plugin, up:boolean, index, placement) {
|
||||
if(plugin._id) {
|
||||
this.subscriptions.push(this._pluginsService.updatePluginOrder(plugin, this.properties.adminToolsAPIURL, up ? -1 : 1).subscribe(
|
||||
saved => {
|
||||
this.pluginsByPlacement.get(placement)[index].plugin = saved;
|
||||
},
|
||||
error => this.handleUpdateError("System error creating template", error)
|
||||
));
|
||||
}else{
|
||||
|
||||
plugin.order = plugin.order + (up ? -1 : 1)
|
||||
this.savePlugin(plugin, true, index);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {AdminToolServiceModule} from "../../../services/adminToolService.module";
|
||||
import {InputModule} from "../../../sharedComponents/input/input.module";
|
||||
|
||||
|
||||
import {MatAutocompleteModule} from '@angular/material/autocomplete';
|
||||
import {MatCheckboxModule} from "@angular/material/checkbox";
|
||||
import {MatFormFieldModule} from "@angular/material/form-field";
|
||||
|
||||
|
||||
import {MatChipsModule} from '@angular/material/chips';
|
||||
import {AdminTabsModule} from "../../sharedComponents/admin-tabs/admin-tabs.module";
|
||||
import {PageContentModule} from "../../sharedComponents/page-content/page-content.module";
|
||||
import {SearchInputModule} from "../../../sharedComponents/search-input/search-input.module";
|
||||
import {IconsModule} from "../../../utils/icons/icons.module";
|
||||
import {LoadingModule} from "../../../utils/loading/loading.module";
|
||||
import {PluginsService} from "../../../services/plugins.service";
|
||||
import {CKEditorModule} from "ng2-ckeditor";
|
||||
import {MatSlideToggleModule} from "@angular/material/slide-toggle";
|
||||
import {PluginWrapperModule} from "../wrapper/plugin-wrapper.module";
|
||||
import {SideBarModule} from "../../sharedComponents/sidebar/sideBar.module";
|
||||
import {PluginEditWrapperModule} from "../wrapper/plugin-edit-wrapper.module";
|
||||
import {PluginsFormComponent} from "./pluginsForm.component";
|
||||
import {PluginsFormRoutingModule} from "./pluginsForm-routing.module";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule,
|
||||
ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
|
||||
MatCheckboxModule, AdminTabsModule, PageContentModule, PluginsFormRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule,
|
||||
MatSlideToggleModule, PluginWrapperModule, SideBarModule, PluginEditWrapperModule
|
||||
],
|
||||
providers:[PluginsService],
|
||||
declarations: [PluginsFormComponent],
|
||||
exports: [PluginsFormComponent]
|
||||
})
|
||||
export class PluginsFormModule {}
|
||||
|
|
@ -19,6 +19,7 @@ import {PluginEditEvent} from "./base-plugin.form.component";
|
|||
[ngModel]="getSelectedPages().length ==checkboxes.length"/>-->
|
||||
<input *ngIf="type == 'checkbox'" [(ngModel)]="value" [checked]="value" (ngModelChange)="updateObject($event)" type="checkbox" class="uk-checkbox">
|
||||
<div *ngIf="type == 'text'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="text" (valueChange)="updateObject($event)" inputClass=" border-bottom "></div>
|
||||
<div *ngIf="type == 'textarea'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="textarea" (valueChange)="updateObject($event)" inputClass=" border-bottom "></div>
|
||||
<!--<div *ngIf="type == 'URL'" input [value]="value" [placeholder]="name" type="URL" ></div>
|
||||
<div *ngIf="type == 'HTML'" class="uk-width-1-1">
|
||||
<ckeditor [readonly]="false"
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {PluginHowToUse} from "../components/how-to-use/plugin-how-to-use.compone
|
|||
import {PluginSearchDepositLink} from "../components/search-deposit-link/plugin-search-deposit-link.component";
|
||||
import {PluginOrganizations} from "../components/organizations/plugin-organizations.component";
|
||||
import {PluginSuggestedRepositories} from "../components/suggested-repositories/plugin-suggested-repositories.component";
|
||||
import {PluginGraphInfo} from "../components/graph-info/plugin-graph-info.component";
|
||||
|
||||
export class PluginUtils{
|
||||
public attrTypeOptions: Option[] = [
|
||||
|
|
@ -18,7 +19,7 @@ export class PluginUtils{
|
|||
{label:"URL", value:"URL"},
|
||||
];
|
||||
|
||||
public availablePluginCodes: Option[] = [
|
||||
public availablePluginCodesOptions: Option[] = [
|
||||
{label:"OpenAIRE products", value:"openaire-products"},
|
||||
{label:"Discover by subcommunity", value:"discover-by-subcommunity"},
|
||||
{label:"Gateway information", value:"gateway-information"},
|
||||
|
|
@ -32,8 +33,8 @@ export class PluginUtils{
|
|||
{label:"Graph info", value:"graph-info"},
|
||||
{label:"Social", value:"social"},
|
||||
{label:"Contact us", value:"organizations"},
|
||||
|
||||
|
||||
];
|
||||
public availablePluginCodes: string[] = ["openaire-products", "discover-by-subcommunity", "gateway-information", "search-deposit-link", "learn-and-connect", "how-to-use", "suggested-repositories", "featured-datasets", "organizations", "fos-sdgs", "graph-info", "social", "organizations"
|
||||
];
|
||||
public placementsOptions: Option[] = [
|
||||
{label:"Right", value:"right"},
|
||||
|
|
@ -78,6 +79,9 @@ export class PluginUtils{
|
|||
case 'organizations': {
|
||||
return (new PluginOrganizations()).compare(oldObject);
|
||||
}
|
||||
case 'graph-info': {
|
||||
return (new PluginGraphInfo()).compare(oldObject);
|
||||
}
|
||||
default: {
|
||||
return (new PluginBaseInfo()).compare(oldObject);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,15 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
|||
import {Plugin} from "../../../utils/entities/adminTool/plugin";
|
||||
import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
|
||||
import {PluginEditEvent} from "../utils/base-plugin.form.component";
|
||||
import {PluginUtils} from "../utils/pluginUtils";
|
||||
|
||||
@Component({
|
||||
selector: 'plugin-wrapper-form',
|
||||
template: `
|
||||
<div class="uk-margin-small-right uk-margin-top" *ngIf="pluginObject">
|
||||
<ng-container *ngIf="pluginTemplate.code == 'openaire-products'">
|
||||
<ng-container *ngIf="pluginTemplate.code && pluginUtils.availablePluginCodes.indexOf(pluginTemplate.code) != -1; else noplugin">
|
||||
|
||||
<ng-container *ngIf="pluginTemplate.code == 'openaire-products'">
|
||||
<plugin-openaire-products-form [pluginTemplate]="pluginTemplate" [plugin]="plugin" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-openaire-products-form>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="pluginTemplate.code == 'discover-by-subcommunity'">
|
||||
|
|
@ -34,6 +37,15 @@ import {PluginEditEvent} from "../utils/base-plugin.form.component";
|
|||
<ng-container *ngIf="pluginTemplate.code == 'organizations'">
|
||||
<plugin-organizations-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-organizations-form>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="pluginTemplate.code == 'graph-info'">
|
||||
<plugin-graph-info-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-graph-info-form>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-template #noplugin>
|
||||
<div class="uk-text-muted uk-text-center">
|
||||
No plugin available
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
`,
|
||||
|
|
@ -47,6 +59,7 @@ export class PluginEditWrapperComponent implements OnInit {
|
|||
@Input() pluginObject;
|
||||
@Output() changed:EventEmitter<PluginEditEvent> = new EventEmitter();
|
||||
@Input() editSubmenuOpen;
|
||||
pluginUtils = new PluginUtils();
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,13 +14,14 @@ import {PluginOrganizationsFormComponent} from "../components/organizations/plug
|
|||
import {IconsModule} from "../../../utils/icons/icons.module";
|
||||
import {PluginHowToUseFormComponent} from "../components/how-to-use/plugin-how-to-use.form.component";
|
||||
import {PluginSuggestedRepositoriesFormComponent} from "../components/suggested-repositories/plugin-suggested-repositories.form.component";
|
||||
import {PluginGraphInfoFormComponent} from "../components/graph-info/plugin-graph-info.form.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule, PluginFieldEditModule, IconsModule
|
||||
],
|
||||
declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginLearnAndConnectFormComponent,
|
||||
PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginHowToUseFormComponent, PluginSuggestedRepositoriesFormComponent],
|
||||
PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginHowToUseFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent],
|
||||
exports: [PluginEditWrapperComponent]
|
||||
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {Plugin} from "../../../utils/entities/adminTool/plugin";
|
||||
import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
|
||||
import {PluginUtils} from "../utils/pluginUtils";
|
||||
|
||||
@Component({
|
||||
selector: 'plugin-wrapper',
|
||||
template: `
|
||||
<ng-container *ngIf="pluginTemplate && pluginObject">
|
||||
<div>
|
||||
<div *ngIf="pluginTemplate.code && pluginUtils.availablePluginCodes.indexOf(pluginTemplate.code) != -1; else noplugin">
|
||||
<ng-container *ngIf="pluginTemplate.code == 'openaire-products'">
|
||||
<plugin-openaire-products [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" ></plugin-openaire-products>
|
||||
</ng-container>
|
||||
|
|
@ -34,7 +35,15 @@ import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
|
|||
<ng-container *ngIf="pluginTemplate.code == 'organizations'">
|
||||
<plugin-organizations [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" ></plugin-organizations>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="pluginTemplate.code == 'graph-info'">
|
||||
<plugin-graph-info [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" ></plugin-graph-info>
|
||||
</ng-container>
|
||||
</div>
|
||||
<ng-template #noplugin>
|
||||
<div class="uk-text-muted uk-text-center">
|
||||
No plugin available
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
`
|
||||
})
|
||||
|
|
@ -42,7 +51,7 @@ export class PluginWrapperComponent implements OnInit {
|
|||
@Input() plugin:Plugin;
|
||||
@Input() pluginObject;
|
||||
@Input() pluginTemplate:PluginTemplate;
|
||||
|
||||
pluginUtils = new PluginUtils();
|
||||
ngOnInit(): void {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,12 +12,13 @@ import {PluginHowToUseModule} from '../components/how-to-use/plugin-how-to-use.m
|
|||
import {PluginSuggestedRepositoriesModule} from '../components/suggested-repositories/plugin-suggested-repositories.module';
|
||||
import {PluginFeaturedDatasetsModule} from '../components/featured-datasets/plugin-featured-datasets.module';
|
||||
import {PluginOrganizationsModule} from "../components/organizations/plugin-organizations.module";
|
||||
import {PluginGraphInfoModule} from "../components/graph-info/plugin-graph-info.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule,
|
||||
PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginLearnAndConnectModule,
|
||||
PluginHowToUseModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule
|
||||
PluginHowToUseModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginGraphInfoModule
|
||||
],
|
||||
declarations: [PluginWrapperComponent],
|
||||
exports: [PluginWrapperComponent]
|
||||
|
|
|
|||
Loading…
Reference in New Issue