plugins-functionality #43

Merged
argiro.kokogiannaki merged 86 commits from plugins-functionality into develop 2024-06-13 09:14:22 +02:00
10 changed files with 120 additions and 52 deletions
Showing only changes of commit 750b279ed3 - Show all commits

View File

@ -1,4 +1,4 @@
<div *ngIf="!community " class="uk-text-muted uk-text-center"> <div *ngIf="!community " class="uk-text-meta uk-text-center">
No community info available No community info available
</div> </div>
<div class="uk-section uk-container "> <div class="uk-section uk-container ">
@ -64,8 +64,9 @@
</div> </div>
<div> <div>
<div class="heroBackground generalSearchForm uk-border-rounded uk-padding uk-margin-medium-bottom"> <div class="heroBackground generalSearchForm uk-border-rounded uk-padding uk-margin-medium-bottom"
<!-- <img class="plugin-background" src="assets/common-assets/connect_image_faded.png">--> [class.uk-light]="!this.fontsDarkMode"
[style]="style">
<div class="plugin-content"> <div class="plugin-content">
<div class="uk-text-lead uk-text-large uk-text-bold uk-margin-bottom"> <div class="uk-text-lead uk-text-large uk-text-bold uk-margin-bottom">
{{ pluginObject.title}} {{ pluginObject.title}}
@ -96,7 +97,7 @@
[attr.uk-tooltip]="'pos: bottom-right; delay: 10;'" [attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin> class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin>
<icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true" <icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true"
[customClass]="'uk-text-muted'"></icon> [customClass]="'uk-text-meta'"></icon>
</a> </a>
</span> </span>
</div> </div>
@ -115,7 +116,7 @@
[attr.uk-tooltip]="'pos: bottom-right; delay: 10;'" [attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin> class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin>
<icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true" <icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true"
[customClass]="'uk-text-muted'"></icon> [customClass]="'uk-text-meta'"></icon>
</a> </a>
</span> </span>
</div> </div>
@ -134,7 +135,7 @@
[attr.uk-tooltip]="'pos: bottom-right; delay: 10;'" [attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin> class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin>
<icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true" <icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true"
[customClass]="'uk-text-muted'"></icon> [customClass]="'uk-text-meta'"></icon>
</a> </a>
</span> </span>
</div> </div>

View File

@ -12,7 +12,7 @@ import {HttpClient} from "@angular/common/http";
import {Filter} from "../../../../searchPages/searchUtils/searchHelperClasses.class"; import {Filter} from "../../../../searchPages/searchUtils/searchHelperClasses.class";
import {Router} from "@angular/router"; import {Router} from "@angular/router";
import {SearchResearchResultsService} from "../../../../services/searchResearchResults.service"; import {SearchResearchResultsService} from "../../../../services/searchResearchResults.service";
import {properties} from "../../../../../../environments/environment"; import {CustomizationService} from "../../../../services/customization.service";
export class PluginGatewayInformation extends PluginBaseInfo{ export class PluginGatewayInformation extends PluginBaseInfo{
showTitle:boolean = true; showTitle:boolean = true;
@ -36,7 +36,6 @@ export class PluginGatewayInformation extends PluginBaseInfo{
compare(oldObject): any { compare(oldObject): any {
let newObj= super.compare(oldObject); let newObj= super.compare(oldObject);
console.log("PluginGatewayInformation", oldObject, newObj)
return newObj; return newObj;
} }
} }
@ -103,7 +102,7 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
private searchCommunityDataprovidersService: SearchCommunityDataprovidersService, private searchCommunityDataprovidersService: SearchCommunityDataprovidersService,
private zenodoCommunitiesService: ZenodoCommunitiesService, private _router: Router, private zenodoCommunitiesService: ZenodoCommunitiesService, private _router: Router,
private _searchResearchResultsService: SearchResearchResultsService, private _searchResearchResultsService: SearchResearchResultsService,
private cdr: ChangeDetectorRef) { private cdr: ChangeDetectorRef, protected layoutService: CustomizationService) {
super(); super();
this.searchLinkToResults = this.properties.searchLinkToResults; this.searchLinkToResults = this.properties.searchLinkToResults;
this.searchLinkToProjects = this.properties.searchLinkToProjects; this.searchLinkToProjects = this.properties.searchLinkToProjects;
@ -182,7 +181,11 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
} }
ngOnInit() {
if (this.community) {
this.getLayout(this.community.communityId);
}
}
isEntityEnabled(entity: string) { isEntityEnabled(entity: string) {
return this.portal.entities.some(x => x['pid'] == entity && x['isEnabled'] === true); return this.portal.entities.some(x => x['pid'] == entity && x['isEnabled'] === true);
} }

View File

@ -15,7 +15,7 @@ import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
<div class="uk-margin-top uk-text-meta uk-text-xsmall "> <div class="uk-margin-top uk-text-meta uk-text-xsmall ">
Community info Community info
</div> </div>
<div class="uk-alert uk-alert-warning uk-text-small"> Manage community info <a routerLink="../../info/profile" target="_blank">here</a>.</div>
<div class="uk-grid uk-child-width-1-1 uk-text-small uk-hr "> <div class="uk-grid uk-child-width-1-1 uk-text-small uk-hr ">
<div class="uk-margin-xsmall-bottom uk-margin-xsmall-top"> <div class="uk-margin-xsmall-bottom uk-margin-xsmall-top">
<plugin-field-edit [value]=" pluginObject.showTitle" <plugin-field-edit [value]=" pluginObject.showTitle"
@ -89,6 +89,7 @@ import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
</plugin-field-edit> </plugin-field-edit>
Subjects Subjects
</div> </div>
<div class="uk-alert uk-alert-warning uk-text-small uk-padding-xsmall uk-margin-medium-left "> Manage community info <a routerLink="../../info/profile" target="_blank">here</a>.</div>
<div class="uk-margin-top uk-text-meta uk-text-xsmall"> <div class="uk-margin-top uk-text-meta uk-text-xsmall">
Pages & menus Pages & menus
</div> </div>
@ -146,8 +147,12 @@ import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
</div> </div>
</div> </div>
<div class="uk-alert uk-alert-warning uk-text-small"> If some information is enabled here, <div class="uk-alert uk-alert-warning uk-text-small uk-padding-xsmall"> 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> but still not visible, please check related <a routerLink="../entities" target="_blank">entity</a> or <a routerLink="../pages" target="_blank">page</a>.
</div>
<div class="uk-alert uk-alert-warning uk-text-small uk-padding-xsmall">
Change the custom section background options <a routerLink="../../customize-layout" target="_blank"> here.</a>
</div>
</div> </div>
`, `,

View File

@ -17,11 +17,12 @@ import {AdvancedSearchInputModule} from "../../../../sharedComponents/advanced-s
import {EntitiesSelectionModule} from "../../../../searchPages/searchUtils/entitiesSelection.module"; import {EntitiesSelectionModule} from "../../../../searchPages/searchUtils/entitiesSelection.module";
import {QuickSelectionsModule} from "../../../../searchPages/searchUtils/quick-selections.module"; import {QuickSelectionsModule} from "../../../../searchPages/searchUtils/quick-selections.module";
import {InputModule} from "../../../../sharedComponents/input/input.module"; import {InputModule} from "../../../../sharedComponents/input/input.module";
import {CustomizationServiceModule} from "../../../../services/customizationService.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule, CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule,
CuratorsModule, AdvancedSearchInputModule, EntitiesSelectionModule, QuickSelectionsModule, InputModule CuratorsModule, AdvancedSearchInputModule, EntitiesSelectionModule, QuickSelectionsModule, InputModule, CustomizationServiceModule
], ],
providers: [ providers: [
PluginsService, SearchCommunityProjectsService, SearchCommunityDataprovidersService, ZenodoCommunitiesService PluginsService, SearchCommunityProjectsService, SearchCommunityDataprovidersService, ZenodoCommunitiesService

View File

@ -6,9 +6,7 @@
<div> <div>
<div style="max-width: 550px;"> <div style="max-width: 550px;">
<h2>{{pluginObject.title}}</h2> <h2>{{pluginObject.title}}</h2>
<div class=""> <div class="" [innerHTML]="pluginObject.paragraph1">
{{pluginObject.paragraph1}}
</div> </div>
</div> </div>
</div> </div>
@ -22,9 +20,7 @@
<div class="uk-section uk-padding-remove-top"> <div class="uk-section uk-padding-remove-top">
<div class="uk-container"> <div class="uk-container">
<div class="uk-width-1-2@m uk-margin-auto uk-margin-small-top uk-text-center" style="max-width: 600px;"> <div class="uk-width-1-2@m uk-margin-auto uk-margin-small-top uk-text-center" style="max-width: 600px;">
<div> <div [innerHTML]="pluginObject.paragraph2"></div>
{{pluginObject.paragraph2}}
</div>
<div class="uk-margin-top"> <div class="uk-margin-top">
<a [href]="pluginObject.url.url" [target]="pluginObject.url.target" <a [href]="pluginObject.url.url" [target]="pluginObject.url.target"

View File

@ -1,4 +1,5 @@
<div *ngIf="pluginObject" #parent class="heroBackground generalSearchForm "> <div *ngIf="pluginObject" #parent class="heroBackground generalSearchForm " [class.uk-light]="!this.fontsDarkMode"
[style]="style">
<div class="uk-section uk-container "> <div class="uk-section uk-container ">
<div class="uk-width-1-1 uk-margin-medium-bottom"> <div class="uk-width-1-1 uk-margin-medium-bottom">
<h2 class="uk-margin-remove-top uk-text-center "> <h2 class="uk-margin-remove-top uk-text-center ">

View File

@ -2,6 +2,8 @@ import {Component} from '@angular/core';
import {PluginBaseComponent, PluginBaseInfo, 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";
import {CustomizationService} from "../../../../services/customization.service";
import {CommunityService} from "../../../../connect/community/community.service";
export class PluginSearchDepositLink extends PluginBaseInfo{ 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";
cardInfoArray: PluginInfoCards[] = [ cardInfoArray: PluginInfoCards[] = [
@ -22,7 +24,6 @@ export class PluginSearchDepositLink extends PluginBaseInfo{
compare(oldObject): any { compare(oldObject): any {
let newObj= super.compare(oldObject); let newObj= super.compare(oldObject);
console.log("PluginSearchDepositLink", oldObject, newObj)
return newObj; return newObj;
} }
} }
@ -34,9 +35,16 @@ export class PluginSearchDepositLink extends PluginBaseInfo{
export class PluginSearchDepositLinkComponent extends PluginBaseComponent<PluginSearchDepositLink>{ export class PluginSearchDepositLinkComponent extends PluginBaseComponent<PluginSearchDepositLink>{
entities= OpenaireEntities; entities= OpenaireEntities;
constructor() { constructor(private communityService: CommunityService, protected layoutService: CustomizationService) {
super() super()
} }
ngOnInit() {
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
community => {
this.getLayout(community.communityId);
}));
}
get activeCards(){ get activeCards(){
return this.pluginObject.cardInfoArray.filter( card => card.show); return this.pluginObject.cardInfoArray.filter( card => card.show);

View File

@ -32,6 +32,9 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
</div> </div>
</ng-container> </ng-container>
<div class="uk-alert uk-alert-warning uk-text-small uk-padding-xsmall">
Change the custom section background options <a routerLink="../../customize-layout" target="_blank"> here.</a>
</div>
</ng-container> </ng-container>
<ng-container *ngIf="selectedIndex > -1"> <ng-container *ngIf="selectedIndex > -1">
<div *ngIf="editTemplate" class="back uk-margin-bottom"> <div *ngIf="editTemplate" class="back uk-margin-bottom">

View File

@ -4,20 +4,24 @@ import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
import {EnvProperties} from "../../../utils/properties/env-properties"; 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";
import {CustomizationOptions, Layout} from "../../../connect/community/CustomizationOptions";
import {CustomizationService} from "../../../services/customization.service";
export class PluginBaseInfo { export class PluginBaseInfo {
title: string = "Lorem ipsum"; title: string = "Lorem ipsum";
constructor() { constructor() {
} }
compare(oldObject){
if(!oldObject) { compare(oldObject) {
if (!oldObject) {
oldObject = Object.assign(this) oldObject = Object.assign(this)
}else{ } else {
for (let attrKey of Object.keys(this)) { for (let attrKey of Object.keys(this)) {
if (!oldObject[attrKey] && oldObject[attrKey] != false) { if (!oldObject[attrKey] && oldObject[attrKey] != false) {
if(typeof this[attrKey] === "string" || typeof this[attrKey] === "boolean" ){ if (typeof this[attrKey] === "string" || typeof this[attrKey] === "boolean") {
oldObject[attrKey] = this[attrKey]; oldObject[attrKey] = this[attrKey];
}else { } else {
oldObject[attrKey] = Object.assign(this[attrKey]) oldObject[attrKey] = Object.assign(this[attrKey])
} }
} }
@ -26,12 +30,14 @@ export class PluginBaseInfo {
return oldObject; 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) {
this.url = url; this.url = url;
this.linkText = linkText; this.linkText = linkText;
this.target = target; this.target = target;
@ -40,25 +46,31 @@ export class PluginURL {
} }
export class PluginInfoCards{ export class PluginInfoCards {
tag?:string; tag?: string;
title:string; title: string;
description:string; description: string;
urlsArray:PluginURL[]; urlsArray: PluginURL[];
image?:string; image?: string;
show:boolean; show: boolean;
} }
@Directive()
export abstract class PluginBaseComponent<T extends PluginBaseInfo> implements OnDestroy {
public properties: EnvProperties = properties;
@Input() plugin:Plugin;
@Input() pluginTemplate:PluginTemplate;
@Input() pluginObject:T;
@Input() previewInAdmin:boolean = false;
subscriptions = [];
constructor() {
@Directive()
export abstract class PluginBaseComponent<T extends PluginBaseInfo> implements OnDestroy {
public properties: EnvProperties = properties;
@Input() plugin: Plugin;
@Input() pluginTemplate: PluginTemplate;
@Input() pluginObject: T;
@Input() previewInAdmin: boolean = false;
subscriptions = [];
customizationOptions: CustomizationOptions;
style:string ='';
fontsDarkMode:boolean = true;
protected layoutService: CustomizationService
constructor( ) {
} }
ngOnInit(): void { ngOnInit(): void {
} }
@ -76,9 +88,30 @@ export class PluginInfoCards{
}); });
} }
isVisible(field){ isVisible(field) {
return (this.plugin && this.pluginObject && this.pluginObject[field] == true) /* plugin is on anyway */ 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 */ || (!this.plugin && this.pluginTemplate && this.pluginObject && this.pluginObject[field] == true) /* template is on */
} }
getLayout(communityId) {
if (this.previewInAdmin) {
let defaultCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
this.subscriptions.push(this.layoutService.getLayout(this.properties, communityId).subscribe(layout => {
layout = (layout ? layout : new Layout(communityId, defaultCustomizationOptions));
this.customizationOptions = (layout ? CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions, communityId) : Object.assign({}, defaultCustomizationOptions));
this.setStyle()
}, error => {
this.customizationOptions = defaultCustomizationOptions;
this.setStyle();
}));
}
}
setStyle() {
this.style = `background-color: ` + this.customizationOptions.backgrounds.form.color + `;
background-image: ` + (this.customizationOptions.backgrounds.form.imageFile ? (Layout.getUrl(properties.utilsService + '/download/' + this.customizationOptions.backgrounds.form.imageFile)) : 'none') + `;
background-position:` + this.customizationOptions.backgrounds.form.position + `;`
this.fontsDarkMode = this.customizationOptions.backgrounds.form.fontsDarkMode;
}
} }

View File

@ -0,0 +1,17 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {CustomizationService} from "./customization.service";
@NgModule({
imports: [
CommonModule
],
declarations: [],
providers: [
CustomizationService
],
exports: []
})
export class CustomizationServiceModule {
}