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

improvements in manage Plugins

This commit is contained in:
argirok 2023-10-02 10:20:36 +03:00
parent 4dcb757c1b
commit d80db44df1
9 changed files with 288 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/page/pages.component.html
View File

@ -88,7 +88,7 @@
<div class="uk-card-footer uk-padding-remove-vertical"> <div class="uk-card-footer uk-padding-remove-vertical">
<div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid> <div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid>
<ng-container *ngIf="!isPortalAdministrator"> <ng-container *ngIf="!isPortalAdministrator">
<div > <div *ngIf="pagePluginTemplatesCount[check.page._id]>0" >
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<a class="uk-button uk-button-link uk-text-truncate" <a class="uk-button uk-button-link uk-text-truncate"
[queryParams]="{pageId: check.page._id}" [queryParams]="{pageId: check.page._id}"

7
dashboard/page/pages.component.ts
View File

@ -70,7 +70,7 @@ export class PagesComponent implements OnInit {
pageHelpContentsCount = {}; pageHelpContentsCount = {};
pageClassContentsCount = {}; pageClassContentsCount = {};
pagePluginsCount = {}; pagePluginsCount = {};
pagePluginTemplatesCount = {};
constructor(private element: ElementRef, private route: ActivatedRoute, constructor(private element: ElementRef, private route: ActivatedRoute,
private title: Title, private title: Title,
private _router: Router, private _helpContentService: HelpContentService, private _router: Router, private _helpContentService: HelpContentService,
@ -445,5 +445,10 @@ export class PagesComponent implements OnInit {
this.pagePluginsCount = countPlugins; this.pagePluginsCount = countPlugins;
}, },
error => this.handleError('System error retrieving page contents', error))); error => 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)));
} }
} }

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

@ -2,6 +2,28 @@
<div header> <div header>
<div class="uk-section-xsmall uk-margin-top"> <div class="uk-section-xsmall uk-margin-top">
<div class="uk-flex-middle uk-grid" uk-grid> <div class="uk-flex-middle uk-grid" uk-grid>
<ng-container *ngIf="editView ">
<div class="uk-width-expand">
<a (click)="editView = false; selectedTemplate = null; selectedPlugin = null;" class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
<span class="uk-margin-right">
<icon name="west" ratio="1.7" [flex]="true"></icon>
</span>
<h1 *ngIf="page" class="uk-h5 uk-margin-remove">{{page.name}} - {{selectedPlugin ? 'Update ' : 'Add new '}} plugin
<span *ngIf=" templateForm && templateForm.dirty" class="uk-text-large"> (unsaved changes)</span>
</h1>
</a>
</div>
<div *ngIf="templateForm" class="uk-width-auto">
<button class="uk-button uk-button-default uk-margin-right"
(click)="reset()" [class.uk-disabled]="!templateForm.dirty"
[disabled]="!templateForm.dirty || showLoading">Reset
</button>
<button class="uk-button uk-button-primary" [class.uk-disabled]="templateForm.invalid || !templateForm.dirty || templateForm.disabled"
(click)="saveConfirmed()" [disabled]="templateForm.invalid ||!templateForm.dirty || templateForm.disabled || showLoading">Save
</button>
</div>
</ng-container>
<ng-container *ngIf="!editView">
<div class="uk-width-expand"> <div class="uk-width-expand">
<a routerLink="../pages" class="uk-flex uk-flex-middle uk-h5 uk-link-reset"> <a routerLink="../pages" class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
<span class="uk-margin-right"> <span class="uk-margin-right">
@ -10,24 +32,26 @@
<h1 *ngIf="page" class="uk-h5 uk-margin-remove">{{page.name}}</h1> <h1 *ngIf="page" class="uk-h5 uk-margin-remove">{{page.name}}</h1>
</a> </a>
</div> </div>
<div search-input [disabled]="showLoading" [expandable]="true" [searchControl]="filterForm" searchInputClass="outer" placeholder="Search plugins" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"> <div search-input [disabled]="showLoading" [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search plugins" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1">
</div> </div>
<div> <div>
<button (click)="newPlugin()" [disabled]="showLoading" [class.uk-disabled]="showLoading || this.pluginTemplates.length ==0" <button (click)="newPluginSelectTemplate()" [disabled]="showLoading" [class.uk-disabled]="showLoading || this.pluginTemplates.length ==0"
class="uk-flex uk-flex-middle uk-button uk-button-default" > class="uk-flex uk-flex-middle uk-button uk-button-default" >
<icon [flex]="true" name="add"></icon> <icon [flex]="true" name="add"></icon>
<span class="uk-margin-small-left">Add new plugin</span> <span class="uk-margin-small-left">Add new plugin</span>
</button> </button>
</div> </div>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
<div inner> <div inner>
<div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh"> <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
<div *ngIf="showLoading" class="uk-position-center"> <div *ngIf="showLoading" class="uk-position-center">
<loading></loading> <loading></loading>
</div> </div>
<ng-container *ngIf="!showLoading"> <ng-container *ngIf="!showLoading && !editView">
<div *ngIf="checkboxes.length == 0" <div *ngIf="checkboxes.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold"> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No plugins found</div> <div>No plugins found</div>
@ -36,10 +60,6 @@
<div *ngFor="let check of checkboxes; let i=index"> <div *ngFor="let check of checkboxes; let i=index">
<div class="uk-card uk-card-default"> <div class="uk-card uk-card-default">
<div class="uk-card-body uk-flex"> <div class="uk-card-body uk-flex">
<!--<div *ngIf="!portal" class="uk-margin-right">
<input [id]="check.template._id" class="uk-checkbox" type="checkbox"
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
</div>-->
<div class="uk-width-expand uk-text-small"> <div class="uk-width-expand uk-text-small">
<ng-container *ngIf="check.template"> <ng-container *ngIf="check.template">
<h6>{{check.template.name}}</h6> <h6>{{check.template.name}}</h6>
@ -77,7 +97,7 @@
<div> <div>
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<button <button
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="edit(i)" [class.uk-disabled]="!check.template"> class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="edit(check.plugin, check.template)" [class.uk-disabled]="!check.template">
<icon name="edit" [flex]="true"></icon> <icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left"> Edit</span> <span class="uk-margin-xsmall-left"> Edit</span>
</button> </button>
@ -92,100 +112,100 @@
</button> </button>
</div> </div>
</div> </div>
<div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<mat-slide-toggle [checked]="check.plugin.active"
(change)="($event.source.checked = check.plugin.active);togglePlugin(!check.plugin.active,check.plugin._id)"
>
<span class="uk-text-small">Enable</span>
</mat-slide-toggle>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ng-container> </ng-container>
</div> <ng-container *ngIf="editView">
</div>
</div>
<modal-alert #editModal (alertOutput)="saveConfirmed($event)" [large]="true"
[okDisabled]="templateForm && (templateForm.invalid || !templateForm.dirty)" classTitle="uk-background-primary uk-light">
{{selectedPlugin}} {{selectedTemplate}} {{pluginTemplates.length}}
<div *ngIf="!selectedPlugin && !selectedTemplate">
<div *ngIf="pluginTemplates.length > 0" class="uk-grid uk-child-width-1-1" uk-height-match=".uk-card-body" uk-grid>
<div *ngFor="let template of pluginTemplates; let i=index">
<div class="uk-card uk-card-default">
<div class="uk-card-body uk-flex">
<div class="uk-width-expand uk-text-small">
<h6>{{template.name}}</h6>
<div class="uk-margin-small-bottom">
<span class="uk-text-meta">Placements: </span>{{template.placements.join(", ")}}
</div>
<div class="uk-margin-small-bottom">
{{template.description}}
</div>
</div> <div *ngIf="selectTemplateView">
</div> <div> Select a Template for your plugin. </div>
<div class="uk-card-footer uk-padding-remove-vertical"> <div *ngIf="pluginTemplates.length > 0" class="uk-grid uk-child-width-1-1" uk-height-match=".uk-card-body" uk-grid>
<div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid> <div *ngFor="let template of pluginTemplates; let i=index">
<div class="uk-card uk-card-default">
<div class="uk-card-body uk-flex">
<div class="uk-width-expand uk-text-small">
<h6>{{template.name}}</h6>
<div class="uk-margin-small-bottom">
<span class="uk-text-meta">Placements: </span>{{template.placements.join(", ")}}
</div>
<div class="uk-margin-small-bottom">
{{template.description}}
</div>
</div>
</div>
<div class="uk-card-footer uk-padding-remove-vertical">
<div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid>
<div> <div>
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<button <button
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="newPlugin(template)"> class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="newPlugin(template)">
<!-- <icon name="edit" [flex]="true"></icon>--> <!-- <icon name="edit" [flex]="true"></icon>-->
<span class="uk-margin-xsmall-left"> Select Template</span> <span class="uk-margin-xsmall-left"> Select Template</span>
</button> </button>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
<form *ngIf="templateForm" [formGroup]="templateForm" class="uk-grid" uk-grid>
<ng-container *ngIf="selectedTemplate || selectedPlugin">
<div class="uk-text-large ">{{selectedTemplate.name}}</div>
<div class="uk-text-meta uk-width-1-1">{{selectedTemplate.description}}</div>
<div input [formInput]="templateForm.get('placement')" placeholder="Placements" [options]="placementsOptions" type="select" class="uk-width-1-2"></div>
<div *ngFor="let attrForm of attrFormArray.controls; let i=index" class="uk-width-1-1 uk-grid uk-child-width-1-2 uk-margin-top" uk-grid>
<div class="uk-heading-divider uk-text-small uk-width-1-1 uk-margin-bottom uk-text-meta">
<div class="uk-grid">
<div>Field #{{i +1}}</div>
<!--<div *ngIf="attrFormArray.length > 1" class=" uk-width-expand uk-text-right ">
<a class=" " (click)="removeAttr(i)">Remove</a>
</div>-->
</div> </div>
</div> <form *ngIf="!selectTemplateView" [formGroup]="templateForm" class="uk-grid" uk-grid>
<!-- <div input [formInput]="attrForm.get('value')" [placeholder]="attrForm.get"></div>
<div input [formInput]="attrForm.get('name')" placeholder="Name"></div>
<div input [formInput]="attrForm.get('type')" placeholder="Type" [options]="attrTypeOptions" type="select" (valueChange)="attributeTypeChanged(attrForm)"></div> <ng-container *ngIf="selectedTemplate || selectedPlugin">
--> <div class="uk-text-large ">{{selectedTemplate.name}}</div>
<div *ngIf="this.selectedTemplate.attributes[attrForm.get('key').value].type == 'text'" input [formInput]="attrForm.get('value')" [placeholder]="selectedTemplate.attributes[attrForm.get('key').value].name" type="text" ></div> <div class="uk-text-meta uk-width-1-1">{{selectedTemplate.description}}</div>
<div *ngIf="this.selectedTemplate.attributes[attrForm.get('key').value].type == 'URL'" input [formInput]="attrForm.get('value')" [placeholder]="selectedTemplate.attributes[attrForm.get('key').value].name" type="URL" [validators]="urlValidator"></div> <div input [formInput]="templateForm.get('placement')" placeholder="Placements" [options]="placementsOptions" type="select" class="uk-width-1-2"></div>
<div *ngIf="this.selectedTemplate.attributes[attrForm.get('key').value].type == 'boolean'" input [formInput]="attrForm.get('value')" [placeholder]="selectedTemplate.attributes[attrForm.get('key').value].name" type="select" <div class="uk-heading-divider uk-text-small uk-width-1-1 uk-margin-bottom uk-text-meta">
[options]="[{label: 'yes', value:true}, {label: 'no', value:false}]"></div> <div class="uk-grid">
<div *ngIf="this.selectedTemplate.attributes[attrForm.get('key').value].type == 'HTML'" class="uk-width-1-1"> <div>Plugin Fields</div>
<label> </div>
{{selectedTemplate.attributes[attrForm.get('key').value].name}}: </div>
</label> <div *ngFor="let attrForm of attrFormArray.controls; let i=index" class="uk-width-1-1 uk-grid uk-child-width-1-2 uk-margin-top" uk-grid>
<ckeditor [readonly]="false" <div *ngIf="this.selectedTemplate.attributes[attrForm.get('key').value].type == 'text'" input [formInput]="attrForm.get('value')" [placeholder]="selectedTemplate.attributes[attrForm.get('key').value].name" type="text" ></div>
debounce="500" <div *ngIf="this.selectedTemplate.attributes[attrForm.get('key').value].type == 'URL'" input [formInput]="attrForm.get('value')" [placeholder]="selectedTemplate.attributes[attrForm.get('key').value].name" type="URL" [validators]="urlValidator"></div>
[formControl]="attrForm.get('value')" <div *ngIf="this.selectedTemplate.attributes[attrForm.get('key').value].type == 'boolean'" input [formInput]="attrForm.get('value')" [placeholder]="selectedTemplate.attributes[attrForm.get('key').value].name" type="select"
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', [options]="[{label: 'yes', value:true}, {label: 'no', value:false}]"></div>
<div *ngIf="this.selectedTemplate.attributes[attrForm.get('key').value].type == 'HTML'" class="uk-width-1-1">
<label>
{{selectedTemplate.attributes[attrForm.get('key').value].name}}:
</label>
<ckeditor [readonly]="false"
debounce="500"
[formControl]="attrForm.get('value')"
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
removeButtons: 'Save,NewPage,DocProps,Preview,Print,' + removeButtons: 'Save,NewPage,DocProps,Preview,Print,' +
'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' + 'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
'CreateDiv,Flash,PageBreak,' + 'CreateDiv,Flash,PageBreak,' +
'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language', 'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',
extraPlugins: 'divarea'}"> extraPlugins: 'divarea'}">
</ckeditor> </ckeditor>
</div> </div>
</div> </div>
</ng-container>
</form>
</ng-container>
</div>
</div>
</div>
</ng-container>
</form>
</modal-alert>
<modal-alert #deleteModal (alertOutput)="confirmedDelete()" classTitle="uk-background-primary uk-light"></modal-alert> <modal-alert #deleteModal (alertOutput)="confirmedDelete()" classTitle="uk-background-primary uk-light"></modal-alert>

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

@ -9,7 +9,7 @@ import {
ValidatorFn, ValidatorFn,
Validators Validators
} from "@angular/forms"; } 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 {EnvProperties} from '../../utils/properties/env-properties';
import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
@ -31,18 +31,19 @@ import {PluginTemplate} from "../../utils/entities/adminTool/pluginTemplate";
templateUrl: './plugins.component.html', templateUrl: './plugins.component.html',
}) })
export class PluginsComponent implements OnInit { export class PluginsComponent implements OnInit {
@ViewChild('editModal') editModal: AlertModal;
@ViewChild('deleteModal') deleteModal: AlertModal; @ViewChild('deleteModal') deleteModal: AlertModal;
private selectedId: string; private selectedId: string;
public checkboxes: { public checkboxes: {
plugin: Plugin; plugin: Plugin;
checked: boolean; checked: boolean;
template:PluginTemplate template: PluginTemplate
}[] = []; }[] = [];
public plugins: Plugin[] = []; public plugins: Plugin[] = [];
public pluginTemplates: PluginTemplate[] = []; public pluginTemplates: PluginTemplate[] = [];
public selectedTemplate: PluginTemplate = null; public selectedTemplate: PluginTemplate = null;
public selectedPlugin: Plugin = null; public selectedPlugin: Plugin = null;
public editView = false;
public selectTemplateView = false;
public templateForm: UntypedFormGroup; public templateForm: UntypedFormGroup;
public pagesCtrl: UntypedFormArray; public pagesCtrl: UntypedFormArray;
urlValidator: ValidatorFn = StringUtils.urlValidator; urlValidator: ValidatorFn = StringUtils.urlValidator;
@ -55,18 +56,18 @@ export class PluginsComponent implements OnInit {
private subscriptions: any[] = []; private subscriptions: any[] = [];
public allPages: Option[] = []; public allPages: Option[] = [];
public attrTypeOptions: Option[] = [ public attrTypeOptions: Option[] = [
{label:"Text", value:"text"}, {label: "Text", value: "text"},
{label:"HTML", value:"HTML"}, {label: "HTML", value: "HTML"},
{label:"Boolean", value:"boolean"}, {label: "Boolean", value: "boolean"},
{label:"URL", value:"URL"}, {label: "URL", value: "URL"},
]; ];
public placementsOptions: Option[] = [ public placementsOptions: Option[] = [
{label:"Top", value:"top"}, {label: "Top", value: "top"},
{label:"Bottom", value:"bottom"}, {label: "Bottom", value: "bottom"},
{label:"Top Right", value:"top-right"}, {label: "Top Right", value: "top-right"},
{label:"Center", value:"center"}, {label: "Center", value: "center"},
{label:"Right", value:"right"}, {label: "Right", value: "right"},
{label:"Left", value:"left"}, {label: "Left", value: "left"},
]; ];
selectedCommunityPid = null; selectedCommunityPid = null;
public portalUtils: PortalUtils = new PortalUtils(); public portalUtils: PortalUtils = new PortalUtils();
@ -77,13 +78,13 @@ export class PluginsComponent implements OnInit {
public page: Page; public page: Page;
constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, 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 _pluginsService: PluginsService, private _fb: UntypedFormBuilder,
private _clearCacheService: ClearCacheService) { private _clearCacheService: ClearCacheService) {
} }
ngOnInit() { ngOnInit() {
this.title.setTitle('Administrator Dashboard | Classes'); this.title.setTitle('Administrator Dashboard | Plugins');
this.filterForm = this._fb.group({ this.filterForm = this._fb.group({
keyword: [''], keyword: [''],
type: ['all', Validators.required] type: ['all', Validators.required]
@ -92,9 +93,9 @@ export class PluginsComponent implements OnInit {
this.searchText = new RegExp(value, 'i'); this.searchText = new RegExp(value, 'i');
this.applyFilters(); 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.applyFilters();
})); }));*/
this.subscriptions.push(this.route.params.subscribe(params => { this.subscriptions.push(this.route.params.subscribe(params => {
console.log(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]; 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 { ngOnDestroy(): void {
this.subscriptions.forEach(value => { this.subscriptions.forEach(value => {
if (value instanceof Subscriber) { if (value instanceof Subscriber) {
@ -126,14 +127,16 @@ export class PluginsComponent implements OnInit {
} }
}); });
} }
getTemplateByCode(code){
for(let template of this.pluginTemplates){ getTemplateByCode(code) {
if(template.code == code){ for (let template of this.pluginTemplates) {
if (template.code == code) {
return template; return template;
} }
} }
return null; return null;
} }
getPage(pageId: string) { getPage(pageId: string) {
this.showLoading = true; this.showLoading = true;
this.subscriptions.push(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal).subscribe( this.subscriptions.push(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal).subscribe(
@ -147,20 +150,21 @@ export class PluginsComponent implements OnInit {
}, },
error => this.handleError('System error retrieving page', error))); error => this.handleError('System error retrieving page', error)));
} }
getPlugins() { getPlugins() {
this.showLoading = true; 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 => { templates => {
this.pluginTemplates = 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 => { plugins => {
this.plugins = plugins; this.plugins = plugins;
this.checkboxes = []; this.checkboxes = [];
let self = this; let self = this;
this.plugins.forEach(_ => { 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; this.showLoading = false;
@ -170,40 +174,36 @@ export class PluginsComponent implements OnInit {
}, },
error => this.handleError('System error retrieving templates', error))); error => this.handleError('System error retrieving templates', error)));
} }
// public showModal():void {
// this.modal.showModal();
// }
public toggleCheckBoxes(event) { public toggleCheckBoxes(event) {
this.checkboxes.forEach(_ => _.checked = event.target.checked); this.checkboxes.forEach(_ => _.checked = event.target.checked);
} }
public applyCheck(flag: boolean) { public applyCheck(flag: boolean) {
this.checkboxes.forEach(_ => _.checked = flag); this.checkboxes.forEach(_ => _.checked = flag);
} }
private deleteFromArray(id: string): void { private deleteFromArray(id: string): void {
let i = this.plugins.findIndex(_ => _._id == id); let i = this.plugins.findIndex(_ => _._id == id);
this.plugins.splice(i, 1); this.plugins.splice(i, 1);
this.applyFilters(); this.applyFilters();
} }
public confirmDelete(id: string) { public confirmDelete(id: string) {
this.selectedId = id; this.selectedId = id;
this.confirmModalOpen(); this.confirmModalOpen();
} }
private confirmModalOpen() { private confirmModalOpen() {
this.deleteModal.alertTitle = "Delete Confirmation"; this.deleteModal.alertTitle = "Delete Confirmation";
this.deleteModal.message = "Are you sure you want to delete the selected template(s)?"; this.deleteModal.message = "Are you sure you want to delete the selected template(s)?";
this.deleteModal.okButtonText = "Yes"; this.deleteModal.okButtonText = "Yes";
this.deleteModal.open(); this.deleteModal.open();
} }
public confirmedDelete() { public confirmedDelete() {
this.showLoading = true; this.showLoading = true;
this.subscriptions.push(this._pluginsService.deletePluginTemplate(this.selectedId, this.properties.adminToolsAPIURL).subscribe( 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) { public edit(plugin, template) {
let plugin:Plugin = this.checkboxes[i].plugin; this.editView = true;
this.selectedPlugin = plugin; this.selectedPlugin = plugin;
this.selectedTemplate = this.checkboxes[i].template; this.selectedTemplate = template;
this.index = this.plugins.findIndex(value => value._id === plugin._id); this.index = this.plugins.findIndex(value => value._id === plugin._id);
// this.formPages = <Page[]>plugin.pages; // this.formPages = <Page[]>plugin.pages;
this.pagesCtrl = this._fb.array([], Validators.required); this.pagesCtrl = this._fb.array([], Validators.required);
this.templateForm = this._fb.group({ this.templateForm = this._fb.group({
_id: this._fb.control(plugin._id), _id: this._fb.control(plugin._id),
pid: this._fb.control(this.selectedCommunityPid),
page: this._fb.control(plugin.page), page: this._fb.control(plugin.page),
code: this._fb.control(plugin.code, Validators.required), code: this._fb.control(plugin.code, Validators.required),
placement: this._fb.control(plugin.placement), placement: this._fb.control(plugin.placement),
order: this._fb.control(plugin.order), order: this._fb.control(plugin.order),
isActive: this._fb.control(plugin.isActive), active: this._fb.control(plugin.active),
isPriorTo: this._fb.control(plugin.isPriorTo), 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)) { for (let attrKey of Object.keys(plugin.values)) {
(this.templateForm.get("values") as FormArray).push(this._fb.group({ (this.templateForm.get("values") as FormArray).push(this._fb.group({
'key': this._fb.control(attrKey), 'key': this._fb.control(attrKey),
'value': this._fb.control(plugin.values[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:""),
}));
} public newPluginSelectTemplate() {
// } this.selectedPlugin = null;
}else { this.selectedTemplate = null;
// this.addNewAttr(); this.editView = true;
this.modalOpen("Create plugin", "Create"); 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) { public saveConfirmed() {
this.editModal.okButtonLeft = false;
this.editModal.alertTitle = title;
this.editModal.okButtonText = yesBtn;
this.editModal.open();
}
public saveConfirmed(data: any) {
this.showLoading = true; this.showLoading = true;
let plugin:Plugin = <Plugin>this.templateForm.getRawValue(); let plugin: Plugin = <Plugin>this.templateForm.getRawValue();
// template.pages = this.pagesCtrl.getRawValue().map(page => page._id?page._id:page); // template.pages = this.pagesCtrl.getRawValue().map(page => page._id?page._id:page);
plugin.values = new Map<string, string>(); plugin.values = new Map<string, string>();
for (let fields of this.templateForm.getRawValue().values) { 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; let update = (plugin._id ) ? true : false;
this.subscriptions.push(this._pluginsService.savePlugin(plugin, this.properties.adminToolsAPIURL).subscribe( console.log("update:" + update);
saved => { this.subscriptions.push(this._pluginsService.savePlugin(plugin, this.properties.adminToolsAPIURL).subscribe(
this.savedSuccessfully(saved, update ); saved => {
NotificationHandler.rise('Plugin <b>' + this.selectedTemplate.name + '</b> has been <b>successfully' + (update?' updated ':' created ') + '</b>'); this.savedSuccessfully(saved, update);
this._clearCacheService.clearCache("Plugin id saved"); NotificationHandler.rise('Plugin <b>' + this.selectedTemplate.name + '</b> has been <b>successfully' + (update ? ' updated ' : ' created ') + '</b>');
}, this._clearCacheService.clearCache("Plugin id saved");
error => this.handleUpdateError("System error creating template", error) 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) { public savedSuccessfully(plugin: Plugin, update: boolean) {
if(update){ if (update) {
this.plugins[this.index] = template; this.plugins[this.index] = plugin;
}else{ } else {
this.plugins.push(template); this.plugins.push(plugin);
} }
this.applyFilters(); this.applyFilters();
this.applyCheck(false); this.applyCheck(false);
this.showLoading = false; this.showLoading = false;
} }
public applyFilters() { public applyFilters() {
/* this.checkboxes = []; /* this.checkboxes = [];
this.plugins.filter(item => this.filterByType(item)).forEach( this.plugins.filter(item => this.filterByType(item)).forEach(
item => this.checkboxes.push({plugin: item, checked: false}) item => this.checkboxes.push({plugin: item, checked: false})
); );
this.checkboxes = this.checkboxes.filter(item => this.filter(item.plugin));*/ 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) { handleUpdateError(message: string, error = null) {
if (error) { if (error) {
console.log('Server responded: ' + error); console.log('Server responded: ' + error);
} }
NotificationHandler.rise(message,'danger'); NotificationHandler.rise(message, 'danger');
this.showLoading = false; this.showLoading = false;
} }
handleError(message: string, error = null) { handleError(message: string, error = null) {
if (error) { if (error) {
console.log('Server responded: ' + error); console.log('Server responded: ' + error);
} }
NotificationHandler.rise(message,'danger'); NotificationHandler.rise(message, 'danger');
this.showLoading = false; this.showLoading = false;
} }
getPages() { getPages() {
this.showLoading = true; this.showLoading = true;
this.subscriptions.push(this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe( 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; return this.templateForm.get("values") as FormArray;
} }
attributeTypeChanged(form){ attributeTypeChanged(form) {
let type = form.get("value").get("type"); let type = form.get("value").get("type");
form.get("value").setValue(""); form.get("value").setValue("");
if(type == "boolean"){ if (type == "boolean") {
form.get("value").setValue(false); form.get("value").setValue(false);
} }
} }
public getPagesAsString(pageIds): string { public getPagesAsString(pageIds): string {
let pages = []; 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))); pages.push(this.allPages.filter(option => option.value._id == id).map((option => option.value.name)));
} }
return pages.join(", "); return pages.join(", ");
} }
public getPageById(pageId) { public getPageById(pageId) {
for(let option of this.allPages) { for (let option of this.allPages) {
if(option.value._id == pageId){ if (option.value._id == pageId) {
return option.value; return option.value;
} }
} }
return pageId; return pageId;
} }
getKeys(obj){ getKeys(obj) {
return Object.keys(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)
));
}
} }

4
dashboard/plugins/plugins.module.ts
View File

@ -22,12 +22,14 @@ import {IconsModule} from "../../utils/icons/icons.module";
import {LoadingModule} from "../../utils/loading/loading.module"; import {LoadingModule} from "../../utils/loading/loading.module";
import {PluginsService} from "../../services/plugins.service"; import {PluginsService} from "../../services/plugins.service";
import {CKEditorModule} from "ng2-ckeditor"; import {CKEditorModule} from "ng2-ckeditor";
import {MatSlideToggleModule} from "@angular/material/slide-toggle";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, CommonModule, RouterModule, FormsModule,
AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule, 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], providers:[PluginsService],
declarations: [PluginsComponent], declarations: [PluginsComponent],

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

@ -114,7 +114,7 @@
</div> </div>
</div> </div>
<div input [formInput]="attrForm.get('key')" placeholder="Field key"></div> <div input [formInput]="attrForm.get('key')" placeholder="Key"></div>
<div input [formInput]="attrForm.get('name')" placeholder="Name"></div> <div input [formInput]="attrForm.get('name')" placeholder="Name"></div>
<div input [formInput]="attrForm.get('type')" placeholder="Type" [options]="attrTypeOptions" type="select" (valueChange)="attributeTypeChanged(attrForm)"></div> <div input [formInput]="attrForm.get('type')" placeholder="Type" [options]="attrTypeOptions" type="select" (valueChange)="attributeTypeChanged(attrForm)"></div>

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

@ -338,7 +338,7 @@ export class PluginTemplatesComponent implements OnInit {
let pages = []; 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))); pages.push(this.allPages.filter(option => option.value._id == id).map((option => option.value.name + " [" + option.value.portalType + "]")));
} }
return pages.join(", "); return pages.join(", ");

8
services/plugins.service.ts
View File

@ -4,6 +4,7 @@ import {CustomOptions} from "./servicesUtils/customOptions.class";
import {PluginTemplate} from "../utils/entities/adminTool/pluginTemplate"; import {PluginTemplate} from "../utils/entities/adminTool/pluginTemplate";
import {Plugin} from "../utils/entities/adminTool/plugin"; import {Plugin} from "../utils/entities/adminTool/plugin";
import {properties} from "../../../environments/environment"; import {properties} from "../../../environments/environment";
import {catchError} from "rxjs/operators";
@Injectable() @Injectable()
export class PluginsService { export class PluginsService {
@ -36,10 +37,17 @@ export class PluginsService {
countPluginPerPage( api:string, pid:string){ countPluginPerPage( api:string, pid:string){
return this.http.get(api + properties.adminToolsPortalType + '/' +pid+'/plugin/page/count'); 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){ getPluginsByPage(api:string, pid:string, pageId:string){
return this.http.get<Array<Plugin>>(api + properties.adminToolsPortalType + '/' +pid+'/plugins/page/' + pageId); return this.http.get<Array<Plugin>>(api + properties.adminToolsPortalType + '/' +pid+'/plugins/page/' + pageId);
} }
getPluginTemplatesByPage(api:string, pid:string, pageId:string){ getPluginTemplatesByPage(api:string, pid:string, pageId:string){
return this.http.get<Array<PluginTemplate>>(api + properties.adminToolsPortalType + '/' +pid+'/pluginTemplates/page/' + pageId); return this.http.get<Array<PluginTemplate>>(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());
}
} }

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

@ -2,10 +2,11 @@ export class Plugin {
_id: string; _id: string;
code: string; code: string;
page: string; page: string;
pid:string;
placement: string; placement: string;
order: string; order: string;
isActive:boolean; active:boolean;
isPriorTo:boolean; priorTo:boolean;
values:Map<string,string> = new Map<string, string>(); values:Map<string,string> = new Map<string, string>();
} }