From e7bbe7a359588e3084ae0def4d064ac448ca851c Mon Sep 17 00:00:00 2001 From: argirok Date: Wed, 22 May 2024 11:09:18 +0300 Subject: [PATCH] [plugins-functionality | DONE | ADDED ] add and delete custom plugins, edit plugin in distinct route, add prompt to go back to plugins list --- .../plugin-card-info-form.component.ts | 7 +- .../card-info/plugin-card-info.component.html | 2 +- .../graph-info/plugin-graph-info.component.ts | 24 -- .../plugin-html-section.component.ts | 25 ++ .../plugin-html-section.form.component.ts | 27 ++ .../plugin-html-section.module.ts | 22 ++ .../plugin-graph-info.component.html | 2 +- .../plugin-graph-info.component.ts | 24 ++ .../plugin-graph-info.form.component.ts | 8 +- .../plugin-graph-info.module.ts | 0 .../plugin-search-deposit-link.component.html | 2 +- ...ugin-search-deposit-link.form.component.ts | 7 +- .../plugins-form/pluginsForm.component.html | 12 +- .../plugins-form/pluginsForm.component.ts | 289 +++------------ .../plugins-form/pluginsForm.module.ts | 5 +- dashboard/plugins/plugins.component.html | 171 +++------ dashboard/plugins/plugins.component.ts | 331 +++++++++++------- .../templates/pluginTemplates.component.html | 2 + .../templates/pluginTemplates.component.ts | 4 +- .../utils/plugin-field-edit.component.ts | 6 +- dashboard/plugins/utils/pluginUtils.ts | 56 ++- .../wrapper/plugin-edit-wrapper.component.ts | 5 +- .../wrapper/plugin-edit-wrapper.module.ts | 5 +- .../wrapper/plugin-wrapper.component.ts | 5 +- .../plugins/wrapper/plugin-wrapper.module.ts | 4 +- services/clear-cache.service.ts | 3 +- services/plugins.service.ts | 11 + utils/entities/adminTool/plugin.ts | 1 + utils/entities/adminTool/pluginTemplate.ts | 1 + 29 files changed, 532 insertions(+), 529 deletions(-) delete mode 100644 dashboard/plugins/components/graph-info/plugin-graph-info.component.ts create mode 100644 dashboard/plugins/components/html-section/plugin-html-section.component.ts create mode 100644 dashboard/plugins/components/html-section/plugin-html-section.form.component.ts create mode 100644 dashboard/plugins/components/html-section/plugin-html-section.module.ts rename dashboard/plugins/components/{graph-info => paragraph-info}/plugin-graph-info.component.html (92%) create mode 100644 dashboard/plugins/components/paragraph-info/plugin-graph-info.component.ts rename dashboard/plugins/components/{graph-info => paragraph-info}/plugin-graph-info.form.component.ts (85%) rename dashboard/plugins/components/{graph-info => paragraph-info}/plugin-graph-info.module.ts (100%) diff --git a/dashboard/plugins/components/card-info/plugin-card-info-form.component.ts b/dashboard/plugins/components/card-info/plugin-card-info-form.component.ts index 1c5c8f56..7a5001e4 100644 --- a/dashboard/plugins/components/card-info/plugin-card-info-form.component.ts +++ b/dashboard/plugins/components/card-info/plugin-card-info-form.component.ts @@ -65,11 +65,14 @@ import {PluginCardInfo} from "./plugin-card-info.component"; (changed)="cardValueChanged(selectedIndex, $event)">
-
- Check icons +
+
+ More options +
+
Link #{{j + 1}}
diff --git a/dashboard/plugins/components/card-info/plugin-card-info.component.html b/dashboard/plugins/components/card-info/plugin-card-info.component.html index 76a43380..cef8227f 100644 --- a/dashboard/plugins/components/card-info/plugin-card-info.component.html +++ b/dashboard/plugins/components/card-info/plugin-card-info.component.html @@ -20,7 +20,7 @@
+ [target]="url.target" [routerLink]="url.route?url.url:null" [class.uk-disabled] =previewInAdmin> {{url.linkText}} diff --git a/dashboard/plugins/components/graph-info/plugin-graph-info.component.ts b/dashboard/plugins/components/graph-info/plugin-graph-info.component.ts deleted file mode 100644 index 4867d9c8..00000000 --- a/dashboard/plugins/components/graph-info/plugin-graph-info.component.ts +++ /dev/null @@ -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{ - constructor() { - super(); - } - -} diff --git a/dashboard/plugins/components/html-section/plugin-html-section.component.ts b/dashboard/plugins/components/html-section/plugin-html-section.component.ts new file mode 100644 index 00000000..c8dfa8a5 --- /dev/null +++ b/dashboard/plugins/components/html-section/plugin-html-section.component.ts @@ -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: ` +

{{pluginObject.title}}

+
+
+ ` +}) +export class PluginHtmlSectionComponent extends PluginBaseComponent{ + constructor() { + super(); + } + +} diff --git a/dashboard/plugins/components/html-section/plugin-html-section.form.component.ts b/dashboard/plugins/components/html-section/plugin-html-section.form.component.ts new file mode 100644 index 00000000..a03e2c50 --- /dev/null +++ b/dashboard/plugins/components/html-section/plugin-html-section.form.component.ts @@ -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: ` +
+ + +
+ +
+
+ + `, + + +}) +export class PluginHtmlSectionFormComponent extends PluginBaseFormComponent { + constructor() { + super() + + } +} diff --git a/dashboard/plugins/components/html-section/plugin-html-section.module.ts b/dashboard/plugins/components/html-section/plugin-html-section.module.ts new file mode 100644 index 00000000..534e8d91 --- /dev/null +++ b/dashboard/plugins/components/html-section/plugin-html-section.module.ts @@ -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 { + +} diff --git a/dashboard/plugins/components/graph-info/plugin-graph-info.component.html b/dashboard/plugins/components/paragraph-info/plugin-graph-info.component.html similarity index 92% rename from dashboard/plugins/components/graph-info/plugin-graph-info.component.html rename to dashboard/plugins/components/paragraph-info/plugin-graph-info.component.html index 9aa6ef24..8d8f17bf 100644 --- a/dashboard/plugins/components/graph-info/plugin-graph-info.component.html +++ b/dashboard/plugins/components/paragraph-info/plugin-graph-info.component.html @@ -12,7 +12,7 @@
Graph nodes + [src]="pluginObject.image" alt="Graph nodes" loading="lazy"> diff --git a/dashboard/plugins/components/paragraph-info/plugin-graph-info.component.ts b/dashboard/plugins/components/paragraph-info/plugin-graph-info.component.ts new file mode 100644 index 00000000..46fe0595 --- /dev/null +++ b/dashboard/plugins/components/paragraph-info/plugin-graph-info.component.ts @@ -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{ + constructor() { + super(); + } + +} diff --git a/dashboard/plugins/components/graph-info/plugin-graph-info.form.component.ts b/dashboard/plugins/components/paragraph-info/plugin-graph-info.form.component.ts similarity index 85% rename from dashboard/plugins/components/graph-info/plugin-graph-info.form.component.ts rename to dashboard/plugins/components/paragraph-info/plugin-graph-info.form.component.ts index 4db3a29a..29bec860 100644 --- a/dashboard/plugins/components/graph-info/plugin-graph-info.form.component.ts +++ b/dashboard/plugins/components/paragraph-info/plugin-graph-info.form.component.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component"; -import {PluginGraphInfo} from "./plugin-graph-info.component"; +import {ParagraphInfo} from "./plugin-graph-info.component"; @Component({ selector: 'plugin-graph-info-form', @@ -8,6 +8,10 @@ import {PluginGraphInfo} from "./plugin-graph-info.component";
+
+ +
@@ -32,7 +36,7 @@ import {PluginGraphInfo} from "./plugin-graph-info.component"; }) -export class PluginGraphInfoFormComponent extends PluginBaseFormComponent { +export class PluginGraphInfoFormComponent extends PluginBaseFormComponent { constructor() { super() diff --git a/dashboard/plugins/components/graph-info/plugin-graph-info.module.ts b/dashboard/plugins/components/paragraph-info/plugin-graph-info.module.ts similarity index 100% rename from dashboard/plugins/components/graph-info/plugin-graph-info.module.ts rename to dashboard/plugins/components/paragraph-info/plugin-graph-info.module.ts diff --git a/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html b/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html index 8146aac9..7c844e1b 100644 --- a/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html +++ b/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html @@ -17,7 +17,7 @@
{{card.description}}
+ [class.uk-hidden]="!(url.url && url.url.length > 0)" [routerLink]="url.route?url.url:null" [class.uk-disabled] =previewInAdmin> {{url.linkText}} diff --git a/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.form.component.ts b/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.form.component.ts index 2b159628..1bf696a2 100644 --- a/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.form.component.ts +++ b/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.form.component.ts @@ -20,7 +20,7 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin. - {{card.title}} + {{card.tag?card.tag:card.title}}
@@ -47,6 +47,11 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
+
+ +
+ diff --git a/dashboard/plugins/plugins-form/pluginsForm.component.ts b/dashboard/plugins/plugins-form/pluginsForm.component.ts index 8c67c742..1042715b 100644 --- a/dashboard/plugins/plugins-form/pluginsForm.component.ts +++ b/dashboard/plugins/plugins-form/pluginsForm.component.ts @@ -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 {HelpContentService} from "../../../services/help-content.service"; -import { - FormArray, - FormGroup, - UntypedFormArray, - UntypedFormBuilder, - UntypedFormGroup, - ValidatorFn, - Validators -} from "@angular/forms"; +import {FormArray, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators} from "@angular/forms"; import {Page} from "../../../utils/entities/adminTool/page"; import {EnvProperties} from '../../../utils/properties/env-properties'; import {HelperFunctions} from "../../../utils/HelperFunctions.class"; import {Subscriber} from "rxjs"; import {properties} from "../../../../../environments/environment"; -import {PortalUtils} from "../../portal/portalHelper"; -import {Option} from "../../../sharedComponents/input/input.component"; import {Title} from "@angular/platform-browser"; import {ClearCacheService} from "../../../services/clear-cache.service"; import {NotificationHandler} from "../../../utils/notification-handler"; @@ -29,45 +19,34 @@ import {PluginUtils} from "../utils/pluginUtils"; import {CommunityService} from "../../../connect/community/community.service"; import {CommunityInfo} from "../../../connect/community/communityInfo"; import {PluginEditEvent} from "../utils/base-plugin.form.component"; +import {AlertModal} from "../../../utils/modal/alert"; @Component({ selector: 'plugins-form', templateUrl: './pluginsForm.component.html', }) export class PluginsFormComponent implements OnInit { - private selectedId: string; - public pluginsByPlacement: Map = new Map(); - public plugins: Plugin[] = []; - public pluginTemplates: PluginTemplate[] = []; public selectedTemplate: PluginTemplate = null; public selectedPlugin: Plugin = null; - public editView = false; - public selectTemplateView = false; public templateForm: UntypedFormGroup; - public pagesCtrl: UntypedFormArray; urlValidator: ValidatorFn = StringUtils.urlValidator; - private searchText: RegExp = new RegExp(''); - public keyword: string = ""; public properties: EnvProperties = properties; - public formPages: Page[] = []; public showLoading: boolean = true; private subscriptions: any[] = []; - public allPages: Option[] = []; public pluginUtils = new PluginUtils(); selectedCommunityPid = null; - public portalUtils: PortalUtils = new PortalUtils(); - private index: number; public portal: string; public selectedPageId: string; + public selectedTemplateId: string; + public selectedPluginId: string; public community: Portal; public page: Page; - public templateView = false; - public templateCode:string = null; public template; public selectedPlacementView = "all"; - public sinlgePlacementAvailable = false; communityInfo:CommunityInfo = null; editSubmenuOpen = false; + @ViewChild('backAlert') backAlert: AlertModal; + constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, private communityService: CommunityService, private title: Title, private _helpContentService: HelpContentService, @@ -89,11 +68,14 @@ export class PluginsFormComponent implements OnInit { this.subscriptions.push(this.route.queryParams.subscribe(params => { HelperFunctions.scroll(); this.selectedPageId = params['pageId']; + this.selectedPluginId = params['pluginId']; + this.selectedTemplateId = params['templateId']; + if (this.portal && this.selectedPageId) { this.getPage(this.selectedPageId); } - if (!this.selectedPageId && !this.templateView) { - this._router.navigate(['../pages'], {relativeTo: this.route}); + if (!this.selectedPageId) { + 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) { this.showLoading = true; this.subscriptions.push(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal).subscribe( page => { if (this.properties.adminToolsPortalType != page.portalType) { - this._router.navigate(['./pageContents']); + this._router.navigate(['..'],{ relativeTo: this.route}); } else { this.page = page; - this.getPagePlugins(); + this.getPluginAndTemplate(); } }, error => this.handleError('System error retrieving page', error))); } - getPagePlugins() { - this.showLoading = true; - this.subscriptions.push(this._pluginsService.getPluginTemplatesByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe( - templates => { - this.pluginTemplates = templates; + getPluginAndTemplate(){ + if(this.selectedTemplateId){ + this.subscriptions.push(this._pluginsService.getPluginTemplateById(this.properties.adminToolsAPIURL, this.selectedTemplateId).subscribe(template => { + this.selectedTemplate = template; + 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 => { - this.plugins = plugins; - this.pluginsByPlacement = new Map(); - for(let pos of this.pluginUtils.placementsOptions){ - this.pluginsByPlacement.set(pos.value,[]); - } - let self = this; - this.pluginTemplates.forEach(_ => { - let plugin:Plugin = null; - for(let pl of plugins){ - if (pl.templateId == _._id){ - plugin = pl; - } - } - if(!plugin){ - plugin = new Plugin(this.selectedPageId, this.selectedCommunityPid,_); - this.plugins.push(plugin); - } - plugin.object = PluginUtils.initializeObjectAndCompare(_.code,plugin.object) - this.pluginsByPlacement.get(plugin.placement).push({plugin: plugin, template: _ , 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))); + } + }, error =>{ + this._router.navigate(['../'], {queryParams: {pageId:this.selectedPageId}, relativeTo: this.route}); + })); - }, - error => this.handleError('System error retrieving templates', error))); + }else{ + this._router.navigate(['../'], {queryParams: {pageId:this.selectedPageId}, relativeTo: this.route}); + } } - - 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); + public edit(plugin:Plugin, template:PluginTemplate) { this.templateForm = this._fb.group({ _id: this._fb.control(plugin._id), - pid: this._fb.control(this.selectedCommunityPid), + pid: this._fb.control(plugin.pid), page: this._fb.control(plugin.page), templateCode: this._fb.control(plugin.templateCode, Validators.required), templateId: this._fb.control(plugin.templateId, Validators.required), @@ -209,45 +152,10 @@ export class PluginsFormComponent implements OnInit { )); } } + this.showLoading = false; } - public newPluginSelectTemplate() { - this.selectedPlugin = null; - this.editView = true; - if(!this.templateView) { - this.selectedTemplate = null; - this.selectTemplateView = true; - }else{ - this.newPlugin( Object.assign({}, this.template)); - } - } - - public newPlugin(template) { - this.selectedTemplate = template; - this.templateForm = this._fb.group({ - _id: this._fb.control(null), - pid: this._fb.control(this.selectedCommunityPid), - page: this._fb.control(this.selectedPageId), - code: this._fb.control(this.selectedTemplate.code, Validators.required), - placement: this._fb.control(this.selectedTemplate.placement), - order: this._fb.control(""), - active: this._fb.control(false), - isPriorTo: this._fb.control(false), - values: this._fb.array([]), - object: this._fb.control({}) - }); - for (let attrKey of Object.keys(this.selectedTemplate.settings)) { - (this.templateForm.get("values") as FormArray).push(this._fb.group({ - key: this._fb.control(attrKey), - value: this._fb.control(this.selectedTemplate.settings[attrKey].value ? this.selectedTemplate.settings[attrKey].value : ""), - })); - - } - this.selectTemplateView = false; - - } - - public saveConfirmed(index) { + public saveConfirmed() { this.showLoading = true; let plugin: Plugin = this.templateForm.getRawValue(); plugin.object = this.selectedPlugin.object; @@ -256,14 +164,12 @@ export class PluginsFormComponent implements OnInit { plugin.settingsValues[fields.key] = fields.value; } 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( saved => { - this.savedSuccessfully(saved, update, index); - this.editView = false; - this.selectTemplateView = false; + this._router.navigate(["../"], {queryParams: {pageId:this.selectedPageId}, relativeTo: this.route} ) this.selectedTemplate = 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) { @@ -306,23 +196,6 @@ export class PluginsFormComponent implements OnInit { this.showLoading = false; } - getPages() { - this.showLoading = true; - this.subscriptions.push(this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe( - pages => { - this.allPages = []; - pages.forEach(page => { - this.allPages.push({ - label: page.name + " [" + page.portalType + "]", - value: page - }); - }); - this.showLoading = false; - }, - error => this.handleError('System error retrieving pages', error) - )); - } - get attrFormArray() { return this.templateForm.get("values") as FormArray; @@ -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) { return obj?Object.keys(obj):[]; } reset() { - if (this.selectedPlugin) { - - this.edit(this.pluginsByPlacement.get(this.selectedTemplate.placement)[this.index].plugin, this.selectedTemplate, this.selectedTemplate.placement, this.index) - } else { - this.newPlugin(this.selectedTemplate) - } + this.edit(this.selectedPlugin, 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){ if($event.type == "open-submenu"){ this.editSubmenuOpen = true; @@ -403,28 +233,19 @@ export class PluginsFormComponent implements OnInit { this.templateForm.markAsDirty(); } - public swap(pluginToMoveUp, pluginToMoveDown, placement ){ - this.showLoading = true; - let moveUpGroup = this.pluginsByPlacement.get(placement)[pluginToMoveUp]; - let moveDownGroup = this.pluginsByPlacement.get(placement)[pluginToMoveDown]; - this.pluginsByPlacement.get(placement)[pluginToMoveUp] = moveDownGroup; - this.pluginsByPlacement.get(placement)[pluginToMoveDown] = moveUpGroup; - this.move(moveUpGroup.plugin,true, pluginToMoveDown, placement); - this.move(moveDownGroup.plugin,false, pluginToMoveUp, placement); - this.showLoading = false; - } - public move(plugin: Plugin, up:boolean, index, placement) { - if(plugin._id) { - this.subscriptions.push(this._pluginsService.updatePluginOrder(plugin, this.properties.adminToolsAPIURL, up ? -1 : 1, this.selectedCommunityPid).subscribe( - saved => { - this.pluginsByPlacement.get(placement)[index].plugin = saved; - }, - error => this.handleUpdateError("System error creating template", error) - )); + promtToGoBack() { + if(this.templateForm.dirty) { + this.backAlert.alertTitle = 'Leave page'; + this.backAlert.message = 'Are you sure you want to leave the page?'; + this.backAlert.okButtonText = 'Yes'; + this.backAlert.open(); }else{ - - plugin.order = plugin.order + (up ? -1 : 1) - this.savePlugin(plugin, true, index); + this.confirmGoBack(); } + + } + + confirmGoBack() { + this._router.navigate(["../"],{queryParams:{pageId:this.selectedPageId},relativeTo:this.route}) } } diff --git a/dashboard/plugins/plugins-form/pluginsForm.module.ts b/dashboard/plugins/plugins-form/pluginsForm.module.ts index 5456b8a8..99b45ec8 100644 --- a/dashboard/plugins/plugins-form/pluginsForm.module.ts +++ b/dashboard/plugins/plugins-form/pluginsForm.module.ts @@ -25,14 +25,15 @@ import {SideBarModule} from "../../sharedComponents/sidebar/sideBar.module"; import {PluginEditWrapperModule} from "../wrapper/plugin-edit-wrapper.module"; import {PluginsFormComponent} from "./pluginsForm.component"; import {PluginsFormRoutingModule} from "./pluginsForm-routing.module"; +import {AlertModalModule} from "../../../utils/modal/alertModal.module"; @NgModule({ imports: [ CommonModule, RouterModule, FormsModule, - ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule, + ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule, MatCheckboxModule, AdminTabsModule, PageContentModule, PluginsFormRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule, - MatSlideToggleModule, PluginWrapperModule, SideBarModule, PluginEditWrapperModule + MatSlideToggleModule, PluginWrapperModule, SideBarModule, PluginEditWrapperModule, AlertModalModule ], providers:[PluginsService], declarations: [PluginsFormComponent], diff --git a/dashboard/plugins/plugins.component.html b/dashboard/plugins/plugins.component.html index 7f53352e..e4db7ba9 100644 --- a/dashboard/plugins/plugins.component.html +++ b/dashboard/plugins/plugins.component.html @@ -1,101 +1,10 @@ -
-
-
+
@@ -111,31 +20,51 @@ (click)="selectedPlacementView = position.value">{{position.label}} - -
- Show active -
+
-
+
-
- +
- + +
+ +
+ Show active +
+
+ + + + Add custom plugin + + +
+ +
+
+
No plugins found
@@ -182,9 +111,19 @@
- -
+
+ + + Edit + +
+
+ + +
+
+ +
-
+
-
+
-
+ + diff --git a/dashboard/plugins/plugins.component.ts b/dashboard/plugins/plugins.component.ts index 2207b069..59b131f2 100644 --- a/dashboard/plugins/plugins.component.ts +++ b/dashboard/plugins/plugins.component.ts @@ -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 {HelpContentService} from "../../services/help-content.service"; -import { - FormArray, - FormGroup, - UntypedFormArray, - UntypedFormBuilder, - UntypedFormGroup, - ValidatorFn, - Validators -} from "@angular/forms"; +import {FormArray, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, ValidatorFn} from "@angular/forms"; import {Page} from "../../utils/entities/adminTool/page"; import {EnvProperties} from '../../utils/properties/env-properties'; import {HelperFunctions} from "../../utils/HelperFunctions.class"; @@ -28,28 +20,27 @@ import {PluginTemplate} from "../../utils/entities/adminTool/pluginTemplate"; import {PluginUtils} from "./utils/pluginUtils"; import {CommunityService} from "../../connect/community/community.service"; import {CommunityInfo} from "../../connect/community/communityInfo"; -import {PluginEditEvent} from "./utils/base-plugin.form.component"; +import {AlertModal} from "../../utils/modal/alert"; @Component({ selector: 'plugins', templateUrl: './plugins.component.html', }) export class PluginsComponent implements OnInit { - private selectedId: string; - public pluginsByPlacement: Map = new Map(); + public pluginsByPlacement: Map = new Map(); public plugins: Plugin[] = []; public pluginTemplates: PluginTemplate[] = []; public selectedTemplate: PluginTemplate = null; public selectedPlugin: Plugin = null; - public editView = false; - public selectTemplateView = false; - public templateForm: UntypedFormGroup; - public pagesCtrl: UntypedFormArray; + // public editView = false; + // public selectTemplateView = false; + // public templateForm: UntypedFormGroup; + // public pagesCtrl: UntypedFormArray; urlValidator: ValidatorFn = StringUtils.urlValidator; private searchText: RegExp = new RegExp(''); public keyword: string = ""; public properties: EnvProperties = properties; - public formPages: Page[] = []; + // public formPages: Page[] = []; public showLoading: boolean = true; private subscriptions: any[] = []; public allPages: Option[] = []; @@ -62,13 +53,16 @@ export class PluginsComponent implements OnInit { public community: Portal; public page: Page; public templateView = false; - public templateCode:string = null; - public template; + // public templateCode: string = null; + // public template; public selectedPlacementView = "all"; + public selectedPluginIndex = null; public sinlgePlacementAvailable = false; - communityInfo:CommunityInfo = null; - editSubmenuOpen = false; - filterActive = true; + communityInfo: CommunityInfo = null; + // editSubmenuOpen = false; + filterActive = false; + @ViewChild('deleteModal') deleteModal: AlertModal; + constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, private communityService: CommunityService, private title: Title, private _helpContentService: HelpContentService, @@ -144,37 +138,68 @@ export class PluginsComponent implements OnInit { plugins => { this.plugins = plugins; this.pluginsByPlacement = new Map(); - for(let pos of this.pluginUtils.placementsOptions){ - this.pluginsByPlacement.set(pos.value,[]); + 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){ + console.log("pl template", _.code, _.custom) + let plugin: Plugin = null; + for (let pl of plugins) { + if (pl.templateId == _._id) { plugin = pl; } } - if(!plugin){ - plugin = new Plugin(this.selectedPageId, this.selectedCommunityPid,_); + if (!plugin && !_.custom) { + 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}); + + 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 = []; - for(let placement of this.pluginUtils.placementsOptions){ - if(this.pluginsByPlacement.get(placement.value).length > 0){ + 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]; + console.log(availablePlacements) + if (availablePlacements.length == 1) { + this.selectedPlacementView = availablePlacements[0]; this.sinlgePlacementAvailable = true } + console.log(availablePlacements) + this.showLoading = false; }, 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))); } - public edit(plugin:Plugin, template:PluginTemplate, placement, index) { - this.editView = true; - this.selectedPlugin = JSON.parse(JSON.stringify(plugin)); // deep copy object with nested objects - this.selectedTemplate = template; - this.index = index; - this.pagesCtrl = this._fb.array([], Validators.required); - this.templateForm = this._fb.group({ - _id: this._fb.control(plugin._id), - pid: this._fb.control(this.selectedCommunityPid), - page: this._fb.control(plugin.page), - templateCode: this._fb.control(plugin.templateCode, Validators.required), - templateId: this._fb.control(plugin.templateId, Validators.required), - placement: this._fb.control(plugin.placement), - order: this._fb.control(plugin.order), - active: this._fb.control(plugin.active), - values: this._fb.array([]), - }); + /* - if (template.settings) { - for (let attrKey of Object.keys(template.settings)) { - (this.templateForm.get("values") as FormArray).push(this._fb.group({ - 'key': this._fb.control(attrKey), - 'value': this._fb.control(plugin.settingsValues[attrKey]?plugin.settingsValues[attrKey]:template.settings[attrKey].value) - } - )); + public edit(plugin:Plugin, template:PluginTemplate, placement, index) { + this.editView = true; + this.selectedPlugin = JSON.parse(JSON.stringify(plugin)); // deep copy object with nested objects + this.selectedTemplate = template; + this.index = index; + this.pagesCtrl = this._fb.array([], Validators.required); + this.templateForm = this._fb.group({ + _id: this._fb.control(plugin._id), + pid: this._fb.control(this.selectedCommunityPid), + page: this._fb.control(plugin.page), + templateCode: this._fb.control(plugin.templateCode, Validators.required), + templateId: this._fb.control(plugin.templateId, Validators.required), + placement: this._fb.control(plugin.placement), + order: this._fb.control(plugin.order), + active: this._fb.control(plugin.active), + values: this._fb.array([]), + }); + + if (template.settings) { + for (let attrKey of Object.keys(template.settings)) { + (this.templateForm.get("values") as FormArray).push(this._fb.group({ + 'key': this._fb.control(attrKey), + 'value': this._fb.control(plugin.settingsValues[attrKey]?plugin.settingsValues[attrKey]:template.settings[attrKey].value) + } + )); + } } } - } + */ + /* + public newPluginSelectTemplate() { + this.selectedPlugin = null; + this.editView = true; + if(!this.templateView) { + this.selectedTemplate = null; + this.selectTemplateView = true; + }else{ + this.newPlugin( Object.assign({}, this.template)); + } + }*/ - public newPluginSelectTemplate() { - this.selectedPlugin = null; - this.editView = true; - if(!this.templateView) { - this.selectedTemplate = null; - this.selectTemplateView = true; - }else{ - this.newPlugin( Object.assign({}, this.template)); - } - } + /* - public newPlugin(template) { - this.selectedTemplate = template; - this.templateForm = this._fb.group({ - _id: this._fb.control(null), - pid: this._fb.control(this.selectedCommunityPid), - page: this._fb.control(this.selectedPageId), - code: this._fb.control(this.selectedTemplate.code, Validators.required), - placement: this._fb.control(this.selectedTemplate.placement), - order: this._fb.control(""), - active: this._fb.control(false), - isPriorTo: this._fb.control(false), - values: this._fb.array([]), - object: this._fb.control({}) - }); - for (let attrKey of Object.keys(this.selectedTemplate.settings)) { - (this.templateForm.get("values") as FormArray).push(this._fb.group({ - key: this._fb.control(attrKey), - value: this._fb.control(this.selectedTemplate.settings[attrKey].value ? this.selectedTemplate.settings[attrKey].value : ""), - })); + 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; } - this.selectTemplateView = false; - } - - public saveConfirmed(index) { + */ + /*public saveConfirmed(index) { this.showLoading = true; let plugin: Plugin = this.templateForm.getRawValue(); plugin.object = this.selectedPlugin.object; @@ -257,17 +288,27 @@ export class PluginsComponent implements OnInit { plugin.settingsValues[fields.key] = fields.value; } let update = (plugin._id) ? true : false; - this.savePlugin(plugin,update, this.index) - } - public savePlugin(plugin, update, index){ + this.savePlugin(plugin, update, this.index) + }*/ + + public savePlugin(plugin, update, index) { this.subscriptions.push(this._pluginsService.savePlugin(plugin, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe( saved => { this.savedSuccessfully(saved, update, index); - this.editView = false; - this.selectTemplateView = false; + // this.editView = false; + // this.selectTemplateView = false; this.selectedTemplate = null; this.selectedPlugin = null; 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) )); @@ -284,11 +325,11 @@ export class PluginsComponent implements OnInit { } public filterPlugins(plugin: Plugin, template: PluginTemplate): boolean { - let values =[]; - for(let key of this.getKeys(plugin.settingsValues)){ + 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; + 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; - } + }*/ attributeTypeChanged(form) { let type = form.get("value").get("type"); @@ -359,23 +400,26 @@ export class PluginsComponent implements OnInit { } 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) - } else { - this.newPlugin(this.selectedTemplate) + reset() { + if (this.selectedPlugin) { + + this.edit(this.pluginsByPlacement.get(this.selectedTemplate.placement)[this.index].plugin, this.selectedTemplate, this.selectedTemplate.placement, this.index) + } else { + this.newPlugin(this.selectedTemplate) + } } - } + */ - public togglePlugin(status: boolean, id: string,i, placement) { + public togglePlugin(status: boolean, id: string, i, placement) { this.index = i; 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( () => { @@ -384,13 +428,14 @@ export class PluginsComponent implements OnInit { }, error => this.handleUpdateError('System error changing the status of Plugin', error) )); - }else{ + } 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"){ this.editSubmenuOpen = true; return; @@ -403,27 +448,28 @@ export class PluginsComponent implements OnInit { this.selectedPlugin.object[$event.field]=$event.value; this.templateForm.markAsDirty(); } - - public swap(pluginToMoveUp, pluginToMoveDown, placement ){ +*/ + public swap(pluginToMoveUp, pluginToMoveDown, placement) { this.showLoading = true; let moveUpGroup = this.pluginsByPlacement.get(placement)[pluginToMoveUp]; let moveDownGroup = this.pluginsByPlacement.get(placement)[pluginToMoveDown]; this.pluginsByPlacement.get(placement)[pluginToMoveUp] = moveDownGroup; this.pluginsByPlacement.get(placement)[pluginToMoveDown] = moveUpGroup; - this.move(moveUpGroup.plugin,true, pluginToMoveDown, placement); - this.move(moveDownGroup.plugin,false, pluginToMoveUp, placement); + this.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) { + + 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; - this.clearCache(); + this.pluginsByPlacement.get(placement)[index].plugin = saved; + this.clearCache(); }, error => this.handleUpdateError("System error creating template", error) )); - }else{ + } else { plugin.order = plugin.order + (up ? -1 : 1) 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) } + + 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; + } } diff --git a/dashboard/plugins/templates/pluginTemplates.component.html b/dashboard/plugins/templates/pluginTemplates.component.html index 6b2f71d5..7cd753cf 100644 --- a/dashboard/plugins/templates/pluginTemplates.component.html +++ b/dashboard/plugins/templates/pluginTemplates.component.html @@ -171,6 +171,8 @@ [options]="portalUtils.portalTypes" type="select">
+
`, - + styles: [` + :host >>> textarea.input { + border: solid 1px #3e3e3e3e !important; + } + `] }) export class PluginFieldEditComponent { diff --git a/dashboard/plugins/utils/pluginUtils.ts b/dashboard/plugins/utils/pluginUtils.ts index adca11c0..66c18c67 100644 --- a/dashboard/plugins/utils/pluginUtils.ts +++ b/dashboard/plugins/utils/pluginUtils.ts @@ -1,16 +1,17 @@ import {Option} from "../../../sharedComponents/input/input.component"; import {PluginOpenAIREProducts} from "../components/openaireProducts/plugin-openaire-products.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 {PluginFeaturedDatasets} from "../components/featured-datasets/plugin-featured-datasets.component"; import {PluginSearchDepositLink} from "../components/search-deposit-link/plugin-search-deposit-link.component"; import {PluginOrganizations} from "../components/organizations/plugin-organizations.component"; import {PluginSuggestedRepositories} from "../components/suggested-repositories/plugin-suggested-repositories.component"; -import {PluginGraphInfo} from "../components/graph-info/plugin-graph-info.component"; +import {ParagraphInfo} from "../components/paragraph-info/plugin-graph-info.component"; import {PluginStats} from "../components/stats/plugin-stats.component"; import {PluginCardInfo} from "../components/card-info/plugin-card-info.component"; import {PluginSearchBar} from "../components/search-bar/plugin-search-bar.component"; +import {HTMLSection} from "../components/html-section/plugin-html-section.component"; export class PluginUtils{ public attrTypeOptions: Option[] = [ @@ -34,9 +35,14 @@ export class PluginUtils{ {label:"Statistics", value:"stats"}, {label:"Search Bar", value:"search-bar"}, {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[] = [ {label:"Right", value:"right"}, {label:"Top", value:"top"}, @@ -80,6 +86,12 @@ export class PluginUtils{ case 'graph-info': { return (new PluginGraphInfo()).compare(oldObject); } + case 'paragraph-info': { + return (new ParagraphInfo()).compare(oldObject); + } + case 'html-section': { + return (new HTMLSection()).compare(oldObject); + } case 'stats': { return (new PluginStats()).compare(oldObject); } @@ -114,3 +126,39 @@ export class PluginUtils{ 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" +} diff --git a/dashboard/plugins/wrapper/plugin-edit-wrapper.component.ts b/dashboard/plugins/wrapper/plugin-edit-wrapper.component.ts index 7dcbd44b..f89137a5 100644 --- a/dashboard/plugins/wrapper/plugin-edit-wrapper.component.ts +++ b/dashboard/plugins/wrapper/plugin-edit-wrapper.component.ts @@ -31,7 +31,7 @@ import {PluginUtils} from "../utils/pluginUtils"; - + @@ -43,6 +43,9 @@ import {PluginUtils} from "../utils/pluginUtils"; + + +
diff --git a/dashboard/plugins/wrapper/plugin-edit-wrapper.module.ts b/dashboard/plugins/wrapper/plugin-edit-wrapper.module.ts index 043834ac..29df723c 100644 --- a/dashboard/plugins/wrapper/plugin-edit-wrapper.module.ts +++ b/dashboard/plugins/wrapper/plugin-edit-wrapper.module.ts @@ -12,12 +12,13 @@ import {PluginSearchDepositLinkFormComponent} from "../components/search-deposit import {PluginOrganizationsFormComponent} from "../components/organizations/plugin-organizations.form.component"; import {IconsModule} from "../../../utils/icons/icons.module"; 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 {PluginSearchBarFormComponent} from "../components/search-bar/plugin-search-bar.form.component"; import {PluginCardInfoFormComponent} from "../components/card-info/plugin-card-info-form.component"; import {CKEditorModule} from "ng2-ckeditor"; import {InputModule} from "../../../sharedComponents/input/input.module"; +import {PluginHtmlSectionFormComponent} from "../components/html-section/plugin-html-section.form.component"; @NgModule({ imports: [ @@ -25,7 +26,7 @@ import {InputModule} from "../../../sharedComponents/input/input.module"; ReactiveFormsModule, InputModule, 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] }) diff --git a/dashboard/plugins/wrapper/plugin-wrapper.component.ts b/dashboard/plugins/wrapper/plugin-wrapper.component.ts index 118ac663..e5f2d36f 100644 --- a/dashboard/plugins/wrapper/plugin-wrapper.component.ts +++ b/dashboard/plugins/wrapper/plugin-wrapper.component.ts @@ -29,7 +29,7 @@ import {PluginUtils} from "../utils/pluginUtils"; - + @@ -41,6 +41,9 @@ import {PluginUtils} from "../utils/pluginUtils"; + + +
diff --git a/dashboard/plugins/wrapper/plugin-wrapper.module.ts b/dashboard/plugins/wrapper/plugin-wrapper.module.ts index b9e1cbf9..2f64e3cf 100644 --- a/dashboard/plugins/wrapper/plugin-wrapper.module.ts +++ b/dashboard/plugins/wrapper/plugin-wrapper.module.ts @@ -10,15 +10,15 @@ import {PluginSearchDepositLinkModule} from '../components/search-deposit-link/p import {PluginSuggestedRepositoriesModule} from '../components/suggested-repositories/plugin-suggested-repositories.module'; import {PluginFeaturedDatasetsModule} from '../components/featured-datasets/plugin-featured-datasets.module'; import {PluginOrganizationsModule} from "../components/organizations/plugin-organizations.module"; -import {PluginGraphInfoModule} from "../components/graph-info/plugin-graph-info.module"; import {PluginStatsModule} from "../components/stats/plugin-stats.module"; import {PluginSearchBarModule} from "../components/search-bar/plugin-search-bar.module"; import {PluginCardInfoModule} from "../components/card-info/plugin-card-info.module"; +import {PluginHtmlSectionModule} from "../components/html-section/plugin-html-section.module"; @NgModule({ imports: [ 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], exports: [PluginWrapperComponent] diff --git a/services/clear-cache.service.ts b/services/clear-cache.service.ts index f86ca083..d776554e 100644 --- a/services/clear-cache.service.ts +++ b/services/clear-cache.service.ts @@ -20,11 +20,10 @@ export class ClearCacheService { } } clearCacheInRoute(message: string = null, pid:string, route:string = "/") { - let domain = ""; + let domain = properties.connectPortalUrl; if(properties.environment == 'production' || properties.environment == 'beta') { domain = 'https://' + (properties.environment == 'production' ? '' : 'beta.') + pid + '.openaire.eu'; } - domain = properties.connectPortalUrl; this.http.get(domain + route + '?forceCacheReload=true', { headers: new HttpHeaders({ diff --git a/services/plugins.service.ts b/services/plugins.service.ts index 34fdc7f1..ad6e9bd9 100644 --- a/services/plugins.service.ts +++ b/services/plugins.service.ts @@ -34,6 +34,9 @@ export class PluginsService { deletePluginTemplate(id, api: string) { return this.http.delete(api + 'pluginTemplate/' + id, CustomOptions.getAuthOptionsWithBody()); } + deletePlugin(id, api: string) { + return this.http.delete(api + 'plugin/' + id, CustomOptions.getAuthOptionsWithBody()); + } countPluginTemplatePerPage(api: string, pid: string) { 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) { return this.http.post(api + 'community/' + community + '/plugin/status/' + id, status, CustomOptions.getAuthOptionsWithBody()); } + getPluginById(api: string, id: string) { + return this.http.get(api + '/plugin/' + id); + } + + getPluginTemplateById(api: string, id: string) { + return this.http.get(api + '/pluginTemplates/' + id); + } + } diff --git a/utils/entities/adminTool/plugin.ts b/utils/entities/adminTool/plugin.ts index 6a1f9255..3ee14ddb 100644 --- a/utils/entities/adminTool/plugin.ts +++ b/utils/entities/adminTool/plugin.ts @@ -9,6 +9,7 @@ export class Plugin { placement: string; order: number; active:boolean; + custom:boolean = false; object:any; settingsValues:Map = new Map(); diff --git a/utils/entities/adminTool/pluginTemplate.ts b/utils/entities/adminTool/pluginTemplate.ts index 9b07450e..c17d1573 100644 --- a/utils/entities/adminTool/pluginTemplate.ts +++ b/utils/entities/adminTool/pluginTemplate.ts @@ -7,6 +7,7 @@ export class PluginTemplate{ description: string; image: string; page: string; + custom:boolean = false; plan: "starter" | "extended"; portalSpecific:string[]; defaultIsActive:boolean = false;