From d0b4fa7750a8dde3cfa6b5b81c18302380e10c35 Mon Sep 17 00:00:00 2001 From: argirok Date: Fri, 19 Jan 2024 10:53:17 +0200 Subject: [PATCH] [plugins-functionality | WIP] : add component preview when managing plugins, add edit inside plugin preview, add plugin wrapper --- .../plugin-openaire-products.component.ts | 105 +++++++++++++++++ .../plugin-openaire-products.module.ts | 25 ++++ .../plugin-results-numbers.component.ts | 94 +++++++++++++++ .../plugin-results-numbers.module.ts | 24 ++++ .../components/test/plugin-test.component.ts | 71 +++++++++++ .../components/test/plugin-test.module.ts | 25 ++++ dashboard/plugins/plugins.component.html | 52 +++++---- dashboard/plugins/plugins.component.ts | 110 ++++++++++-------- dashboard/plugins/plugins.module.ts | 3 +- .../templates/pluginTemplates.component.html | 61 +++++++--- .../templates/pluginTemplates.component.ts | 52 ++++++--- .../templates/pluginTemplates.module.ts | 7 +- .../plugins/utils/base-plugin.component.ts | 60 ++++++++++ .../utils/plugin-field-edit.component.ts | 52 +++++++++ .../plugins/utils/plugin-field-edit.module.ts | 20 ++++ dashboard/plugins/wrapper/edit-plugin.css | 9 ++ .../wrapper/plugin-wrapper.component.ts | 39 +++++++ .../plugins/wrapper/plugin-wrapper.module.ts | 20 ++++ utils/entities/adminTool/plugin.ts | 19 ++- utils/entities/adminTool/pluginTemplate.ts | 24 +--- 20 files changed, 744 insertions(+), 128 deletions(-) create mode 100644 dashboard/plugins/components/openaireProducts/plugin-openaire-products.component.ts create mode 100644 dashboard/plugins/components/openaireProducts/plugin-openaire-products.module.ts create mode 100644 dashboard/plugins/components/results-numbers/plugin-results-numbers.component.ts create mode 100644 dashboard/plugins/components/results-numbers/plugin-results-numbers.module.ts create mode 100644 dashboard/plugins/components/test/plugin-test.component.ts create mode 100644 dashboard/plugins/components/test/plugin-test.module.ts create mode 100644 dashboard/plugins/utils/base-plugin.component.ts create mode 100644 dashboard/plugins/utils/plugin-field-edit.component.ts create mode 100644 dashboard/plugins/utils/plugin-field-edit.module.ts create mode 100644 dashboard/plugins/wrapper/edit-plugin.css create mode 100644 dashboard/plugins/wrapper/plugin-wrapper.component.ts create mode 100644 dashboard/plugins/wrapper/plugin-wrapper.module.ts diff --git a/dashboard/plugins/components/openaireProducts/plugin-openaire-products.component.ts b/dashboard/plugins/components/openaireProducts/plugin-openaire-products.component.ts new file mode 100644 index 00000000..df6d312b --- /dev/null +++ b/dashboard/plugins/components/openaireProducts/plugin-openaire-products.component.ts @@ -0,0 +1,105 @@ +import {Component} from '@angular/core'; +import {PluginBaseComponent, PluginEditEvent} from "../../utils/base-plugin.component"; +import {HttpClient} from "@angular/common/http"; + +export class PluginOpenAIREProducts{ + title:string ="OpenAIRE services for your community"; + serviceIds = {"zenodo":true,"graph":true,"explore":true}; + constructor() { + } +} +@Component({ + selector: 'plugin-openaire-products', + template: ` +
+
+ + + + +

+ {{pluginObject && pluginObject.title?pluginObject.title:pluginDefaultObject.title}}

+
+
+
+ + + +
+ +
+
+ +
+
+
{{service.name}}
+
{{service.tagline}}
+
+ Read more + +
+ + +
+ +
+
+
+ + +
+
+ +
+ + `, + + +}) +export class PluginOpenaireProductsComponent extends PluginBaseComponent{ + services = []; + excludedServiceIds = ["openaire_login","research_community_dashboard"] + get pluginObject():PluginOpenAIREProducts{ + return this.plugin?this.plugin.object:null; + } + get pluginDefaultObject():PluginOpenAIREProducts{ + return this.pluginTemplate?this.pluginTemplate.object:null; + } + constructor(http:HttpClient) { + super() + this.subscriptions.push(http.get("https://explore.openaire.eu/cache/get?url="+ encodeURIComponent("https://catalogue.openaire.eu/api/catalogue-resources?from=0&quantity=100&order=asc&orderField=name")).subscribe(res =>{ + console.log(res) + this.services = res["results"].map( x=> { + x.id = x.id.split("openaire.")[1] + return x; + }); + this.services = this.services.filter(x=> this.excludedServiceIds.indexOf(x.id) ==-1); + })) + + } + ngOnInit(): void { + if(this.pluginTemplate && !this.pluginDefaultObject){ + this.pluginTemplate.object = new PluginOpenAIREProducts(); + } + } + + + serviceChanged(id,$event:PluginEditEvent){ + if(this.editTemplate){ + this.pluginTemplate.object.serviceIds[id]=$event.value; + $event.value =this.pluginTemplate.object.serviceIds; + }else{ + if(!this.plugin.object){ + this.plugin.object =this.pluginDefaultObject? Object.assign(this.pluginDefaultObject): new PluginOpenAIREProducts(); + } + console.log(this.plugin.object,this.plugin.object.serviceIds) + this.plugin.object.serviceIds[id]=$event.value; + $event.value =this.plugin.object.serviceIds; + } + + this.valuesChanged.emit($event) + } +} diff --git a/dashboard/plugins/components/openaireProducts/plugin-openaire-products.module.ts b/dashboard/plugins/components/openaireProducts/plugin-openaire-products.module.ts new file mode 100644 index 00000000..af6231f1 --- /dev/null +++ b/dashboard/plugins/components/openaireProducts/plugin-openaire-products.module.ts @@ -0,0 +1,25 @@ +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 {IconsModule} from "../../../../utils/icons/icons.module"; +import {NumberRoundModule} from "../../../../utils/pipes/number-round.module"; +import {IconsService} from "../../../../utils/icons/icons.service"; +import {SearchResearchResultsServiceModule} from "../../../../services/searchResearchResultsService.module"; +import {PluginOpenaireProductsComponent} from "./plugin-openaire-products.component"; +import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module"; + +@NgModule({ + imports: [ + CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule + ], + providers:[PluginsService], + declarations: [PluginOpenaireProductsComponent], + exports: [PluginOpenaireProductsComponent] +}) +export class PluginOpenaireProductsModule { + constructor(private iconsService: IconsService) { + this.iconsService.registerIcons([]) + } +} diff --git a/dashboard/plugins/components/results-numbers/plugin-results-numbers.component.ts b/dashboard/plugins/components/results-numbers/plugin-results-numbers.component.ts new file mode 100644 index 00000000..56310258 --- /dev/null +++ b/dashboard/plugins/components/results-numbers/plugin-results-numbers.component.ts @@ -0,0 +1,94 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {Plugin} from "../../../../utils/entities/adminTool/plugin"; +import {PluginTemplate} from "../../../../utils/entities/adminTool/pluginTemplate"; +import {SearchResearchResultsService} from "../../../../services/searchResearchResults.service"; +import {FetchResearchResults} from "../../../../utils/fetchEntitiesClasses/fetchResearchResults.class"; +import {EnvProperties} from "../../../../utils/properties/env-properties"; +import { properties } from 'src/environments/environment'; +import {RouterHelper} from "../../../../utils/routerHelper.class"; +import {OpenaireEntities} from "../../../../utils/properties/searchFields"; +import {PluginBaseComponent} from "../../utils/base-plugin.component"; +export class PluginResultsNumbers{ + publicationsOnOff:boolean; + datasetsOnOff:boolean; + softwareOnOff:boolean; + otherOnOff:boolean; +} +@Component({ + selector: 'plugin-results-numbers', + template: ` +
+
+ + + + + {{openaireEntities.PUBLICATIONS}} + + + + +
+ +
+ + ` +}) +export class PluginResultsNumbersComponent extends PluginBaseComponent{ + get pluginObject():PluginResultsNumbers{ + return this.plugin.object; + } + get pluginDefaultObject():PluginResultsNumbers{ + return this.pluginTemplate.object; + } + // Variables for publications, research data, projects, content providers, related content providers tabs + public fetchPublications: FetchResearchResults; + public fetchDatasets: FetchResearchResults; + public fetchSoftware: FetchResearchResults; + public fetchOrps: FetchResearchResults; + public fetchFeaturedDatasets: FetchResearchResults; + searchLinkToResults: string = null; + properties: EnvProperties = properties; + public routerHelper: RouterHelper = new RouterHelper(); + openaireEntities= OpenaireEntities; + + constructor(private _searchResearchResultsService: SearchResearchResultsService,) { + super(); + this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService); + this.fetchDatasets = new FetchResearchResults(this._searchResearchResultsService); + this.fetchSoftware = new FetchResearchResults(this._searchResearchResultsService); + this.fetchOrps = new FetchResearchResults(this._searchResearchResultsService); + this.fetchFeaturedDatasets = new FetchResearchResults(this._searchResearchResultsService); + } + ngOnInit(): void { + this.searchLinkToResults = this.properties.searchLinkToResults; + + } + + public getParamsForSearchLink(type: string = "") { + if (type) { + return this.routerHelper.createQueryParams(['type', 'qf', 'sortBy'], [type, 'false', 'resultdateofacceptance,descending']); + } else { + return {}; + } + } +} diff --git a/dashboard/plugins/components/results-numbers/plugin-results-numbers.module.ts b/dashboard/plugins/components/results-numbers/plugin-results-numbers.module.ts new file mode 100644 index 00000000..e59df0cf --- /dev/null +++ b/dashboard/plugins/components/results-numbers/plugin-results-numbers.module.ts @@ -0,0 +1,24 @@ +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 {PluginResultsNumbersComponent} from "./plugin-results-numbers.component"; +import {IconsModule} from "../../../../utils/icons/icons.module"; +import {NumberRoundModule} from "../../../../utils/pipes/number-round.module"; +import {IconsService} from "../../../../utils/icons/icons.service"; +import {SearchResearchResultsServiceModule} from "../../../../services/searchResearchResultsService.module"; + +@NgModule({ + imports: [ + CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule + ], + providers:[PluginsService], + declarations: [PluginResultsNumbersComponent], + exports: [PluginResultsNumbersComponent] +}) +export class PluginResultsNumbersModule { + constructor(private iconsService: IconsService) { + this.iconsService.registerIcons([]) + } +} diff --git a/dashboard/plugins/components/test/plugin-test.component.ts b/dashboard/plugins/components/test/plugin-test.component.ts new file mode 100644 index 00000000..80664fb8 --- /dev/null +++ b/dashboard/plugins/components/test/plugin-test.component.ts @@ -0,0 +1,71 @@ +import {Component} from '@angular/core'; +import {PluginBaseComponent} from "../../utils/base-plugin.component"; + +export class PluginTest{ + title:string ="Test Plugin"; + description: string = "Lorem ipsum"; + numberOn:boolean = true; + constructor() { + console.log(this) + } +} +@Component({ + selector: 'plugin-test', + template: ` + +
+
+ + + + +

+ {{pluginObject && pluginObject.title?pluginObject.title:pluginDefaultObject.title}}

+ + +
+
+ + + + +

+ {{pluginObject && pluginObject.description?pluginObject.description:pluginDefaultObject.description}}

+
+
+ + + + +

58K

+
+ +
+ + `, + + +}) +export class PluginTestComponent extends PluginBaseComponent{ + + get pluginObject():PluginTest{ + return this.plugin?this.plugin.object:null; + } + get pluginDefaultObject():PluginTest{ + return this.pluginTemplate?this.pluginTemplate.object:null; + } + constructor() { + super() + + } + ngOnInit(): void { + if(this.pluginTemplate && !this.pluginDefaultObject){ + this.pluginTemplate.object = new PluginTest(); + } + } + +} diff --git a/dashboard/plugins/components/test/plugin-test.module.ts b/dashboard/plugins/components/test/plugin-test.module.ts new file mode 100644 index 00000000..ee15806f --- /dev/null +++ b/dashboard/plugins/components/test/plugin-test.module.ts @@ -0,0 +1,25 @@ +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 {IconsModule} from "../../../../utils/icons/icons.module"; +import {NumberRoundModule} from "../../../../utils/pipes/number-round.module"; +import {IconsService} from "../../../../utils/icons/icons.service"; +import {SearchResearchResultsServiceModule} from "../../../../services/searchResearchResultsService.module"; +import {PluginTestComponent} from "./plugin-test.component"; +import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module"; + +@NgModule({ + imports: [ + CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule + ], + providers:[PluginsService], + declarations: [PluginTestComponent], + exports: [PluginTestComponent] +}) +export class PluginTestModule { + constructor(private iconsService: IconsService) { + this.iconsService.registerIcons([]) + } +} diff --git a/dashboard/plugins/plugins.component.html b/dashboard/plugins/plugins.component.html index e3719676..cb51ea42 100644 --- a/dashboard/plugins/plugins.component.html +++ b/dashboard/plugins/plugins.component.html @@ -42,13 +42,13 @@
-
+
@@ -74,20 +74,21 @@
{{check.template.description}}
+ - + + + + + + +
Placement: {{check.plugin.placement}}
-
+
@@ -114,7 +115,8 @@ -
+ +
-
+ + <!– –> Select Template
@@ -177,7 +179,7 @@
-
+ -->
@@ -185,19 +187,21 @@
{{selectedTemplate.name}}
{{selectedTemplate.description}}
-
+ +
-
Plugin Fields
+
Plugin settings
-
-
-
+
+
-
+
{ this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param]; - this.templateView = this.route.snapshot.data['templateView'] + // this.templateView = this.route.snapshot.data['templateView'] this.selectedCommunityPid = params.community; - this.templateCode = params['templateCode']; + /*this.templateCode = params['templateCode']; if(this.templateView && this.templateCode){ this.getTemplateAndPlugins(); } if(this.templateView && !this.templateCode){ this._router.navigate(['../..'], {relativeTo: this.route}); - } + }*/ this.subscriptions.push(this.route.queryParams.subscribe(params => { HelperFunctions.scroll(); this.selectedPageId = params['pageId']; @@ -167,33 +168,18 @@ export class PluginsComponent implements OnInit { this.checkboxes = []; let self = this; - this.plugins.forEach(_ => { - self.checkboxes.push({plugin: _, checked: false, template: this.getTemplateByCode(_.code)}); - }); - - this.showLoading = false; - }, - error => this.handleError('System error retrieving plugins', error))); - - }, - error => this.handleError('System error retrieving templates', error))); - } - getTemplateAndPlugins(){ - - this.showLoading = true; - this.subscriptions.push(this._pluginsService.getPluginTemplate(this.properties.adminToolsAPIURL, this.templateCode).subscribe( - template => { - this.template = template; - this.pluginTemplates = [template] - - this.subscriptions.push(this._pluginsService.getPluginsByTemplatesCode(this.properties.adminToolsAPIURL,"", this.template.code).subscribe( - plugins => { - this.plugins = plugins; - this.checkboxes = []; - - let self = this; - this.plugins.forEach(_ => { - self.checkboxes.push({plugin: _, checked: false, template: this.template}); + this.pluginTemplates.forEach(_ => { + let plugin:Plugin = null; + for(let pl of plugins){ + if (pl.code == _.code){ + plugin = pl; + } + } + if(!plugin){ + plugin = new Plugin(this.selectedPageId, this.selectedCommunityPid,_); + this.plugins.push(plugin); + } + self.checkboxes.push({plugin: plugin, checked: false, template: _}); }); this.showLoading = false; @@ -203,6 +189,31 @@ export class PluginsComponent implements OnInit { }, error => this.handleError('System error retrieving templates', error))); } + // getTemplateAndPlugins(){ + // + // this.showLoading = true; + // this.subscriptions.push(this._pluginsService.getPluginTemplate(this.properties.adminToolsAPIURL, this.templateCode).subscribe( + // template => { + // this.template = template; + // this.pluginTemplates = [template] + // + // this.subscriptions.push(this._pluginsService.getPluginsByTemplatesCode(this.properties.adminToolsAPIURL,"", this.template.code).subscribe( + // plugins => { + // this.plugins = plugins; + // this.checkboxes = []; + // + // let self = this; + // this.plugins.forEach(_ => { + // self.checkboxes.push({plugin: _, checked: false, template: this.template}); + // }); + // + // this.showLoading = false; + // }, + // error => this.handleError('System error retrieving plugins', error))); + // + // }, + // error => this.handleError('System error retrieving templates', error))); + // } public toggleCheckBoxes(event) { this.checkboxes.forEach(_ => _.checked = event.target.checked); } @@ -246,7 +257,7 @@ export class PluginsComponent implements OnInit { } - public edit(plugin, template) { + public edit(plugin:Plugin, template:PluginTemplate) { this.editView = true; this.selectedPlugin = plugin; this.selectedTemplate = template; @@ -261,14 +272,15 @@ export class PluginsComponent implements OnInit { placement: this._fb.control(plugin.placement), order: this._fb.control(plugin.order), active: this._fb.control(plugin.active), - isPriorTo: this._fb.control(plugin.isPriorTo), - values: this._fb.array([]) + isPriorTo: this._fb.control(plugin.priorTo), + values: this._fb.array([]), + object: this._fb.group(plugin.object?plugin.object:this.selectedTemplate.object) }); - if (plugin.values) { - for (let attrKey of Object.keys(plugin.values)) { + 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.values[attrKey]) + 'value': this._fb.control(plugin.settingsValues[attrKey]?plugin.settingsValues[attrKey]:template.settings[attrKey].value) } )); } @@ -297,12 +309,13 @@ export class PluginsComponent implements OnInit { order: this._fb.control(""), active: this._fb.control(false), isPriorTo: this._fb.control(false), - values: this._fb.array([]) + values: this._fb.array([]), + object: this._fb.control(null) }); - for (let attrKey of Object.keys(this.selectedTemplate.attributes)) { + 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.attributes[attrKey].value ? this.selectedTemplate.attributes[attrKey].value : ""), + value: this._fb.control(this.selectedTemplate.settings[attrKey].value ? this.selectedTemplate.settings[attrKey].value : ""), })); } @@ -314,9 +327,9 @@ export class PluginsComponent implements OnInit { this.showLoading = true; let plugin: Plugin = this.templateForm.getRawValue(); // template.pages = this.pagesCtrl.getRawValue().map(page => page._id?page._id:page); - plugin.values = new Map(); + plugin.settingsValues = new Map(); for (let fields of this.templateForm.getRawValue().values) { - plugin.values[fields.key] = fields.value; + plugin.settingsValues[fields.key] = fields.value; } let update = (plugin._id ) ? true : false; console.log("update:" + update); @@ -368,10 +381,10 @@ export class PluginsComponent implements OnInit { public filterPlugins(plugin: Plugin, template: PluginTemplate): boolean { let values =[]; - for(let key of this.getKeys(plugin.values)){ - values.push(plugin.values[key]); + for(let key of this.getKeys(plugin.settingsValues)){ + values.push(plugin.settingsValues[key]); } - return this.searchText.toString() == '' || (plugin.code + ' ' +values.join(' ') + template.name + ' ' + template.description).match(this.searchText) != null; + return this.searchText.toString() == '' || (plugin.code + ' ' +values.join(' ') + (template?(template.name + ' ' +template.description):'')).match(this.searchText) != null; } @@ -442,7 +455,7 @@ export class PluginsComponent implements OnInit { } getKeys(obj) { - return Object.keys(obj); + return obj?Object.keys(obj):[]; } reset() { @@ -467,5 +480,10 @@ export class PluginsComponent implements OnInit { error => this.handleUpdateError('System error changing the status of Plugin', error) )); } - + pluginFieldChanged($event:PluginEditEvent){ + let object = this.templateForm.get("object").getRawValue(); + object[$event.field]=$event.value; + this.templateForm.get("object").setValue(object); + this.templateForm.markAsDirty(); + } } diff --git a/dashboard/plugins/plugins.module.ts b/dashboard/plugins/plugins.module.ts index 81cd08d3..2b181240 100644 --- a/dashboard/plugins/plugins.module.ts +++ b/dashboard/plugins/plugins.module.ts @@ -23,13 +23,14 @@ import {LoadingModule} from "../../utils/loading/loading.module"; import {PluginsService} from "../../services/plugins.service"; import {CKEditorModule} from "ng2-ckeditor"; import {MatSlideToggleModule} from "@angular/material/slide-toggle"; +import {PluginWrapperModule} from "./wrapper/plugin-wrapper.module"; @NgModule({ imports: [ CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule, MatCheckboxModule, AdminTabsModule, PageContentModule, PluginsRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule, - MatSlideToggleModule + MatSlideToggleModule, PluginWrapperModule ], providers:[PluginsService], declarations: [PluginsComponent], diff --git a/dashboard/plugins/templates/pluginTemplates.component.html b/dashboard/plugins/templates/pluginTemplates.component.html index 3c1aa548..2c7b62b2 100644 --- a/dashboard/plugins/templates/pluginTemplates.component.html +++ b/dashboard/plugins/templates/pluginTemplates.component.html @@ -44,16 +44,21 @@ name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
-->
-
{{check.template.name}}
+ + +
Pages: {{getPagesAsString(check.template.pages)}}
-
+
Placements: {{check.template.placements.join(", ")}}
Portal type: {{check.template.portalType}}
+
+ Plan: {{check.template.plan}} +
{{check.template.description}}
@@ -63,18 +68,18 @@
-
-
- -
-
+ + + + + + + + + + + +
+
+ +
-
Field #{{i +1}}
-
+
Setting #{{i +1}}
+
Remove
@@ -148,7 +175,7 @@
- Add more fields + Add settings
diff --git a/dashboard/plugins/templates/pluginTemplates.component.ts b/dashboard/plugins/templates/pluginTemplates.component.ts index a298e706..24388f92 100644 --- a/dashboard/plugins/templates/pluginTemplates.component.ts +++ b/dashboard/plugins/templates/pluginTemplates.component.ts @@ -24,6 +24,8 @@ import {PluginsService} from "../../../services/plugins.service"; import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate"; import {Entity} from "../../../utils/entities/adminTool/entity"; import {StringUtils} from "../../../utils/string-utils.class"; +import {PluginEditEvent} from "../utils/base-plugin.component"; +import {StakeholderEntities} from "../../../monitor/entities/stakeholder"; @Component({ selector: 'plugin-templates', @@ -63,11 +65,15 @@ export class PluginTemplatesComponent implements OnInit { {label:"Right", value:"right"}, {label:"Left", value:"left"}, ]; + plans: Option[] = [ + {value: 'starter', label: 'Starter'}, + {value: 'extended', label: 'Extended'} + ]; selectedCommunityPid = null; public portalUtils: PortalUtils = new PortalUtils(); private index: number; + // pluginObject:any = {}; pluginsCount = {}; - constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, private title: Title,private _helpContentService: HelpContentService, private _pluginsService: PluginsService, private _fb: UntypedFormBuilder, @@ -173,7 +179,9 @@ export class PluginTemplatesComponent implements OnInit { public edit(i: number) { let pluginTemplate: PluginTemplate = this.checkboxes[i].template; + console.log(pluginTemplate.object) this.index = this.templates.findIndex(value => value._id === pluginTemplate._id); + // this.pluginObject = Object.assign(this.templates[this.index].object); // this.formPages = pluginTemplate.pages; this.pagesCtrl = this._fb.array([], Validators.required); this.templateForm = this._fb.group({ @@ -184,27 +192,31 @@ export class PluginTemplatesComponent implements OnInit { code: this._fb.control(pluginTemplate.code, Validators.required), description: this._fb.control(pluginTemplate.description), + plan: this._fb.control('', Validators.required), placements: this._fb.array(pluginTemplate.placements), - attributes:this._fb.array([]) + settings:this._fb.array([]), + object: this._fb.group(pluginTemplate.object) }); this.templateForm.get('portalType').disable(); for (let i = 0; i < pluginTemplate.pages.length; i++) { this.pagesCtrl.push(this._fb.control(this.getPageById(pluginTemplate.pages[i]))); } - if(pluginTemplate.attributes) { - for (let attrKey of Object.keys(pluginTemplate.attributes)) { - (this.templateForm.get("attributes") as FormArray).push(this._fb.group({ + if(pluginTemplate.settings) { + for (let attrKey of Object.keys(pluginTemplate.settings)) { + (this.templateForm.get("settings") as FormArray).push(this._fb.group({ key: this._fb.control(attrKey, Validators.required), - name: this._fb.control(pluginTemplate.attributes[attrKey].name, Validators.required), - type: this._fb.control(pluginTemplate.attributes[attrKey].type, Validators.required), - value: this._fb.control(pluginTemplate.attributes[attrKey].value) + name: this._fb.control(pluginTemplate.settings[attrKey].name, Validators.required), + type: this._fb.control(pluginTemplate.settings[attrKey].type, Validators.required), + value: this._fb.control(pluginTemplate.settings[attrKey].value) })); } } + // console.log(this.templateForm.getRawValue(),this.templateForm.get("object").value) this.modalOpen("Edit Template", "Save Changes"); } public newPlugin() { + this.index = -1; this.pagesCtrl = this._fb.array([], Validators.required); if (this.templateForm) { this.templateForm.get('portalType').enable(); @@ -213,13 +225,15 @@ export class PluginTemplatesComponent implements OnInit { _id: this._fb.control(null), name: this._fb.control('', Validators.required), code: this._fb.control('', Validators.required), + plan: this._fb.control('', Validators.required), description: this._fb.control(''), pages: this.pagesCtrl, portalType: this._fb.control('community', Validators.required), placements: this._fb.array([]), - attributes:this._fb.array([]) + settings:this._fb.array([]), + object: this._fb.control(null) }); - this.addNewAttr(); + // this.addNewAttr(); this.modalOpen("Create template", "Create"); } @@ -234,9 +248,9 @@ export class PluginTemplatesComponent implements OnInit { this.showLoading = true; let template:PluginTemplate = this.templateForm.getRawValue(); template.pages = this.pagesCtrl.getRawValue().map(page => page._id?page._id:page); - template.attributes = new Map(); - for (let attr of this.templateForm.getRawValue().attributes) { - template.attributes[attr.key]={name: attr.name, type: attr.type, value: attr.value}; + template.settings = new Map(); + for (let attr of this.templateForm.getRawValue().settings) { + template.settings[attr.key]={name: attr.name, type: attr.type, value: attr.value}; } let update = template._id?true:false; this.subscriptions.push(this._pluginsService.savePluginTemplate(template, this.properties.adminToolsAPIURL).subscribe( @@ -312,7 +326,7 @@ export class PluginTemplatesComponent implements OnInit { } addNewAttr(){ - (this.templateForm.get("attributes") as FormArray).push(this._fb.group({ + (this.templateForm.get("settings") as FormArray).push(this._fb.group({ key:this._fb.control("", Validators.required), name: this._fb.control("", Validators.required), type: this._fb.control("text", Validators.required), @@ -326,7 +340,7 @@ export class PluginTemplatesComponent implements OnInit { } get attrFormArray(){ - return this.templateForm.get("attributes") as FormArray; + return this.templateForm.get("settings") as FormArray; } @@ -361,4 +375,12 @@ export class PluginTemplatesComponent implements OnInit { }, error => this.handleError('System error retrieving page contents', error))); } + + + pluginFieldChanged($event:PluginEditEvent){ + let object = this.templateForm.get("object").getRawValue(); + object[$event.field]=$event.value; + this.templateForm.get("object").setValue(object); + this.templateForm.markAsDirty(); + } } diff --git a/dashboard/plugins/templates/pluginTemplates.module.ts b/dashboard/plugins/templates/pluginTemplates.module.ts index aeafa647..4ef8ddb2 100644 --- a/dashboard/plugins/templates/pluginTemplates.module.ts +++ b/dashboard/plugins/templates/pluginTemplates.module.ts @@ -9,8 +9,8 @@ import {InputModule} from "../../../sharedComponents/input/input.module"; import {MatAutocompleteModule} from '@angular/material/autocomplete'; -import { MatCheckboxModule } from "@angular/material/checkbox"; -import { MatFormFieldModule } from "@angular/material/form-field"; +import {MatCheckboxModule} from "@angular/material/checkbox"; +import {MatFormFieldModule} from "@angular/material/form-field"; import {MatChipsModule} from '@angular/material/chips'; @@ -22,12 +22,13 @@ import {IconsModule} from "../../../utils/icons/icons.module"; import {LoadingModule} from "../../../utils/loading/loading.module"; import {PluginsService} from "../../../services/plugins.service"; import {CKEditorModule} from "ng2-ckeditor"; +import {PluginWrapperModule} from "../wrapper/plugin-wrapper.module"; @NgModule({ imports: [ CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule, - MatCheckboxModule, AdminTabsModule, PageContentModule, PluginTemplatesRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule + MatCheckboxModule, AdminTabsModule, PageContentModule, PluginTemplatesRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule, PluginWrapperModule ], providers:[PluginsService], declarations: [PluginTemplatesComponent], diff --git a/dashboard/plugins/utils/base-plugin.component.ts b/dashboard/plugins/utils/base-plugin.component.ts new file mode 100644 index 00000000..e607fba2 --- /dev/null +++ b/dashboard/plugins/utils/base-plugin.component.ts @@ -0,0 +1,60 @@ +import {Directive, EventEmitter, Input, OnDestroy, Output} from '@angular/core'; +import {Plugin} from "../../../utils/entities/adminTool/plugin"; +import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate"; +import {EnvProperties} from "../../../utils/properties/env-properties"; +import {properties} from 'src/environments/environment'; +import {Subscriber} from "rxjs"; + +export class PluginEditEvent { + field:string; + type:"text" | "HTML" | "boolean"; + value?:any; +} +@Directive() + export abstract class PluginBaseComponent implements OnDestroy { + public properties: EnvProperties = properties; + @Input() editMode =false; + @Input() plugin:Plugin; + @Input() pluginTemplate:PluginTemplate; + @Input() editTemplate:boolean = false; + @Output() valuesChanged:EventEmitter = new EventEmitter(); + subscriptions = []; + pluginEditEvent:PluginEditEvent; + constructor() { + + } + ngOnInit(): void { + + } + + ngOnDestroy() { + this.subscriptions.forEach(subscription => { + if (subscription instanceof Subscriber) { + subscription.unsubscribe() + } else if (subscription instanceof Function) { + subscription(); + } else if (typeof IntersectionObserver !== 'undefined' && subscription instanceof IntersectionObserver) { + subscription.disconnect(); + } else if (typeof ResizeObserver !== 'undefined' && subscription instanceof ResizeObserver) { + subscription.disconnect(); + } + }); + } + valueChanged($event:PluginEditEvent){ + if(this.editTemplate){ + this.pluginTemplate.object[$event.field]=$event.value; + }else{ + this.plugin.object[$event.field]=$event.value; + } + this.valuesChanged.emit($event) + } + + showOnOffBlock(field){ + return (this.editTemplate /* edit template*/ + || (this.editMode && !this.editTemplate) /* edit plugin*/ + || (this.plugin && this.plugin.object && this.plugin.object[field] == true) /* is on anyway */ + || (!this.plugin)) /* is not plugin view */ + } + + +} diff --git a/dashboard/plugins/utils/plugin-field-edit.component.ts b/dashboard/plugins/utils/plugin-field-edit.component.ts new file mode 100644 index 00000000..dc91d72d --- /dev/null +++ b/dashboard/plugins/utils/plugin-field-edit.component.ts @@ -0,0 +1,52 @@ +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {PluginEditEvent} from "./base-plugin.component"; + + +@Component({ + selector: 'plugin-field-edit', + template: ` + + {{value}} + + + + + Edit + + close +
+
+ + + + + `, + + +}) +export class PluginFieldEditComponent { + @Input() type; + @Input() value; + @Input() field; + @Output() editClicked:EventEmitter = new EventEmitter(); + @Output() changed:EventEmitter = new EventEmitter() + editingModeOn: boolean = false; + + updateObject(value){ + console.log(value) + this.value = value; + this.changed.emit({field:this.field, value: this.value, type: this.type}); + } +} diff --git a/dashboard/plugins/utils/plugin-field-edit.module.ts b/dashboard/plugins/utils/plugin-field-edit.module.ts new file mode 100644 index 00000000..02e95fd4 --- /dev/null +++ b/dashboard/plugins/utils/plugin-field-edit.module.ts @@ -0,0 +1,20 @@ +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; +import {PluginFieldEditComponent} from "./plugin-field-edit.component"; +import {InputModule} from "../../../sharedComponents/input/input.module"; +import {MatSlideToggleModule} from "@angular/material/slide-toggle"; + +@NgModule({ + imports: [ + CommonModule, RouterModule, FormsModule, InputModule, MatSlideToggleModule + ], + declarations: [PluginFieldEditComponent], + exports: [PluginFieldEditComponent] +}) +export class PluginFieldEditModule { + /*constructor(private iconsService: IconsService) { + this.iconsService.registerIcons([]) + }*/ +} diff --git a/dashboard/plugins/wrapper/edit-plugin.css b/dashboard/plugins/wrapper/edit-plugin.css new file mode 100644 index 00000000..35a895e6 --- /dev/null +++ b/dashboard/plugins/wrapper/edit-plugin.css @@ -0,0 +1,9 @@ +.pluginEditMode{ + border:2px solid grey; + padding:10px; +} +:host ::ng-deep .fieldEditMode{ + border:1px dashed lightblue; + padding:1px; + margin-bottom: 5px; +} diff --git a/dashboard/plugins/wrapper/plugin-wrapper.component.ts b/dashboard/plugins/wrapper/plugin-wrapper.component.ts new file mode 100644 index 00000000..043aa52c --- /dev/null +++ b/dashboard/plugins/wrapper/plugin-wrapper.component.ts @@ -0,0 +1,39 @@ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {Plugin} from "../../../utils/entities/adminTool/plugin"; +import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate"; +import {PluginEditEvent} from "../utils/base-plugin.component"; + +@Component({ + selector: 'plugin-wrapper', + template: ` + +
+ + + + + + + + + +
+ + `, + styleUrls: ["edit-plugin.css"] +}) +export class PluginWrapperComponent implements OnInit { + + @Input() editMode =false; + @Input() wrapperEditMode =false; + @Input() plugin:Plugin; + @Input() pluginTemplate:PluginTemplate; + @Input() editTemplate:boolean; + // @Output() editWrapperClicked:EventEmitter = new EventEmitter() + @Output() changed:EventEmitter = new EventEmitter(); + + + ngOnInit(): void { + + } +} diff --git a/dashboard/plugins/wrapper/plugin-wrapper.module.ts b/dashboard/plugins/wrapper/plugin-wrapper.module.ts new file mode 100644 index 00000000..606d01fb --- /dev/null +++ b/dashboard/plugins/wrapper/plugin-wrapper.module.ts @@ -0,0 +1,20 @@ +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; +import {PluginResultsNumbersModule} from "../components/results-numbers/plugin-results-numbers.module"; +import {PluginWrapperComponent} from "./plugin-wrapper.component"; +import {PluginTestModule} from "../components/test/plugin-test.module"; +import {PluginOpenaireProductsModule} from "../components/openaireProducts/plugin-openaire-products.module"; + +@NgModule({ + imports: [ + CommonModule, RouterModule, FormsModule, PluginResultsNumbersModule, PluginTestModule, PluginOpenaireProductsModule + ], + declarations: [PluginWrapperComponent], + exports: [PluginWrapperComponent] + +}) +export class PluginWrapperModule { + +} diff --git a/utils/entities/adminTool/plugin.ts b/utils/entities/adminTool/plugin.ts index 7719c12e..9dd1a17e 100644 --- a/utils/entities/adminTool/plugin.ts +++ b/utils/entities/adminTool/plugin.ts @@ -1,3 +1,5 @@ +import {PluginTemplate} from "./pluginTemplate"; + export class Plugin { _id: string; code: string; @@ -7,6 +9,21 @@ export class Plugin { order: string; active:boolean; priorTo:boolean; - values:Map = new Map(); + object:any; + settingsValues:Map = new Map(); + constructor(page, pid, template:PluginTemplate) { + console.log(template) + this.page = page; + this.pid = pid; + this.code = template.code; + this.placement = template.placements ? template.placements[0] : null; + this.active = false; + this.object = template.object ? Object.assign(template.object) : null; + if (template.settings) { + for (let attr of Object.keys(template.settings)) { + this.settingsValues.set(attr, template.settings[attr].value) + } + } + } } diff --git a/utils/entities/adminTool/pluginTemplate.ts b/utils/entities/adminTool/pluginTemplate.ts index 5fb4cc06..79eeed5a 100644 --- a/utils/entities/adminTool/pluginTemplate.ts +++ b/utils/entities/adminTool/pluginTemplate.ts @@ -1,6 +1,6 @@ -export class PluginTemplate /*extends Map*/ { +export class PluginTemplate{ _id: string; name: string; code: string; @@ -9,24 +9,6 @@ export class PluginTemplate /*extends Map*/ { pages: string[]; placements: string[]; portalType: string; - attributes: {};//Map = new Map(); - - -/* - toJsonObj(){ - let jsonObj = Object.assign({}, this); - var objectMap = { }; - for (let [key, value] of jsonObj['attributes']) objectMap[key] = value; - jsonObj['attributes'] = objectMap; - return jsonObj; - } - *//* - toJSON() { - // this.attributes - var object = { }; - for (let [key, value] of this.attributes) object[key] = value; - return object; - } - */ - + settings: {}; + object:any; }