MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[plugins-functionality | DONE | ADDED ] add and delete custom plugins, edit plugin in distinct route, add prompt to go back to plugins list

This commit is contained in:
argirok 2024-05-22 11:09:18 +03:00
parent 7decc58f61
commit e7bbe7a359
29 changed files with 532 additions and 529 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dashboard/plugins/components/card-info/plugin-card-info-form.component.ts
View File

@ -65,11 +65,14 @@ import {PluginCardInfo} from "./plugin-card-info.component";
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit> (changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div> </div>
<hr class="uk-margin-left"> <hr class="uk-margin-left">
<div class="uk-margin-top"> <div class="uk-margin-top" title="Use material icons to update the card icon">
<a href="https://fonts.google.com/icons" target="_blank" class="uk-text-xsmall uk-float-right">Check icons</a> <div class="uk-width-1-1 uk-text-right">
<a href="https://fonts.google.com/icons" target="_blank" class="uk-text-xsmall uk-text-right custom-external">More options</a>
</div>
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].icon" <plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].icon"
type="text" field="icon" placeholder="Material icon" type="text" field="icon" placeholder="Material icon"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit> (changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div> </div>
<ng-container *ngFor="let cardUrl of pluginObject.cardInfoArray[selectedIndex].urlsArray; let j = index "> <ng-container *ngFor="let cardUrl of pluginObject.cardInfoArray[selectedIndex].urlsArray; let j = index ">
<div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Link #{{j + 1}}</div> <div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Link #{{j + 1}}</div>

2
dashboard/plugins/components/card-info/plugin-card-info.component.html
View File

@ -20,7 +20,7 @@
</div> </div>
<a *ngFor="let url of card.urlsArray" [href]="card.url" [class.uk-hidden]="!(url.url && url.url.length > 0)" <a *ngFor="let url of card.urlsArray" [href]="card.url" [class.uk-hidden]="!(url.url && url.url.length > 0)"
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default"
[target]="url.target"> [target]="url.target" [routerLink]="url.route?url.url:null" [class.uk-disabled] =previewInAdmin>
{{url.linkText}} {{url.linkText}}
</a> </a>
</div> </div>

24
dashboard/plugins/components/graph-info/plugin-graph-info.component.ts
View File

@ -1,24 +0,0 @@
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 = `This 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 of research objects, and embedding impact and usage indicators. 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).";
url:PluginURL= new PluginURL("https://graph.openaire.eu","Learn more")
compare(oldObject): any {
let newObj= super.compare(oldObject);
return newObj;
}
}
@Component({
selector: 'plugin-graph-info',
templateUrl: 'plugin-graph-info.component.html'
})
export class PluginGraphInfoComponent extends PluginBaseComponent<PluginGraphInfo>{
constructor() {
super();
}
}

25
dashboard/plugins/components/html-section/plugin-html-section.component.ts Normal file
View File

@ -0,0 +1,25 @@
import {Component} from '@angular/core';
import {PluginBaseComponent, PluginBaseInfo, PluginURL} from "../../utils/base-plugin.component";
export class HTMLSection extends PluginBaseInfo{
title:string ="Lorem ipsum"
html:string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
compare(oldObject): any {
let newObj= super.compare(oldObject);
return newObj;
}
}
@Component({
selector: 'plugin-html-section',
template: `
<h2>{{pluginObject.title}}</h2>
<div class="" [innerHTML]="pluginObject.html">
</div>
`
})
export class PluginHtmlSectionComponent extends PluginBaseComponent<HTMLSection>{
constructor() {
super();
}
}

27
dashboard/plugins/components/html-section/plugin-html-section.form.component.ts Normal file
View File

@ -0,0 +1,27 @@
import {Component} from '@angular/core';
import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
import {HTMLSection} from "./plugin-html-section.component";
@Component({
selector: 'plugin-html-section-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.html" [switchToHTMLEditor]="true"
type="textarea" field="html" (changed)="valueChanged($event)"></plugin-field-edit>
</div>
</div>
`,
})
export class PluginHtmlSectionFormComponent extends PluginBaseFormComponent<HTMLSection> {
constructor() {
super()
}
}

22
dashboard/plugins/components/html-section/plugin-html-section.module.ts Normal file
View File

@ -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 {PluginHtmlSectionComponent} from "./plugin-html-section.component";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, PluginFieldEditModule, InputModule
],
providers: [
PluginsService
],
declarations: [PluginHtmlSectionComponent],
exports: [PluginHtmlSectionComponent]
})
export class PluginHtmlSectionModule {
}

2
dashboard/plugins/components/graph-info/plugin-graph-info.component.html → dashboard/plugins/components/paragraph-info/plugin-graph-info.component.html
View File

@ -12,7 +12,7 @@
</div> </div>
<div></div> <div></div>
<img class="uk-visible@m uk-height-1-1 uk-position-top-right" <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"> [src]="pluginObject.image" alt="Graph nodes" loading="lazy">
</div> </div>
</div> </div>
</div> </div>

24
dashboard/plugins/components/paragraph-info/plugin-graph-info.component.ts Normal file
View File

@ -0,0 +1,24 @@
import {Component} from '@angular/core';
import {PluginBaseComponent, PluginBaseInfo, PluginURL} from "../../utils/base-plugin.component";
export class ParagraphInfo extends PluginBaseInfo{
title:string ="Lorem ipsum"
paragraph1:string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
paragraph2:string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
url:PluginURL= new PluginURL("https://example.com","Lorem ipsum")
image:string = "https://admin.connect.openaire.eu/assets/common-assets/placeholder.png"
compare(oldObject): any {
let newObj= super.compare(oldObject);
return newObj;
}
}
@Component({
selector: 'plugin-graph-info',
templateUrl: 'plugin-graph-info.component.html'
})
export class PluginGraphInfoComponent extends PluginBaseComponent<ParagraphInfo>{
constructor() {
super();
}
}

8
dashboard/plugins/components/graph-info/plugin-graph-info.form.component.ts → dashboard/plugins/components/paragraph-info/plugin-graph-info.form.component.ts
View File

@ -1,6 +1,6 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component"; import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
import {PluginGraphInfo} from "./plugin-graph-info.component"; import {ParagraphInfo} from "./plugin-graph-info.component";
@Component({ @Component({
selector: 'plugin-graph-info-form', selector: 'plugin-graph-info-form',
@ -8,6 +8,10 @@ import {PluginGraphInfo} from "./plugin-graph-info.component";
<div *ngIf="pluginObject" class="uk-padding-xsmall"> <div *ngIf="pluginObject" class="uk-padding-xsmall">
<plugin-field-edit [value]="pluginObject.title" <plugin-field-edit [value]="pluginObject.title"
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit> type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
<div *ngIf="pluginTemplate.custom" class="uk-margin-top">
<plugin-field-edit [value]="pluginObject.image"
type="text" field="image" (changed)="valueChanged($event)"></plugin-field-edit>
</div>
<div class="uk-margin-top"> <div class="uk-margin-top">
<plugin-field-edit [value]="pluginObject.paragraph1" [switchToHTMLEditor]="true" <plugin-field-edit [value]="pluginObject.paragraph1" [switchToHTMLEditor]="true"
type="textarea" field="paragraph1" (changed)="valueChanged($event)"></plugin-field-edit> type="textarea" field="paragraph1" (changed)="valueChanged($event)"></plugin-field-edit>
@ -32,7 +36,7 @@ import {PluginGraphInfo} from "./plugin-graph-info.component";
}) })
export class PluginGraphInfoFormComponent extends PluginBaseFormComponent<PluginGraphInfo> { export class PluginGraphInfoFormComponent extends PluginBaseFormComponent<ParagraphInfo> {
constructor() { constructor() {
super() super()

0
dashboard/plugins/components/graph-info/plugin-graph-info.module.ts → dashboard/plugins/components/paragraph-info/plugin-graph-info.module.ts
View File

2
dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html
View File

@ -17,7 +17,7 @@
</div> </div>
<div class="uk-text-small">{{card.description}}</div> <div class="uk-text-small">{{card.description}}</div>
<a *ngFor="let url of card.urlsArray" [route]="url.url" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default" [target]="url.target" <a *ngFor="let url of card.urlsArray" [route]="url.url" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default" [target]="url.target"
[class.uk-hidden]="!(url.url && url.url.length > 0)"> [class.uk-hidden]="!(url.url && url.url.length > 0)" [routerLink]="url.route?url.url:null" [class.uk-disabled] =previewInAdmin>
{{url.linkText}} {{url.linkText}}
</a> </a>
</slider-nav-item> </slider-nav-item>

7
dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.form.component.ts
View File

@ -20,7 +20,7 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
<plugin-field-edit [value]=" pluginObject.cardInfoArray[i].show" type="checkbox" field="cardInfoArray" <plugin-field-edit [value]=" pluginObject.cardInfoArray[i].show" type="checkbox" field="cardInfoArray"
(editClicked)="pluginEditEvent = $event" (editClicked)="pluginEditEvent = $event"
(changed)="cardShowChanged(i,$event)"></plugin-field-edit> (changed)="cardShowChanged(i,$event)"></plugin-field-edit>
{{card.title}} {{card.tag?card.tag:card.title}}
</div> </div>
<div class="uk-padding-remove-left uk-margin-medium-right"> <div class="uk-padding-remove-left uk-margin-medium-right">
@ -47,6 +47,11 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
</a> </a>
</div> </div>
<div class="uk-margin-top">
<plugin-field-edit [value]="pluginObject.cardInfoArray[selectedIndex].tag"
type="text" field="tag"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<div class="uk-margin-top"> <div class="uk-margin-top">
<plugin-field-edit [value]="pluginObject.cardInfoArray[selectedIndex].title" <plugin-field-edit [value]="pluginObject.cardInfoArray[selectedIndex].title"
type="text" field="title" type="text" field="title"

12
dashboard/plugins/plugins-form/pluginsForm.component.html
View File

@ -2,7 +2,7 @@
<aside id="sidebar_main" class="uk-sticky" uk-sticky="start: 0; end: .sidebar_main_swipe"> <aside id="sidebar_main" class="uk-sticky" uk-sticky="start: 0; end: .sidebar_main_swipe">
<div sidebar-content> <div sidebar-content>
<div class="back"> <div class="back">
<a *ngIf="!editSubmenuOpen" (click)="editView = false; selectedTemplate = null; selectedPlugin = null;" <a *ngIf="!editSubmenuOpen" (click)="promtToGoBack()"
class="uk-flex uk-flex-middle uk-flex-center"> class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-width-auto"> <div class="uk-width-auto">
<icon name="west" ratio="1.3" <icon name="west" ratio="1.3"
@ -27,15 +27,13 @@
</button> </button>
<button class="uk-button uk-button-primary" <button class="uk-button uk-button-primary"
[class.uk-disabled]="templateForm.invalid || !templateForm.dirty || templateForm.disabled" [class.uk-disabled]="templateForm.invalid || !templateForm.dirty || templateForm.disabled"
(click)="saveConfirmed(index)" (click)="saveConfirmed()"
[disabled]="templateForm.invalid ||!templateForm.dirty || templateForm.disabled || showLoading">Save [disabled]="templateForm.invalid ||!templateForm.dirty || templateForm.disabled || showLoading">Save
</button> </button>
</div> </div>
</div> </div>
<div class="menu_section uk-margin-top uk-margin-left"> <div class="menu_section uk-margin-top uk-margin-left">
<form *ngIf="templateForm && selectedPlugin" [formGroup]="templateForm" >
<form *ngIf="!selectTemplateView" [formGroup]="templateForm" >
<div *ngIf="!editSubmenuOpen" class="uk-text-small uk-margin-small-left">Enable <div *ngIf="!editSubmenuOpen" class="uk-text-small uk-margin-small-left">Enable
<mat-slide-toggle [checked]="templateForm.get('active').value" <mat-slide-toggle [checked]="templateForm.get('active').value"
(change)="templateForm.get('active').setValue($event.checked); templateForm.markAsDirty()"></mat-slide-toggle> (change)="templateForm.get('active').setValue($event.checked); templateForm.markAsDirty()"></mat-slide-toggle>
@ -95,13 +93,13 @@
<div *ngIf="showLoading" class="uk-position-center"> <div *ngIf="showLoading" class="uk-position-center">
<loading></loading> <loading></loading>
</div> </div>
<ng-container *ngIf="editView">
<plugin-wrapper *ngIf="this.templateForm" [pluginTemplate]="selectedTemplate" <plugin-wrapper *ngIf="this.templateForm" [pluginTemplate]="selectedTemplate"
[plugin]="this.templateForm.getRawValue()" [plugin]="this.templateForm.getRawValue()"
[pluginObject]="this.selectedPlugin.object" [pluginObject]="this.selectedPlugin.object"
class="uk-width-1-1"></plugin-wrapper> class="uk-width-1-1"></plugin-wrapper>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<modal-alert #backAlert [overflowBody]="false" (alertOutput)="confirmGoBack()"
classTitle="uk-background-primary uk-light"></modal-alert>

289
dashboard/plugins/plugins-form/pluginsForm.component.ts
View File

@ -1,22 +1,12 @@
import {Component, ElementRef, OnInit} from '@angular/core'; import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {HelpContentService} from "../../../services/help-content.service"; import {HelpContentService} from "../../../services/help-content.service";
import { import {FormArray, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators} from "@angular/forms";
FormArray,
FormGroup,
UntypedFormArray,
UntypedFormBuilder,
UntypedFormGroup,
ValidatorFn,
Validators
} from "@angular/forms";
import {Page} from "../../../utils/entities/adminTool/page"; import {Page} from "../../../utils/entities/adminTool/page";
import {EnvProperties} from '../../../utils/properties/env-properties'; import {EnvProperties} from '../../../utils/properties/env-properties';
import {HelperFunctions} from "../../../utils/HelperFunctions.class"; import {HelperFunctions} from "../../../utils/HelperFunctions.class";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {properties} from "../../../../../environments/environment"; import {properties} from "../../../../../environments/environment";
import {PortalUtils} from "../../portal/portalHelper";
import {Option} from "../../../sharedComponents/input/input.component";
import {Title} from "@angular/platform-browser"; import {Title} from "@angular/platform-browser";
import {ClearCacheService} from "../../../services/clear-cache.service"; import {ClearCacheService} from "../../../services/clear-cache.service";
import {NotificationHandler} from "../../../utils/notification-handler"; import {NotificationHandler} from "../../../utils/notification-handler";
@ -29,45 +19,34 @@ import {PluginUtils} from "../utils/pluginUtils";
import {CommunityService} from "../../../connect/community/community.service"; import {CommunityService} from "../../../connect/community/community.service";
import {CommunityInfo} from "../../../connect/community/communityInfo"; import {CommunityInfo} from "../../../connect/community/communityInfo";
import {PluginEditEvent} from "../utils/base-plugin.form.component"; import {PluginEditEvent} from "../utils/base-plugin.form.component";
import {AlertModal} from "../../../utils/modal/alert";
@Component({ @Component({
selector: 'plugins-form', selector: 'plugins-form',
templateUrl: './pluginsForm.component.html', templateUrl: './pluginsForm.component.html',
}) })
export class PluginsFormComponent implements OnInit { export class PluginsFormComponent implements OnInit {
private selectedId: string;
public pluginsByPlacement: Map<string,{plugin:Plugin, template:PluginTemplate, openPreview:boolean}[]> = new Map();
public plugins: Plugin[] = [];
public pluginTemplates: PluginTemplate[] = [];
public selectedTemplate: PluginTemplate = null; public selectedTemplate: PluginTemplate = null;
public selectedPlugin: Plugin = null; public selectedPlugin: Plugin = null;
public editView = false;
public selectTemplateView = false;
public templateForm: UntypedFormGroup; public templateForm: UntypedFormGroup;
public pagesCtrl: UntypedFormArray;
urlValidator: ValidatorFn = StringUtils.urlValidator; urlValidator: ValidatorFn = StringUtils.urlValidator;
private searchText: RegExp = new RegExp('');
public keyword: string = "";
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public formPages: Page[] = [];
public showLoading: boolean = true; public showLoading: boolean = true;
private subscriptions: any[] = []; private subscriptions: any[] = [];
public allPages: Option[] = [];
public pluginUtils = new PluginUtils(); public pluginUtils = new PluginUtils();
selectedCommunityPid = null; selectedCommunityPid = null;
public portalUtils: PortalUtils = new PortalUtils();
private index: number;
public portal: string; public portal: string;
public selectedPageId: string; public selectedPageId: string;
public selectedTemplateId: string;
public selectedPluginId: string;
public community: Portal; public community: Portal;
public page: Page; public page: Page;
public templateView = false;
public templateCode:string = null;
public template; public template;
public selectedPlacementView = "all"; public selectedPlacementView = "all";
public sinlgePlacementAvailable = false;
communityInfo:CommunityInfo = null; communityInfo:CommunityInfo = null;
editSubmenuOpen = false; editSubmenuOpen = false;
@ViewChild('backAlert') backAlert: AlertModal;
constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router,
private communityService: CommunityService, private communityService: CommunityService,
private title: Title, private _helpContentService: HelpContentService, private title: Title, private _helpContentService: HelpContentService,
@ -89,11 +68,14 @@ export class PluginsFormComponent implements OnInit {
this.subscriptions.push(this.route.queryParams.subscribe(params => { this.subscriptions.push(this.route.queryParams.subscribe(params => {
HelperFunctions.scroll(); HelperFunctions.scroll();
this.selectedPageId = params['pageId']; this.selectedPageId = params['pageId'];
this.selectedPluginId = params['pluginId'];
this.selectedTemplateId = params['templateId'];
if (this.portal && this.selectedPageId) { if (this.portal && this.selectedPageId) {
this.getPage(this.selectedPageId); this.getPage(this.selectedPageId);
} }
if (!this.selectedPageId && !this.templateView) { if (!this.selectedPageId) {
this._router.navigate(['../pages'], {relativeTo: this.route}); this._router.navigate(['../'], {relativeTo: this.route});
} }
})); }));
})); }));
@ -110,87 +92,48 @@ export class PluginsFormComponent implements OnInit {
}); });
} }
getTemplateById(id) {
for (let template of this.pluginTemplates) {
if (template._id == id) {
return template;
}
}
return null;
}
getPage(pageId: string) { getPage(pageId: string) {
this.showLoading = true; this.showLoading = true;
this.subscriptions.push(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal).subscribe( this.subscriptions.push(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal).subscribe(
page => { page => {
if (this.properties.adminToolsPortalType != page.portalType) { if (this.properties.adminToolsPortalType != page.portalType) {
this._router.navigate(['./pageContents']); this._router.navigate(['..'],{ relativeTo: this.route});
} else { } else {
this.page = page; this.page = page;
this.getPagePlugins(); this.getPluginAndTemplate();
} }
}, },
error => this.handleError('System error retrieving page', error))); error => this.handleError('System error retrieving page', error)));
} }
getPagePlugins() { getPluginAndTemplate(){
this.showLoading = true; if(this.selectedTemplateId){
this.subscriptions.push(this._pluginsService.getPluginTemplatesByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe( this.subscriptions.push(this._pluginsService.getPluginTemplateById(this.properties.adminToolsAPIURL, this.selectedTemplateId).subscribe(template => {
templates => { this.selectedTemplate = template;
this.pluginTemplates = templates; if(this.selectedPluginId){
this.subscriptions.push(this._pluginsService.getPluginById(this.properties.adminToolsAPIURL, this.selectedPluginId).subscribe(plugin => {
this.selectedPlugin = plugin;
this.edit(this.selectedPlugin, this.selectedTemplate);
}));
}else{
this.selectedPlugin = new Plugin(this.page._id,this.selectedCommunityPid, template);
// this.selectedPlugin.order = this.pluginsByPlacement.get(this.selectedPlacementView).length;
this.selectedPlugin.object = PluginUtils.initializeObjectAndCompare(template.code,null);
this.edit(this.selectedPlugin, this.selectedTemplate);
this.subscriptions.push(this._pluginsService.getPluginsByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe( }
plugins => { }, error =>{
this.plugins = plugins; this._router.navigate(['../'], {queryParams: {pageId:this.selectedPageId}, relativeTo: this.route});
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: _ , openPreview:false});
});
let availablePlacements = [];
for(let placement of this.pluginUtils.placementsOptions){
if(this.pluginsByPlacement.get(placement.value).length > 0){
availablePlacements.push(placement.value);
}
this.pluginsByPlacement.get(placement.value).sort(function (a, b) {
return a.plugin.order - b.plugin.order;
})
}
if(availablePlacements.length == 1){
this.selectedPlacementView == availablePlacements[0];
this.sinlgePlacementAvailable = true
}
this.showLoading = false;
},
error => this.handleError('System error retrieving plugins', error)));
}, }else{
error => this.handleError('System error retrieving templates', error))); this._router.navigate(['../'], {queryParams: {pageId:this.selectedPageId}, relativeTo: this.route});
}
} }
public edit(plugin:Plugin, template:PluginTemplate) {
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({ this.templateForm = this._fb.group({
_id: this._fb.control(plugin._id), _id: this._fb.control(plugin._id),
pid: this._fb.control(this.selectedCommunityPid), pid: this._fb.control(plugin.pid),
page: this._fb.control(plugin.page), page: this._fb.control(plugin.page),
templateCode: this._fb.control(plugin.templateCode, Validators.required), templateCode: this._fb.control(plugin.templateCode, Validators.required),
templateId: this._fb.control(plugin.templateId, Validators.required), templateId: this._fb.control(plugin.templateId, Validators.required),
@ -209,45 +152,10 @@ export class PluginsFormComponent implements OnInit {
)); ));
} }
} }
this.showLoading = false;
} }
public newPluginSelectTemplate() { public saveConfirmed() {
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; this.showLoading = true;
let plugin: Plugin = <Plugin>this.templateForm.getRawValue(); let plugin: Plugin = <Plugin>this.templateForm.getRawValue();
plugin.object = this.selectedPlugin.object; plugin.object = this.selectedPlugin.object;
@ -256,14 +164,12 @@ export class PluginsFormComponent implements OnInit {
plugin.settingsValues[fields.key] = fields.value; plugin.settingsValues[fields.key] = fields.value;
} }
let update = (plugin._id) ? true : false; let update = (plugin._id) ? true : false;
this.savePlugin(plugin,update, this.index) this.savePlugin(plugin,update)
} }
public savePlugin(plugin, update, index){ public savePlugin(plugin, update){
this.subscriptions.push(this._pluginsService.savePlugin(plugin, this.properties.adminToolsAPIURL,this.selectedCommunityPid ).subscribe( this.subscriptions.push(this._pluginsService.savePlugin(plugin, this.properties.adminToolsAPIURL,this.selectedCommunityPid ).subscribe(
saved => { saved => {
this.savedSuccessfully(saved, update, index); this._router.navigate(["../"], {queryParams: {pageId:this.selectedPageId}, relativeTo: this.route} )
this.editView = false;
this.selectTemplateView = false;
this.selectedTemplate = null; this.selectedTemplate = null;
this.selectedPlugin = null; this.selectedPlugin = null;
}, },
@ -271,23 +177,7 @@ export class PluginsFormComponent implements OnInit {
)); ));
} }
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) { handleUpdateError(message: string, error = null) {
@ -306,23 +196,6 @@ export class PluginsFormComponent implements OnInit {
this.showLoading = false; 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() { get attrFormArray() {
return this.templateForm.get("values") as FormArray; return this.templateForm.get("values") as FormArray;
@ -337,58 +210,15 @@ export class PluginsFormComponent implements OnInit {
} }
} }
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) { getKeys(obj) {
return obj?Object.keys(obj):[]; return obj?Object.keys(obj):[];
} }
reset() { reset() {
if (this.selectedPlugin) { this.edit(this.selectedPlugin, this.selectedTemplate)
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.togglePlugin(id, status, this.properties.adminToolsAPIURL, this.selectedCommunityPid).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){ pluginFieldChanged($event:PluginEditEvent){
if($event.type == "open-submenu"){ if($event.type == "open-submenu"){
this.editSubmenuOpen = true; this.editSubmenuOpen = true;
@ -403,28 +233,19 @@ export class PluginsFormComponent implements OnInit {
this.templateForm.markAsDirty(); this.templateForm.markAsDirty();
} }
public swap(pluginToMoveUp, pluginToMoveDown, placement ){ promtToGoBack() {
this.showLoading = true; if(this.templateForm.dirty) {
let moveUpGroup = this.pluginsByPlacement.get(placement)[pluginToMoveUp]; this.backAlert.alertTitle = 'Leave page';
let moveDownGroup = this.pluginsByPlacement.get(placement)[pluginToMoveDown]; this.backAlert.message = 'Are you sure you want to leave the page?';
this.pluginsByPlacement.get(placement)[pluginToMoveUp] = moveDownGroup; this.backAlert.okButtonText = 'Yes';
this.pluginsByPlacement.get(placement)[pluginToMoveDown] = moveUpGroup; this.backAlert.open();
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, this.selectedCommunityPid).subscribe(
saved => {
this.pluginsByPlacement.get(placement)[index].plugin = saved;
},
error => this.handleUpdateError("System error creating template", error)
));
}else{ }else{
this.confirmGoBack();
plugin.order = plugin.order + (up ? -1 : 1)
this.savePlugin(plugin, true, index);
} }
}
confirmGoBack() {
this._router.navigate(["../"],{queryParams:{pageId:this.selectedPageId},relativeTo:this.route})
} }
} }

5
dashboard/plugins/plugins-form/pluginsForm.module.ts
View File

@ -25,14 +25,15 @@ import {SideBarModule} from "../../sharedComponents/sidebar/sideBar.module";
import {PluginEditWrapperModule} from "../wrapper/plugin-edit-wrapper.module"; import {PluginEditWrapperModule} from "../wrapper/plugin-edit-wrapper.module";
import {PluginsFormComponent} from "./pluginsForm.component"; import {PluginsFormComponent} from "./pluginsForm.component";
import {PluginsFormRoutingModule} from "./pluginsForm-routing.module"; import {PluginsFormRoutingModule} from "./pluginsForm-routing.module";
import {AlertModalModule} from "../../../utils/modal/alertModal.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, CommonModule, RouterModule, FormsModule,
ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
MatCheckboxModule, AdminTabsModule, PageContentModule, PluginsFormRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule, MatCheckboxModule, AdminTabsModule, PageContentModule, PluginsFormRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule,
MatSlideToggleModule, PluginWrapperModule, SideBarModule, PluginEditWrapperModule MatSlideToggleModule, PluginWrapperModule, SideBarModule, PluginEditWrapperModule, AlertModalModule
], ],
providers:[PluginsService], providers:[PluginsService],
declarations: [PluginsFormComponent], declarations: [PluginsFormComponent],

171
dashboard/plugins/plugins.component.html
View File

@ -1,101 +1,10 @@
<div class="uk-flex">
<aside id="sidebar_main" class="uk-sticky" uk-sticky="start: 0; end: .sidebar_main_swipe">
<div sidebar-content>
<div *ngIf="editView" 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">
<div *ngIf="!editView">Select a plugin to edit</div>
<ng-container *ngIf="editView">
<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>
</ng-container>
</div>
</div>
</aside>
<div page-content class="uk-width-1-1"> <div page-content class="uk-width-1-1">
<div header> <div header>
<div class="uk-section-xsmall uk-margin-top"> <div class="uk-section-xsmall uk-margin-top">
<div class="uk-flex-middle uk-grid" uk-grid> <div class="uk-flex-middle uk-grid" uk-grid>
<ng-container> <ng-container>
<div *ngIf="!templateView && !editView" class="uk-width-expand"> <div class="uk-width-expand">
<a routerLink="../pages" class="uk-flex uk-flex-middle uk-h5 uk-link-reset"> <a routerLink="../pages" class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
<span class="uk-margin-right"> <span class="uk-margin-right">
<icon name="west" ratio="1.7" [flex]="true"></icon> <icon name="west" ratio="1.7" [flex]="true"></icon>
@ -111,31 +20,51 @@
(click)="selectedPlacementView = position.value"><span (click)="selectedPlacementView = position.value"><span
class="title">{{position.label}}</span></a></li> class="title">{{position.label}}</span></a></li>
</ul> </ul>
<!-- filters-->
<div>
<input [ngModel]="filterActive" [checked]="filterActive" (ngModelChange)="filterActive = !filterActive" type="checkbox" class="uk-checkbox"> Show active
</div>
</div> </div>
<div *ngIf="templateView" class="uk-width-expand"> <!--<div *ngIf="templateView" class="uk-width-expand">
<a routerLink="../.." class="uk-flex uk-flex-middle uk-h5 uk-link-reset"> <a routerLink="../.." class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
<span class="uk-margin-right"> <span class="uk-margin-right">
<icon name="west" ratio="1.7" [flex]="true"></icon> <icon name="west" ratio="1.7" [flex]="true"></icon>
</span> </span>
<h1 *ngIf="template" class="uk-h5 uk-margin-remove">{{template.name}}</h1> <h1 *ngIf="template" class="uk-h5 uk-margin-remove">{{template.name}}</h1>
</a> </a>
</div> </div>-->
</ng-container> </ng-container>
</div> </div>
</div> </div>
</div> </div>
<div inner> <div inner>
<div> <!--class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">--> <div>
<div *ngIf="showLoading" class="uk-position-center"> <div *ngIf="showLoading" class="uk-position-center">
<loading></loading> <loading></loading>
</div> </div>
<ng-container *ngIf="!showLoading && !editView"> <ng-container *ngIf="!showLoading">
<div *ngIf="pluginTemplates.length> 0" class="uk-padding-xsmall uk-grid uk-flex uk-flex-middle">
<!-- filters-->
<div class="uk-width-expand">
<input [ngModel]="filterActive" [checked]="filterActive" (ngModelChange)="filterActive = !filterActive" type="checkbox" class="uk-checkbox"> Show active
</div>
<div class="uk-padding-small uk-padding-remove-horizontal uk-width-auto">
<a class="uk-button uk-button-link uk-flex uk-flex-middle">
<icon name="add" [flex]="true"></icon>
<span class="uk-margin-small-left">
Add custom plugin
</span>
</a>
<div uk-dropdown="mode:click">
<ul class="uk-nav uk-dropdown-nav">
<ng-container *ngFor="let template of pluginTemplates">
<li *ngIf="template.custom"><a (click)="addNewCustomPlugin(template)"> {{template.name}}</a></li>
</ng-container>
</ul>
</div>
</div>
</div>
<div *ngIf="pluginTemplates.length == 0" <div *ngIf="pluginTemplates.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold"> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No plugins found</div> <div>No plugins found</div>
@ -182,9 +111,19 @@
</div> </div>
<div class="uk-card-footer uk-padding-remove-vertical"> <div class="uk-card-footer uk-padding-remove-vertical">
<div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid> <div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid>
<div> <div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<a
class="uk-button uk-button-link uk-flex uk-flex-middle"
routerLink="./edit" [queryParams]=" { 'pageId': page._id, pluginId: pluginGroup.plugin._id, templateId:pluginGroup.template._id }"
[class.uk-disabled]="!pluginGroup.template">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left"> Edit</span>
</a>
</div>
</div>
<!-- <div>
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<button <button
class="uk-button uk-button-link uk-flex uk-flex-middle" class="uk-button uk-button-link uk-flex uk-flex-middle"
@ -194,6 +133,16 @@
<span class="uk-margin-xsmall-left"> Edit</span> <span class="uk-margin-xsmall-left"> Edit</span>
</button> </button>
</div> </div>
</div>-->
<div *ngIf="pluginGroup.plugin.custom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle uk-text-danger"
(click)="promtToDelete(i, placement.value)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left">Delete</span>
</button>
</div>
</div> </div>
<!-- Maybe change delete to reset to default values ? --> <!-- Maybe change delete to reset to default values ? -->
<!--<div> <!--<div>
@ -205,7 +154,7 @@
</button> </button>
</div> </div>
</div>--> </div>-->
<div *ngIf="pluginGroup.plugin.order>0"> <div *ngIf="i >0">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<button <button
class="uk-button uk-button-link uk-flex uk-flex-middle" class="uk-button uk-button-link uk-flex uk-flex-middle"
@ -215,7 +164,7 @@
</button> </button>
</div> </div>
</div> </div>
<div *ngIf="pluginGroup.plugin.order < pluginsByPlacement.get(placement.value).length -1 "> <div *ngIf="i < pluginsByPlacement.get(placement.value).length -1 ">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<button <button
class="uk-button uk-button-link uk-flex uk-flex-middle" class="uk-button uk-button-link uk-flex uk-flex-middle"
@ -244,15 +193,9 @@
</ng-container> </ng-container>
</ng-container> </ng-container>
<ng-container *ngIf="editView">
<plugin-wrapper *ngIf="this.templateForm" [pluginTemplate]="selectedTemplate"
[plugin]="this.templateForm.getRawValue()"
[pluginObject]="this.selectedPlugin.object"
class="uk-width-1-1" [previewInAdmin]="true"></plugin-wrapper>
<div>Reload!</div>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
</div> <!--</div>-->
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmDelete()"
classTitle="uk-background-primary uk-light"></modal-alert>

331
dashboard/plugins/plugins.component.ts
View File

@ -1,15 +1,7 @@
import {Component, ElementRef, OnInit} from '@angular/core'; import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {HelpContentService} from "../../services/help-content.service"; import {HelpContentService} from "../../services/help-content.service";
import { import {FormArray, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, ValidatorFn} from "@angular/forms";
FormArray,
FormGroup,
UntypedFormArray,
UntypedFormBuilder,
UntypedFormGroup,
ValidatorFn,
Validators
} from "@angular/forms";
import {Page} from "../../utils/entities/adminTool/page"; import {Page} from "../../utils/entities/adminTool/page";
import {EnvProperties} from '../../utils/properties/env-properties'; import {EnvProperties} from '../../utils/properties/env-properties';
import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {HelperFunctions} from "../../utils/HelperFunctions.class";
@ -28,28 +20,27 @@ import {PluginTemplate} from "../../utils/entities/adminTool/pluginTemplate";
import {PluginUtils} from "./utils/pluginUtils"; import {PluginUtils} from "./utils/pluginUtils";
import {CommunityService} from "../../connect/community/community.service"; import {CommunityService} from "../../connect/community/community.service";
import {CommunityInfo} from "../../connect/community/communityInfo"; import {CommunityInfo} from "../../connect/community/communityInfo";
import {PluginEditEvent} from "./utils/base-plugin.form.component"; import {AlertModal} from "../../utils/modal/alert";
@Component({ @Component({
selector: 'plugins', selector: 'plugins',
templateUrl: './plugins.component.html', templateUrl: './plugins.component.html',
}) })
export class PluginsComponent implements OnInit { export class PluginsComponent implements OnInit {
private selectedId: string; public pluginsByPlacement: Map<string, { plugin: Plugin, template: PluginTemplate, openPreview: boolean }[]> = new Map();
public pluginsByPlacement: Map<string,{plugin:Plugin, template:PluginTemplate, openPreview:boolean}[]> = new Map();
public plugins: Plugin[] = []; public plugins: Plugin[] = [];
public pluginTemplates: PluginTemplate[] = []; public pluginTemplates: PluginTemplate[] = [];
public selectedTemplate: PluginTemplate = null; public selectedTemplate: PluginTemplate = null;
public selectedPlugin: Plugin = null; public selectedPlugin: Plugin = null;
public editView = false; // public editView = false;
public selectTemplateView = false; // public selectTemplateView = false;
public templateForm: UntypedFormGroup; // public templateForm: UntypedFormGroup;
public pagesCtrl: UntypedFormArray; // public pagesCtrl: UntypedFormArray;
urlValidator: ValidatorFn = StringUtils.urlValidator; urlValidator: ValidatorFn = StringUtils.urlValidator;
private searchText: RegExp = new RegExp(''); private searchText: RegExp = new RegExp('');
public keyword: string = ""; public keyword: string = "";
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public formPages: Page[] = []; // public formPages: Page[] = [];
public showLoading: boolean = true; public showLoading: boolean = true;
private subscriptions: any[] = []; private subscriptions: any[] = [];
public allPages: Option[] = []; public allPages: Option[] = [];
@ -62,13 +53,16 @@ export class PluginsComponent implements OnInit {
public community: Portal; public community: Portal;
public page: Page; public page: Page;
public templateView = false; public templateView = false;
public templateCode:string = null; // public templateCode: string = null;
public template; // public template;
public selectedPlacementView = "all"; public selectedPlacementView = "all";
public selectedPluginIndex = null;
public sinlgePlacementAvailable = false; public sinlgePlacementAvailable = false;
communityInfo:CommunityInfo = null; communityInfo: CommunityInfo = null;
editSubmenuOpen = false; // editSubmenuOpen = false;
filterActive = true; filterActive = false;
@ViewChild('deleteModal') deleteModal: AlertModal;
constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router,
private communityService: CommunityService, private communityService: CommunityService,
private title: Title, private _helpContentService: HelpContentService, private title: Title, private _helpContentService: HelpContentService,
@ -144,37 +138,68 @@ export class PluginsComponent implements OnInit {
plugins => { plugins => {
this.plugins = plugins; this.plugins = plugins;
this.pluginsByPlacement = new Map(); this.pluginsByPlacement = new Map();
for(let pos of this.pluginUtils.placementsOptions){ for (let pos of this.pluginUtils.placementsOptions) {
this.pluginsByPlacement.set(pos.value,[]); this.pluginsByPlacement.set(pos.value, []);
} }
let self = this; let self = this;
this.pluginTemplates.forEach(_ => { this.pluginTemplates.forEach(_ => {
let plugin:Plugin = null; console.log("pl template", _.code, _.custom)
for(let pl of plugins){ let plugin: Plugin = null;
if (pl.templateId == _._id){ for (let pl of plugins) {
if (pl.templateId == _._id) {
plugin = pl; plugin = pl;
} }
} }
if(!plugin){ if (!plugin && !_.custom) {
plugin = new Plugin(this.selectedPageId, this.selectedCommunityPid,_); plugin = new Plugin(this.selectedPageId, this.selectedCommunityPid, _);
this.plugins.push(plugin); this.plugins.push(plugin);
} }
plugin.object = PluginUtils.initializeObjectAndCompare(_.code,plugin.object)
this.pluginsByPlacement.get(plugin.placement).push({plugin: plugin, template: _ , openPreview:false}); if (plugin) {
console.log("plugin found", plugin.custom)
if (plugin.custom) {
console.log(plugin, _)
}
plugin.object = PluginUtils.initializeObjectAndCompare(_.code, plugin.object)
this.pluginsByPlacement.get(plugin.placement).push({plugin: plugin, template: _, openPreview: false});
}
}); });
/* console.log("________", )
//add custom plugins in the list
this.plugins.forEach(_ => {
if(_.custom){
console.log("custom plugin", _.templateCode)
let customTemplate = null;
this.pluginTemplates.forEach(template => {
if (_.templateId == template._id) {
customTemplate = template;
}
});
if(customTemplate){
console.log("template found!")
this.pluginsByPlacement.get(customTemplate.placement).push({plugin: _, template: customTemplate, openPreview: false});
}
}
});*/
let availablePlacements = []; let availablePlacements = [];
for(let placement of this.pluginUtils.placementsOptions){ for (let placement of this.pluginUtils.placementsOptions) {
if(this.pluginsByPlacement.get(placement.value).length > 0){ if (this.pluginsByPlacement.get(placement.value).length > 0) {
availablePlacements.push(placement.value); availablePlacements.push(placement.value);
} }
this.pluginsByPlacement.get(placement.value).sort(function (a, b) { this.pluginsByPlacement.get(placement.value).sort(function (a, b) {
return a.plugin.order - b.plugin.order; return a.plugin.order - b.plugin.order;
}) })
} }
if(availablePlacements.length == 1){ console.log(availablePlacements)
this.selectedPlacementView == availablePlacements[0]; if (availablePlacements.length == 1) {
this.selectedPlacementView = availablePlacements[0];
this.sinlgePlacementAvailable = true this.sinlgePlacementAvailable = true
} }
console.log(availablePlacements)
this.showLoading = false; this.showLoading = false;
}, },
error => this.handleError('System error retrieving plugins', error))); error => this.handleError('System error retrieving plugins', error)));
@ -183,72 +208,78 @@ export class PluginsComponent implements OnInit {
error => this.handleError('System error retrieving templates', 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) { public edit(plugin:Plugin, template:PluginTemplate, placement, index) {
for (let attrKey of Object.keys(template.settings)) { this.editView = true;
(this.templateForm.get("values") as FormArray).push(this._fb.group({ this.selectedPlugin = JSON.parse(JSON.stringify(plugin)); // deep copy object with nested objects
'key': this._fb.control(attrKey), this.selectedTemplate = template;
'value': this._fb.control(plugin.settingsValues[attrKey]?plugin.settingsValues[attrKey]:template.settings[attrKey].value) 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 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) { public newPlugin(template) {
this.selectedTemplate = template; this.selectedTemplate = template;
this.templateForm = this._fb.group({ this.templateForm = this._fb.group({
_id: this._fb.control(null), _id: this._fb.control(null),
pid: this._fb.control(this.selectedCommunityPid), pid: this._fb.control(this.selectedCommunityPid),
page: this._fb.control(this.selectedPageId), page: this._fb.control(this.selectedPageId),
code: this._fb.control(this.selectedTemplate.code, Validators.required), code: this._fb.control(this.selectedTemplate.code, Validators.required),
placement: this._fb.control(this.selectedTemplate.placement), placement: this._fb.control(this.selectedTemplate.placement),
order: this._fb.control(""), order: this._fb.control(""),
active: this._fb.control(false), active: this._fb.control(false),
isPriorTo: this._fb.control(false), isPriorTo: this._fb.control(false),
values: this._fb.array([]), values: this._fb.array([]),
object: this._fb.control({}) object: this._fb.control({})
}); });
for (let attrKey of Object.keys(this.selectedTemplate.settings)) { for (let attrKey of Object.keys(this.selectedTemplate.settings)) {
(this.templateForm.get("values") as FormArray).push(this._fb.group({ (this.templateForm.get("values") as FormArray).push(this._fb.group({
key: this._fb.control(attrKey), key: this._fb.control(attrKey),
value: this._fb.control(this.selectedTemplate.settings[attrKey].value ? this.selectedTemplate.settings[attrKey].value : ""), value: this._fb.control(this.selectedTemplate.settings[attrKey].value ? this.selectedTemplate.settings[attrKey].value : ""),
})); }));
}
this.selectTemplateView = false;
} }
this.selectTemplateView = false;
} */
/*public saveConfirmed(index) {
public saveConfirmed(index) {
this.showLoading = true; this.showLoading = true;
let plugin: Plugin = <Plugin>this.templateForm.getRawValue(); let plugin: Plugin = <Plugin>this.templateForm.getRawValue();
plugin.object = this.selectedPlugin.object; plugin.object = this.selectedPlugin.object;
@ -257,17 +288,27 @@ export class PluginsComponent implements OnInit {
plugin.settingsValues[fields.key] = fields.value; plugin.settingsValues[fields.key] = fields.value;
} }
let update = (plugin._id) ? true : false; let update = (plugin._id) ? true : false;
this.savePlugin(plugin,update, this.index) this.savePlugin(plugin, update, this.index)
} }*/
public savePlugin(plugin, update, index){
public savePlugin(plugin, update, index) {
this.subscriptions.push(this._pluginsService.savePlugin(plugin, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe( this.subscriptions.push(this._pluginsService.savePlugin(plugin, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
saved => { saved => {
this.savedSuccessfully(saved, update, index); this.savedSuccessfully(saved, update, index);
this.editView = false; // this.editView = false;
this.selectTemplateView = false; // this.selectTemplateView = false;
this.selectedTemplate = null; this.selectedTemplate = null;
this.selectedPlugin = null; this.selectedPlugin = null;
this.clearCache(); this.clearCache();
if (plugin.custom) {
this._router.navigate(["./edit"], {
queryParams: {
'pageId': this.selectedPageId,
pluginId: saved._id,
templateId: saved.templateId
}, relativeTo: this.route
})
}
}, },
error => this.handleUpdateError("System error creating template", error) error => this.handleUpdateError("System error creating template", error)
)); ));
@ -284,11 +325,11 @@ export class PluginsComponent implements OnInit {
} }
public filterPlugins(plugin: Plugin, template: PluginTemplate): boolean { public filterPlugins(plugin: Plugin, template: PluginTemplate): boolean {
let values =[]; let values = [];
for(let key of this.getKeys(plugin.settingsValues)){ for (let key of this.getKeys(plugin.settingsValues)) {
values.push(plugin.settingsValues[key]); values.push(plugin.settingsValues[key]);
} }
return this.searchText.toString() == '' || (plugin.templateCode + ' ' +values.join(' ') + (template?(template.name + ' ' +template.description):'')).match(this.searchText) != null; return this.searchText.toString() == '' || (plugin.templateCode + ' ' + values.join(' ') + (template ? (template.name + ' ' + template.description) : '')).match(this.searchText) != null;
} }
@ -325,11 +366,11 @@ export class PluginsComponent implements OnInit {
)); ));
} }
get attrFormArray() { /* get attrFormArray() {
return this.templateForm.get("values") as FormArray; return this.templateForm.get("values") as FormArray;
} }*/
attributeTypeChanged(form) { attributeTypeChanged(form) {
let type = form.get("value").get("type"); let type = form.get("value").get("type");
@ -359,23 +400,26 @@ export class PluginsComponent implements OnInit {
} }
getKeys(obj) { getKeys(obj) {
return obj?Object.keys(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) reset() {
} else { if (this.selectedPlugin) {
this.newPlugin(this.selectedTemplate)
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) { public togglePlugin(status: boolean, id: string, i, placement) {
this.index = i; this.index = i;
this.selectedTemplate = this.pluginsByPlacement.get(placement)[i].template; this.selectedTemplate = this.pluginsByPlacement.get(placement)[i].template;
if(id) { if (id) {
this.subscriptions.push(this._pluginsService.togglePlugin(id, status, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe( this.subscriptions.push(this._pluginsService.togglePlugin(id, status, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
() => { () => {
@ -384,13 +428,14 @@ export class PluginsComponent implements OnInit {
}, },
error => this.handleUpdateError('System error changing the status of Plugin', error) error => this.handleUpdateError('System error changing the status of Plugin', error)
)); ));
}else{ } else {
let plugin = this.pluginsByPlacement.get(placement)[i].plugin; let plugin = this.pluginsByPlacement.get(placement)[i].plugin;
plugin.active = status; plugin.active = status;
this.savePlugin(plugin, true, i); this.savePlugin(plugin, true, i);
} }
} }
pluginFieldChanged($event:PluginEditEvent){
/*pluginFieldChanged($event:PluginEditEvent){
if($event.type == "open-submenu"){ if($event.type == "open-submenu"){
this.editSubmenuOpen = true; this.editSubmenuOpen = true;
return; return;
@ -403,27 +448,28 @@ export class PluginsComponent implements OnInit {
this.selectedPlugin.object[$event.field]=$event.value; this.selectedPlugin.object[$event.field]=$event.value;
this.templateForm.markAsDirty(); this.templateForm.markAsDirty();
} }
*/
public swap(pluginToMoveUp, pluginToMoveDown, placement ){ public swap(pluginToMoveUp, pluginToMoveDown, placement) {
this.showLoading = true; this.showLoading = true;
let moveUpGroup = this.pluginsByPlacement.get(placement)[pluginToMoveUp]; let moveUpGroup = this.pluginsByPlacement.get(placement)[pluginToMoveUp];
let moveDownGroup = this.pluginsByPlacement.get(placement)[pluginToMoveDown]; let moveDownGroup = this.pluginsByPlacement.get(placement)[pluginToMoveDown];
this.pluginsByPlacement.get(placement)[pluginToMoveUp] = moveDownGroup; this.pluginsByPlacement.get(placement)[pluginToMoveUp] = moveDownGroup;
this.pluginsByPlacement.get(placement)[pluginToMoveDown] = moveUpGroup; this.pluginsByPlacement.get(placement)[pluginToMoveDown] = moveUpGroup;
this.move(moveUpGroup.plugin,true, pluginToMoveDown, placement); this.move(moveUpGroup.plugin, true, pluginToMoveDown, placement);
this.move(moveDownGroup.plugin,false, pluginToMoveUp, placement); this.move(moveDownGroup.plugin, false, pluginToMoveUp, placement);
this.showLoading = false; this.showLoading = false;
} }
public move(plugin: Plugin, up:boolean, index, placement) {
if(plugin._id) { public move(plugin: Plugin, up: boolean, index, placement) {
if (plugin._id) {
this.subscriptions.push(this._pluginsService.updatePluginOrder(plugin, this.properties.adminToolsAPIURL, up ? -1 : 1, this.selectedCommunityPid).subscribe( this.subscriptions.push(this._pluginsService.updatePluginOrder(plugin, this.properties.adminToolsAPIURL, up ? -1 : 1, this.selectedCommunityPid).subscribe(
saved => { saved => {
this.pluginsByPlacement.get(placement)[index].plugin = saved; this.pluginsByPlacement.get(placement)[index].plugin = saved;
this.clearCache(); this.clearCache();
}, },
error => this.handleUpdateError("System error creating template", error) error => this.handleUpdateError("System error creating template", error)
)); ));
}else{ } else {
plugin.order = plugin.order + (up ? -1 : 1) plugin.order = plugin.order + (up ? -1 : 1)
this.savePlugin(plugin, true, index); this.savePlugin(plugin, true, index);
@ -431,8 +477,41 @@ export class PluginsComponent implements OnInit {
} }
clearCache(){
this._clearCacheService.clearCacheInRoute(null, this.selectedCommunityPid, this.getPageById(this.selectedPageId).route) clearCache() {
this._clearCacheService.clearCacheInRoute(null, this.selectedCommunityPid, this.getPageById(this.selectedPageId).route)
this._clearCacheService.purgeBrowserCache(null, this.selectedCommunityPid) this._clearCacheService.purgeBrowserCache(null, this.selectedCommunityPid)
} }
addNewCustomPlugin(template: PluginTemplate) {
let plugin = new Plugin(this.page._id, this.selectedCommunityPid, template);
plugin.order = this.pluginsByPlacement.get(this.selectedPlacementView).length;
plugin.object = PluginUtils.initializeObjectAndCompare(template.code, null);
plugin.custom = true;
this.savePlugin(plugin, false, this.pluginsByPlacement.get(this.selectedPlacementView).length);
}
promtToDelete(i, placement) {
this.selectedPlugin = this.pluginsByPlacement.get(placement)[i].plugin;
this.selectedPlacementView = placement;
this.selectedPluginIndex = i;
this.deleteModal.alertTitle = 'Delete Confirmation';
this.deleteModal.message = 'Are you sure you want to delete the selected plugin?';
this.deleteModal.okButtonText = 'Yes';
this.deleteModal.open();
}
confirmDelete() {
this.showLoading = true;
this.subscriptions.push(this._pluginsService.deletePlugin(this.selectedPlugin._id, this.properties.adminToolsAPIURL).subscribe(
deleted => {
this.pluginsByPlacement.get(this.selectedPlacementView).splice(this.selectedPluginIndex, 1);
this.clearCache();
},
error => this.handleUpdateError("System error creating template", error)
));
this.showLoading = false;
}
} }

2
dashboard/plugins/templates/pluginTemplates.component.html
View File

@ -171,6 +171,8 @@
[options]="portalUtils.portalTypes" type="select"></div> [options]="portalUtils.portalTypes" type="select"></div>
<div input [formInput]="templateForm.get('placement')" placeholder="Placement" <div input [formInput]="templateForm.get('placement')" placeholder="Placement"
[options]="pluginUtils.placementsOptions" type="select"></div> [options]="pluginUtils.placementsOptions" type="select"></div>
<div input [formInput]="templateForm.get('custom')" placeholder="Custom"
[options]="pluginUtils.customOptions" type="select"></div>
<div *ngIf="!templateForm.get('portalType').value" input [formInput]="templateForm.get('page')" placeholder="Page" <div *ngIf="!templateForm.get('portalType').value" input [formInput]="templateForm.get('page')" placeholder="Page"
[options]="allPages" type="select"></div> [options]="allPages" type="select"></div>
<div *ngIf="templateForm.get('portalType').value" input [formInput]="templateForm.get('page')" placeholder="Page" <div *ngIf="templateForm.get('portalType').value" input [formInput]="templateForm.get('page')" placeholder="Page"

4
dashboard/plugins/templates/pluginTemplates.component.ts
View File

@ -162,6 +162,7 @@ export class PluginTemplatesComponent implements OnInit {
_id: this._fb.control(pluginTemplate._id), _id: this._fb.control(pluginTemplate._id),
name: this._fb.control(pluginTemplate.name), name: this._fb.control(pluginTemplate.name),
page: this._fb.control(this.getPageById(pluginTemplate.page)), page: this._fb.control(this.getPageById(pluginTemplate.page)),
custom: this._fb.control(pluginTemplate.custom),
portalType: this._fb.control(pluginTemplate.portalType, Validators.required), portalType: this._fb.control(pluginTemplate.portalType, Validators.required),
code: this._fb.control(pluginTemplate.code, Validators.required), code: this._fb.control(pluginTemplate.code, Validators.required),
@ -196,12 +197,13 @@ export class PluginTemplatesComponent implements OnInit {
_id: this._fb.control(null), _id: this._fb.control(null),
name: this._fb.control(''), name: this._fb.control(''),
code: this._fb.control('', Validators.required), code: this._fb.control('', Validators.required),
plan: this._fb.control('standard', Validators.required), plan: this._fb.control('Standard', Validators.required),
description: this._fb.control(''), description: this._fb.control(''),
page: this._fb.control(this.page?this.getPageById(this.page):'', Validators.required), page: this._fb.control(this.page?this.getPageById(this.page):'', Validators.required),
portalType: this._fb.control('community', Validators.required), portalType: this._fb.control('community', Validators.required),
placement: this._fb.control('top', Validators.required), placement: this._fb.control('top', Validators.required),
order: this._fb.control(''), order: this._fb.control(''),
custom: this._fb.control(false),
portalSpecific: this._fb.control(''), portalSpecific: this._fb.control(''),
defaultIsActive: this._fb.control(false), defaultIsActive: this._fb.control(false),
settings: this._fb.array([]), settings: this._fb.array([]),

6
dashboard/plugins/utils/plugin-field-edit.component.ts
View File

@ -42,7 +42,11 @@ import {UntypedFormBuilder, UntypedFormGroup} from "@angular/forms";
</ckeditor> </ckeditor>
</modal-alert> </modal-alert>
`, `,
styles: [`
:host >>> textarea.input {
border: solid 1px #3e3e3e3e !important;
}
`]
}) })
export class PluginFieldEditComponent { export class PluginFieldEditComponent {

56
dashboard/plugins/utils/pluginUtils.ts
View File

@ -1,16 +1,17 @@
import {Option} from "../../../sharedComponents/input/input.component"; import {Option} from "../../../sharedComponents/input/input.component";
import {PluginOpenAIREProducts} from "../components/openaireProducts/plugin-openaire-products.component"; import {PluginOpenAIREProducts} from "../components/openaireProducts/plugin-openaire-products.component";
import {PluginDiscoverBySubcommunity} from "../components/discover-by-subcommunity/plugin-discover-by-subcommunity.component"; import {PluginDiscoverBySubcommunity} from "../components/discover-by-subcommunity/plugin-discover-by-subcommunity.component";
import {PluginBaseInfo} from "./base-plugin.component"; import {PluginBaseInfo, PluginInfoCards, PluginURL} from "./base-plugin.component";
import {PluginGatewayInformation} from "../components/gateway-information/plugin-gateway-information.component"; import {PluginGatewayInformation} from "../components/gateway-information/plugin-gateway-information.component";
import {PluginFeaturedDatasets} from "../components/featured-datasets/plugin-featured-datasets.component"; import {PluginFeaturedDatasets} from "../components/featured-datasets/plugin-featured-datasets.component";
import {PluginSearchDepositLink} from "../components/search-deposit-link/plugin-search-deposit-link.component"; import {PluginSearchDepositLink} from "../components/search-deposit-link/plugin-search-deposit-link.component";
import {PluginOrganizations} from "../components/organizations/plugin-organizations.component"; import {PluginOrganizations} from "../components/organizations/plugin-organizations.component";
import {PluginSuggestedRepositories} from "../components/suggested-repositories/plugin-suggested-repositories.component"; import {PluginSuggestedRepositories} from "../components/suggested-repositories/plugin-suggested-repositories.component";
import {PluginGraphInfo} from "../components/graph-info/plugin-graph-info.component"; import {ParagraphInfo} from "../components/paragraph-info/plugin-graph-info.component";
import {PluginStats} from "../components/stats/plugin-stats.component"; import {PluginStats} from "../components/stats/plugin-stats.component";
import {PluginCardInfo} from "../components/card-info/plugin-card-info.component"; import {PluginCardInfo} from "../components/card-info/plugin-card-info.component";
import {PluginSearchBar} from "../components/search-bar/plugin-search-bar.component"; import {PluginSearchBar} from "../components/search-bar/plugin-search-bar.component";
import {HTMLSection} from "../components/html-section/plugin-html-section.component";
export class PluginUtils{ export class PluginUtils{
public attrTypeOptions: Option[] = [ public attrTypeOptions: Option[] = [
@ -34,9 +35,14 @@ export class PluginUtils{
{label:"Statistics", value:"stats"}, {label:"Statistics", value:"stats"},
{label:"Search Bar", value:"search-bar"}, {label:"Search Bar", value:"search-bar"},
{label:"Card info", value:"card-info"}, {label:"Card info", value:"card-info"},
{label:"Card slides", value:"card-slide"} {label:"Paragraph info", value:"paragraph-info"},
{label:"HTML section", value:"html-section"},
]; ];
public availablePluginCodes: string[] = ["openaire-products", "discover-by-subcommunity", "gateway-information", "search-deposit-link", "learn-and-connect", "how-to-use", "suggested-repositories", "featured-datasets", "organizations", "graph-info", "organizations", "stats", "search-bar","card-info", "card-slide"]; public customOptions: Option[] = [
{label:"Yes", value:"true"},
{label:"no", value:"false"}
];
public availablePluginCodes: string[] = ["openaire-products", "discover-by-subcommunity", "gateway-information", "search-deposit-link", "learn-and-connect", "how-to-use", "suggested-repositories", "featured-datasets", "organizations", "graph-info", "organizations", "stats", "search-bar","card-info", "paragraph-info", "html-section"];
public placementsOptions: Option[] = [ public placementsOptions: Option[] = [
{label:"Right", value:"right"}, {label:"Right", value:"right"},
{label:"Top", value:"top"}, {label:"Top", value:"top"},
@ -80,6 +86,12 @@ export class PluginUtils{
case 'graph-info': { case 'graph-info': {
return (new PluginGraphInfo()).compare(oldObject); return (new PluginGraphInfo()).compare(oldObject);
} }
case 'paragraph-info': {
return (new ParagraphInfo()).compare(oldObject);
}
case 'html-section': {
return (new HTMLSection()).compare(oldObject);
}
case 'stats': { case 'stats': {
return (new PluginStats()).compare(oldObject); return (new PluginStats()).compare(oldObject);
} }
@ -114,3 +126,39 @@ export class PluginUtils{
return oldObject; return oldObject;
} }
} }
export class PluginHowToUse extends PluginCardInfo{
title:string ="How to use the gateway?";
cardInfoArray: PluginInfoCards[] = [
{title: "Tutorials", description: "Mini-video tutorials for gateway managers", urlsArray:[ new PluginURL("https://www.youtube.com/playlist?list=PL0c4IRNUxuKcyRUQ_J9BH_EE1amXU6kgp","View all")], show:true},
{title: "Guides", description: "Textual guides on gateway functionalities.", urlsArray:[ new PluginURL("https://www.openaire.eu/research-community-gateway-guide","Guide for the users")/*, new PluginURL("","Guide for the managers")*/], show:true},
{title: "Webinars", description: "Recordings and slides of webinars on different aspects of Open Science.", urlsArray:[ new PluginURL("","View all")], show:true}
];
compare(oldObject){
oldObject = super.compare(oldObject)
for(let card of this.cardInfoArray){
}
return oldObject;
}
}
export class PluginLearnAndConnect extends PluginCardInfo{
title:string ="Learn & Connect with Open Science";
cardInfoArray:PluginInfoCards[] = [
{title: "OS Practices", description: "Open Science best practices for your community, policies and mandates.",
urlsArray:[ new PluginURL("","")], show:true},
{title: "OS Guides for beginners", description: "New to Open Science? Learn the basics!",urlsArray:[ new PluginURL("https://www.openaire.eu/guides","Learn more")], show:true},
{title: "Webinars", description: "Recordings and slides of webinars on different aspects of Open Science.",urlsArray:[ new PluginURL("https://www.openaire.eu/support/webinars","Learn more")], show:true}
];
}
export class PluginGraphInfo extends ParagraphInfo{
title:string ="How? It's about open data and collaboration"
paragraph1:string = `This 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 of research objects, and embedding impact and usage indicators. 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).";
url:PluginURL= new PluginURL("https://graph.openaire.eu","Learn more")
image:string = "assets/common-assets/common/graph-nodes.svg"
}

5
dashboard/plugins/wrapper/plugin-edit-wrapper.component.ts
View File

@ -31,7 +31,7 @@ import {PluginUtils} from "../utils/pluginUtils";
<ng-container *ngIf="pluginTemplate.code == 'organizations'"> <ng-container *ngIf="pluginTemplate.code == 'organizations'">
<plugin-organizations-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-organizations-form> <plugin-organizations-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-organizations-form>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'graph-info'"> <ng-container *ngIf="pluginTemplate.code == 'graph-info' || pluginTemplate.code == 'paragraph-info'">
<plugin-graph-info-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-graph-info-form> <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-container *ngIf="pluginTemplate.code == 'stats'"> <ng-container *ngIf="pluginTemplate.code == 'stats'">
@ -43,6 +43,9 @@ import {PluginUtils} from "../utils/pluginUtils";
<ng-container *ngIf="pluginTemplate.code == 'card-info' || pluginTemplate.code == 'learn-and-connect' || pluginTemplate.code == 'how-to-use'"> <ng-container *ngIf="pluginTemplate.code == 'card-info' || pluginTemplate.code == 'learn-and-connect' || pluginTemplate.code == 'how-to-use'">
<plugin-card-info-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-card-info-form> <plugin-card-info-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-card-info-form>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'html-section'">
<plugin-html-section-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-html-section-form>
</ng-container>
</ng-container> </ng-container>
<ng-template #noplugin> <ng-template #noplugin>
<div class="uk-text-muted uk-text-center"> <div class="uk-text-muted uk-text-center">

5
dashboard/plugins/wrapper/plugin-edit-wrapper.module.ts
View File

@ -12,12 +12,13 @@ import {PluginSearchDepositLinkFormComponent} from "../components/search-deposit
import {PluginOrganizationsFormComponent} from "../components/organizations/plugin-organizations.form.component"; import {PluginOrganizationsFormComponent} from "../components/organizations/plugin-organizations.form.component";
import {IconsModule} from "../../../utils/icons/icons.module"; import {IconsModule} from "../../../utils/icons/icons.module";
import {PluginSuggestedRepositoriesFormComponent} from "../components/suggested-repositories/plugin-suggested-repositories.form.component"; import {PluginSuggestedRepositoriesFormComponent} from "../components/suggested-repositories/plugin-suggested-repositories.form.component";
import {PluginGraphInfoFormComponent} from "../components/graph-info/plugin-graph-info.form.component"; import {PluginGraphInfoFormComponent} from "../components/paragraph-info/plugin-graph-info.form.component";
import {PluginStatsFormComponent} from "../components/stats/plugin-stats.form.component"; import {PluginStatsFormComponent} from "../components/stats/plugin-stats.form.component";
import {PluginSearchBarFormComponent} from "../components/search-bar/plugin-search-bar.form.component"; import {PluginSearchBarFormComponent} from "../components/search-bar/plugin-search-bar.form.component";
import {PluginCardInfoFormComponent} from "../components/card-info/plugin-card-info-form.component"; import {PluginCardInfoFormComponent} from "../components/card-info/plugin-card-info-form.component";
import {CKEditorModule} from "ng2-ckeditor"; import {CKEditorModule} from "ng2-ckeditor";
import {InputModule} from "../../../sharedComponents/input/input.module"; import {InputModule} from "../../../sharedComponents/input/input.module";
import {PluginHtmlSectionFormComponent} from "../components/html-section/plugin-html-section.form.component";
@NgModule({ @NgModule({
imports: [ imports: [
@ -25,7 +26,7 @@ import {InputModule} from "../../../sharedComponents/input/input.module";
ReactiveFormsModule, InputModule, ReactiveFormsModule, InputModule,
FormsModule, PluginFieldEditModule, IconsModule, CKEditorModule, FormsModule, PluginFieldEditModule, IconsModule, CKEditorModule,
], ],
declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent, PluginStatsFormComponent, PluginSearchBarFormComponent, PluginCardInfoFormComponent], declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent, PluginStatsFormComponent, PluginSearchBarFormComponent, PluginCardInfoFormComponent, PluginHtmlSectionFormComponent],
exports: [PluginEditWrapperComponent] exports: [PluginEditWrapperComponent]
}) })

5
dashboard/plugins/wrapper/plugin-wrapper.component.ts
View File

@ -29,7 +29,7 @@ import {PluginUtils} from "../utils/pluginUtils";
<ng-container *ngIf="pluginTemplate.code == 'organizations'"> <ng-container *ngIf="pluginTemplate.code == 'organizations'">
<plugin-organizations [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-organizations> <plugin-organizations [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-organizations>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'graph-info'"> <ng-container *ngIf="pluginTemplate.code == 'graph-info' || pluginTemplate.code == 'paragraph-info'">
<plugin-graph-info [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-graph-info> <plugin-graph-info [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-graph-info>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'stats'"> <ng-container *ngIf="pluginTemplate.code == 'stats'">
@ -41,6 +41,9 @@ import {PluginUtils} from "../utils/pluginUtils";
<ng-container *ngIf="pluginTemplate.code == 'card-info' || pluginTemplate.code == 'learn-and-connect' || pluginTemplate.code == 'how-to-use'"> <ng-container *ngIf="pluginTemplate.code == 'card-info' || pluginTemplate.code == 'learn-and-connect' || pluginTemplate.code == 'how-to-use'">
<plugin-card-info [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-card-info> <plugin-card-info [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-card-info>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'html-section'">
<plugin-html-section [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" [previewInAdmin]="previewInAdmin" ></plugin-html-section>
</ng-container>
</div> </div>
<ng-template #noplugin> <ng-template #noplugin>
<div class="uk-text-muted uk-text-center"> <div class="uk-text-muted uk-text-center">

4
dashboard/plugins/wrapper/plugin-wrapper.module.ts
View File

@ -10,15 +10,15 @@ import {PluginSearchDepositLinkModule} from '../components/search-deposit-link/p
import {PluginSuggestedRepositoriesModule} from '../components/suggested-repositories/plugin-suggested-repositories.module'; import {PluginSuggestedRepositoriesModule} from '../components/suggested-repositories/plugin-suggested-repositories.module';
import {PluginFeaturedDatasetsModule} from '../components/featured-datasets/plugin-featured-datasets.module'; import {PluginFeaturedDatasetsModule} from '../components/featured-datasets/plugin-featured-datasets.module';
import {PluginOrganizationsModule} from "../components/organizations/plugin-organizations.module"; import {PluginOrganizationsModule} from "../components/organizations/plugin-organizations.module";
import {PluginGraphInfoModule} from "../components/graph-info/plugin-graph-info.module";
import {PluginStatsModule} from "../components/stats/plugin-stats.module"; import {PluginStatsModule} from "../components/stats/plugin-stats.module";
import {PluginSearchBarModule} from "../components/search-bar/plugin-search-bar.module"; import {PluginSearchBarModule} from "../components/search-bar/plugin-search-bar.module";
import {PluginCardInfoModule} from "../components/card-info/plugin-card-info.module"; import {PluginCardInfoModule} from "../components/card-info/plugin-card-info.module";
import {PluginHtmlSectionModule} from "../components/html-section/plugin-html-section.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule, CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule,
PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginGraphInfoModule, PluginStatsModule, PluginSearchBarModule, PluginCardInfoModule PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginHtmlSectionModule, PluginStatsModule, PluginSearchBarModule, PluginCardInfoModule
], ],
declarations: [PluginWrapperComponent], declarations: [PluginWrapperComponent],
exports: [PluginWrapperComponent] exports: [PluginWrapperComponent]

3
services/clear-cache.service.ts
View File

@ -20,11 +20,10 @@ export class ClearCacheService {
} }
} }
clearCacheInRoute(message: string = null, pid:string, route:string = "/") { clearCacheInRoute(message: string = null, pid:string, route:string = "/") {
let domain = ""; let domain = properties.connectPortalUrl;
if(properties.environment == 'production' || properties.environment == 'beta') { if(properties.environment == 'production' || properties.environment == 'beta') {
domain = 'https://' + (properties.environment == 'production' ? '' : 'beta.') + pid + '.openaire.eu'; domain = 'https://' + (properties.environment == 'production' ? '' : 'beta.') + pid + '.openaire.eu';
} }
domain = properties.connectPortalUrl;
this.http.get(domain + route + '?forceCacheReload=true', this.http.get(domain + route + '?forceCacheReload=true',
{ {
headers: new HttpHeaders({ headers: new HttpHeaders({

11
services/plugins.service.ts
View File

@ -34,6 +34,9 @@ export class PluginsService {
deletePluginTemplate(id, api: string) { deletePluginTemplate(id, api: string) {
return this.http.delete<PluginTemplate>(api + 'pluginTemplate/' + id, CustomOptions.getAuthOptionsWithBody()); return this.http.delete<PluginTemplate>(api + 'pluginTemplate/' + id, CustomOptions.getAuthOptionsWithBody());
} }
deletePlugin(id, api: string) {
return this.http.delete<PluginTemplate>(api + 'plugin/' + id, CustomOptions.getAuthOptionsWithBody());
}
countPluginTemplatePerPage(api: string, pid: string) { countPluginTemplatePerPage(api: string, pid: string) {
return this.http.get(api + properties.adminToolsPortalType + '/' + pid + '/pluginTemplate/page/count'); return this.http.get(api + properties.adminToolsPortalType + '/' + pid + '/pluginTemplate/page/count');
@ -62,4 +65,12 @@ export class PluginsService {
togglePlugin(id: string, status: boolean, api: string, community) { togglePlugin(id: string, status: boolean, api: string, community) {
return this.http.post(api + 'community/' + community + '/plugin/status/' + id, status, CustomOptions.getAuthOptionsWithBody()); return this.http.post(api + 'community/' + community + '/plugin/status/' + id, status, CustomOptions.getAuthOptionsWithBody());
} }
getPluginById(api: string, id: string) {
return this.http.get<Plugin>(api + '/plugin/' + id);
}
getPluginTemplateById(api: string, id: string) {
return this.http.get<PluginTemplate>(api + '/pluginTemplates/' + id);
}
} }

1
utils/entities/adminTool/plugin.ts
View File

@ -9,6 +9,7 @@ export class Plugin {
placement: string; placement: string;
order: number; order: number;
active:boolean; active:boolean;
custom:boolean = false;
object:any; object:any;
settingsValues:Map<string,string> = new Map<string, string>(); settingsValues:Map<string,string> = new Map<string, string>();

1
utils/entities/adminTool/pluginTemplate.ts
View File

@ -7,6 +7,7 @@ export class PluginTemplate{
description: string; description: string;
image: string; image: string;
page: string; page: string;
custom:boolean = false;
plan: "starter" | "extended"; plan: "starter" | "extended";
portalSpecific:string[]; portalSpecific:string[];
defaultIsActive:boolean = false; defaultIsActive:boolean = false;