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

[plugins-functionality | WIP] updates on plugins

This commit is contained in:
argirok 2024-02-28 13:07:31 +02:00
parent d6dc2b040d
commit c011c9b38c
34 changed files with 1085 additions and 747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dashboard/plugins/components/discover-by-subcommunity/plugin-discover-by-subcommunity.component.ts
View File

@ -10,7 +10,6 @@ export class PluginDiscoverBySubcommunity extends PluginBaseInfo{
templateUrl: 'plugin-discover-by-subcommunity.component.html' templateUrl: 'plugin-discover-by-subcommunity.component.html'
}) })
export class PluginDiscoverBySubcommunityComponent extends PluginBaseComponent<PluginDiscoverBySubcommunity>{ export class PluginDiscoverBySubcommunityComponent extends PluginBaseComponent<PluginDiscoverBySubcommunity>{
default = new PluginDiscoverBySubcommunity();
subcommunities = null; subcommunities = null;
community; community;
constructor(http:HttpClient, private communityService: CommunityService) { constructor(http:HttpClient, private communityService: CommunityService) {

10
dashboard/plugins/components/discover-by-subcommunity/plugin-discover-by-subcommunity.form.component.ts
View File

@ -1,7 +1,6 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent} from "../../utils/base-plugin.component";
import {HttpClient} from "@angular/common/http";
import {PluginDiscoverBySubcommunity} from "./plugin-discover-by-subcommunity.component"; import {PluginDiscoverBySubcommunity} from "./plugin-discover-by-subcommunity.component";
import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
@Component({ @Component({
selector: 'plugin-discover-by-subcommunity-form', selector: 'plugin-discover-by-subcommunity-form',
@ -15,11 +14,8 @@ import {PluginDiscoverBySubcommunity} from "./plugin-discover-by-subcommunity.co
}) })
export class PluginDiscoverBySubcommunityFormComponent extends PluginBaseComponent<PluginDiscoverBySubcommunity> { export class PluginDiscoverBySubcommunityFormComponent extends PluginBaseFormComponent<PluginDiscoverBySubcommunity> {
default = new PluginDiscoverBySubcommunity(); constructor() {
selectedIndex = null;
constructor(http:HttpClient) {
super() super()
} }
} }

4
dashboard/plugins/components/featured-datasets/plugin-featured-datasets.component.html
View File

@ -12,11 +12,11 @@
{{pluginObject.textLine2}} {{pluginObject.textLine2}}
</div> </div>
</div> </div>
<no-load-paging *ngIf="fetchFeaturedDatasets && fetchFeaturedDatasets.searchUtils.totalResults > size" [type]="'Featured Datasets'" <!-- <no-load-paging *ngIf="fetchFeaturedDatasets && fetchFeaturedDatasets.searchUtils.totalResults > size" [type]="'Featured Datasets'"
(pageChange)="updatePage($event)" (pageChange)="updatePage($event)"
[page]="fetchFeaturedDatasets.searchUtils.page" [pageSize]="size" [page]="fetchFeaturedDatasets.searchUtils.page" [pageSize]="size"
[totalResults]="fetchFeaturedDatasets.searchUtils.totalResults" > [totalResults]="fetchFeaturedDatasets.searchUtils.totalResults" >
</no-load-paging> </no-load-paging>-->
<search-result [properties]="properties" <search-result [properties]="properties"
[results]="fetchFeaturedDatasets.results" [results]="fetchFeaturedDatasets.results"
[status]="fetchFeaturedDatasets.searchUtils.status" [status]="fetchFeaturedDatasets.searchUtils.status"

10
dashboard/plugins/components/featured-datasets/plugin-featured-datasets.component.ts
View File

@ -1,9 +1,9 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent} from "../../utils/base-plugin.component"; import {PluginBaseComponent, PluginBaseInfo} from "../../utils/base-plugin.component";
import {FetchResearchResults} from "../../../../utils/fetchEntitiesClasses/fetchResearchResults.class"; import {FetchResearchResults} from "../../../../utils/fetchEntitiesClasses/fetchResearchResults.class";
import {SearchResearchResultsService} from "../../../../services/searchResearchResults.service"; import {SearchResearchResultsService} from "../../../../services/searchResearchResults.service";
export class PluginFeaturedDatasets { export class PluginFeaturedDatasets extends PluginBaseInfo{
title: string = "Featured datasets"; title: string = "Featured datasets";
textLine1: string = "Here are listed some of the most important energy datasets as selected by energy experts."; textLine1: string = "Here are listed some of the most important energy datasets as selected by energy experts.";
textLine2: string = "Check them if you want to easily explore and visualize the European energy landscape, using only well-known datasets which you can trust."; textLine2: string = "Check them if you want to easily explore and visualize the European energy landscape, using only well-known datasets which you can trust.";
@ -25,12 +25,12 @@ export class PluginFeaturedDatasetsComponent extends PluginBaseComponent<PluginF
super() super()
this.fetchFeaturedDatasets = new FetchResearchResults(this._searchResearchResultsService); this.fetchFeaturedDatasets = new FetchResearchResults(this._searchResearchResultsService);
this.fetchFeaturedDatasets.searchUtils.size = this.size; this.fetchFeaturedDatasets.searchUtils.size = this.size;
this.fetchFeaturedDatasets.getAllResultsForCommunity("dataset", "enermaps", 1, 100, this.properties, "enermaps::selection"); this.fetchFeaturedDatasets.getAllResultsForCommunity("dataset", "enermaps", 1, 50, this.properties, "enermaps::selection");
} }
public updatePage(event) { /* public updatePage(event) {
this.page = event.value; this.page = event.value;
this.fetchFeaturedDatasets.searchUtils.page = event.value; this.fetchFeaturedDatasets.searchUtils.page = event.value;
this.fetchFeaturedDatasets.results = this.fetchFeaturedDatasets.allResults.slice((this.page - 1) * this.size, this.page * this.size); this.fetchFeaturedDatasets.results = this.fetchFeaturedDatasets.allResults.slice((this.page - 1) * this.size, this.page * this.size);
} }*/
} }

30
dashboard/plugins/components/featured-datasets/plugin-featured-datasets.form.component.ts
View File

@ -1,29 +1,35 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent} from "../../utils/base-plugin.component";
import {HttpClient} from "@angular/common/http";
import {OpenaireEntities} from "../../../../utils/properties/searchFields"; import {OpenaireEntities} from "../../../../utils/properties/searchFields";
import {PluginFeaturedDatasets} from "./plugin-featured-datasets.component"; import {PluginFeaturedDatasets} from "./plugin-featured-datasets.component";
import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
@Component({ @Component({
selector: 'plugin-featured-datasets-form', selector: 'plugin-featured-datasets-form',
template: ` template: `
<div *ngIf="pluginObject" class="uk-padding-xsmall"> <div *ngIf="pluginObject" class="uk-padding-xsmall">
<plugin-field-edit [value]="pluginObject.title" <div class="uk-margin-bottom">
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
<plugin-field-edit [value]="pluginObject.textLine1" <plugin-field-edit [value]="pluginObject.title"
type="text" field="textLine1" (changed)="valueChanged($event)"></plugin-field-edit> type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
<plugin-field-edit [value]="pluginObject.textLine2" </div>
type="text" field="textLine2" (changed)="valueChanged($event)"></plugin-field-edit> <div class="uk-margin-bottom">
<plugin-field-edit [value]="pluginObject.textLine1"
type="text" field="textLine1" (changed)="valueChanged($event)"></plugin-field-edit>
</div>
<div class="uk-margin-bottom">
<plugin-field-edit [value]="pluginObject.textLine2"
type="text" field="textLine2" (changed)="valueChanged($event)"></plugin-field-edit>
</div>
</div> </div>
`, `,
}) })
export class PluginFeaturedDatasetsFormComponent extends PluginBaseComponent<PluginFeaturedDatasets> { export class PluginFeaturedDatasetsFormComponent extends PluginBaseFormComponent<PluginFeaturedDatasets> {
default = new PluginFeaturedDatasets();
selectedIndex = null; selectedIndex = null;
openaireEntities= OpenaireEntities; openaireEntities = OpenaireEntities;
constructor(http: HttpClient) {
constructor() {
super() super()
} }

4
dashboard/plugins/components/gateway-information/plugin-gateway-information.component.ts
View File

@ -1,5 +1,5 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent} from "../../utils/base-plugin.component"; import {PluginBaseComponent, PluginBaseInfo} from "../../utils/base-plugin.component";
import {ConfigurationService} from '../../../../../openaireLibrary/utils/configuration/configuration.service'; import {ConfigurationService} from '../../../../../openaireLibrary/utils/configuration/configuration.service';
import {CommunityService} from '../../../../../openaireLibrary/connect/community/community.service'; import {CommunityService} from '../../../../../openaireLibrary/connect/community/community.service';
import {SearchCommunityProjectsService} from '../../../../../openaireLibrary/connect/projects/searchProjects.service'; import {SearchCommunityProjectsService} from '../../../../../openaireLibrary/connect/projects/searchProjects.service';
@ -11,7 +11,7 @@ import {RouterHelper} from "../../../../utils/routerHelper.class";
import {OpenaireEntities} from "../../../../utils/properties/searchFields"; import {OpenaireEntities} from "../../../../utils/properties/searchFields";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
export class PluginGatewayInformation{ export class PluginGatewayInformation extends PluginBaseInfo{
title:string ="Gateway Information"; title:string ="Gateway Information";
curators:boolean = true; curators:boolean = true;
date:boolean = true; date:boolean = true;

91
dashboard/plugins/components/gateway-information/plugin-gateway-information.form.component.ts
View File

@ -1,7 +1,7 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent} from "../../utils/base-plugin.component";
import {PluginGatewayInformation} from "./plugin-gateway-information.component"; import {PluginGatewayInformation} from "./plugin-gateway-information.component";
import {OpenaireEntities} from "../../../../utils/properties/searchFields"; import {OpenaireEntities} from "../../../../utils/properties/searchFields";
import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
@Component({ @Component({
selector: 'plugin-gateway-information-form', selector: 'plugin-gateway-information-form',
@ -9,89 +9,106 @@ import {OpenaireEntities} from "../../../../utils/properties/searchFields";
<div *ngIf="pluginObject" class="uk-padding-xsmall"> <div *ngIf="pluginObject" class="uk-padding-xsmall">
<plugin-field-edit [value]="pluginObject.title" <plugin-field-edit [value]="pluginObject.title"
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit> type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
<div class="uk-margin-top uk-text-meta uk-text-small"> <div class="uk-margin-top uk-text-meta uk-text-small uk-margin-small-bottom">
Show or hide the following information: Show or hide the following information:
</div> </div>
<div class="uk-grid uk-child-width-1-1"> <div class="uk-margin-top uk-text-meta uk-text-xsmall ">
<div> Community info
Curated by: </div>
<div class="uk-grid uk-child-width-1-1 uk-text-small uk-hr ">
<div class="uk-margin-xsmall-bottom uk-margin-xsmall-top">
<plugin-field-edit [value]=" pluginObject.curators" <plugin-field-edit [value]=" pluginObject.curators"
type="boolean" field="curators" (editClicked)="pluginEditEvent = $event" type="checkbox" field="curators" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)"> (changed)="valueChanged($event)">
</plugin-field-edit> </plugin-field-edit>Curated by
</div> </div>
<div> <div class="uk-margin-xsmall-bottom">
Created:
<plugin-field-edit [value]=" pluginObject.date" <plugin-field-edit [value]=" pluginObject.date"
type="boolean" field="date" (editClicked)="pluginEditEvent = $event" type="checkbox" field="date" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)"> (changed)="valueChanged($event)">
</plugin-field-edit> </plugin-field-edit> Created
</div> </div>
<div> <div class="uk-margin-xsmall-bottom">
{{openaireEntities.PROJECTS}}:
<plugin-field-edit [value]=" pluginObject.projects" <plugin-field-edit [value]=" pluginObject.projects"
type="boolean" field="projects" (editClicked)="pluginEditEvent = $event" type="checkbox" field="projects" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)"> (changed)="valueChanged($event)">
</plugin-field-edit> </plugin-field-edit>
{{openaireEntities.PROJECTS}}
</div> </div>
<div> <div class="uk-margin-xsmall-bottom">
Linked Zenodo communities:
<plugin-field-edit [value]=" pluginObject.communities" <plugin-field-edit [value]=" pluginObject.communities"
type="boolean" field="communities" (editClicked)="pluginEditEvent = $event" type="checkbox" field="communities" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)"> (changed)="valueChanged($event)">
</plugin-field-edit> </plugin-field-edit>
Linked Zenodo communities
</div> </div>
<div> <div class="uk-margin-xsmall-bottom">
{{openaireEntities.DATASOURCES}}
<plugin-field-edit [value]=" pluginObject.datasources" <plugin-field-edit [value]=" pluginObject.datasources"
type="boolean" field="datasources" (editClicked)="pluginEditEvent = $event" type="checkbox" field="datasources" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)"> (changed)="valueChanged($event)">
</plugin-field-edit> </plugin-field-edit>
{{openaireEntities.DATASOURCES}}
</div> </div>
<div> <div class="uk-margin-xsmall-bottom">
Subjects:
<plugin-field-edit [value]=" pluginObject.subjects" <plugin-field-edit [value]=" pluginObject.subjects"
type="boolean" field="subjects" (editClicked)="pluginEditEvent = $event" type="checkbox" field="subjects" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)"> (changed)="valueChanged($event)">
</plugin-field-edit> </plugin-field-edit>
Subjects
</div> </div>
<div> <div class="uk-margin-top uk-text-meta uk-text-xsmall">
{{openaireEntities.PUBLICATIONS}}: Pages & menus
</div>
<div class="uk-margin-xsmall-bottom uk-hr uk-margin-xsmall-top">
<plugin-field-edit [value]=" pluginObject.publications" <plugin-field-edit [value]=" pluginObject.publications"
type="boolean" field="publications" (editClicked)="pluginEditEvent = $event" type="checkbox" field="publications" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)"> (changed)="valueChanged($event)">
</plugin-field-edit> </plugin-field-edit>
{{openaireEntities.PUBLICATIONS}}
</div> </div>
<div> <div class="uk-margin-xsmall-bottom">
{{openaireEntities.DATASETS}}:
<plugin-field-edit [value]=" pluginObject.datasets" <plugin-field-edit [value]=" pluginObject.datasets"
type="boolean" field="datasets" (editClicked)="pluginEditEvent = $event" type="checkbox" field="datasets" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)"> (changed)="valueChanged($event)">
</plugin-field-edit> </plugin-field-edit>
{{openaireEntities.DATASETS}}
</div> </div>
<div> <div class="uk-margin-xsmall-bottom">
{{openaireEntities.SOFTWARE}}:
<plugin-field-edit [value]=" pluginObject.software" <plugin-field-edit [value]=" pluginObject.software"
type="boolean" field="software" (editClicked)="pluginEditEvent = $event" type="checkbox" field="software" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)"> (changed)="valueChanged($event)">
</plugin-field-edit> </plugin-field-edit>
{{openaireEntities.SOFTWARE}}
</div> </div>
<div> <div class="uk-margin-xsmall-bottom">
{{openaireEntities.OTHER}}:
<plugin-field-edit [value]=" pluginObject.other" <plugin-field-edit [value]=" pluginObject.other"
type="boolean" field="other" (editClicked)="pluginEditEvent = $event" type="checkbox" field="other" (editClicked)="pluginEditEvent = $event"
(changed)="valueChanged($event)"> (changed)="valueChanged($event)">
</plugin-field-edit> </plugin-field-edit>
{{openaireEntities.OTHER}}
</div> </div>
</div> </div>
<div class="uk-alert uk-alert-warning uk-text-small"> If some information is enabled here,
but still not visible, please check related <a routerLink="../entities" target="_blank">entity</a> or <a routerLink="../pages" target="_blank">page</a>.</div>
</div> </div>
`, `,
}) })
export class PluginGatewayInformationFormComponent extends PluginBaseComponent<PluginGatewayInformation> { export class PluginGatewayInformationFormComponent extends PluginBaseFormComponent<PluginGatewayInformation> {
default = new PluginGatewayInformation(); default = new PluginGatewayInformation();
selectedIndex = null; selectedIndex = null;
openaireEntities= OpenaireEntities; openaireEntities= OpenaireEntities;

2
dashboard/plugins/components/how-to-use/plugin-how-to-use.component.html
View File

@ -17,7 +17,7 @@
<div class="uk-text-center uk-margin-bottom description"> <div class="uk-text-center uk-margin-bottom description">
{{card.description}} {{card.description}}
</div> </div>
<a *ngFor="let url of card.urls" [href]="card.url" <a *ngFor="let url of card.urlsArray" [href]="card.url"
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default"
[target]="url.target"> [target]="url.target">
{{url.linkText}} {{url.linkText}}

18
dashboard/plugins/components/how-to-use/plugin-how-to-use.component.ts
View File

@ -1,12 +1,20 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component"; import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
export class PluginHowToUse{ export class PluginHowToUse extends PluginBaseInfo{
title:string ="How to use the gateway?"; title:string ="How to use the gateway?";
cardInfoArray: PluginInfoCards[] = [ cardInfoArray: PluginInfoCards[] = [
{title: "Tutorials", description: "The mini-video tutorials can help you find quick answers on specific gateway functionalities.", urls:[ new PluginURL("","View all")], show:true}, {title: "Tutorials", description: "Mini-video tutorials for gateway managers", urlsArray:[ new PluginURL("https://www.youtube.com/playlist?list=PL0c4IRNUxuKcyRUQ_J9BH_EE1amXU6kgp","View all")], show:true},
{title: "Guides", description: "Textual guides to all gateway functionalities.", urls:[ new PluginURL("","Guide for the users"), new PluginURL("","Guide for the managers")], show:true}, {title: "Guides", description: "Textual guides on gateway functionalities.", urlsArray:[ new PluginURL("https://www.openaire.eu/research-community-gateway-guide","Guide for the users")/*, new PluginURL("","Guide for the managers")*/], show:true},
{title: "Webinars", description: "Recordings and slides of webinars on different aspects of Open Science.", urls:[ new PluginURL("","View all")], show:true} {title: "Webinars", description: "Recordings and slides of webinars on different aspects of Open Science.", urlsArray:[ new PluginURL("","View all")], show:true}
]; ];
compare(oldObject){
oldObject = super.compare(oldObject)
for(let card of this.cardInfoArray){
}
return oldObject;
}
} }
@Component({ @Component({
selector: 'plugin-how-to-use', selector: 'plugin-how-to-use',

140
dashboard/plugins/components/how-to-use/plugin-how-to-use.form.component.ts Normal file
View File

@ -0,0 +1,140 @@
import {Component, Input, SimpleChanges} from '@angular/core';
import {PluginHowToUse} from "./plugin-how-to-use.component";
import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
@Component({
selector: 'plugin-how-to-use-form',
template: `
<div *ngIf="pluginObject" class="uk-padding-xsmall">
<ng-container *ngIf="selectedIndex == -1">
<plugin-field-edit [value]=" pluginObject.title"
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
<div class="uk-margin-top uk-text-muted">
Cards:
</div>
<ng-container *ngFor="let card of pluginObject.cardInfoArray; let i = index">
<div class="uk-grid uk-grid-small uk-margin-xsmall-top">
<div *ngIf="selectedIndex != i" class="uk-text-small uk-width-expand">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[i].show" type="checkbox" field="cardInfoArray"
(editClicked)="pluginEditEvent = $event"
(changed)="cardShowChanged(i,$event)"></plugin-field-edit>
{{card.title}}
</div>
<div class="uk-padding-remove-left uk-margin-medium-right">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="edit(i)">
<icon name="edit" [flex]="true"></icon>
</button>
</div>
</div>
</ng-container>
</ng-container>
<ng-container *ngIf="selectedIndex > -1">
<div *ngIf="editTemplate" class="back uk-margin-bottom">
<a (click)="close()" class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-width-auto">
<icon name="west" ratio="1.3"
[flex]="true"></icon>
</div>
<span class="uk-text-small">Plugin Options</span>
</a>
</div>
<!--<div class="uk-text-small">
Enable
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].show"
type="boolean" field="cardInfoArray" (editClicked)="pluginEditEvent = $event"
(changed)="cardShowChanged(selectedIndex,$event)">
</plugin-field-edit>
</div>-->
<div class="uk-margin-top">
<plugin-field-edit [value]="pluginObject.cardInfoArray[selectedIndex].title"
type="text" field="title"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<div class="uk-margin-top">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].description"
type="text" field="description"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<ng-container *ngFor="let cardUrl of pluginObject.cardInfoArray[selectedIndex].urlsArray; let j = index ">
<div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Link #{{j+1}}</div>
<div class="uk-margin-small-top">
<plugin-field-edit [value]=" cardUrl.url"
type="text" field="url"
(changed)="cardUrlValueChanged(selectedIndex, j, $event)"></plugin-field-edit>
</div>
<div class="uk-margin-top">
<plugin-field-edit [value]=" cardUrl.linkText"
type="text" field="linkText" placeholder="Link text"
(changed)="cardUrlValueChanged(selectedIndex, j, $event)"></plugin-field-edit>
</div>
</ng-container>
</ng-container>
</div>
`,
})
export class PluginHowToUseFormComponent extends PluginBaseFormComponent<PluginHowToUse> {
selectedIndex = -1;
@Input() editSubmenuOpen;
constructor() {
super()
}
ngOnChanges(changes: SimpleChanges) {
if (this.editSubmenuOpen == false && this.selectedIndex > -1) {
this.close();
}
}
cardShowChanged(i, $event: PluginEditEvent) {
if (this.editTemplate) {
this.pluginTemplate.object.cardInfoArray[i].show = $event.value;
$event.value = this.pluginTemplate.object.cardInfoArray;
} else {
this.plugin.object.cardInfoArray[i].show = $event.value;
$event.value = this.plugin.object.cardInfoArray;
}
this.valuesChanged.emit({field: $event.field, value: $event.value, type: 'parent'})
}
cardValueChanged(i, $event: PluginEditEvent) {
if (this.editTemplate) {
this.pluginObject.cardInfoArray[i][$event.field] = $event.value;
$event.value = this.pluginObject.cardInfoArray
} else {
this.pluginObject.cardInfoArray[i][$event.field] = $event.value;
$event.value = this.pluginObject.cardInfoArray;
}
this.valuesChanged.emit({field: "cardInfoArray", value: $event.value, type: 'parent'})
}
cardUrlValueChanged(i, j, $event: PluginEditEvent) {
if (this.editTemplate) {
this.pluginObject.cardInfoArray[i].urlsArray[j][$event.field] = $event.value;
$event.value = this.pluginObject.cardInfoArray;
} else {
this.pluginObject.cardInfoArray[i].urlsArray[j][$event.field] = $event.value;
$event.value = this.pluginObject.cardInfoArray;
}
this.valuesChanged.emit({field: "cardInfoArray", value: $event.value, type: 'parent'})
}
edit(i) {
this.selectedIndex = i;
this.toggleSubMenu(true);
}
close() {
this.selectedIndex = -1;
this.toggleSubMenu(false);
}
}

10
dashboard/plugins/components/learn-and-connect/plugin-learn-and-connect.component.ts
View File

@ -1,12 +1,12 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component"; import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
export class PluginLearnAndConnect{ export class PluginLearnAndConnect extends PluginBaseInfo{
title:string ="Learn & Connect with Open Science"; title:string ="Learn & Connect with Open Science";
cardInfoArray:PluginInfoCards[] = [ cardInfoArray:PluginInfoCards[] = [
{title: "OS Practices", description: "Open Science best practices for your community, policies and mandates.", {title: "OS Practices", description: "Open Science best practices for your community, policies and mandates.",
urls:[ new PluginURL("","Learn more")], show:true}, urlsArray:[ new PluginURL("","")], show:true},
{title: "OS Guides for beginners", description: "New to Open Science? Learn the basics!",urls:[ new PluginURL("","Learn more")], show:true}, {title: "OS Guides for beginners", description: "New to Open Science? Learn the basics!",urlsArray:[ new PluginURL("https://www.openaire.eu/guides","Learn more")], show:true},
{title: "Webinars", description: "Recordings and slides of webinars on different aspects of Open Science.",urls:[ new PluginURL("","Learn more")], show:true} {title: "Webinars", description: "Recordings and slides of webinars on different aspects of Open Science.",urlsArray:[ new PluginURL("https://www.openaire.eu/support/webinars","Learn more")], show:true}
]; ];
} }
@Component({ @Component({

188
dashboard/plugins/components/learn-and-connect/plugin-learn-and-connect.form.component.ts
View File

@ -1,115 +1,131 @@
import {Component, EventEmitter, OnChanges, Output, SimpleChanges} from '@angular/core'; import {Component, Input, SimpleChanges} from '@angular/core';
import {PluginBaseComponent, PluginEditEvent} from "../../utils/base-plugin.component";
import {HttpClient} from "@angular/common/http";
import {PluginLearnAndConnect} from "./plugin-learn-and-connect.component"; import {PluginLearnAndConnect} from "./plugin-learn-and-connect.component";
import {PluginOpenAIREProducts} from "../openaireProducts/plugin-openaire-products.component"; import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
@Component({ @Component({
selector: 'plugin-learn-and-connect-form', selector: 'plugin-learn-and-connect-form',
template: ` template: `
<div *ngIf="pluginObject" class="uk-padding-xsmall"> <div *ngIf="pluginObject" class="uk-padding-xsmall">
<plugin-field-edit [value]=" pluginObject.title" <ng-container *ngIf="selectedIndex == -1">
type="text" field="title" (changed)="valueChanged($event)" ></plugin-field-edit> <plugin-field-edit [value]=" pluginObject.title"
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
<div class="uk-margin-top uk-text-muted">
Cards: <div class="uk-margin-top uk-text-muted">
</div> Cards:
</div>
<ng-container *ngFor="let card of pluginObject.cardInfoArray; let i = index">
<div class="uk-grid uk-grid-small uk-margin-xsmall-top"> <ng-container *ngFor="let card of pluginObject.cardInfoArray; let i = index">
<div *ngIf="selectedIndex != i" class="uk-text-small uk-width-3-4">{{card.title}}</div> <div class="uk-grid uk-grid-small uk-margin-xsmall-top">
<div *ngIf="selectedIndex == i"class="uk-margin-top"> <div *ngIf="selectedIndex != i" class="uk-text-small uk-width-expand">
<plugin-field-edit [value]="pluginObject.cardInfoArray[i].title" <plugin-field-edit [value]=" pluginObject.cardInfoArray[i].show" type="checkbox" field="cardInfoArray"
type="text" field="title" (changed)="cardValueChanged(i, $event)" ></plugin-field-edit> (editClicked)="pluginEditEvent = $event"
</div> (changed)="cardShowChanged(i,$event)"></plugin-field-edit>
<div class=" uk-width-auto"> {{card.title}}
<plugin-field-edit [value]=" pluginObject.cardInfoArray[i].show" </div>
type="boolean" field="cardInfoArray" (editClicked)="pluginEditEvent = $event" (changed)="cardShowChanged(i,$event)" >
<div class="uk-padding-remove-left uk-margin-medium-right">
</plugin-field-edit> <button
</div> class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="edit(i)">
<div class=" uk-width-auto"> <icon name="edit" [flex]="true"></icon>
<a *ngIf="selectedIndex != i" (click)="edit(i)">edit</a> </button>
<a *ngIf="selectedIndex == i" (click)="selectedIndex = null">hide</a> </div>
</div> </div>
<div *ngIf="selectedIndex == i" class="width-1-1">
</ng-container>
<div class="uk-margin-top"> </ng-container>
<plugin-field-edit [value]=" pluginObject.cardInfoArray[i].description" <ng-container *ngIf="selectedIndex > -1">
type="text" field="description" (changed)="cardValueChanged(i, $event)" ></plugin-field-edit> <div *ngIf="editTemplate" class="back uk-margin-bottom">
</div> <a (click)="close()" class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-margin-top"> <div class="uk-width-auto">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[i].url" <icon name="west" ratio="1.3"
type="text" field="url" (changed)="cardValueChanged(i, $event)" ></plugin-field-edit> [flex]="true"></icon>
</div> </div>
<div class="uk-margin-top"> <span class="uk-text-small">Plugin Options</span>
<plugin-field-edit [value]=" pluginObject.cardInfoArray[i].linkText" </a>
type="text" field="linkText" (changed)="cardValueChanged(i, $event)" ></plugin-field-edit>
</div> </div>
<!--<div class="uk-margin-top"> <!--<div class="uk-text-small">
<plugin-field-edit [value]="pluginObject && pluginObject.cardInfoArray[i].show?pluginObject.cardInfoArray[i].show:pluginDefaultObject.cardInfoArray[i].show" Enable
type="boolean" field="show" (changed)="cardValueChanged(i, $event)" ></plugin-field-edit> <plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].show"
</div>--> type="boolean" field="cardInfoArray" (editClicked)="pluginEditEvent = $event"
</div> (changed)="cardShowChanged(selectedIndex,$event)">
</div>
</plugin-field-edit>
</div>-->
</ng-container> <div class="uk-margin-top">
<plugin-field-edit [value]="pluginObject.cardInfoArray[selectedIndex].title"
type="text" field="title"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<div class="uk-margin-top">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].description"
type="text" field="description"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<!--<div class="uk-margin-top">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].urlsArray"
type="text" field="url"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<div class="uk-margin-top">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].urlsArray"
type="text" field="linkText" placeholder="Link text"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>-->
</ng-container>
</div> </div>
`, `,
}) })
export class PluginLearnAndConnectFormComponent extends PluginBaseComponent<PluginLearnAndConnect> /*implements OnChanges*/{ export class PluginLearnAndConnectFormComponent extends PluginBaseFormComponent<PluginLearnAndConnect> {
selectedIndex = null; selectedIndex = -1;
default = new PluginLearnAndConnect(); @Input() editSubmenuOpen;
constructor(http:HttpClient) {
constructor() {
super() super()
// this.default = new PluginLearnAndConnect();
} }
/*ngOnInit(): void {
if(this.pluginTemplate && (!this.pluginDefaultObject || !this.pluginDefaultObject.title)){
this.pluginTemplate.object = new PluginLearnAndConnect();
}
}*/
/*ngOnChanges(changes: SimpleChanges) {
console.log("changes")
if(changes.plugin){ ngOnChanges(changes: SimpleChanges) {
console.log("changes plugin", changes.plugin) if (this.editSubmenuOpen == false && this.selectedIndex > -1) {
}else if (changes.pluginTemplate){ this.close();
console.log("changes pluginTemplate", changes.pluginTemplate)
} }
} }
*/ cardShowChanged(i, $event: PluginEditEvent) {
cardShowChanged(i,$event:PluginEditEvent){ if (this.editTemplate) {
if(this.editTemplate){ this.pluginTemplate.object.cardInfoArray[i].show = $event.value;
this.pluginTemplate.object.cardInfoArray[i].show=$event.value; $event.value = this.pluginTemplate.object.cardInfoArray;
$event.value =this.pluginTemplate.object.cardInfoArray; } else {
}else{ this.plugin.object.cardInfoArray[i].show = $event.value;
this.plugin.object.cardInfoArray[i].show=$event.value; $event.value = this.plugin.object.cardInfoArray;
$event.value =this.plugin.object.cardInfoArray;
} }
this.valuesChanged.emit({field:$event.field, value: $event.value, type: 'parent'}) this.valuesChanged.emit({field: $event.field, value: $event.value, type: 'parent'})
} }
cardValueChanged(i,$event:PluginEditEvent){ cardValueChanged(i, $event: PluginEditEvent) {
if(this.editTemplate){ if (this.editTemplate) {
this.pluginTemplate.object.cardInfoArray[i][$event.field]=$event.value; this.pluginTemplate.object.cardInfoArray[i][$event.field] = $event.value;
$event.value =this.pluginTemplate.object.cardInfoArray; $event.value = this.pluginTemplate.object.cardInfoArray;
}else{ } else {
this.plugin.object.cardInfoArray[i][$event.field]=$event.value; this.plugin.object.cardInfoArray[i][$event.field] = $event.value;
$event.value =this.plugin.object.cardInfoArray; $event.value = this.plugin.object.cardInfoArray;
} }
this.valuesChanged.emit({field:"cardInfoArray", value: $event.value, type: 'parent'}) this.valuesChanged.emit({field: "cardInfoArray", value: $event.value, type: 'parent'})
} }
edit(i){ edit(i) {
this.selectedIndex = i; this.selectedIndex = i;
this.toggleSubMenu(true);
} }
close() {
this.selectedIndex = -1;
this.toggleSubMenu(false);
}
} }

9
dashboard/plugins/components/openaireProducts/plugin-openaire-products.component.ts
View File

@ -1,18 +1,19 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent, PluginBaseInfo, PluginEditEvent} from "../../utils/base-plugin.component"; import {PluginBaseComponent, PluginBaseInfo} from "../../utils/base-plugin.component";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
export class PluginOpenAIREProducts extends PluginBaseInfo{ export class PluginOpenAIREProducts extends PluginBaseInfo{
title:string ="OpenAIRE services for your community"; title:string ="OpenAIRE services for your community";
serviceIdsArray = ["zenodo","graph","explore"]; serviceIdsArray = ["zenodo","graph","explore"];
compare(oldObject): any {
return super.compare(oldObject);
}
} }
@Component({ @Component({
selector: 'plugin-openaire-products', selector: 'plugin-openaire-products',
template: ` template: `
<div *ngIf="pluginObject"> <div *ngIf="pluginObject">
<h3 [class.uk-invisible]=" (pluginEditEvent && pluginEditEvent.field == 'title')"> <h3>{{pluginObject.title}} </h3>
{{pluginObject.title}} </h3>
<div class="uk-child-width-1-3 uk-grid"> <div class="uk-child-width-1-3 uk-grid">
<ng-container *ngFor="let service of services"> <ng-container *ngFor="let service of services">
<div *ngIf="pluginObject && pluginObject.serviceIdsArray.indexOf(service.id)!=-1" class="uk-padding-xsmall"> <div *ngIf="pluginObject && pluginObject.serviceIdsArray.indexOf(service.id)!=-1" class="uk-padding-xsmall">

7
dashboard/plugins/components/openaireProducts/plugin-openaire-products.form.component.ts
View File

@ -1,7 +1,7 @@
import {Component, EventEmitter, Output} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent, PluginEditEvent} from "../../utils/base-plugin.component";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import {PluginOpenAIREProducts} from "./plugin-openaire-products.component"; import {PluginOpenAIREProducts} from "./plugin-openaire-products.component";
import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
@Component({ @Component({
selector: 'plugin-openaire-products-form', selector: 'plugin-openaire-products-form',
@ -31,7 +31,8 @@ import {PluginOpenAIREProducts} from "./plugin-openaire-products.component";
}) })
export class PluginOpenaireProductsFormComponent extends PluginBaseComponent<PluginOpenAIREProducts>{ //TODO make it extend PluginOpenaireProductsComponent (to avoid call in constructor..)
export class PluginOpenaireProductsFormComponent extends PluginBaseFormComponent<PluginOpenAIREProducts>{
default = new PluginOpenAIREProducts(); default = new PluginOpenAIREProducts();
services = []; services = [];
excludedServiceIds = ["openaire_login","research_community_dashboard"] excludedServiceIds = ["openaire_login","research_community_dashboard"]

7
dashboard/plugins/components/organizations/plugin-organizations.component.html Normal file
View File

@ -0,0 +1,7 @@
<div *ngIf=" portal && isRouteEnabled('/organizations')" class="plugin-featured-datasets uk-container uk-container-large uk-section">
<affiliations [longView]="false" [getAffiliationsFromAPI]="true" [communityFirstPage]="true"></affiliations>
</div>
<div *ngIf="!portal " class="uk-text-muted uk-text-center">
No community info available available
</div>

34
dashboard/plugins/components/organizations/plugin-organizations.component.ts Normal file
View File

@ -0,0 +1,34 @@
import {Component} from '@angular/core';
import {PluginBaseComponent, PluginBaseInfo} from "../../utils/base-plugin.component";
import {ConfigurationService} from "../../../../utils/configuration/configuration.service";
export class PluginOrganizations extends PluginBaseInfo{
title: string = "Supporting Organizations";
}
@Component({
selector: 'plugin-organizations',
templateUrl: 'plugin-organizations.component.html'
})
export class PluginOrganizationsComponent extends PluginBaseComponent<PluginOrganizations> {
portal;
constructor(private config: ConfigurationService) {
super()
this.subscriptions.push(this.config.portalAsObservable.subscribe(
res => {
this.portal = res;
},
error => {
console.log(error);
}
));
}
isRouteEnabled(route: string) {
return this.portal && this.portal.pages.some(x => x['route'] == route && x['isEnabled'] === true);
}
}

23
dashboard/plugins/components/organizations/plugin-organizations.form.component.ts Normal file
View File

@ -0,0 +1,23 @@
import {Component} from '@angular/core';
import {PluginOrganizations} from "./plugin-organizations.component";
import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
@Component({
selector: 'plugin-organizations-form',
template: `
<div *ngIf="pluginObject" class="uk-padding-xsmall">
<plugin-field-edit [value]="pluginObject.title"
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
</div>
`,
})
export class PluginOrganizationsFormComponent extends PluginBaseFormComponent<PluginOrganizations> {
constructor() {
super()
}
}

22
dashboard/plugins/components/organizations/plugin-organizations.module.ts Normal file
View File

@ -0,0 +1,22 @@
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 {IconsService} from "../../../../utils/icons/icons.service";
import {PluginOrganizationsComponent} from './plugin-organizations.component';
import {AffiliationsModule} from "../../../../connect/affiliations/affiliations.module";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, AffiliationsModule,
],
providers:[PluginsService],
declarations: [PluginOrganizationsComponent],
exports: [PluginOrganizationsComponent]
})
export class PluginOrganizationsModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([])
}
}

5
dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html
View File

@ -1,9 +1,8 @@
<div *ngIf="pluginObject" #parent class="uk-section "> <div *ngIf="pluginObject" #parent class="uk-section ">
<div class="uk-container uk-container-large uk-margin-large-bottom"> <div class="uk-container uk-container-large uk-margin-large-bottom">
<div class="uk-width-1-1 uk-margin-medium-bottom"> <div class="uk-width-1-1 uk-margin-medium-bottom">
<!-- <span class="uk-h6 uk-text-primary">Benefits.</span>--> <h2 class="uk-margin-remove-top ">
<h2 class="uk-margin-remove-top uk-width-1-2@m"> {{pluginObject.title}}<span class="uk-text-primary">.</span>
{{pluginObject.title}}<!--<span class="uk-text-primary">.</span>-->
</h2> </h2>
</div> </div>
<slider-container [total]="activeCards.length" [navigation]="'progress'" [period]="6000" [infinite]="true" [parent]="parent"> <slider-container [total]="activeCards.length" [navigation]="'progress'" [period]="6000" [infinite]="true" [parent]="parent">

13
dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.ts
View File

@ -1,22 +1,21 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component"; import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
import {OpenaireEntities} from "../../../../utils/properties/searchFields"; import {OpenaireEntities} from "../../../../utils/properties/searchFields";
import {properties} from "../../../../../../environments/environment"; import {properties} from "../../../../../../environments/environment";
export class PluginSearchDepositLink{ export class PluginSearchDepositLink extends PluginBaseInfo{
title:string ="Search, link and deposit your research in one place."; title:string ="Search, link and deposit your research in one place";
// description: string = "Lorem ipsum";
cardInfoArray: PluginInfoCards[] = [ cardInfoArray: PluginInfoCards[] = [
{tag: "SEARCH & BROWSE", title: "Discover research products in your community.", description: {tag: "SEARCH & BROWSE", title: "Discover research products in your community.", description:
"A view of the OpenAIRE Graph, configured by experts of your research community, who want to help you out with the data and literature deluge.", "A view of the OpenAIRE Graph, configured by experts of your research community, who want to help you out with the data and literature deluge.",
urls:[ new PluginURL("/search/find/research-outcomes","Start searching", null, true)], urlsArray:[ new PluginURL("/search/find/research-outcomes","Start searching", null, true)],
image:'https://' + (properties.environment == 'production'?'':'beta.') image:'https://' + (properties.environment == 'production'?'':'beta.')
+ 'connect.openaire.eu/assets/connect-assets/home/4.png',show:true}, + 'connect.openaire.eu/assets/connect-assets/home/4.png',show:true},
{tag: "DEPOSIT YOUR RESEARCH OUTCOME", title: "Publish your research in Open Access.", description:"" {tag: "DEPOSIT YOUR RESEARCH OUTCOME", title: "Publish your research in Open Access.", description:""
, urls:[ new PluginURL("/participate/deposit/learn-how","Start searching", null, true)], , urlsArray:[ new PluginURL("/participate/deposit/learn-how","Start searching", null, true)],
image:'https://' + (properties.environment == 'production'?'':'beta.') image:'https://' + (properties.environment == 'production'?'':'beta.')
+ 'connect.openaire.eu/assets/connect-assets/home/1.png',show:true}, + 'connect.openaire.eu/assets/connect-assets/home/1.png',show:true},
{tag: "LINK YOUR RESEARCH", title: "Contribute to your community.", description:"" {tag: "LINK YOUR RESEARCH", title: "Contribute to your community.", description:""
, urls:[ new PluginURL("/participate/claim","Start searching", null, true)], , urlsArray:[ new PluginURL("/participate/claim","Start searching", null, true)],
image:'https://' + (properties.environment == 'production'?'':'beta.') image:'https://' + (properties.environment == 'production'?'':'beta.')
+ 'connect.openaire.eu/assets/connect-assets/home/2.png',show:true}, + 'connect.openaire.eu/assets/connect-assets/home/2.png',show:true},
]; ];

148
dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.form.component.ts
View File

@ -1,54 +1,130 @@
import {Component} from '@angular/core'; import {Component, Input, SimpleChanges} from '@angular/core';
import {PluginBaseComponent, PluginEditEvent} from "../../utils/base-plugin.component";
import {HttpClient} from "@angular/common/http";
import {PluginSearchDepositLink} from "./plugin-search-deposit-link.component"; import {PluginSearchDepositLink} from "./plugin-search-deposit-link.component";
import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
@Component({ @Component({
selector: 'plugin-search-deposit-link-form', selector: 'plugin-search-deposit-link-form',
template: ` template: `
<div *ngIf="pluginObject" class="uk-padding-xsmall"> <div *ngIf="pluginObject" class="uk-padding-xsmall">
<plugin-field-edit [value]=" pluginObject.title" <ng-container *ngIf="selectedIndex == -1">
type="text" field="title" (changed)="valueChanged($event)" ></plugin-field-edit> <plugin-field-edit [value]=" pluginObject.title"
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
<div class="uk-margin-top uk-text-muted">
Cards: <div class="uk-margin-top uk-text-muted">
</div> Cards:
<ng-container *ngFor="let card of pluginObject.cardInfoArray; let i = index"> </div>
<div class="uk-grid uk-grid-small uk-margin-xsmall-top">
<div class="uk-text-small uk-width-3-4">{{card.tag}}</div> <ng-container *ngFor="let card of pluginObject.cardInfoArray; let i = index">
<div class="uk-grid uk-grid-small uk-margin-xsmall-top">
<div class=" uk-width-auto"> <div *ngIf="selectedIndex != i" class="uk-text-small uk-width-expand">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[i].show" <plugin-field-edit [value]=" pluginObject.cardInfoArray[i].show" type="checkbox" field="cardInfoArray"
type="boolean" field="cardInfoArray" (editClicked)="pluginEditEvent = $event" (changed)="cardShowChanged(i,$event)" > (editClicked)="pluginEditEvent = $event"
(changed)="cardShowChanged(i,$event)"></plugin-field-edit>
</plugin-field-edit> {{card.title}}
</div> </div>
</div> <div class="uk-padding-remove-left uk-margin-medium-right">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="edit(i)">
</ng-container> <icon name="edit" [flex]="true"></icon>
</button>
</div>
</div>
</ng-container>
</ng-container>
<ng-container *ngIf="selectedIndex > -1">
<div *ngIf="editTemplate" class="back uk-margin-bottom">
<a (click)="close()" class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-width-auto">
<icon name="west" ratio="1.3"
[flex]="true"></icon>
</div>
<span class="uk-text-small">Plugin Options</span>
</a>
</div>
<!--<div class="uk-text-small">
Enable
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].show"
type="boolean" field="cardInfoArray" (editClicked)="pluginEditEvent = $event"
(changed)="cardShowChanged(selectedIndex,$event)">
</plugin-field-edit>
</div>-->
<div class="uk-margin-top">
<plugin-field-edit [value]="pluginObject.cardInfoArray[selectedIndex].title"
type="text" field="title"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<div class="uk-margin-top">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].description"
type="text" field="description"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<div class="uk-margin-top">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].url"
type="text" field="url"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
<div class="uk-margin-top">
<plugin-field-edit [value]=" pluginObject.cardInfoArray[selectedIndex].linkText"
type="text" field="linkText" placeholder="Link text"
(changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
</div>
</ng-container>
</div> </div>
`, `,
}) })
export class PluginSearchDepositLinkFormComponent extends PluginBaseComponent<PluginSearchDepositLink> /*implements OnChanges*/{ export class PluginSearchDepositLinkFormComponent extends PluginBaseFormComponent<PluginSearchDepositLink> /*implements OnChanges*/ {
constructor(http:HttpClient) { selectedIndex = -1;
@Input() editSubmenuOpen;
constructor() {
super() super()
} }
cardShowChanged(i,$event:PluginEditEvent){
if(this.editTemplate){
this.pluginTemplate.object.cardInfoArray[i].show=$event.value;
$event.value =this.pluginTemplate.object.cardInfoArray;
}else{
this.plugin.object.cardInfoArray[i].show=$event.value;
$event.value =this.plugin.object.cardInfoArray;
}
this.valuesChanged.emit({field:$event.field, value: $event.value, type: 'parent'}) ngOnChanges(changes: SimpleChanges) {
if (this.editSubmenuOpen == false && this.selectedIndex > -1) {
this.close();
}
} }
cardShowChanged(i, $event: PluginEditEvent) {
if (this.editTemplate) {
this.pluginTemplate.object.cardInfoArray[i].show = $event.value;
$event.value = this.pluginTemplate.object.cardInfoArray;
} else {
this.plugin.object.cardInfoArray[i].show = $event.value;
$event.value = this.plugin.object.cardInfoArray;
}
this.valuesChanged.emit({field: $event.field, value: $event.value, type: 'parent'})
}
cardValueChanged(i, $event: PluginEditEvent) {
if (this.editTemplate) {
this.pluginTemplate.object.cardInfoArray[i][$event.field] = $event.value;
$event.value = this.pluginTemplate.object.cardInfoArray;
} else {
this.plugin.object.cardInfoArray[i][$event.field] = $event.value;
$event.value = this.plugin.object.cardInfoArray;
}
this.valuesChanged.emit({field: "cardInfoArray", value: $event.value, type: 'parent'})
}
edit(i) {
this.selectedIndex = i;
this.toggleSubMenu(true);
}
close() {
this.selectedIndex = -1;
this.toggleSubMenu(false);
}
} }

4
dashboard/plugins/components/suggested-repositories/plugin-suggested-repositories.component.ts
View File

@ -1,6 +1,6 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {PluginBaseComponent} from "../../utils/base-plugin.component"; import {PluginBaseComponent, PluginBaseInfo} from "../../utils/base-plugin.component";
export class PluginSuggestedRepositories{ export class PluginSuggestedRepositories extends PluginBaseInfo{
title:string ="Lorem ipsum"; title:string ="Lorem ipsum";
description: string = "Lorem ipsum"; description: string = "Lorem ipsum";
} }

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

@ -2,51 +2,78 @@
<aside id="sidebar_main" class="uk-sticky" uk-sticky="start: 0; end: .sidebar_main_swipe"> <aside id="sidebar_main" class="uk-sticky" uk-sticky="start: 0; end: .sidebar_main_swipe">
<div sidebar-content> <div sidebar-content>
<div *ngIf="editView" class="back"> <div *ngIf="editView" class="back">
<a (click)="editView = false; selectedTemplate = null; selectedPlugin = null;" class="uk-flex uk-flex-middle uk-flex-center"> <a *ngIf="!editSubmenuOpen" (click)="editView = false; selectedTemplate = null; selectedPlugin = null;"
class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-width-auto"> <div class="uk-width-auto">
<icon name="west" ratio="1.3" <icon name="west" ratio="1.3"
[flex]="true"> </icon> [flex]="true"></icon>
</div> </div>
<span class="uk-text-small">Plugins list</span> <span class="uk-text-small">Plugins list</span>
</a> </a>
<div *ngIf="templateForm" class="uk-width-auto uk-margin-top"> <div *ngIf="editSubmenuOpen" class="back uk-margin-bottom">
<button class="uk-button uk-button-default uk-margin-right" <a (click)="editSubmenuOpen = false" class="uk-flex uk-flex-middle uk-flex-center">
(click)="reset()" [class.uk-disabled]="!templateForm.dirty" <div class="uk-width-auto">
[disabled]="!templateForm.dirty || showLoading">Reset <icon name="west" ratio="1.3"
</button> [flex]="true"></icon>
<button class="uk-button uk-button-primary" [class.uk-disabled]="templateForm.invalid || !templateForm.dirty || templateForm.disabled" </div>
(click)="saveConfirmed(index)" [disabled]="templateForm.invalid ||!templateForm.dirty || templateForm.disabled || showLoading">Save <span class="uk-text-small">Plugin Options</span>
</button> </a>
</div>
<div *ngIf="templateForm" class="uk-width-auto uk-margin-top uk-margin-left">
<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(index)"
[disabled]="templateForm.invalid ||!templateForm.dirty || templateForm.disabled || showLoading">Save
</button>
</div>
</div> </div>
</div> <div class="menu_section uk-margin-top uk-margin-left">
<div class="menu_section uk-margin-large-top"> <div *ngIf="!editView">Select a plugin to edit</div>
<div *ngIf="!editView">Select a plugin to edit </div>
<ng-container *ngIf="editView"> <ng-container *ngIf="editView">
<form *ngIf="!selectTemplateView" [formGroup]="templateForm" class="uk-grid" uk-grid> <form *ngIf="!selectTemplateView" [formGroup]="templateForm" >
<div>Status <mat-slide-toggle [checked]="templateForm.get('active').value" <div *ngIf="!editSubmenuOpen" class="uk-text-small uk-margin-small-left">Enable
(change)="templateForm.get('active').setValue($event.checked); templateForm.markAsDirty()"></mat-slide-toggle></div> <mat-slide-toggle [checked]="templateForm.get('active').value"
<plugin-wrapper-form [pluginTemplate]="selectedTemplate" [plugin]="this.templateForm.getRawValue()" (change)="templateForm.get('active').setValue($event.checked); templateForm.markAsDirty()"></mat-slide-toggle>
(changed)="pluginFieldChanged($event)" [pluginObject]="this.templateForm.getRawValue().object"></plugin-wrapper-form> </div>
<plugin-wrapper-form [pluginTemplate]="selectedTemplate" [plugin]="this.templateForm.getRawValue()"
(changed)="pluginFieldChanged($event)"
[pluginObject]="this.selectedPlugin.object"
[editSubmenuOpen]="editSubmenuOpen" ></plugin-wrapper-form>
<ng-container *ngIf="selectedTemplate || selectedPlugin"> <ng-container *ngIf="selectedTemplate || selectedPlugin">
<div *ngIf="attrFormArray.controls.length > 0" class="uk-heading-divider uk-text-small uk-width-1-1 uk-margin-bottom uk-text-meta"> <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 class="uk-grid">
<div>Plugin settings</div> <div>Plugin settings</div>
</div> </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 *ngFor="let attrForm of attrFormArray.controls; let i=index"
<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> class="uk-width-1-1 uk-grid uk-child-width-1-2 uk-margin-top" uk-grid>
<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 == 'text'" input
<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" [formInput]="attrForm.get('value')"
[options]="[{label: 'yes', value:true}, {label: 'no', value:false}]"></div> [placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="text"></div>
<div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'HTML'" class="uk-width-1-1"> <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.settings[attrForm.get('key').value].type == 'HTML'"
class="uk-width-1-1">
<label> <label>
{{selectedTemplate.settings[attrForm.get('key').value].name}}: {{selectedTemplate.settings[attrForm.get('key').value].name}}:
</label> </label>
<ckeditor [readonly]="false" <ckeditor [readonly]="false"
debounce="500" debounce="500"
[formControl]="attrForm.get('value')" [formControl]="attrForm.get('value')"
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', [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,' +
@ -58,234 +85,165 @@
</ng-container> </ng-container>
</form> </form>
</ng-container> </div> </ng-container>
</div>
</div> </div>
</aside> </aside>
<div page-content class="uk-width-1-1"> <div page-content class="uk-width-1-1">
<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> <ng-container>
<div *ngIf="!templateView && !editView" class="uk-width-expand"> <div *ngIf="!templateView && !editView" 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">
<icon name="west" ratio="1.7" [flex]="true"></icon> <icon name="west" ratio="1.7" [flex]="true"></icon>
</span> </span>
<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>
<ul class="uk-subnav uk-subnav-pill uk-margin-medium-top"> <ul class="uk-subnav uk-subnav-pill uk-margin-medium-top">
<li [class.uk-active]="selectedPlacementView === 'all'" class="uk-margin-small-bottom"><a <li [class.uk-active]="selectedPlacementView === 'all'" class="uk-margin-small-bottom"><a
(click)="selectedPlacementView = 'all'"><span (click)="selectedPlacementView = 'all'"><span
class="title">All placements</span></a></li> class="title">All placements</span></a></li>
<li *ngFor="let position of pluginUtils.placementsOptions; let i=index" <li *ngFor="let position of pluginUtils.placementsOptions; let i=index"
[class.uk-active]="selectedPlacementView === position.value" class="uk-margin-small-bottom"><a [class.uk-active]="selectedPlacementView === position.value" class="uk-margin-small-bottom"><a
(click)="selectedPlacementView = position.value"><span (click)="selectedPlacementView = position.value"><span
class="title">{{position.label}}</span></a></li> class="title">{{position.label}}</span></a></li>
</ul> </ul>
</div> </div>
<div *ngIf="templateView" class="uk-width-expand"> <div *ngIf="templateView" class="uk-width-expand">
<a routerLink="../.." class="uk-flex uk-flex-middle uk-h5 uk-link-reset"> <a routerLink="../.." class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
<span class="uk-margin-right"> <span class="uk-margin-right">
<icon name="west" ratio="1.7" [flex]="true"></icon> <icon name="west" ratio="1.7" [flex]="true"></icon>
</span> </span>
<h1 *ngIf="template" class="uk-h5 uk-margin-remove">{{template.name}}</h1> <h1 *ngIf="template" class="uk-h5 uk-margin-remove">{{template.name}}</h1>
</a> </a>
</div> </div>
</ng-container>
</div>
</div>
</div>
<div inner>
<div> <!--class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">-->
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<ng-container *ngIf="!showLoading && !editView">
<div *ngIf="pluginTemplates.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No plugins found</div>
</div>
<ng-container *ngFor="let placement of pluginUtils.placementsOptions">
<ng-container *ngIf="selectedPlacementView == placement.value || selectedPlacementView == 'all'">
<div *ngIf="pluginsByPlacement.get(placement.value).length >0 && page"
class="uk-heading-divider uk-h6 uk-margin-left uk-padding-remove-left uk-text-capitalize ">{{placement.value}}</div>
<ng-container *ngFor="let pluginGroup of pluginsByPlacement.get(placement.value) ; let i=index">
<ng-container *ngIf="(pluginGroup.template.portalSpecific.length == 0 || pluginGroup.template.portalSpecific.indexOf(communityInfo.communityId) != -1 ) &&
(pluginGroup.template.plan == 'starter'|| pluginGroup.template.plan == communityInfo.plan )">
<div class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-card-body uk-flex">
<div class="uk-width-expand uk-text-small">
<ng-container *ngIf="pluginGroup.template && !templateView">
<h6>{{pluginGroup.template.name}}</h6>
<div class="uk-margin-small-bottom">
{{pluginGroup.template.description}}
</div>
</ng-container>
<div class="uk-margin-small-bottom">
<span class="uk-text-meta">Placement: </span>{{pluginGroup.plugin.placement}}
</div>
<div class="uk-margin-small-bottom">
<span class="uk-text-meta">Order: </span>{{pluginGroup.plugin.order}}
</div>
<ul uk-accordion>
<li>
<a class="uk-accordion-title">Preview</a>
<div class="uk-accordion-content">
<plugin-wrapper [pluginTemplate]="pluginGroup.template" [plugin]="pluginGroup.plugin"
[pluginObject]="pluginGroup.plugin.object"></plugin-wrapper>
</div>
</li>
</ul>
</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 class="uk-padding-small uk-padding-remove-horizontal">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle"
(click)="edit(pluginGroup.plugin, pluginGroup.template, placement, i)"
[class.uk-disabled]="!pluginGroup.template">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left"> Edit</span>
</button>
</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)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left"> Delete</span>
</button>
</div>
</div>-->
<div *ngIf="pluginGroup.plugin.order>0">
<div class="uk-padding-small uk-padding-remove-horizontal">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle"
(click)="swap(i, i-1, placement.value)">
<!-- <icon name="" [flex]="true"></icon>-->
<span class="uk-margin-xsmall-left"> Up</span>
</button>
</div>
</div>
<div *ngIf="pluginGroup.plugin.order < pluginsByPlacement.get(placement.value).length -1 ">
<div class="uk-padding-small uk-padding-remove-horizontal">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle"
(click)="swap(i+1, i, placement.value)">
<!-- <icon name="" [flex]="true"></icon>-->
<span class="uk-margin-xsmall-left"> Down</span>
</button>
</div>
</div>
<div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<mat-slide-toggle [checked]="pluginGroup.plugin.active"
(change)="($event.source.checked = pluginGroup.plugin.active);togglePlugin(!pluginGroup.plugin.active,pluginGroup.plugin._id,i, placement.value)"
>
<span class="uk-text-small">Enable</span>
</mat-slide-toggle>
</div>
</div>
</div>
</div>
</div>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="editView">
<plugin-wrapper *ngIf="this.templateForm" [pluginTemplate]="selectedTemplate"
[plugin]="this.templateForm.getRawValue()"
[pluginObject]="this.selectedPlugin.object"
class="uk-width-1-1"></plugin-wrapper>
</ng-container> </ng-container>
</div> </div>
</div> </div>
</div> </div>
<div inner>
<div> <!--class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">-->
<div *ngIf="showLoading" class="uk-position-center">
<loading></loading>
</div>
<ng-container *ngIf="!showLoading && !editView">
<div *ngIf="pluginTemplates.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div>No plugins found</div>
</div>
<ng-container *ngFor="let placement of pluginUtils.placementsOptions">
<ng-container *ngIf="selectedPlacementView == placement.value || selectedPlacementView == 'all'">
<div *ngIf="pluginsByPlacement.get(placement.value).length >0 && page"
class="uk-heading-divider uk-h6 uk-margin-left uk-padding-remove-left uk-text-capitalize ">{{placement.value}}</div>
<ng-container *ngFor="let pluginGroup of pluginsByPlacement.get(placement.value) ; let i=index">
<ng-container *ngIf="(pluginGroup.template.portalSpecific.length == 0 || pluginGroup.template.portalSpecific.indexOf(communityInfo.communityId) != -1 ) &&
(pluginGroup.template.plan == 'starter'|| pluginGroup.template.plan == communityInfo.plan )">
<div class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-card-body uk-flex">
<div class="uk-width-expand uk-text-small">
<ng-container *ngIf="pluginGroup.template && !templateView">
<h6>{{pluginGroup.template.name}}</h6>
<div class="uk-margin-small-bottom">
{{pluginGroup.template.description}}
</div>
</ng-container>
<div class="uk-margin-small-bottom">
<span class="uk-text-meta">Placement: </span>{{pluginGroup.plugin.placement}}
</div>
<div class="uk-margin-small-bottom">
<span class="uk-text-meta">Order: </span>{{pluginGroup.plugin.order}}
</div>
<ul uk-accordion>
<li>
<a class="uk-accordion-title" >Preview</a>
<div class="uk-accordion-content">
<plugin-wrapper [pluginTemplate]="pluginGroup.template" [plugin]="pluginGroup.plugin" [pluginObject]="pluginGroup.plugin.object"></plugin-wrapper>
</div>
</li>
</ul>
</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 class="uk-padding-small uk-padding-remove-horizontal">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="edit(pluginGroup.plugin, pluginGroup.template, placement, i)"
[class.uk-disabled]="!pluginGroup.template">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left"> Edit</span>
</button>
</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)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left"> Delete</span>
</button>
</div>
</div>-->
<div *ngIf="pluginGroup.plugin.order>0">
<div class="uk-padding-small uk-padding-remove-horizontal">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="swap(i, i-1, placement.value)">
<!-- <icon name="" [flex]="true"></icon>-->
<span class="uk-margin-xsmall-left"> Up</span>
</button>
</div>
</div>
<div *ngIf="pluginGroup.plugin.order < pluginsByPlacement.get(placement.value).length -1 ">
<div class="uk-padding-small uk-padding-remove-horizontal">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="swap(i+1, i, placement.value)">
<!-- <icon name="" [flex]="true"></icon>-->
<span class="uk-margin-xsmall-left"> Down</span>
</button>
</div>
</div>
<div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<mat-slide-toggle [checked]="pluginGroup.plugin.active"
(change)="($event.source.checked = pluginGroup.plugin.active);togglePlugin(!pluginGroup.plugin.active,pluginGroup.plugin._id,i, placement.value)"
>
<span class="uk-text-small">Enable</span>
</mat-slide-toggle>
</div>
</div>
</div>
</div>
</div>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="editView">
<!--<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">
<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 class="uk-padding-small uk-padding-remove-horizontal">
<button
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="newPlugin(template)">
&lt;!&ndash; <icon name="edit" [flex]="true"></icon>&ndash;&gt;
<span class="uk-margin-xsmall-left"> Select Template</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>-->
<!-- <form *ngIf="!selectTemplateView" [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>-->
<!--&lt;!&ndash; <div input [formInput]="templateForm.get('placement')" placeholder="Placements" [options]="placementsOptions" type="select" class="uk-width-1-2"></div>&ndash;&gt;-->
<!-- <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 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.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.settings[attrForm.get('key').value].type == 'HTML'" class="uk-width-1-1">-->
<!-- <label>-->
<!-- {{selectedTemplate.settings[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,' +-->
<!-- '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>-->
<!-- </ng-container>-->
<!-- </form>-->
<plugin-wrapper *ngIf="this.templateForm" [pluginTemplate]="selectedTemplate" [plugin]="this.templateForm.getRawValue()" [pluginObject]="this.templateForm.getRawValue().object"
class="uk-width-1-1"></plugin-wrapper>
</ng-container>
</div>
</div>
</div>
</div> </div>

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

@ -1,8 +1,9 @@
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {Component, ElementRef, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {HelpContentService} from "../../services/help-content.service"; import {HelpContentService} from "../../services/help-content.service";
import { import {
FormArray, FormGroup, FormArray,
FormGroup,
UntypedFormArray, UntypedFormArray,
UntypedFormBuilder, UntypedFormBuilder,
UntypedFormGroup, UntypedFormGroup,
@ -15,7 +16,6 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {PortalUtils} from "../portal/portalHelper"; import {PortalUtils} from "../portal/portalHelper";
import {AlertModal} from "../../utils/modal/alert";
import {Option} from "../../sharedComponents/input/input.component"; import {Option} from "../../sharedComponents/input/input.component";
import {Title} from "@angular/platform-browser"; import {Title} from "@angular/platform-browser";
import {ClearCacheService} from "../../services/clear-cache.service"; import {ClearCacheService} from "../../services/clear-cache.service";
@ -25,10 +25,10 @@ import {Plugin} from "../../utils/entities/adminTool/plugin";
import {StringUtils} from "../../utils/string-utils.class"; import {StringUtils} from "../../utils/string-utils.class";
import {Portal} from "../../utils/entities/adminTool/portal"; import {Portal} from "../../utils/entities/adminTool/portal";
import {PluginTemplate} from "../../utils/entities/adminTool/pluginTemplate"; import {PluginTemplate} from "../../utils/entities/adminTool/pluginTemplate";
import {PluginEditEvent} from "./utils/base-plugin.component";
import {PluginUtils} from "./utils/pluginUtils"; import {PluginUtils} from "./utils/pluginUtils";
import {CommunityService} from "../../connect/community/community.service"; import {CommunityService} from "../../connect/community/community.service";
import {CommunityInfo} from "../../connect/community/communityInfo"; import {CommunityInfo} from "../../connect/community/communityInfo";
import {PluginEditEvent} from "./utils/base-plugin.form.component";
@Component({ @Component({
selector: 'plugins', selector: 'plugins',
@ -66,6 +66,7 @@ export class PluginsComponent implements OnInit {
public template; public template;
public selectedPlacementView = "all"; public selectedPlacementView = "all";
communityInfo:CommunityInfo = null; communityInfo:CommunityInfo = null;
editSubmenuOpen = false;
constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router, constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router,
private communityService: CommunityService, private communityService: CommunityService,
private title: Title, private _helpContentService: HelpContentService, private title: Title, private _helpContentService: HelpContentService,
@ -156,8 +157,7 @@ export class PluginsComponent implements OnInit {
plugin = new Plugin(this.selectedPageId, this.selectedCommunityPid,_); plugin = new Plugin(this.selectedPageId, this.selectedCommunityPid,_);
this.plugins.push(plugin); this.plugins.push(plugin);
} }
let defaultObj = PluginUtils.initializeObject(_.code); plugin.object = PluginUtils.initializeObjectAndCompare(_.code,plugin.object)
plugin.object = PluginUtils.updateExistingObject(plugin.object, PluginUtils.updateExistingObject(_.object, defaultObj))
this.pluginsByPlacement.get(plugin.placement).push({plugin: plugin, template: _ }); this.pluginsByPlacement.get(plugin.placement).push({plugin: plugin, template: _ });
}); });
for(let placement of this.pluginUtils.placementsOptions){ for(let placement of this.pluginUtils.placementsOptions){
@ -175,7 +175,7 @@ export class PluginsComponent implements OnInit {
public edit(plugin:Plugin, template:PluginTemplate, placement, index) { public edit(plugin:Plugin, template:PluginTemplate, placement, index) {
this.editView = true; this.editView = true;
this.selectedPlugin = plugin; this.selectedPlugin = JSON.parse(JSON.stringify(plugin)); // deep copy object with nested objects
this.selectedTemplate = template; this.selectedTemplate = template;
this.index = index; this.index = index;
this.pagesCtrl = this._fb.array([], Validators.required); this.pagesCtrl = this._fb.array([], Validators.required);
@ -189,15 +189,7 @@ export class PluginsComponent implements OnInit {
order: this._fb.control(plugin.order), order: this._fb.control(plugin.order),
active: this._fb.control(plugin.active), active: this._fb.control(plugin.active),
values: this._fb.array([]), values: this._fb.array([]),
object: this._fb.group({})
}); });
for (let attrKey of Object.keys(plugin.object)) {
if(attrKey.indexOf("Array")==-1) {
(this.templateForm.get("object") as FormGroup).addControl(attrKey, this._fb.control(plugin.object[attrKey]));
}else{
(this.templateForm.get("object") as FormGroup).addControl(attrKey,this._fb.array(plugin.object[attrKey]));
}
}
if (template.settings) { if (template.settings) {
for (let attrKey of Object.keys(template.settings)) { for (let attrKey of Object.keys(template.settings)) {
@ -208,7 +200,6 @@ export class PluginsComponent implements OnInit {
)); ));
} }
} }
console.log("aaa", this.templateForm.getRawValue())
} }
public newPluginSelectTemplate() { public newPluginSelectTemplate() {
@ -250,6 +241,7 @@ export class PluginsComponent implements OnInit {
public saveConfirmed(index) { public saveConfirmed(index) {
this.showLoading = true; this.showLoading = true;
let plugin: Plugin = <Plugin>this.templateForm.getRawValue(); let plugin: Plugin = <Plugin>this.templateForm.getRawValue();
plugin.object = this.selectedPlugin.object;
plugin.settingsValues = new Map<string, string>(); plugin.settingsValues = new Map<string, string>();
for (let fields of this.templateForm.getRawValue().values) { for (let fields of this.templateForm.getRawValue().values) {
plugin.settingsValues[fields.key] = fields.value; plugin.settingsValues[fields.key] = fields.value;
@ -361,7 +353,8 @@ export class PluginsComponent implements OnInit {
reset() { reset() {
if (this.selectedPlugin) { if (this.selectedPlugin) {
this.edit(this.selectedPlugin, this.selectedTemplate, this.selectedTemplate.placement, this.index)
this.edit(this.pluginsByPlacement.get(this.selectedTemplate.placement)[this.index].plugin, this.selectedTemplate, this.selectedTemplate.placement, this.index)
} else { } else {
this.newPlugin(this.selectedTemplate) this.newPlugin(this.selectedTemplate)
} }
@ -388,18 +381,16 @@ export class PluginsComponent implements OnInit {
} }
} }
pluginFieldChanged($event:PluginEditEvent){ pluginFieldChanged($event:PluginEditEvent){
let object = this.templateForm.get("object").getRawValue(); if($event.type == "open-submenu"){
object[$event.field]=$event.value; this.editSubmenuOpen = true;
if($event.field.indexOf("Array") == -1) { return;
this.templateForm.get("object").get($event.field).setValue($event.value);
}else{
((this.templateForm.get("object") as FormGroup).get($event.field) as FormArray).clear();
$event.value.forEach(id => {
((this.templateForm.get("object") as FormGroup).get($event.field) as FormArray).push(this._fb.control(id))
});
console.log(((this.templateForm.get("object") as FormGroup).get($event.field) as FormArray).getRawValue());
} }
if($event.type == "close-submenu"){
this.editSubmenuOpen = false;
return;
}
this.selectedPlugin.object[$event.field]=$event.value;
this.templateForm.markAsDirty(); this.templateForm.markAsDirty();
} }

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

@ -6,7 +6,7 @@
<span class="uk-margin-right"> <span class="uk-margin-right">
<icon name="west" ratio="1.7" [flex]="true"></icon> <icon name="west" ratio="1.7" [flex]="true"></icon>
</span> </span>
<h1 class="uk-h5 uk-margin-remove">{{page.name}}</h1> <h1 class="uk-h5 uk-margin-remove">{{page.name}}</h1>
</a> </a>
</div> </div>
<ul *ngIf="page" class="uk-subnav uk-subnav-pill uk-margin-medium-top"> <ul *ngIf="page" class="uk-subnav uk-subnav-pill uk-margin-medium-top">
@ -20,9 +20,9 @@
</ul> </ul>
</div> </div>
<div actions> <div actions>
<div class="uk-section-xsmall"> <div class="uk-section-xsmall">
<div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid> <div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<!-- <div search-input [disabled]="showLoading" [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search class" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>--> <!-- <div search-input [disabled]="showLoading" [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search class" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>-->
<div> <div>
<button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newPlugin()" <button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newPlugin()"
[disabled]="showLoading" [class.uk-disabled]="showLoading"> [disabled]="showLoading" [class.uk-disabled]="showLoading">
@ -43,91 +43,100 @@
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 templates found</div> <div>No templates found</div>
</div>--> </div>-->
<div class="uk-grid uk-child-width-1-1"> <div class="uk-grid uk-child-width-1-1">
<ng-container *ngFor="let placement of pluginUtils.placementsOptions"> <ng-container *ngFor="let placement of pluginUtils.placementsOptions">
<ng-container *ngIf="filterForm.get('position').value == placement.value || filterForm.get('position').value == 'all'"> <ng-container
<div *ngIf="templatesByPlacement.get(placement.value).length >0 && page" *ngIf="filterForm.get('position').value == placement.value || filterForm.get('position').value == 'all'">
class="uk-heading-divider uk-h6 uk-margin-left uk-padding-remove-left uk-text-capitalize ">{{placement.value}}</div> <div
*ngIf="templatesByPlacement.get(placement.value) && templatesByPlacement.get(placement.value).length >0 && page"
class="uk-heading-divider uk-h6 uk-margin-left uk-padding-remove-left uk-text-capitalize ">{{placement.value}}</div>
<div *ngFor="let template of templatesByPlacement.get(placement.value) ; let i=index"> <div *ngFor="let template of templatesByPlacement.get(placement.value) ; let i=index">
<div class="uk-card uk-card-default uk-margin-bottom"> <div class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-card-body uk-flex"> <div class="uk-card-body uk-flex">
<div class="uk-width-expand uk-text-small"> <div class="uk-width-expand uk-text-small">
<h6>{{template.name}}</h6> <h6>{{template.name}}</h6>
<div class="uk-margin-small-bottom"> <div class="uk-margin-small-bottom">
<span class="uk-label uk-padding-xsmall uk-text-capitalize" [class.uk-label-success]="template.plan !='extended'" [class.uk-label-danger]="template.plan =='extended'">Plan: {{template.plan}} </span> <span class="uk-label uk-padding-xsmall uk-text-capitalize"
<span *ngIf="template.portalSpecific && template.portalSpecific.length > 0" class="uk-label uk-label-primary uk-padding-xsmall uk-text-capitalize uk-margin-left">Communities: {{template.portalSpecific.join(', ')}} </span> [class.uk-label-success]="template.plan !='extended'"
<span *ngIf="template.defaultIsActive" class="uk-label uk-label-success uk-padding-xsmall uk-text-capitalize uk-margin-left">Default status: Active </span> [class.uk-label-danger]="template.plan =='extended'">Plan: {{template.plan}} </span>
</div> <span *ngIf="template.portalSpecific && template.portalSpecific.length > 0"
<div class="uk-margin-small-bottom"> class="uk-label uk-label-primary uk-padding-xsmall uk-text-capitalize uk-margin-left">Communities: {{template.portalSpecific.join(', ')}} </span>
{{template.description}} <span *ngIf="template.defaultIsActive"
</div> class="uk-label uk-label-success uk-padding-xsmall uk-text-capitalize uk-margin-left">Default status: Active </span>
<div class="uk-margin-small-bottom">
<span class="uk-text-meta">Page: </span>{{getPageAsString(template.page)}} -
<span class="uk-text-meta">Placement: </span>{{template.placement}} -
<span class="uk-text-meta">Order: </span>{{template.order}}
</div>
<div class="uk-margin-small-bottom">
<span class="uk-text-meta">Portal type: </span>{{template.portalType}}
</div>
<ul uk-accordion>
<li>
<a class="uk-accordion-title" >Preview</a>
<div class="uk-accordion-content">
<plugin-wrapper [pluginTemplate]="template" [pluginObject]="template.object" ></plugin-wrapper>
</div> </div>
</li> <div class="uk-margin-small-bottom">
</ul> {{template.description}}
</div> </div>
</div> <div class="uk-margin-small-bottom">
<div class="uk-card-footer uk-padding-remove-vertical"> <span class="uk-text-meta">Page: </span>{{getPageAsString(template.page)}} -
<div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid> <span class="uk-text-meta">Placement: </span>{{template.placement}} -
<span class="uk-text-meta">Order: </span>{{template.order}}
</div>
<div class="uk-margin-small-bottom">
<span class="uk-text-meta">Portal type: </span>{{template.portalType}}
</div>
<ul uk-accordion>
<li>
<a class="uk-accordion-title">Preview</a>
<div class="uk-accordion-content">
<plugin-wrapper [pluginTemplate]="template"
[pluginObject]="template.object"></plugin-wrapper>
</div>
</li>
</ul>
</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>
<ng-container *ngIf="page"> <ng-container *ngIf="page">
<div *ngIf="template.order>0"> <div *ngIf="template.order>0">
<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)="swap(i, i-1, template.placement)"> class="uk-button uk-button-link uk-flex uk-flex-middle"
<!-- <icon name="" [flex]="true"></icon>--> (click)="swap(i, i-1, template.placement)">
<span class="uk-margin-xsmall-left"> Up</span> <!-- <icon name="" [flex]="true"></icon>-->
</button> <span class="uk-margin-xsmall-left"> Up</span>
</div> </button>
</div> </div>
<div *ngIf="template.order < templatesByPlacement.get(placement.value).length -1 "> </div>
<div class="uk-padding-small uk-padding-remove-horizontal"> <div *ngIf="template.order < templatesByPlacement.get(placement.value).length -1 ">
<button <div class="uk-padding-small uk-padding-remove-horizontal">
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="swap(i+1, i, template.placement)"> <button
<!-- <icon name="" [flex]="true"></icon>--> class="uk-button uk-button-link uk-flex uk-flex-middle"
<span class="uk-margin-xsmall-left"> Down</span> (click)="swap(i+1, i, template.placement)">
</button> <!-- <icon name="" [flex]="true"></icon>-->
</div> <span class="uk-margin-xsmall-left"> Down</span>
</div> </button>
</ng-container> </div>
<div> </div>
<div class="uk-padding-small uk-padding-remove-horizontal"> </ng-container>
<button <div>
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="edit(template)"> <div class="uk-padding-small uk-padding-remove-horizontal">
<icon name="edit" [flex]="true"></icon> <button
<span class="uk-margin-xsmall-left"> Edit</span> class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="edit(template)">
</button> <icon name="edit" [flex]="true"></icon>
</div> <span class="uk-margin-xsmall-left"> Edit</span>
</div> </button>
<div> </div>
<div class="uk-padding-small uk-padding-remove-horizontal"> </div>
<button class="uk-button uk-button-link uk-flex uk-flex-middle" <div>
(click)="confirmDelete(template)"> <div class="uk-padding-small uk-padding-remove-horizontal">
<icon name="delete" [flex]="true"></icon> <button class="uk-button uk-button-link uk-flex uk-flex-middle"
<span class="uk-margin-xsmall-left"> Delete</span> (click)="confirmDelete(template)">
</button> <icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left"> Delete</span>
</button>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div>
</div>
<!-- </div>--> <!-- </div>-->
</div> </div>
<!-- </div>--> <!-- </div>-->
</ng-container> </ng-container>
</ng-container> </ng-container>
</div> </div>
@ -136,74 +145,96 @@
</div> </div>
</div> </div>
<modal-alert #editModal (alertOutput)="saveConfirmed($event)" [large]="true" <modal-alert #editModal (alertOutput)="saveConfirmed($event)" [large]="true"
[okDisabled]="templateForm && (templateForm.invalid || !templateForm.dirty)" classTitle="uk-background-primary uk-light"> [okDisabled]="templateForm && (templateForm.invalid || !templateForm.dirty)"
classTitle="uk-background-primary uk-light">
<form *ngIf="templateForm" [formGroup]="templateForm" class="uk-grid " uk-grid> <form *ngIf="templateForm" [formGroup]="templateForm" class="uk-grid " uk-grid>
<div class="uk-width-1-3" *ngIf="templateForm.getRawValue()['_id']"> <div class="uk-width-1-3 " *ngIf="templateForm.getRawValue()['_id']">
<div class="uk-text-muted uk-text-bold uk-text-center uk-margin-bottom">Plugin options</div> <div class="uk-card uk-card-default uk-padding-small">
<plugin-wrapper-form [pluginTemplate]="templateForm.getRawValue()" [pluginObject]="this.templateForm.getRawValue().object" <div *ngIf="!editSubmenuOpen" class="uk-text-muted uk-text-bold uk-text-center uk-margin-bottom">Plugin
(changed)="pluginFieldChanged($event)" [editTemplate]="true"> </plugin-wrapper-form> options
</div>
<div class="uk-grid uk-width-expand uk-child-width-1-2" uk-grid>
<div input [formInput]="templateForm.get('name')" placeholder="Template Name"></div>
<div input [formInput]="templateForm.get('code')" placeholder="Template Code" [options]="pluginUtils.availablePluginCodes" type="select"></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]="pluginUtils.planOptions" 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('placement')" placeholder="Placement" [options]="pluginUtils.placementsOptions" type="select"></div>
<div *ngIf="!templateForm.get('portalType').value" input [formInput]="templateForm.get('page')" placeholder="Page" [options]="allPages" type="select" ></div>
<div *ngIf="templateForm.get('portalType').value" input [formInput]="templateForm.get('page')" placeholder="Page" [options]="allPagesByPortal.get(templateForm.get('portalType').value)" type="select" ></div>
<div input [formInput]="templateForm.get('portalSpecific')" placeholder="Available to communities" hint="community ids, comma seperated, no spaces"></div>
<div input [formInput]="templateForm.get('order')" placeholder="Order" ></div>
<div>Default Status <mat-slide-toggle [checked]="templateForm.get('defaultIsActive').value"
(change)="templateForm.get('defaultIsActive').setValue($event.checked); templateForm.markAsDirty()"></mat-slide-toggle></div>
<plugin-wrapper *ngIf="selectedTemplate " [editMode]="true" [wrapperEditMode]="false" [pluginTemplate]="this.templateForm.getRawValue()"
class="uk-width-1-1" [editTemplate]="true" (changed)="pluginFieldChanged($event)"></plugin-wrapper>
<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>Setting #{{i +1}}</div>
<div class=" uk-width-expand uk-text-right ">
<a class=" " (click)="removeAttr(i)">Remove</a>
</div>
</div> </div>
<plugin-wrapper-form [pluginTemplate]="templateForm.getRawValue()"
[pluginObject]="selectedTemplate.object"
(changed)="pluginFieldChanged($event)" [editTemplate]="true" [editSubmenuOpen]="editSubmenuOpen"></plugin-wrapper-form>
</div> </div>
<div input [formInput]="attrForm.get('key')" placeholder="Key"></div> </div>
<div input [formInput]="attrForm.get('name')" placeholder="Name"></div> <div class="uk-grid uk-width-expand uk-child-width-1-2" uk-grid>
<div input [formInput]="attrForm.get('type')" placeholder="Type" [options]="pluginUtils.attrTypeOptions" type="select" (valueChange)="attributeTypeChanged(attrForm)"></div> <div input [formInput]="templateForm.get('name')" placeholder="Template Name"></div>
<div input [formInput]="templateForm.get('code')" placeholder="Template Code"
[options]="pluginUtils.availablePluginCodes" type="select"></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]="pluginUtils.planOptions"
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('placement')" placeholder="Placement"
[options]="pluginUtils.placementsOptions" type="select"></div>
<div *ngIf="!templateForm.get('portalType').value" input [formInput]="templateForm.get('page')" placeholder="Page"
[options]="allPages" type="select"></div>
<div *ngIf="templateForm.get('portalType').value" input [formInput]="templateForm.get('page')" placeholder="Page"
[options]="allPagesByPortal.get(templateForm.get('portalType').value)" type="select"></div>
<div input [formInput]="templateForm.get('portalSpecific')" placeholder="Available to communities"
hint="community ids, comma seperated, no spaces"></div>
<div input [formInput]="templateForm.get('order')" placeholder="Order"></div>
<div>Default Status
<mat-slide-toggle [checked]="templateForm.get('defaultIsActive').value"
(change)="templateForm.get('defaultIsActive').setValue($event.checked); templateForm.markAsDirty()"></mat-slide-toggle>
</div>
<!--<plugin-wrapper *ngIf="selectedTemplate "
[pluginTemplate]="this.templateForm.getRawValue()" [pluginObject]="this.templateForm.getRawValue().object" class="uk-width-1-1" ></plugin-wrapper>-->
<div *ngIf="attrForm.get('type').value == 'text'" input [formInput]="attrForm.get('value')" placeholder="Default value" [type]="attrForm.get('type').value" ></div> <div *ngFor="let attrForm of attrFormArray.controls; let i=index" class="uk-width-1-1 uk-grid uk-child-width-1-2"
<div *ngIf="attrForm.get('type').value == 'URL'" input [formInput]="attrForm.get('value')" placeholder="Default value" [type]="attrForm.get('type').value" [validators]="urlValidator"></div> uk-grid>
<div *ngIf="attrForm.get('type').value == 'boolean'" input [formInput]="attrForm.get('value')" placeholder="Default value" type="select"
[options]="[{label: 'yes', value:true}, {label: 'no', value:false}]"></div>
<div *ngIf="attrForm.get('type').value == 'HTML'" class="uk-width-1-1"> <div class="uk-heading-divider uk-text-small uk-width-1-1 uk-margin-bottom uk-text-meta">
<ckeditor [readonly]="false" <div class="uk-grid">
debounce="500" <div>Setting #{{i + 1}}</div>
[formControl]="attrForm.get('value')" <div class=" uk-width-expand uk-text-right ">
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', <a class=" " (click)="removeAttr(i)">Remove</a>
</div>
</div>
</div>
<div input [formInput]="attrForm.get('key')" placeholder="Key"></div>
<div input [formInput]="attrForm.get('name')" placeholder="Name"></div>
<div input [formInput]="attrForm.get('type')" placeholder="Type" [options]="pluginUtils.attrTypeOptions"
type="select" (valueChange)="attributeTypeChanged(attrForm)"></div>
<div *ngIf="attrForm.get('type').value == 'text'" input [formInput]="attrForm.get('value')"
placeholder="Default value" [type]="attrForm.get('type').value"></div>
<div *ngIf="attrForm.get('type').value == 'URL'" input [formInput]="attrForm.get('value')"
placeholder="Default value" [type]="attrForm.get('type').value" [validators]="urlValidator"></div>
<div *ngIf="attrForm.get('type').value == 'boolean'" input [formInput]="attrForm.get('value')"
placeholder="Default value" type="select"
[options]="[{label: 'yes', value:true}, {label: 'no', value:false}]"></div>
<div *ngIf="attrForm.get('type').value == '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,' + 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>
<hr class="uk-width-1-1">
<div class="uk-width-1-1 uk-text-center ">
<a (click)="addNewAttr()">Add settings</a>
</div> </div>
</div>
<hr class="uk-width-1-1">
<div class="uk-width-1-1 uk-text-center ">
<a (click)="addNewAttr()">Add settings</a>
</div>
<div *ngIf="templateForm.getRawValue()['_id']" class="uk-width-1-1"> <div *ngIf="templateForm.getRawValue()['_id']" class="uk-width-1-1">
<hr class="uk-width-1-1"> <hr class="uk-width-1-1">
<div class="uk-text-muted uk-text-bold uk-width-1-1 uk-text-center">Plugin preview</div> <div class="uk-text-muted uk-text-bold uk-width-1-1 uk-text-center">Plugin preview</div>
<plugin-wrapper [pluginTemplate]="templateForm.getRawValue()" [pluginObject]="this.templateForm.getRawValue().object"></plugin-wrapper> <plugin-wrapper [pluginTemplate]="templateForm.getRawValue()"
[pluginObject]="selectedTemplate.object"></plugin-wrapper>
</div> </div>
</div> </div>
</form> </form>
</modal-alert> </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>

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

@ -16,8 +16,8 @@ import {NotificationHandler} from "../../../utils/notification-handler";
import {PluginsService} from "../../../services/plugins.service"; import {PluginsService} from "../../../services/plugins.service";
import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate"; import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
import {StringUtils} from "../../../utils/string-utils.class"; import {StringUtils} from "../../../utils/string-utils.class";
import {PluginEditEvent} from "../utils/base-plugin.component";
import {PluginUtils} from "../utils/pluginUtils"; import {PluginUtils} from "../utils/pluginUtils";
import {PluginEditEvent} from "../utils/base-plugin.form.component";
@Component({ @Component({
selector: 'plugin-templates', selector: 'plugin-templates',
@ -44,7 +44,7 @@ export class PluginTemplatesComponent implements OnInit {
public selectedPageId: string; public selectedPageId: string;
public selectedPortalPid: string; public selectedPortalPid: string;
public page: Page; public page: Page;
editSubmenuOpen = false;
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,
@ -59,10 +59,6 @@ export class PluginTemplatesComponent implements OnInit {
}); });
this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => { this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
this.searchText = new RegExp(value, 'i'); this.searchText = new RegExp(value, 'i');
// this.applyFilters();
}));
this.subscriptions.push(this.filterForm.get('position').valueChanges.subscribe(value => {
// this.applyFilters();
})); }));
this.subscriptions.push(this.route.queryParams.subscribe(params => { this.subscriptions.push(this.route.queryParams.subscribe(params => {
@ -118,17 +114,10 @@ export class PluginTemplatesComponent implements OnInit {
this.templatesByPlacement.set(pos.value,[]); this.templatesByPlacement.set(pos.value,[]);
} }
for(let template of templates){ for(let template of templates){
let defaultObj = PluginUtils.initializeObject(template.code); template.object = PluginUtils.initializeObjectAndCompare(template.code,template.object)
console.log(defaultObj)
template.object = PluginUtils.updateExistingObject(template.object, defaultObj)
this.templatesByPlacement.get(template.placement).push(template); this.templatesByPlacement.get(template.placement).push(template);
} }
// this.checkboxes = [];
let self = this; let self = this;
/*templates.forEach(_ => {
self.checkboxes.push({template: _, checked: false});
});*/
this.showLoading = false; this.showLoading = false;
}, },
error => this.handleError('System error retrieving classes', error))); error => this.handleError('System error retrieving classes', error)));
@ -168,7 +157,7 @@ export class PluginTemplatesComponent implements OnInit {
} }
public edit(pluginTemplate) { public edit(pluginTemplate) {
this.selectedTemplate = pluginTemplate; this.selectedTemplate = JSON.parse(JSON.stringify(pluginTemplate)); // deep copy object with nested objects
this.templateForm = this._fb.group({ this.templateForm = this._fb.group({
_id: this._fb.control(pluginTemplate._id), _id: this._fb.control(pluginTemplate._id),
name: this._fb.control(pluginTemplate.name), name: this._fb.control(pluginTemplate.name),
@ -183,15 +172,7 @@ export class PluginTemplatesComponent implements OnInit {
portalSpecific: this._fb.control(pluginTemplate.portalSpecific?pluginTemplate.portalSpecific.join(','):''), portalSpecific: this._fb.control(pluginTemplate.portalSpecific?pluginTemplate.portalSpecific.join(','):''),
defaultIsActive: this._fb.control(pluginTemplate.defaultIsActive), defaultIsActive: this._fb.control(pluginTemplate.defaultIsActive),
settings: this._fb.array([]), settings: this._fb.array([]),
object: this._fb.group({})
}); });
for (let attrKey of Object.keys(pluginTemplate.object)) {
if(attrKey.indexOf("Array")==-1) {
(this.templateForm.get("object") as FormGroup).addControl(attrKey, this._fb.control(pluginTemplate.object[attrKey]));
}else{
(this.templateForm.get("object") as FormGroup).addControl(attrKey,this._fb.array(pluginTemplate.object[attrKey]));
}
}
this.templateForm.get('portalType').disable(); this.templateForm.get('portalType').disable();
if (pluginTemplate.settings) { if (pluginTemplate.settings) {
for (let attrKey of Object.keys(pluginTemplate.settings)) { for (let attrKey of Object.keys(pluginTemplate.settings)) {
@ -203,7 +184,6 @@ export class PluginTemplatesComponent implements OnInit {
})); }));
} }
} }
// console.log(this.templateForm.getRawValue(),this.templateForm.get("object").value)
this.modalOpen("Edit Template", "Save Changes"); this.modalOpen("Edit Template", "Save Changes");
} }
@ -220,7 +200,7 @@ export class PluginTemplatesComponent implements OnInit {
description: this._fb.control(''), description: this._fb.control(''),
page: this._fb.control(this.page?this.getPageById(this.page):'', Validators.required), page: this._fb.control(this.page?this.getPageById(this.page):'', Validators.required),
portalType: this._fb.control('community', Validators.required), portalType: this._fb.control('community', Validators.required),
placement: this._fb.control('', Validators.required), placement: this._fb.control('top', Validators.required),
order: this._fb.control(''), order: this._fb.control(''),
portalSpecific: this._fb.control(''), portalSpecific: this._fb.control(''),
defaultIsActive: this._fb.control(false), defaultIsActive: this._fb.control(false),
@ -262,7 +242,9 @@ export class PluginTemplatesComponent implements OnInit {
let template: PluginTemplate = <PluginTemplate>this.templateForm.getRawValue(); let template: PluginTemplate = <PluginTemplate>this.templateForm.getRawValue();
template.page = this.templateForm.getRawValue().page._id template.page = this.templateForm.getRawValue().page._id
template.portalSpecific = this.templateForm.getRawValue().portalSpecific.length > 0? this.templateForm.getRawValue().portalSpecific.split(','):[]; template.portalSpecific = this.templateForm.getRawValue().portalSpecific.length > 0? this.templateForm.getRawValue().portalSpecific.split(','):[];
template.object = this.selectedTemplate?this.selectedTemplate.object:PluginUtils.initializeObjectAndCompare(template.code);
template.settings = new Map<string, { name: string; type: string; value: string }>(); template.settings = new Map<string, { name: string; type: string; value: string }>();
this.editSubmenuOpen = false;
if(!template._id){ if(!template._id){
template.order = this.templatesByPlacement.get(template.placement).length > 0 ? this.templatesByPlacement.get(template.placement).length:0; template.order = this.templatesByPlacement.get(template.placement).length > 0 ? this.templatesByPlacement.get(template.placement).length:0;
} }
@ -288,30 +270,13 @@ export class PluginTemplatesComponent implements OnInit {
// TODO sort // TODO sort
// this.templatesByPlacement.get(this.selectedTemplate.placement) = this.templatesByPlacement.get(this.selectedTemplate.placement).sort() // this.templatesByPlacement.get(this.selectedTemplate.placement) = this.templatesByPlacement.get(this.selectedTemplate.placement).sort()
} else { } else {
let defaultObj = PluginUtils.initializeObject(template.code); template.object = PluginUtils.initializeObjectAndCompare(template.code, template.object)
template.object = PluginUtils.updateExistingObject(template.object, defaultObj)
this.templatesByPlacement.get(this.selectedTemplate.placement).push(template); this.templatesByPlacement.get(this.selectedTemplate.placement).push(template);
} }
// this.applyFilters();
// this.applyCheck(false);
this.showLoading = false; this.showLoading = false;
} }
/* public applyFilters() {
this.checkboxes = [];
this.templates.filter(item => this.filterByPosition(item)).forEach(
item => this.checkboxes.push({template: item, checked: false})
);
this.checkboxes = this.checkboxes.filter(item => this.filter(item.template));
}*/
/*public filterByPosition(template: PluginTemplate): boolean {
let position = this.filterForm.get("position").value;
return position == "all" || (template.placement == position);
}*/
public filter(plugin: PluginTemplate): boolean { public filter(plugin: PluginTemplate): boolean {
return this.searchText.toString() == '' || (plugin.name + ' ' + plugin.portalType).match(this.searchText) != null; return this.searchText.toString() == '' || (plugin.name + ' ' + plugin.portalType).match(this.searchText) != null;
} }
@ -398,19 +363,16 @@ export class PluginTemplatesComponent implements OnInit {
pluginFieldChanged($event:PluginEditEvent){ pluginFieldChanged($event:PluginEditEvent){
console.log($event) if($event.type == "open-submenu"){
// let object = this.templateForm.get("object").getRawValue(); this.editSubmenuOpen = true;
// object[$event.field]=$event.value; return;
if($event.field.indexOf("Array") == -1) {
this.templateForm.get("object").get($event.field).setValue($event.value);
}else{
((this.templateForm.get("object") as FormGroup).get($event.field) as FormArray).clear();
$event.value.forEach(id => {
((this.templateForm.get("object") as FormGroup).get($event.field) as FormArray).push(this._fb.control(id))
});
console.log(((this.templateForm.get("object") as FormGroup).get($event.field) as FormArray).getRawValue());
} }
if($event.type == "close-submenu"){
this.editSubmenuOpen = false;
return;
}
this.selectedTemplate.object[$event.field]=$event.value;
this.templateForm.markAsDirty(); this.templateForm.markAsDirty();
} }
public getPagesByPortal(portal) { public getPagesByPortal(portal) {

49
dashboard/plugins/utils/base-plugin.component.ts
View File

@ -5,20 +5,24 @@ import {EnvProperties} from "../../../utils/properties/env-properties";
import {properties} from 'src/environments/environment'; import {properties} from 'src/environments/environment';
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
export class PluginEditEvent {
field:string;
type:"text" | "HTML" | "boolean" | 'parent';
value?:any;
}
export class PluginBaseInfo { export class PluginBaseInfo {
title: string = "Lorem ipsum"; title: string = "Lorem ipsum";
constructor() { constructor() {
} }
compare(oldObject){
if(!oldObject) {
oldObject = Object.assign(this)
}else{
if (!oldObject['title'] ) {
oldObject['title'] = this.title;
}
}
return oldObject;
}
} }
export class PluginURL { export class PluginURL {
url:string; url:string;
linkText:string; linkText: string;
target:string; target:string;
route:boolean; route:boolean;
constructor(url,linkText, target = "_blank",route = false) { constructor(url,linkText, target = "_blank",route = false) {
@ -34,31 +38,21 @@ export class PluginInfoCards{
tag?:string; tag?:string;
title:string; title:string;
description:string; description:string;
urls:PluginURL[]; urlsArray:PluginURL[];
image?:string; image?:string;
show:boolean; show:boolean;
} }
@Directive() @Directive()
export abstract class PluginBaseComponent<T extends PluginBaseInfo> implements OnDestroy { export abstract class PluginBaseComponent<T extends PluginBaseInfo> implements OnDestroy {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
@Input() editMode =false;
@Input() plugin:Plugin; @Input() plugin:Plugin;
@Input() pluginTemplate:PluginTemplate; @Input() pluginTemplate:PluginTemplate;
@Input() editTemplate:boolean = false;
@Input() pluginObject:T; @Input() pluginObject:T;
@Output() valuesChanged:EventEmitter<PluginEditEvent> = new EventEmitter<any>();
subscriptions = []; subscriptions = [];
pluginEditEvent:PluginEditEvent;
/*default:T;*/
constructor() { constructor() {
} }
ngOnInit(): void { ngOnInit(): void {
// console.log(this.default)
/*if (this.pluginTemplate && (!this.pluginDefaultObject || !this.pluginDefaultObject.title) && this.default) {
this.pluginTemplate.object = Object.assign(this.default);
}*/
} }
ngOnDestroy() { ngOnDestroy() {
@ -74,25 +68,10 @@ export class PluginInfoCards{
} }
}); });
} }
valueChanged($event:PluginEditEvent){
if(this.editTemplate){
this.pluginTemplate.object[$event.field]=$event.value;
this.pluginObject[$event.field]=$event.value;
}else{
this.plugin.object[$event.field]=$event.value;
}
this.valuesChanged.emit($event)
}
isVisible(field){ isVisible(field){
return (this.plugin && this.plugin.object && this.plugin.object[field] == true) /* plugin is on anyway */ return (this.plugin && this.pluginObject && this.pluginObject[field] == true) /* plugin is on anyway */
|| (!this.plugin && this.pluginTemplate && this.pluginTemplate.object && this.pluginTemplate.object[field] == true) /* template is on */ || (!this.plugin && this.pluginTemplate && this.pluginObject && this.pluginObject[field] == true) /* template is on */
} }
/*get pluginObject():T{
return this.plugin?this.plugin.object:null;
}
get pluginDefaultObject():T{
return this.pluginTemplate?this.pluginTemplate.object:null;
}*/
} }

48
dashboard/plugins/utils/base-plugin.form.component.ts Normal file
View File

@ -0,0 +1,48 @@
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 {PluginBaseComponent, PluginBaseInfo} from "./base-plugin.component";
export class PluginEditEvent {
field:string;
type:"text" | "HTML" | "boolean" | 'parent' |'open-submenu' | 'close-submenu';
value?:any;
constructor(field: string, type: "text" | "HTML" | "boolean" | 'parent' |'open-submenu' | 'close-submenu', value= null) {
this.field = field;
this.type = type;
this.value = value;
}
}
@Directive()
export abstract class PluginBaseFormComponent<T extends PluginBaseInfo> extends PluginBaseComponent<T> implements OnDestroy {
public properties: EnvProperties = properties;
@Input() editMode =false;
@Input() plugin:Plugin;
@Input() pluginTemplate:PluginTemplate;
@Input() editTemplate:boolean = false;
@Input() pluginObject:T;
@Output() valuesChanged:EventEmitter<PluginEditEvent> = new EventEmitter<any>();
subscriptions = [];
pluginEditEvent:PluginEditEvent;
valueChanged($event:PluginEditEvent){
if(this.editTemplate){
// this.pluginTemplate.object[$event.field]=$event.value;
this.pluginObject[$event.field]=$event.value;
}else{
this.pluginObject[$event.field]=$event.value;
}
this.valuesChanged.emit($event)
}
toggleSubMenu(open:boolean){
this.valuesChanged.emit(new PluginEditEvent(null,open?'open-submenu':'close-submenu'))
}
isVisible(field){
return (this.plugin && this.pluginObject && this.pluginObject[field] == true) /* plugin is on anyway */
|| (!this.plugin && this.pluginTemplate && this.pluginObject && this.pluginObject[field] == true) /* template is on */
}
}

9
dashboard/plugins/utils/plugin-field-edit.component.ts
View File

@ -1,5 +1,5 @@
import {Component, EventEmitter, Input, Output} from '@angular/core'; import {Component, EventEmitter, Input, Output} from '@angular/core';
import {PluginEditEvent} from "./base-plugin.component"; import {PluginEditEvent} from "./base-plugin.form.component";
@Component({ @Component({
@ -14,7 +14,11 @@ import {PluginEditEvent} from "./base-plugin.component";
<ng-container *ngIf="editingModeOn"> <ng-container *ngIf="editingModeOn">
<!-- <a *ngIf="editingModeOn" class="uk-float-right" (click)="editClicked.emit(null); editingModeOn = false ">close</a>--> <!-- <a *ngIf="editingModeOn" class="uk-float-right" (click)="editClicked.emit(null); editingModeOn = false ">close</a>-->
<!-- <br>--> <!-- <br>-->
<div *ngIf="type == 'text'" input [value]="value" [placeholder]="field.toUpperCase()" type="text" (valueChange)="updateObject($event)" inputClass=" border-bottom "></div>
<!--<input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
[ngModel]="getSelectedPages().length ==checkboxes.length"/>-->
<input *ngIf="type == 'checkbox'" [(ngModel)]="value" [checked]="value" (ngModelChange)="updateObject($event)" type="checkbox" class="uk-checkbox">
<div *ngIf="type == 'text'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="text" (valueChange)="updateObject($event)" inputClass=" border-bottom "></div>
<!--<div *ngIf="type == 'URL'" input [value]="value" [placeholder]="name" type="URL" ></div> <!--<div *ngIf="type == 'URL'" input [value]="value" [placeholder]="name" type="URL" ></div>
<div *ngIf="type == 'HTML'" class="uk-width-1-1"> <div *ngIf="type == 'HTML'" class="uk-width-1-1">
<ckeditor [readonly]="false" <ckeditor [readonly]="false"
@ -39,6 +43,7 @@ export class PluginFieldEditComponent {
@Input() type; @Input() type;
@Input() value; @Input() value;
@Input() field; @Input() field;
@Input() placeholder;
@Output() editClicked:EventEmitter<PluginEditEvent> = new EventEmitter<PluginEditEvent>(); @Output() editClicked:EventEmitter<PluginEditEvent> = new EventEmitter<PluginEditEvent>();
@Output() changed:EventEmitter<PluginEditEvent> = new EventEmitter() @Output() changed:EventEmitter<PluginEditEvent> = new EventEmitter()
editingModeOn: boolean = true; editingModeOn: boolean = true;

54
dashboard/plugins/utils/pluginUtils.ts
View File

@ -1,12 +1,14 @@
import {Option} from "../../../sharedComponents/input/input.component"; import {Option} from "../../../sharedComponents/input/input.component";
import {PluginOpenAIREProducts} from "../components/openaireProducts/plugin-openaire-products.component"; import {PluginOpenAIREProducts} from "../components/openaireProducts/plugin-openaire-products.component";
import {PluginDiscoverBySubcommunity} from "../components/discover-by-subcommunity/plugin-discover-by-subcommunity.component"; import {PluginDiscoverBySubcommunity} from "../components/discover-by-subcommunity/plugin-discover-by-subcommunity.component";
import {PluginBaseInfo} from "./base-plugin.component"; import {PluginBaseInfo, PluginInfoCards, PluginURL} from "./base-plugin.component";
import {PluginGatewayInformation} from "../components/gateway-information/plugin-gateway-information.component"; import {PluginGatewayInformation} from "../components/gateway-information/plugin-gateway-information.component";
import {PluginLearnAndConnect} from "../components/learn-and-connect/plugin-learn-and-connect.component"; import {PluginLearnAndConnect} from "../components/learn-and-connect/plugin-learn-and-connect.component";
import {PluginFeaturedDatasets} from "../components/featured-datasets/plugin-featured-datasets.component"; import {PluginFeaturedDatasets} from "../components/featured-datasets/plugin-featured-datasets.component";
import {PluginHowToUse} from "../components/how-to-use/plugin-how-to-use.component"; import {PluginHowToUse} from "../components/how-to-use/plugin-how-to-use.component";
import {PluginSearchDepositLink} from "../components/search-deposit-link/plugin-search-deposit-link.component"; import {PluginSearchDepositLink} from "../components/search-deposit-link/plugin-search-deposit-link.component";
import {PluginOrganizations} from "../components/organizations/plugin-organizations.component";
import {FormArray, FormGroup, Validators} from "@angular/forms";
export class PluginUtils{ export class PluginUtils{
public attrTypeOptions: Option[] = [ public attrTypeOptions: Option[] = [
@ -17,23 +19,28 @@ export class PluginUtils{
]; ];
public availablePluginCodes: Option[] = [ public availablePluginCodes: Option[] = [
{label:"openaire-products", value:"openaire-products"}, {label:"OpenAIRE products", value:"penaire-products"},
{label:"discover-by-subcommunity", value:"discover-by-subcommunity"}, {label:"Discover by subcommunity", value:"discover-by-subcommunity"},
{label:"gateway-information", value:"gateway-information"}, {label:"Gateway information", value:"gateway-information"},
{label:"search-deposit-link", value:"search-deposit-link"}, {label:"Search/ deposit/ link", value:"search-deposit-link"},
{label:"learn-and-connect", value:"learn-and-connect"}, {label:"Learn and Connect", value:"learn-and-connect"},
{label:"how-to-use", value:"how-to-use"}, {label:"How to use", value:"how-to-use"},
{label:"suggested-repositories", value:"suggested-repositories"}, {label:"Suggested Repositories", value:"suggested-repositories"},
{label:"featured-datasets", value:"featured-datasets"}, {label:"Featured Datasets", value:"featured-datasets"},
{label:"Organizations", value:"organizations"},
{label:"Fos / SDGs", value:"fos-sdgs"},
{label:"Graph info", value:"graph-info"},
{label:"Social", value:"social"},
{label:"Contact us", value:"organizations"},
]; ];
public placementsOptions: Option[] = [ public placementsOptions: Option[] = [
{label:"Right", value:"right"},
{label:"Top", value:"top"}, {label:"Top", value:"top"},
{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:"Bottom", value:"bottom"},
{label:"Left", value:"left"}, {label:"Left", value:"left"},
]; ];
public planOptions: Option[] = [ public planOptions: Option[] = [
@ -41,37 +48,42 @@ export class PluginUtils{
{value: 'extended', label: 'Extended'} {value: 'extended', label: 'Extended'}
]; ];
public static initializeObject(code){
public static initializeObjectAndCompare(code, oldObject = null){
switch(code) { switch(code) {
case 'openaire-products': { case 'openaire-products': {
return new PluginOpenAIREProducts(); return (new PluginOpenAIREProducts()).compare(oldObject);
} }
case 'discover-by-subcommunity': { case 'discover-by-subcommunity': {
return new PluginDiscoverBySubcommunity(); return (new PluginDiscoverBySubcommunity()).compare(oldObject);
} }
case 'gateway-information': { case 'gateway-information': {
return new PluginGatewayInformation(); return (new PluginGatewayInformation()).compare(oldObject);
} }
case 'search-deposit-link': { case 'search-deposit-link': {
return new PluginSearchDepositLink(); return (new PluginSearchDepositLink()).compare(oldObject);
} }
case 'learn-and-connect': { case 'learn-and-connect': {
return new PluginLearnAndConnect(); return (new PluginLearnAndConnect()).compare(oldObject);
} }
case 'how-to-use': { case 'how-to-use': {
return new PluginHowToUse(); return (new PluginHowToUse()).compare(oldObject);
} }
case 'suggested-repositories': { case 'suggested-repositories': {
return new PluginBaseInfo(); return (new PluginBaseInfo()).compare(oldObject);
} }
case 'featured-datasets': { case 'featured-datasets': {
return new PluginFeaturedDatasets(); return (new PluginFeaturedDatasets()).compare(oldObject);
}
case 'organizations': {
return (new PluginOrganizations()).compare(oldObject);
} }
default: { default: {
return new PluginBaseInfo(); return (new PluginBaseInfo()).compare(oldObject);
} }
} }
} }
//
public static updateExistingObject(oldObject, object ){ public static updateExistingObject(oldObject, object ){
if(!oldObject) { if(!oldObject) {
oldObject = Object.assign(object) oldObject = Object.assign(object)

13
dashboard/plugins/wrapper/plugin-edit-wrapper.component.ts
View File

@ -1,12 +1,12 @@
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Plugin} from "../../../utils/entities/adminTool/plugin"; import {Plugin} from "../../../utils/entities/adminTool/plugin";
import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate"; import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
import {PluginEditEvent} from "../utils/base-plugin.component"; import {PluginEditEvent} from "../utils/base-plugin.form.component";
@Component({ @Component({
selector: 'plugin-wrapper-form', selector: 'plugin-wrapper-form',
template: ` template: `
<div class="uk-width-1-1" *ngIf="pluginObject"> <div class="uk-margin-small-right uk-margin-top" *ngIf="pluginObject">
<ng-container *ngIf="pluginTemplate.code == 'openaire-products'"> <ng-container *ngIf="pluginTemplate.code == 'openaire-products'">
<plugin-openaire-products-form [pluginTemplate]="pluginTemplate" [plugin]="plugin" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-openaire-products-form> <plugin-openaire-products-form [pluginTemplate]="pluginTemplate" [plugin]="plugin" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-openaire-products-form>
</ng-container> </ng-container>
@ -20,10 +20,10 @@ import {PluginEditEvent} from "../utils/base-plugin.component";
<plugin-search-deposit-link-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-search-deposit-link-form> <plugin-search-deposit-link-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-search-deposit-link-form>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'learn-and-connect'"> <ng-container *ngIf="pluginTemplate.code == 'learn-and-connect'">
<plugin-learn-and-connect-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-learn-and-connect-form> <plugin-learn-and-connect-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-learn-and-connect-form>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'how-to-use'"> <ng-container *ngIf="pluginTemplate.code == 'how-to-use'">
<plugin-how-to-use [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-how-to-use> <plugin-how-to-use-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-how-to-use-form>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'suggested-repositories'"> <ng-container *ngIf="pluginTemplate.code == 'suggested-repositories'">
<plugin-suggested-repositories [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-suggested-repositories> <plugin-suggested-repositories [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-suggested-repositories>
@ -31,6 +31,9 @@ import {PluginEditEvent} from "../utils/base-plugin.component";
<ng-container *ngIf="pluginTemplate.code == 'featured-datasets'"> <ng-container *ngIf="pluginTemplate.code == 'featured-datasets'">
<plugin-featured-datasets-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-featured-datasets-form> <plugin-featured-datasets-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-featured-datasets-form>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'organizations'">
<plugin-organizations-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-organizations-form>
</ng-container>
</div> </div>
`, `,
@ -43,7 +46,7 @@ export class PluginEditWrapperComponent implements OnInit {
@Input() editTemplate:boolean; @Input() editTemplate:boolean;
@Input() pluginObject; @Input() pluginObject;
@Output() changed:EventEmitter<PluginEditEvent> = new EventEmitter(); @Output() changed:EventEmitter<PluginEditEvent> = new EventEmitter();
@Input() editSubmenuOpen;
ngOnInit(): void { ngOnInit(): void {
} }

7
dashboard/plugins/wrapper/plugin-edit-wrapper.module.ts
View File

@ -10,13 +10,16 @@ import {PluginDiscoverBySubcommunityFormComponent} from "../components/discover-
import {PluginFeaturedDatasetsFormComponent} from "../components/featured-datasets/plugin-featured-datasets.form.component"; import {PluginFeaturedDatasetsFormComponent} from "../components/featured-datasets/plugin-featured-datasets.form.component";
import {PluginGatewayInformationFormComponent} from "../components/gateway-information/plugin-gateway-information.form.component"; import {PluginGatewayInformationFormComponent} from "../components/gateway-information/plugin-gateway-information.form.component";
import {PluginSearchDepositLinkFormComponent} from "../components/search-deposit-link/plugin-search-deposit-link.form.component"; import {PluginSearchDepositLinkFormComponent} from "../components/search-deposit-link/plugin-search-deposit-link.form.component";
import {PluginOrganizationsFormComponent} from "../components/organizations/plugin-organizations.form.component";
import {IconsModule} from "../../../utils/icons/icons.module";
import {PluginHowToUseFormComponent} from "../components/how-to-use/plugin-how-to-use.form.component";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, PluginFieldEditModule CommonModule, RouterModule, FormsModule, PluginFieldEditModule, IconsModule
], ],
declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginLearnAndConnectFormComponent, declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginLearnAndConnectFormComponent,
PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent], PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginHowToUseFormComponent],
exports: [PluginEditWrapperComponent] exports: [PluginEditWrapperComponent]
}) })

7
dashboard/plugins/wrapper/plugin-wrapper.component.ts
View File

@ -1,8 +1,6 @@
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {Plugin} from "../../../utils/entities/adminTool/plugin"; import {Plugin} from "../../../utils/entities/adminTool/plugin";
import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate"; import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
import {PluginEditEvent} from "../utils/base-plugin.component";
import {PluginUtils} from "../utils/pluginUtils";
@Component({ @Component({
selector: 'plugin-wrapper', selector: 'plugin-wrapper',
@ -33,6 +31,9 @@ import {PluginUtils} from "../utils/pluginUtils";
<ng-container *ngIf="pluginTemplate.code == 'featured-datasets'"> <ng-container *ngIf="pluginTemplate.code == 'featured-datasets'">
<plugin-featured-datasets [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" ></plugin-featured-datasets> <plugin-featured-datasets [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" ></plugin-featured-datasets>
</ng-container> </ng-container>
<ng-container *ngIf="pluginTemplate.code == 'organizations'">
<plugin-organizations [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject" ></plugin-organizations>
</ng-container>
</div> </div>
</ng-container> </ng-container>
` `

3
dashboard/plugins/wrapper/plugin-wrapper.module.ts
View File

@ -11,12 +11,13 @@ import {PluginLearnAndConnectModule} from '../components/learn-and-connect/plugi
import {PluginHowToUseModule} from '../components/how-to-use/plugin-how-to-use.module'; import {PluginHowToUseModule} from '../components/how-to-use/plugin-how-to-use.module';
import {PluginSuggestedRepositoriesModule} from '../components/suggested-repositories/plugin-suggested-repositories.module'; import {PluginSuggestedRepositoriesModule} from '../components/suggested-repositories/plugin-suggested-repositories.module';
import {PluginFeaturedDatasetsModule} from '../components/featured-datasets/plugin-featured-datasets.module'; import {PluginFeaturedDatasetsModule} from '../components/featured-datasets/plugin-featured-datasets.module';
import {PluginOrganizationsModule} from "../components/organizations/plugin-organizations.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule, CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule,
PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginLearnAndConnectModule, PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginLearnAndConnectModule,
PluginHowToUseModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule PluginHowToUseModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule
], ],
declarations: [PluginWrapperComponent], declarations: [PluginWrapperComponent],
exports: [PluginWrapperComponent] exports: [PluginWrapperComponent]