[plugins-functionality | WIP] : add component preview when managing plugins, add edit inside plugin preview, add plugin wrapper
This commit is contained in:
argirok
parent
71df792e49
commit
d0b4fa7750
|
|
@ -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: `
|
||||
<div *ngIf="pluginDefaultObject">
|
||||
<div [class.fieldEditMode]="editMode">
|
||||
<ng-container *ngIf="editMode">
|
||||
<plugin-field-edit [value]="pluginObject && pluginObject.title?pluginObject.title:pluginDefaultObject.title"
|
||||
type="text" field="title" (editClicked)="pluginEditEvent = $event" (changed)="valueChanged($event)" ></plugin-field-edit>
|
||||
</ng-container>
|
||||
|
||||
<h3 [class.uk-invisible]=" (pluginEditEvent && pluginEditEvent.field == 'title')">
|
||||
{{pluginObject && pluginObject.title?pluginObject.title:pluginDefaultObject.title}} </h3>
|
||||
</div>
|
||||
<div [class.fieldEditMode]="editMode && !editTemplate">
|
||||
<div class="uk-child-width-1-3 uk-grid">
|
||||
<ng-container *ngFor="let service of services">
|
||||
<ng-container
|
||||
*ngIf="editMode?services:(pluginObject?pluginObject.serviceIds[service.id]:pluginDefaultObject.serviceIds[service.id])">
|
||||
|
||||
<div class="uk-padding-xsmall">
|
||||
|
||||
<div class="uk-card uk-card-default ">
|
||||
<div class="uk-card-media-top">
|
||||
<img [src]="service.logo" width="100%" height="" alt="" class="uk-height-max-small">
|
||||
</div>
|
||||
<div class=" uk-height-max-large uk-padding-small">
|
||||
<div class="uk-text-primary">{{service.name}}</div>
|
||||
<div class="uk-h5 uk-margin-remove-vertical">{{service.tagline}}</div>
|
||||
<div [innerHTML]="service.description" class="uk-text-truncate uk-text-small uk-text-meta"></div>
|
||||
<a class="uk-link-text" [href]="service.webpage" target="_blank">Read more</a>
|
||||
<ng-container *ngIf="editMode && !editTemplate">
|
||||
<div class="uk-float-right">
|
||||
<plugin-field-edit [value]=" pluginObject?pluginObject.serviceIds[service.id]:pluginDefaultObject.serviceIds[service.id]"
|
||||
type="boolean" field="serviceIds" (editClicked)="pluginEditEvent = $event" (changed)="serviceChanged(service.id,$event)" >
|
||||
</plugin-field-edit>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
`,
|
||||
|
||||
|
||||
})
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
|
@ -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([])
|
||||
}
|
||||
}
|
||||
|
|
@ -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: `
|
||||
<div class="plugin2 uk-flex uk-flex-middle uk-flex-wrap" style="grid-gap: 30px;">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<!-- <a *ngIf="editMode" (click)="editClicked.emit({field: 'publicationsOnOff', type: 'boolean'}) ">Edit</a>-->
|
||||
<icon [name]="'description'" [type]="'outlined'" [ratio]="2" [flex]="true" [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
|
||||
<a [queryParams]="getParamsForSearchLink('publications')" [routerLink]="properties.searchLinkToAdvancedResults" class="uk-link-reset uk-flex uk-flex-column">
|
||||
<span class="uk-text-xsmall">
|
||||
{{openaireEntities.PUBLICATIONS}}
|
||||
</span>
|
||||
<span *ngIf="fetchPublications.searchUtils.totalResults" class="uk-h6 uk-margin-remove" [innerHTML]="fetchPublications.searchUtils.totalResults | numberRound: 1:1">
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<!--<div class="uk-flex uk-flex-middle">
|
||||
<icon [name]="'database'" [type]="'outlined'" [ratio]="2" [flex]="true" [customclass]="'uk-margin-small-right uk-text-secondary'"></icon>
|
||||
<a [queryparams]="getParamsForSearchLink('datasets')" [routerlink]="properties.searchLinkToAdvancedResults" class="uk-link-reset uk-flex uk-flex-column">
|
||||
<span class="uk-text-xsmall">
|
||||
{{openaireEntities.DATASETS}}
|
||||
</span>
|
||||
<span *ngif="fetchDatasets.searchUtils.totalResults" class="uk-h6 uk-margin-remove" [innerhtml]="fetchDatasets.searchUtils.totalResults | numberRound: 1:1">
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<icon [name]="'integration_instructions'" [type]="'outlined'" [ratio]="2" [flex]="true" [customclass]="'uk-margin-small-right uk-text-secondary'"></icon>
|
||||
<a [queryparams]="getParamsForSearchLink('software')" [routerlink]="properties.searchLinkToAdvancedResults" class="uk-link-reset uk-flex uk-flex-column">
|
||||
<span class="uk-text-xsmall">
|
||||
{{openaireEntities.SOFTWARE}}
|
||||
</span>
|
||||
<span *ngif="fetchSoftware.searchUtils.totalResults" class="uk-h6 uk-margin-remove" [innerhtml]="fetchSoftware.searchUtils.totalResults | numberRound: 1:1">
|
||||
</span>
|
||||
</a>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
`
|
||||
})
|
||||
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 {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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([])
|
||||
}
|
||||
}
|
||||
|
|
@ -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: `
|
||||
|
||||
<div *ngIf="pluginDefaultObject">
|
||||
<div [class.fieldEditMode]="editMode">
|
||||
<ng-container *ngIf="editMode">
|
||||
<plugin-field-edit [value]="pluginObject && pluginObject.title?pluginObject.title:pluginDefaultObject.title"
|
||||
type="text" field="title" (editClicked)="pluginEditEvent = $event" (changed)="valueChanged($event)" ></plugin-field-edit>
|
||||
</ng-container>
|
||||
|
||||
<h1 [class.uk-invisible]=" (pluginEditEvent && pluginEditEvent.field == 'title')">
|
||||
{{pluginObject && pluginObject.title?pluginObject.title:pluginDefaultObject.title}} </h1>
|
||||
|
||||
|
||||
</div>
|
||||
<div [class.fieldEditMode]="editMode">
|
||||
<ng-container *ngIf="editMode">
|
||||
<plugin-field-edit [value]="pluginObject && pluginObject.description?pluginObject.description:pluginDefaultObject.description"
|
||||
type="text" field="description" (editClicked)="pluginEditEvent = $event" (changed)="valueChanged($event)" ></plugin-field-edit>
|
||||
</ng-container>
|
||||
|
||||
<p [class.uk-invisible]=" (pluginEditEvent && pluginEditEvent.field == 'description')">
|
||||
{{pluginObject && pluginObject.description?pluginObject.description:pluginDefaultObject.description}} </p>
|
||||
</div>
|
||||
<div [class.fieldEditMode]="editMode && !editTemplate">
|
||||
<ng-container *ngIf="editMode && !editTemplate">
|
||||
<plugin-field-edit [value]=" pluginObject.numberOn"
|
||||
type="boolean" field="numberOn" (editClicked)="pluginEditEvent = $event" (changed)="valueChanged($event)" >
|
||||
</plugin-field-edit>
|
||||
</ng-container>
|
||||
<p *ngIf="showOnOffBlock('numberOn')"
|
||||
[class.uk-invisible]=" (pluginEditEvent && pluginEditEvent.field == 'numberOn')">58K </p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
`,
|
||||
|
||||
|
||||
})
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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([])
|
||||
}
|
||||
}
|
||||
|
|
@ -42,13 +42,13 @@
|
|||
</div>
|
||||
<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>
|
||||
<button (click)="newPluginSelectTemplate()" [disabled]="showLoading" [class.uk-disabled]="showLoading || this.pluginTemplates.length ==0"
|
||||
class="uk-flex uk-flex-middle uk-button uk-button-default" >
|
||||
<icon [flex]="true" name="add"></icon>
|
||||
<span class="uk-margin-small-left">Add new plugin</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>-->
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,20 +74,21 @@
|
|||
<div class="uk-margin-small-bottom">
|
||||
{{check.template.description}}
|
||||
</div>
|
||||
<plugin-wrapper [editMode]="false" [wrapperEditMode]="true" [pluginTemplate]="check.template" [plugin]="check.plugin"></plugin-wrapper>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="templateView">
|
||||
<!--<ng-container *ngIf="templateView">
|
||||
<h6>Community: {{check.plugin.pid}}</h6>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!check.template">
|
||||
<h6>{{check.plugin.code}}</h6>
|
||||
<div class="uk-margin-small-bottom uk-text-warning">
|
||||
Plugin is not supported anymore!
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>-->
|
||||
<!-- <ng-container *ngIf="!check.template">-->
|
||||
<!-- <h6>{{check.plugin.code}}</h6>-->
|
||||
<!-- <div class="uk-margin-small-bottom uk-text-warning">-->
|
||||
<!-- Plugin is not supported anymore!-->
|
||||
<!-- </div>-->
|
||||
<!-- </ng-container>-->
|
||||
<div class="uk-margin-small-bottom">
|
||||
<span class="uk-text-meta">Placement: </span>{{check.plugin.placement}}
|
||||
</div>
|
||||
<div *ngFor="let key of getKeys(check.template.attributes)">
|
||||
<!--<div *ngFor="let key of getKeys(check.template.attributes)">
|
||||
<div *ngIf="check.template.attributes[key]['type'] =='HTML' ">
|
||||
{{check.template.attributes[key]['name']}}:
|
||||
<div [innerHTML]="check.plugin.values[key]"></div>
|
||||
|
|
@ -96,7 +97,7 @@
|
|||
{{check.template.attributes[key]['name']}}:
|
||||
<div >{{check.plugin.values[key]}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -114,7 +115,8 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Maybe change delete to reset to default values ? -->
|
||||
<!--<div>
|
||||
<div class="uk-padding-small uk-padding-remove-horizontal">
|
||||
<button class="uk-button uk-button-link uk-flex uk-flex-middle"
|
||||
(click)="confirmDelete(check.plugin._id)">
|
||||
|
|
@ -122,7 +124,7 @@
|
|||
<span class="uk-margin-xsmall-left"> Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div>
|
||||
<div class="uk-padding-small uk-padding-remove-horizontal">
|
||||
<mat-slide-toggle [checked]="check.plugin.active"
|
||||
|
|
@ -141,7 +143,7 @@
|
|||
</ng-container>
|
||||
<ng-container *ngIf="editView">
|
||||
|
||||
<div *ngIf="selectTemplateView">
|
||||
<!--<div *ngIf="selectTemplateView">
|
||||
<div> Select a Template for your plugin. </div>
|
||||
<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">
|
||||
|
|
@ -166,7 +168,7 @@
|
|||
<div class="uk-padding-small uk-padding-remove-horizontal">
|
||||
<button
|
||||
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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -177,7 +179,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>-->
|
||||
<form *ngIf="!selectTemplateView" [formGroup]="templateForm" class="uk-grid" uk-grid>
|
||||
|
||||
|
||||
|
|
@ -185,19 +187,21 @@
|
|||
<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 class="uk-heading-divider uk-text-small uk-width-1-1 uk-margin-bottom uk-text-meta">
|
||||
<plugin-wrapper [editMode]="true" [wrapperEditMode]="false" [pluginTemplate]="selectedTemplate" [plugin]="this.templateForm.getRawValue()"
|
||||
class="uk-width-1-1" (changed)="pluginFieldChanged($event)"></plugin-wrapper>
|
||||
<div *ngIf="attrFormArray.controls.length > 0" class="uk-heading-divider uk-text-small uk-width-1-1 uk-margin-bottom uk-text-meta">
|
||||
<div class="uk-grid">
|
||||
<div>Plugin Fields</div>
|
||||
<div>Plugin settings</div>
|
||||
</div>
|
||||
</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 *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 *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 *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 *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'text'" input [formInput]="attrForm.get('value')" [placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="text" ></div>
|
||||
<div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'URL'" input [formInput]="attrForm.get('value')" [placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="URL" [validators]="urlValidator"></div>
|
||||
<div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'boolean'" input [formInput]="attrForm.get('value')" [placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="select"
|
||||
[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">
|
||||
<div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'HTML'" class="uk-width-1-1">
|
||||
<label>
|
||||
{{selectedTemplate.attributes[attrForm.get('key').value].name}}:
|
||||
{{selectedTemplate.settings[attrForm.get('key').value].name}}:
|
||||
</label>
|
||||
<ckeditor [readonly]="false"
|
||||
debounce="500"
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ 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";
|
||||
|
||||
@Component({
|
||||
selector: 'plugins',
|
||||
|
|
@ -99,15 +100,15 @@ export class PluginsComponent implements OnInit {
|
|||
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.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 = <Plugin>this.templateForm.getRawValue();
|
||||
// template.pages = this.pagesCtrl.getRawValue().map(page => page._id?page._id:page);
|
||||
plugin.values = new Map<string, string>();
|
||||
plugin.settingsValues = new Map<string, string>();
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
|
|
|
|||
|
|
@ -44,16 +44,21 @@
|
|||
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
|
||||
</div>-->
|
||||
<div class="uk-width-expand uk-text-small">
|
||||
<h6>{{check.template.name}}</h6>
|
||||
<!-- <h6>{{check.template.name}}</h6>-->
|
||||
|
||||
<plugin-wrapper [editMode]="false" [wrapperEditMode]="true" [pluginTemplate]="check.template"></plugin-wrapper>
|
||||
<div *ngIf="check.template.pages && check.template.pages.length > 0" class="uk-margin-small-bottom">
|
||||
<span class="uk-text-meta">Pages: </span>{{getPagesAsString(check.template.pages)}}
|
||||
</div>
|
||||
<div class="uk-margin-small-bottom">
|
||||
<div *ngIf="check.template.placements && check.template.placements.length > 0" class="uk-margin-small-bottom">
|
||||
<span class="uk-text-meta">Placements: </span>{{check.template.placements.join(", ")}}
|
||||
</div>
|
||||
<div class="uk-margin-small-bottom">
|
||||
<span class="uk-text-meta">Portal type: </span>{{check.template.portalType}}
|
||||
</div>
|
||||
<div class="uk-margin-small-bottom">
|
||||
<span class="uk-text-meta">Plan: </span>{{check.template.plan}}
|
||||
</div>
|
||||
<div class="uk-margin-small-bottom">
|
||||
{{check.template.description}}
|
||||
</div>
|
||||
|
|
@ -63,18 +68,18 @@
|
|||
<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-position-bottom-left">
|
||||
<div class="uk-padding-small uk-padding-remove-horizontal">
|
||||
<button
|
||||
class="uk-button uk-button-link uk-flex uk-flex-middle" [routerLink]="['./plugins',check.template.code]" >
|
||||
<icon name="edit" [flex]="true"></icon>
|
||||
<span class="uk-margin-xsmall-left"> Manage Plugins
|
||||
<span *ngIf="pluginsCount[check.template.code]">({{pluginsCount[check.template.code]}}
|
||||
)</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="uk-position-bottom-left">-->
|
||||
<!-- <div class="uk-padding-small uk-padding-remove-horizontal">-->
|
||||
<!-- <button-->
|
||||
<!-- class="uk-button uk-button-link uk-flex uk-flex-middle" [routerLink]="['./plugins',check.template.code]" >-->
|
||||
<!-- <icon name="edit" [flex]="true"></icon>-->
|
||||
<!-- <span class="uk-margin-xsmall-left"> Manage Plugins-->
|
||||
<!-- <span *ngIf="pluginsCount[check.template.code]">({{pluginsCount[check.template.code]}}-->
|
||||
<!-- )</span>-->
|
||||
<!-- </span>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div>
|
||||
<div class="uk-padding-small uk-padding-remove-horizontal">
|
||||
<button
|
||||
|
|
@ -108,18 +113,40 @@
|
|||
<div input [formInput]="templateForm.get('name')" placeholder="Template Name"></div>
|
||||
<div input [formInput]="templateForm.get('code')" placeholder="Template Code"></div>
|
||||
<div class="uk-width-1-1" input [formInput]="templateForm.get('description')" placeholder="Description" type="textarea"> </div>
|
||||
<div input [formInput]="templateForm.get('plan')" placeholder="Plan" [options]="plans" type="select"></div>
|
||||
<div input [formInput]="templateForm.get('image')" placeholder="Image"></div>
|
||||
<div input [formInput]="templateForm.get('portalType')" placeholder="Portal Type" [options]="portalUtils.portalTypes" type="select"></div>
|
||||
<div input [formInput]="templateForm.get('placements')" placeholder="Placements" [options]="placementsOptions" type="chips"></div>
|
||||
<div input [formInput]="templateForm.get('pages')" placeholder="Pages" [options]="allPages" type="chips"></div>
|
||||
<plugin-wrapper *ngIf="index>= 0 " [editMode]="true" [wrapperEditMode]="false" [pluginTemplate]="this.templateForm.getRawValue()"
|
||||
class="uk-width-1-1" [editTemplate]="true" (changed)="pluginFieldChanged($event)"></plugin-wrapper>
|
||||
<!--<div *ngIf="pluginEditEvent">
|
||||
<div *ngIf="pluginEditEvent.type == 'text'" input [value]="this.templateForm.getRawValue().object[pluginEditEvent.field]" [placeholder]="pluginEditEvent.field" [type]="pluginEditEvent.type"
|
||||
(valueChange)="pluginFieldChanged($event)"></div>
|
||||
<!– <div *ngIf="pluginEditEvent.type == 'URL'" input [formInput]="attrForm.get('value')" placeholder="Default value" [type]="attrForm.get('type').value" [validators]="urlValidator"></div>–>
|
||||
<div *ngIf="pluginEditEvent.type == 'boolean'" input [value]="pluginObject[pluginEditEvent.field]" [placeholder]="pluginEditEvent.field" type="select"
|
||||
[options]="[{label: 'yes', value:true}, {label: 'no', value:false}]"></div>
|
||||
<!– <div *ngIf="pluginEditEvent.type == 'HTML'" class="uk-width-1-1">
|
||||
<ckeditor [readonly]="false"
|
||||
debounce="500"
|
||||
[formControl]="attrForm.get('value')"
|
||||
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
|
||||
removeButtons: 'Save,NewPage,DocProps,Preview,Print,' +
|
||||
'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
|
||||
'CreateDiv,Flash,PageBreak,' +
|
||||
'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',
|
||||
extraPlugins: 'divarea'}">
|
||||
</ckeditor>
|
||||
</div>–>
|
||||
</div>-->
|
||||
|
||||
<div *ngFor="let attrForm of attrFormArray.controls; let i=index" class="uk-width-1-1 uk-grid uk-child-width-1-2" 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 ">
|
||||
<div>Setting #{{i +1}}</div>
|
||||
<div class=" uk-width-expand uk-text-right ">
|
||||
<a class=" " (click)="removeAttr(i)">Remove</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -148,7 +175,7 @@
|
|||
</div>
|
||||
<hr class="uk-width-1-1">
|
||||
<div class="uk-width-1-1 uk-text-center ">
|
||||
<a (click)="addNewAttr()">Add more fields</a>
|
||||
<a (click)="addNewAttr()">Add settings</a>
|
||||
</div>
|
||||
</form>
|
||||
</modal-alert>
|
||||
|
|
|
|||
|
|
@ -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 = <Page[]>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 = <PluginTemplate>this.templateForm.getRawValue();
|
||||
template.pages = this.pagesCtrl.getRawValue().map(page => page._id?page._id:page);
|
||||
template.attributes = new Map<string, {name: string; type: string; value: string}>();
|
||||
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<string, {name: string; type: string; value: string}>();
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
|
|
|
|||
|
|
@ -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<PluginEditEvent> = new EventEmitter<any>();
|
||||
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 */
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {PluginEditEvent} from "./base-plugin.component";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'plugin-field-edit',
|
||||
template: `
|
||||
<ng-container *ngIf="type=='boolean'">
|
||||
{{value}}
|
||||
<mat-slide-toggle [checked]="value" (change)="updateObject($event.checked)"></mat-slide-toggle>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="type!='boolean'">
|
||||
|
||||
<a *ngIf="!editingModeOn" class="uk-float-right" (click)=" editClicked.emit({field: field, type: type}); editingModeOn = true ">Edit</a>
|
||||
<ng-container *ngIf="editingModeOn">
|
||||
<a *ngIf="editingModeOn" class="uk-float-right" (click)="editClicked.emit(null); editingModeOn = false ">close</a>
|
||||
<br>
|
||||
<div *ngIf="type == 'text'" input [value]="value" [placeholder]="field" type="text" (valueChange)="updateObject($event)"></div>
|
||||
<!--<div *ngIf="type == 'URL'" input [value]="value" [placeholder]="name" type="URL" ></div>
|
||||
<div *ngIf="type == 'HTML'" class="uk-width-1-1">
|
||||
<ckeditor [readonly]="false"
|
||||
debounce="500"
|
||||
[formControl]="value"
|
||||
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
|
||||
removeButtons: 'Save,NewPage,DocProps,Preview,Print,' +
|
||||
'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
|
||||
'CreateDiv,Flash,PageBreak,' +
|
||||
'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',
|
||||
extraPlugins: 'divarea'}">
|
||||
</ckeditor>
|
||||
</div>-->
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
`,
|
||||
|
||||
|
||||
})
|
||||
export class PluginFieldEditComponent {
|
||||
@Input() type;
|
||||
@Input() value;
|
||||
@Input() field;
|
||||
@Output() editClicked:EventEmitter<PluginEditEvent> = new EventEmitter<PluginEditEvent>();
|
||||
@Output() changed:EventEmitter<PluginEditEvent> = 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});
|
||||
}
|
||||
}
|
||||
|
|
@ -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([])
|
||||
}*/
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.pluginEditMode{
|
||||
border:2px solid grey;
|
||||
padding:10px;
|
||||
}
|
||||
:host ::ng-deep .fieldEditMode{
|
||||
border:1px dashed lightblue;
|
||||
padding:1px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
|
@ -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: `
|
||||
<ng-container *ngIf="pluginTemplate">
|
||||
<div [class.pluginEditMode]="wrapperEditMode" >
|
||||
<ng-container *ngIf="pluginTemplate.code == 'results-numbers'">
|
||||
<plugin-results-numbers [plugin]="plugin" [pluginTemplate]="pluginTemplate" [editMode]="editMode" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-results-numbers>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="pluginTemplate.code == 'test'">
|
||||
<plugin-test [plugin]="plugin" [pluginTemplate]="pluginTemplate" [editMode]="editMode" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-test>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="pluginTemplate.code == 'openaire-products'">
|
||||
<plugin-openaire-products [plugin]="plugin" [pluginTemplate]="pluginTemplate" [editMode]="editMode" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-openaire-products>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
`,
|
||||
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<any> = new EventEmitter()
|
||||
@Output() changed:EventEmitter<PluginEditEvent> = new EventEmitter();
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
@ -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<string,string> = new Map<string, string>();
|
||||
object:any;
|
||||
settingsValues:Map<string,string> = new Map<string, string>();
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<string,{name:string, type:string, value:string}> = new Map<string, {name: string; type: string; value: string}>();
|
||||
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue