From d80db44df1be06b8aee5017a103e76a6a7b271b5 Mon Sep 17 00:00:00 2001 From: argirok Date: Mon, 2 Oct 2023 10:20:36 +0300 Subject: [PATCH] improvements in manage Plugins --- dashboard/page/pages.component.html | 2 +- dashboard/page/pages.component.ts | 7 +- dashboard/plugins/plugins.component.html | 186 ++++++------ dashboard/plugins/plugins.component.ts | 282 ++++++++++-------- dashboard/plugins/plugins.module.ts | 4 +- .../templates/pluginTemplates.component.html | 2 +- .../templates/pluginTemplates.component.ts | 2 +- services/plugins.service.ts | 8 + utils/entities/adminTool/plugin.ts | 5 +- 9 files changed, 288 insertions(+), 210 deletions(-) diff --git a/dashboard/page/pages.component.html b/dashboard/page/pages.component.html index a8291a4d..4c865c33 100644 --- a/dashboard/page/pages.component.html +++ b/dashboard/page/pages.component.html @@ -88,7 +88,7 @@
-
+
this.handleError('System error retrieving page contents', error))); + this.subscriptions.push(this._pluginsService.countPluginTemplatePerPage( this.properties.adminToolsAPIURL, community_pid).subscribe( + countPlugins => { + this.pagePluginTemplatesCount = countPlugins; + }, + error => this.handleError('System error retrieving page contents', error))); } } diff --git a/dashboard/plugins/plugins.component.html b/dashboard/plugins/plugins.component.html index fc362525..3fe077cd 100644 --- a/dashboard/plugins/plugins.component.html +++ b/dashboard/plugins/plugins.component.html @@ -2,6 +2,28 @@
+ +
+ + + + +

{{page.name}} - {{selectedPlugin ? 'Update ' : 'Add new '}} plugin + (unsaved changes) +

+ +
+
+ + +
+ +
@@ -10,24 +32,26 @@

{{page.name}}
-
+
-
+
+
- +
No plugins found
@@ -36,10 +60,6 @@
-
{{check.template.name}}
@@ -77,7 +97,7 @@
@@ -92,100 +112,100 @@
+
+
+ + Enable + +
+
+
-
-
-
- - {{selectedPlugin}} {{selectedTemplate}} {{pluginTemplates.length}} -
-
-
-
-
-
-
{{template.name}}
-
- Placements: {{template.placements.join(", ")}} -
-
- {{template.description}} -
+ -
-
-
-
+
+
Select a Template for your plugin.
+
+
+
+
+
+
{{template.name}}
+
+ Placements: {{template.placements.join(", ")}} +
+
+ {{template.description}} +
+ +
+
+
+
-
-
- +
+
+ +
+
+
-
-
-
- -
-
- - - -
{{selectedTemplate.name}}
-
{{selectedTemplate.description}}
-
- -
- - -
-
-
Field #{{i +1}}
-
-
- -
-
-
-
- - + + + +
{{selectedTemplate.name}}
+
{{selectedTemplate.description}}
+
+
+
+
Plugin Fields
+
+
+
+
+
+
+
+ + - -
-
+ +
+
+ + +
+ +
+
+
- - - diff --git a/dashboard/plugins/plugins.component.ts b/dashboard/plugins/plugins.component.ts index 192c0c28..b4dc73e0 100644 --- a/dashboard/plugins/plugins.component.ts +++ b/dashboard/plugins/plugins.component.ts @@ -9,7 +9,7 @@ import { ValidatorFn, Validators } from "@angular/forms"; -import {Page} from "../../utils/entities/adminTool/page"; +import {CheckPage, Page} from "../../utils/entities/adminTool/page"; import {EnvProperties} from '../../utils/properties/env-properties'; import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {Subscriber} from "rxjs"; @@ -31,18 +31,19 @@ import {PluginTemplate} from "../../utils/entities/adminTool/pluginTemplate"; templateUrl: './plugins.component.html', }) export class PluginsComponent implements OnInit { - @ViewChild('editModal') editModal: AlertModal; @ViewChild('deleteModal') deleteModal: AlertModal; private selectedId: string; public checkboxes: { plugin: Plugin; checked: boolean; - template:PluginTemplate + template: PluginTemplate }[] = []; 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; @@ -55,18 +56,18 @@ export class PluginsComponent implements OnInit { 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"}, + {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"}, + {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"}, ]; selectedCommunityPid = null; public portalUtils: PortalUtils = new PortalUtils(); @@ -77,13 +78,13 @@ export class PluginsComponent implements OnInit { public page: Page; constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, - private title: Title,private _helpContentService: HelpContentService, + private title: Title, private _helpContentService: HelpContentService, private _pluginsService: PluginsService, private _fb: UntypedFormBuilder, private _clearCacheService: ClearCacheService) { } - + ngOnInit() { - this.title.setTitle('Administrator Dashboard | Classes'); + this.title.setTitle('Administrator Dashboard | Plugins'); this.filterForm = this._fb.group({ keyword: [''], type: ['all', Validators.required] @@ -92,9 +93,9 @@ export class PluginsComponent implements OnInit { this.searchText = new RegExp(value, 'i'); this.applyFilters(); })); - this.subscriptions.push(this.filterForm.get('type').valueChanges.subscribe(value => { + /*this.subscriptions.push(this.filterForm.get('type').valueChanges.subscribe(value => { this.applyFilters(); - })); + }));*/ this.subscriptions.push(this.route.params.subscribe(params => { console.log(params) this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param]; @@ -114,9 +115,9 @@ export class PluginsComponent implements OnInit { })); })); - + } - + ngOnDestroy(): void { this.subscriptions.forEach(value => { if (value instanceof Subscriber) { @@ -126,14 +127,16 @@ export class PluginsComponent implements OnInit { } }); } - getTemplateByCode(code){ - for(let template of this.pluginTemplates){ - if(template.code == code){ + + getTemplateByCode(code) { + for (let template of this.pluginTemplates) { + if (template.code == code) { return template; } } return null; } + getPage(pageId: string) { this.showLoading = true; this.subscriptions.push(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal).subscribe( @@ -147,20 +150,21 @@ export class PluginsComponent implements OnInit { }, error => this.handleError('System error retrieving page', error))); } + getPlugins() { this.showLoading = true; - this.subscriptions.push(this._pluginsService.getPluginTemplatesByPage( this.properties.adminToolsAPIURL,this.selectedCommunityPid, this.selectedPageId).subscribe( + this.subscriptions.push(this._pluginsService.getPluginTemplatesByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe( templates => { this.pluginTemplates = templates; - this.subscriptions.push(this._pluginsService.getPluginsByPage( this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe( + this.subscriptions.push(this._pluginsService.getPluginsByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe( plugins => { this.plugins = plugins; this.checkboxes = []; let self = this; this.plugins.forEach(_ => { - self.checkboxes.push( {plugin: _, checked: false, template:this.getTemplateByCode(_.code)}); + self.checkboxes.push({plugin: _, checked: false, template: this.getTemplateByCode(_.code)}); }); this.showLoading = false; @@ -170,40 +174,36 @@ export class PluginsComponent implements OnInit { }, error => this.handleError('System error retrieving templates', error))); } - - // public showModal():void { - // this.modal.showModal(); - // } - + 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); + 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( @@ -218,130 +218,147 @@ export class PluginsComponent implements OnInit { } - public edit(i: number) { - let plugin:Plugin = this.checkboxes[i].plugin; + public edit(plugin, template) { + this.editView = true; this.selectedPlugin = plugin; - this.selectedTemplate = this.checkboxes[i].template; + this.selectedTemplate = template; this.index = this.plugins.findIndex(value => value._id === plugin._id); // this.formPages = plugin.pages; 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), placement: this._fb.control(plugin.placement), order: this._fb.control(plugin.order), - isActive: this._fb.control(plugin.isActive), + active: this._fb.control(plugin.active), isPriorTo: this._fb.control(plugin.isPriorTo), - values:this._fb.array([]) + values: this._fb.array([]) }); - if(plugin.values) { + if (plugin.values) { for (let attrKey of Object.keys(plugin.values)) { (this.templateForm.get("values") as FormArray).push(this._fb.group({ - 'key': this._fb.control(attrKey), - 'value': this._fb.control(plugin.values[attrKey])} + 'key': this._fb.control(attrKey), + 'value': this._fb.control(plugin.values[attrKey]) + } )); } } - this.modalOpen("Edit Plugin", "Save Changes"); } - - public newPlugin(template=null) { - this.selectedPlugin = null; - this.selectedTemplate = template; - if(this.selectedTemplate) { - if (this.templateForm) { - this.templateForm.get('portalType').enable(); - } - this.templateForm = this._fb.group({ - _id: this._fb.control(null), - page: this._fb.control(this.selectedPageId), - code: this._fb.control(this.selectedTemplate.code, Validators.required), - placement: this._fb.control(this.selectedTemplate.placements[0]), - order: this._fb.control(""), - isActive: this._fb.control(false), - isPriorTo: this._fb.control(false), - values: this._fb.array([]) - }); - // if(plugin.values) { - for (let attrKey of Object.keys(this.selectedTemplate.attributes)) { - (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:""), - })); - } - // } - }else { - // this.addNewAttr(); - this.modalOpen("Create plugin", "Create"); + public newPluginSelectTemplate() { + this.selectedPlugin = null; + this.selectedTemplate = null; + this.editView = true; + this.selectTemplateView = true; + } + + 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.placements[0]), + order: this._fb.control(""), + active: this._fb.control(false), + isPriorTo: this._fb.control(false), + values: this._fb.array([]) + }); + for (let attrKey of Object.keys(this.selectedTemplate.attributes)) { + (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 : ""), + })); + } + this.selectTemplateView = false; + } - - private modalOpen(title: string, yesBtn: string) { - this.editModal.okButtonLeft = false; - this.editModal.alertTitle = title; - this.editModal.okButtonText = yesBtn; - this.editModal.open(); - } - - public saveConfirmed(data: any) { + + public saveConfirmed() { this.showLoading = true; - let plugin:Plugin = this.templateForm.getRawValue(); + let plugin: Plugin = this.templateForm.getRawValue(); // template.pages = this.pagesCtrl.getRawValue().map(page => page._id?page._id:page); plugin.values = new Map(); for (let fields of this.templateForm.getRawValue().values) { - plugin.values[fields.key]= fields.value; + plugin.values[fields.key] = fields.value; } - let update = plugin._id?true:false; - 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"); - }, - error => this.handleUpdateError("System error creating template", error) - )); + let update = (plugin._id ) ? true : false; + console.log("update:" + update); + 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.editView = false; + this.selectTemplateView = false; + this.selectedTemplate = null; + this.selectedPlugin = null; + }, + error => this.handleUpdateError("System error creating template", error) + )); } - - public savedSuccessfully(template: Plugin, update:boolean) { - if(update){ - this.plugins[this.index] = template; - }else{ - this.plugins.push(template); + + public savedSuccessfully(plugin: Plugin, update: boolean) { + if (update) { + this.plugins[this.index] = 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.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.values)){ + values.push(plugin.values[key]); + } + return this.searchText.toString() == '' || (plugin.code + ' ' +values.join(' ') + template.name + ' ' + template.description).match(this.searchText) != null; } - handleUpdateError(message: string, error = null) { if (error) { console.log('Server responded: ' + error); } - NotificationHandler.rise(message,'danger'); + NotificationHandler.rise(message, 'danger'); this.showLoading = false; } - + handleError(message: string, error = null) { if (error) { console.log('Server responded: ' + error); } - NotificationHandler.rise(message,'danger'); + NotificationHandler.rise(message, 'danger'); this.showLoading = false; } - + getPages() { this.showLoading = true; this.subscriptions.push(this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe( @@ -359,39 +376,64 @@ export class PluginsComponent implements OnInit { )); } - get attrFormArray(){ + get attrFormArray() { return this.templateForm.get("values") as FormArray; } - attributeTypeChanged(form){ + attributeTypeChanged(form) { let type = form.get("value").get("type"); form.get("value").setValue(""); - if(type == "boolean"){ + if (type == "boolean") { form.get("value").setValue(false); } } + public getPagesAsString(pageIds): string { let pages = []; - for(let id of pageIds) { + 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){ + for (let option of this.allPages) { + if (option.value._id == pageId) { return option.value; } } return pageId; } - getKeys(obj){ + getKeys(obj) { return Object.keys(obj); } + reset() { + if (this.selectedPlugin) { + this.edit(this.selectedPlugin, this.selectedTemplate) + } else { + this.newPlugin(this.selectedTemplate) + } + } + + + public togglePlugin(status: boolean, id: string) { + 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) + )); + } + } diff --git a/dashboard/plugins/plugins.module.ts b/dashboard/plugins/plugins.module.ts index ba119656..81cd08d3 100644 --- a/dashboard/plugins/plugins.module.ts +++ b/dashboard/plugins/plugins.module.ts @@ -22,12 +22,14 @@ import {IconsModule} from "../../utils/icons/icons.module"; import {LoadingModule} from "../../utils/loading/loading.module"; import {PluginsService} from "../../services/plugins.service"; import {CKEditorModule} from "ng2-ckeditor"; +import {MatSlideToggleModule} from "@angular/material/slide-toggle"; @NgModule({ imports: [ CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule, - MatCheckboxModule, AdminTabsModule, PageContentModule, PluginsRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule + MatCheckboxModule, AdminTabsModule, PageContentModule, PluginsRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule, + MatSlideToggleModule ], providers:[PluginsService], declarations: [PluginsComponent], diff --git a/dashboard/plugins/templates/pluginTemplates.component.html b/dashboard/plugins/templates/pluginTemplates.component.html index bee1e117..1812fa74 100644 --- a/dashboard/plugins/templates/pluginTemplates.component.html +++ b/dashboard/plugins/templates/pluginTemplates.component.html @@ -114,7 +114,7 @@
-
+
diff --git a/dashboard/plugins/templates/pluginTemplates.component.ts b/dashboard/plugins/templates/pluginTemplates.component.ts index f4014013..dd7aaf77 100644 --- a/dashboard/plugins/templates/pluginTemplates.component.ts +++ b/dashboard/plugins/templates/pluginTemplates.component.ts @@ -338,7 +338,7 @@ export class PluginTemplatesComponent implements OnInit { let pages = []; for(let id of pageIds) { - pages.push(this.allPages.filter(option => option.value._id == id).map((option => option.value.name))); + pages.push(this.allPages.filter(option => option.value._id == id).map((option => option.value.name + " [" + option.value.portalType + "]"))); } return pages.join(", "); diff --git a/services/plugins.service.ts b/services/plugins.service.ts index 0e5caaf6..ed63a918 100644 --- a/services/plugins.service.ts +++ b/services/plugins.service.ts @@ -4,6 +4,7 @@ import {CustomOptions} from "./servicesUtils/customOptions.class"; import {PluginTemplate} from "../utils/entities/adminTool/pluginTemplate"; import {Plugin} from "../utils/entities/adminTool/plugin"; import {properties} from "../../../environments/environment"; +import {catchError} from "rxjs/operators"; @Injectable() export class PluginsService { @@ -36,10 +37,17 @@ export class PluginsService { countPluginPerPage( api:string, pid:string){ return this.http.get(api + properties.adminToolsPortalType + '/' +pid+'/plugin/page/count'); } + countPluginTemplatePerPage( api:string, pid:string){ + return this.http.get(api + properties.adminToolsPortalType + '/' +pid+'/pluginTemplate/page/count'); + } getPluginsByPage(api:string, pid:string, pageId:string){ return this.http.get>(api + properties.adminToolsPortalType + '/' +pid+'/plugins/page/' + pageId); } getPluginTemplatesByPage(api:string, pid:string, pageId:string){ return this.http.get>(api + properties.adminToolsPortalType + '/' +pid+'/pluginTemplates/page/' + pageId); } + + togglePages(id : string,status : boolean, api:string) { + return this.http.post(api + 'plugin/status/' + id, status, CustomOptions.getAuthOptionsWithBody()); + } } diff --git a/utils/entities/adminTool/plugin.ts b/utils/entities/adminTool/plugin.ts index 897d5157..7719c12e 100644 --- a/utils/entities/adminTool/plugin.ts +++ b/utils/entities/adminTool/plugin.ts @@ -2,10 +2,11 @@ export class Plugin { _id: string; code: string; page: string; + pid:string; placement: string; order: string; - isActive:boolean; - isPriorTo:boolean; + active:boolean; + priorTo:boolean; values:Map = new Map(); }