From a260ed17bd28e0cff2ab1504aea7937ebc211ca8 Mon Sep 17 00:00:00 2001 From: argirok Date: Fri, 2 Feb 2024 09:33:01 +0200 Subject: [PATCH] [plugin-functionalities | WIP] : update plugin forms, add reording, filtering by position, create multiple templates per position, etc --- dashboard/page/pages.component.html | 19 +- dashboard/page/pages.component.ts | 14 +- dashboard/plugins/plugins.component.html | 71 +++- dashboard/plugins/plugins.component.ts | 239 ++++-------- .../templates/pluginTemplates.component.html | 119 +++--- .../templates/pluginTemplates.component.ts | 366 +++++++++--------- dashboard/plugins/utils/pluginUtils.ts | 37 ++ .../plugins/wrapper/plugin-wrapper.module.ts | 4 +- services/help-content.service.ts | 5 +- services/plugins.service.ts | 17 +- utils/entities/adminTool/plugin.ts | 14 +- utils/entities/adminTool/pluginTemplate.ts | 5 +- 12 files changed, 482 insertions(+), 428 deletions(-) create mode 100644 dashboard/plugins/utils/pluginUtils.ts diff --git a/dashboard/page/pages.component.html b/dashboard/page/pages.component.html index 4c865c33..e925ff12 100644 --- a/dashboard/page/pages.component.html +++ b/dashboard/page/pages.component.html @@ -94,8 +94,7 @@ [queryParams]="{pageId: check.page._id}" routerLink="../plugins"> Manage plugins - ({{pagePluginsCount[check.page._id]}} - ) + ({{pagePluginTemplatesCount[check.page._id]}}) @@ -105,8 +104,7 @@ [queryParams]="{pageId: check.page._id}" routerLink="../helptexts"> Manage page help texts - ({{pageHelpContentsCount[check.page._id]}} - ) + ({{pageHelpContentsCount[check.page._id]}}) @@ -116,8 +114,7 @@ [queryParams]="{ pageId: check.page._id}" routerLink="../classContents">Manage class help texts ({{pageClassContentsCount[check.page._id]}} - ) + *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}}) @@ -133,6 +130,16 @@ +
+
+ + Manage plugin templates {{check.page.portalPid}} + ({{pagePluginTemplatesCount[check.page._id]}}) + +
+
@@ -40,8 +49,8 @@

{{template.name}}
-
-
+
- Placement: {{check.plugin.placement}} + Placement: {{pluginGroup.plugin.placement}} +
+
+ Order: {{pluginGroup.plugin.order}}
+
+
+ +
+
+
+
+ +
+
- Enable @@ -138,8 +173,10 @@
-
- + + + + @@ -186,7 +223,7 @@
{{selectedTemplate.name}}
{{selectedTemplate.description}}
-
+
@@ -222,5 +259,3 @@
- - diff --git a/dashboard/plugins/plugins.component.ts b/dashboard/plugins/plugins.component.ts index 698a8b93..7ae71a28 100644 --- a/dashboard/plugins/plugins.component.ts +++ b/dashboard/plugins/plugins.component.ts @@ -9,7 +9,7 @@ import { ValidatorFn, Validators } from "@angular/forms"; -import {CheckPage, Page} from "../../utils/entities/adminTool/page"; +import {Page} from "../../utils/entities/adminTool/page"; import {EnvProperties} from '../../utils/properties/env-properties'; import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {Subscriber} from "rxjs"; @@ -25,21 +25,16 @@ import {Plugin} from "../../utils/entities/adminTool/plugin"; import {StringUtils} from "../../utils/string-utils.class"; import {Portal} from "../../utils/entities/adminTool/portal"; import {PluginTemplate} from "../../utils/entities/adminTool/pluginTemplate"; -import template = CKEDITOR.template; import {PluginEditEvent} from "./utils/base-plugin.component"; +import {PluginUtils} from "./utils/pluginUtils"; @Component({ selector: 'plugins', templateUrl: './plugins.component.html', }) export class PluginsComponent implements OnInit { - @ViewChild('deleteModal') deleteModal: AlertModal; private selectedId: string; - public checkboxes: { - plugin: Plugin; - checked: boolean; - template: PluginTemplate - }[] = []; + public pluginsByPlacement: Map = new Map(); public plugins: Plugin[] = []; public pluginTemplates: PluginTemplate[] = []; public selectedTemplate: PluginTemplate = null; @@ -54,23 +49,9 @@ export class PluginsComponent implements OnInit { public properties: EnvProperties = properties; public formPages: Page[] = []; public showLoading: boolean = true; - public filterForm: UntypedFormGroup; private subscriptions: any[] = []; public allPages: Option[] = []; - public attrTypeOptions: Option[] = [ - {label: "Text", value: "text"}, - {label: "HTML", value: "HTML"}, - {label: "Boolean", value: "boolean"}, - {label: "URL", value: "URL"}, - ]; - public placementsOptions: Option[] = [ - {label: "Top", value: "top"}, - {label: "Bottom", value: "bottom"}, - {label: "Top Right", value: "top-right"}, - {label: "Center", value: "center"}, - {label: "Right", value: "right"}, - {label: "Left", value: "left"}, - ]; + public pluginUtils = new PluginUtils(); selectedCommunityPid = null; public portalUtils: PortalUtils = new PortalUtils(); private index: number; @@ -80,7 +61,8 @@ export class PluginsComponent implements OnInit { public page: Page; public templateView = false; public templateCode:string = null; - public template + public template; + public selectedPlacementView = "all"; constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, private title: Title, private _helpContentService: HelpContentService, private _pluginsService: PluginsService, private _fb: UntypedFormBuilder, @@ -89,26 +71,10 @@ export class PluginsComponent implements OnInit { ngOnInit() { this.title.setTitle('Administrator Dashboard | Plugins'); - this.filterForm = this._fb.group({ - keyword: [''], - type: ['all', Validators.required] - }); - this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => { - this.searchText = new RegExp(value, 'i'); - this.applyFilters(); - })); this.subscriptions.push(this.route.params.subscribe(params => { this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param]; - // this.templateView = this.route.snapshot.data['templateView'] this.selectedCommunityPid = params.community; - /*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']; @@ -133,9 +99,9 @@ export class PluginsComponent implements OnInit { }); } - getTemplateByCode(code) { + getTemplateById(id) { for (let template of this.pluginTemplates) { - if (template.code == code) { + if (template._id == id) { return template; } } @@ -165,13 +131,15 @@ export class PluginsComponent implements OnInit { this.subscriptions.push(this._pluginsService.getPluginsByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe( plugins => { this.plugins = plugins; - this.checkboxes = []; - + 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.code == _.code){ + if (pl.templateId == _._id){ plugin = pl; } } @@ -179,9 +147,13 @@ export class PluginsComponent implements OnInit { plugin = new Plugin(this.selectedPageId, this.selectedCommunityPid,_); this.plugins.push(plugin); } - self.checkboxes.push({plugin: plugin, checked: false, template: _}); + this.pluginsByPlacement.get(plugin.placement).push({plugin: plugin, template: _ }); }); - + for(let placement of this.pluginUtils.placementsOptions){ + this.pluginsByPlacement.get(placement.value).sort(function (a, b) { + return a.plugin.order - b.plugin.order; + }) + } this.showLoading = false; }, error => this.handleError('System error retrieving plugins', error))); @@ -189,90 +161,22 @@ 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); - } - public applyCheck(flag: boolean) { - this.checkboxes.forEach(_ => _.checked = flag); - } - - private deleteFromArray(id: string): void { - - let i = this.plugins.findIndex(_ => _._id == id); - this.plugins.splice(i, 1); - - this.applyFilters(); - } - - public confirmDelete(id: string) { - this.selectedId = id; - this.confirmModalOpen(); - } - - - private confirmModalOpen() { - this.deleteModal.alertTitle = "Delete Confirmation"; - this.deleteModal.message = "Are you sure you want to delete the selected template(s)?"; - this.deleteModal.okButtonText = "Yes"; - this.deleteModal.open(); - } - - public confirmedDelete() { - this.showLoading = true; - this.subscriptions.push(this._pluginsService.deletePluginTemplate(this.selectedId, this.properties.adminToolsAPIURL).subscribe( - _ => { - this.deleteFromArray(this.selectedId); - NotificationHandler.rise('Template have been successfully deleted'); - this.showLoading = false; - this._clearCacheService.clearCache("Template id deleted"); - }, - error => this.handleUpdateError('System error deleting the selected Template', error) - )); - } - - - public edit(plugin:Plugin, template:PluginTemplate) { + public edit(plugin:Plugin, template:PluginTemplate, placement, index) { this.editView = true; this.selectedPlugin = plugin; this.selectedTemplate = template; - this.index = this.plugins.findIndex(value => value._id === plugin._id); - // this.formPages = plugin.pages; + 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), - code: this._fb.control(plugin.code, Validators.required), + 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), - isPriorTo: this._fb.control(plugin.priorTo), values: this._fb.array([]), object: this._fb.group(plugin.object?plugin.object:(this.selectedTemplate.object?this.selectedTemplate.object:{})) }); @@ -305,7 +209,7 @@ export class PluginsComponent implements OnInit { 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.placements[0]), + placement: this._fb.control(this.selectedTemplate.placement), order: this._fb.control(""), active: this._fb.control(false), isPriorTo: this._fb.control(false), @@ -326,18 +230,17 @@ export class PluginsComponent implements OnInit { public saveConfirmed() { this.showLoading = true; let plugin: Plugin = this.templateForm.getRawValue(); - // template.pages = this.pagesCtrl.getRawValue().map(page => page._id?page._id:page); plugin.settingsValues = new Map(); for (let fields of this.templateForm.getRawValue().values) { plugin.settingsValues[fields.key] = fields.value; } - let update = (plugin._id ) ? true : false; - console.log("update:" + update); + let update = (plugin._id) ? true : false; + this.savePlugin(plugin,update, null) + } + public savePlugin(plugin, update, index){ this.subscriptions.push(this._pluginsService.savePlugin(plugin, this.properties.adminToolsAPIURL).subscribe( saved => { - this.savedSuccessfully(saved, update); - NotificationHandler.rise('Plugin ' + this.selectedTemplate.name + ' has been successfully' + (update ? ' updated ' : ' created ') + ''); - this._clearCacheService.clearCache("Plugin id saved"); + this.savedSuccessfully(saved, update, index); this.editView = false; this.selectTemplateView = false; this.selectedTemplate = null; @@ -347,44 +250,21 @@ export class PluginsComponent implements OnInit { )); } - public savedSuccessfully(plugin: Plugin, update: boolean) { + public savedSuccessfully(plugin: Plugin, update: boolean, index) { if (update) { - this.plugins[this.index] = plugin; + this.pluginsByPlacement.get(plugin.placement)[index].plugin = plugin; } else { this.plugins.push(plugin); } - this.applyFilters(); - this.applyCheck(false); this.showLoading = false; } - - public applyFilters() { - /* this.checkboxes = []; - this.plugins.filter(item => this.filterByType(item)).forEach( - item => this.checkboxes.push({plugin: item, checked: false}) - ); - this.checkboxes = this.checkboxes.filter(item => this.filter(item.plugin));*/ - - this.checkboxes = []; - - this.plugins.forEach(item => { - let template = this.getTemplateByCode(item.code); - if (this.filterPlugins(item, template)) { - this.checkboxes.push({plugin: item, checked: false, template: template}); - - } - }); - - } - - 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.code + ' ' +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; } @@ -460,25 +340,31 @@ export class PluginsComponent implements OnInit { reset() { if (this.selectedPlugin) { - this.edit(this.selectedPlugin, this.selectedTemplate) + this.edit(this.selectedPlugin, this.selectedTemplate, this.selectedTemplate.placement, this.index) } else { this.newPlugin(this.selectedTemplate) } } - public togglePlugin(status: boolean, id: string) { - this.subscriptions.push(this._pluginsService.togglePages(id, status, this.properties.adminToolsAPIURL).subscribe( - () => { + public togglePlugin(status: boolean, id: string,i, placement) { + this.index = i; + this.selectedTemplate = this.pluginsByPlacement.get(placement)[i].template; + if(id) { + this.subscriptions.push(this._pluginsService.togglePages(id, status, this.properties.adminToolsAPIURL).subscribe( + () => { - let i = this.checkboxes.findIndex(_ => _.plugin._id == id); - this.checkboxes[i].plugin.active = status; - this.applyCheck(false); - 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) - )); + 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){ let object = this.templateForm.get("object").getRawValue(); @@ -486,4 +372,29 @@ export class PluginsComponent implements OnInit { this.templateForm.get("object").setValue(object); this.templateForm.markAsDirty(); } + + public swap(pluginToMoveUp, pluginToMoveDown, placement ){ + this.showLoading = true; + let moveUpGroup = this.pluginsByPlacement.get(placement)[pluginToMoveUp]; + let moveDownGroup = this.pluginsByPlacement.get(placement)[pluginToMoveDown]; + this.pluginsByPlacement.get(placement)[pluginToMoveUp] = moveDownGroup; + this.pluginsByPlacement.get(placement)[pluginToMoveDown] = moveUpGroup; + this.move(moveUpGroup.plugin,true, pluginToMoveDown, placement); + this.move(moveDownGroup.plugin,false, pluginToMoveUp, placement); + this.showLoading = false; + } + public move(plugin: Plugin, up:boolean, index, placement) { + if(plugin._id) { + this.subscriptions.push(this._pluginsService.updatePluginOrder(plugin, this.properties.adminToolsAPIURL, up ? -1 : 1).subscribe( + saved => { + this.pluginsByPlacement.get(placement)[index].plugin = saved; + }, + error => this.handleUpdateError("System error creating template", error) + )); + }else{ + + plugin.order = plugin.order + (up ? -1 : 1) + this.savePlugin(plugin, true, index); + } + } } diff --git a/dashboard/plugins/templates/pluginTemplates.component.html b/dashboard/plugins/templates/pluginTemplates.component.html index 28437b1c..02bafb62 100644 --- a/dashboard/plugins/templates/pluginTemplates.component.html +++ b/dashboard/plugins/templates/pluginTemplates.component.html @@ -1,20 +1,28 @@
-
+
-
No templates found
-
-
-
+
--> +
+ + + +
{{placement.value}}
+
+ +
- -
- Pages: {{getPagesAsString(check.template.pages)}} -
-
- Placements: {{check.template.placements.join(", ")}} + +
+ Page: {{getPageAsString(template.page)}} - + Placement: {{template.placement}} - + Order: {{template.order}} +
- Portal type: {{check.template.portalType}} + Portal type: {{template.portalType}}
- Plan: {{check.template.plan}} + Plan: {{template.plan}}
- {{check.template.description}} + {{template.description}}
@@ -68,22 +83,30 @@
- - - - - - - - - - - - -
+ +
+
+
+
+
+ +
+
+ +
+
+ @@ -92,7 +115,7 @@
@@ -101,7 +124,12 @@
-
+ + +
+ + +
@@ -111,14 +139,15 @@ [okDisabled]="templateForm && (templateForm.invalid || !templateForm.dirty)" classTitle="uk-background-primary uk-light">
-
+
-
+
- -
-
-
+
+
+
+