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

[plugins-functionality | WIP ] Plugins change background when preview in admin

This commit is contained in:
argirok 2024-04-01 13:15:52 +03:00
parent 50051f2de8
commit 750b279ed3
10 changed files with 120 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
dashboard/plugins/components/gateway-information/plugin-gateway-information.component.html
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
</div>
<div class="uk-section uk-container ">
@ -64,8 +64,9 @@
</div>
<div>
<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">-->
<div class="heroBackground generalSearchForm uk-border-rounded uk-padding uk-margin-medium-bottom"
[class.uk-light]="!this.fontsDarkMode"
[style]="style">
<div class="plugin-content">
<div class="uk-text-lead uk-text-large uk-text-bold uk-margin-bottom">
{{ pluginObject.title}}
@ -96,7 +97,7 @@
[attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin>
<icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true"
[customClass]="'uk-text-muted'"></icon>
[customClass]="'uk-text-meta'"></icon>
</a>
</span>
</div>
@ -115,7 +116,7 @@
[attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin>
<icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true"
[customClass]="'uk-text-muted'"></icon>
[customClass]="'uk-text-meta'"></icon>
</a>
</span>
</div>
@ -134,7 +135,7 @@
[attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin>
<icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true"
[customClass]="'uk-text-muted'"></icon>
[customClass]="'uk-text-meta'"></icon>
</a>
</span>
</div>

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

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

11
dashboard/plugins/components/gateway-information/plugin-gateway-information.form.component.ts
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 ">
Community info
</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-margin-xsmall-bottom uk-margin-xsmall-top">
<plugin-field-edit [value]=" pluginObject.showTitle"
@ -89,6 +89,7 @@ import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
</plugin-field-edit>
Subjects
</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">
Pages & menus
</div>
@ -146,8 +147,12 @@ import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
</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 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>
<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>
`,

3
dashboard/plugins/components/gateway-information/plugin-gateway-information.module.ts
View File

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

8
dashboard/plugins/components/graph-info/plugin-graph-info.component.html
View File

@ -6,9 +6,7 @@
<div>
<div style="max-width: 550px;">
<h2>{{pluginObject.title}}</h2>
<div class="">
{{pluginObject.paragraph1}}
<div class="" [innerHTML]="pluginObject.paragraph1">
</div>
</div>
</div>
@ -22,9 +20,7 @@
<div class="uk-section uk-padding-remove-top">
<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>
{{pluginObject.paragraph2}}
</div>
<div [innerHTML]="pluginObject.paragraph2"></div>
<div class="uk-margin-top">
<a [href]="pluginObject.url.url" [target]="pluginObject.url.target"

3
dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html
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-width-1-1 uk-margin-medium-bottom">
<h2 class="uk-margin-remove-top uk-text-center ">

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

@ -2,6 +2,8 @@ import {Component} from '@angular/core';
import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
import {OpenaireEntities} from "../../../../utils/properties/searchFields";
import {properties} from "../../../../../../environments/environment";
import {CustomizationService} from "../../../../services/customization.service";
import {CommunityService} from "../../../../connect/community/community.service";
export class PluginSearchDepositLink extends PluginBaseInfo{
title:string ="Search, link and deposit your research in one place";
cardInfoArray: PluginInfoCards[] = [
@ -22,7 +24,6 @@ export class PluginSearchDepositLink extends PluginBaseInfo{
compare(oldObject): any {
let newObj= super.compare(oldObject);
console.log("PluginSearchDepositLink", oldObject, newObj)
return newObj;
}
}
@ -34,9 +35,16 @@ export class PluginSearchDepositLink extends PluginBaseInfo{
export class PluginSearchDepositLinkComponent extends PluginBaseComponent<PluginSearchDepositLink>{
entities= OpenaireEntities;
constructor() {
constructor(private communityService: CommunityService, protected layoutService: CustomizationService) {
super()
}
ngOnInit() {
this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
community => {
this.getLayout(community.communityId);
}));
}
get activeCards(){
return this.pluginObject.cardInfoArray.filter( card => card.show);

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

@ -32,6 +32,9 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
</div>
</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 *ngIf="selectedIndex > -1">
<div *ngIf="editTemplate" class="back uk-margin-bottom">

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

@ -4,20 +4,24 @@ import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
import {EnvProperties} from "../../../utils/properties/env-properties";
import {properties} from 'src/environments/environment';
import {Subscriber} from "rxjs";
import {CustomizationOptions, Layout} from "../../../connect/community/CustomizationOptions";
import {CustomizationService} from "../../../services/customization.service";
export class PluginBaseInfo {
title: string = "Lorem ipsum";
constructor() {
}
compare(oldObject){
if(!oldObject) {
compare(oldObject) {
if (!oldObject) {
oldObject = Object.assign(this)
}else{
} else {
for (let attrKey of Object.keys(this)) {
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];
}else {
} else {
oldObject[attrKey] = Object.assign(this[attrKey])
}
}
@ -26,12 +30,14 @@ export class PluginBaseInfo {
return oldObject;
}
}
export class PluginURL {
url:string;
url: string;
linkText: string;
target:string;
route:boolean;
constructor(url,linkText, target = "_blank",route = false) {
target: string;
route: boolean;
constructor(url, linkText, target = "_blank", route = false) {
this.url = url;
this.linkText = linkText;
this.target = target;
@ -40,25 +46,31 @@ export class PluginURL {
}
export class PluginInfoCards{
tag?:string;
title:string;
description:string;
urlsArray:PluginURL[];
image?:string;
show:boolean;
export class PluginInfoCards {
tag?: string;
title: string;
description: string;
urlsArray: PluginURL[];
image?: string;
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 {
}
@ -76,9 +88,30 @@ export class PluginInfoCards{
});
}
isVisible(field){
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 */
}
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;
}
}

17
services/customizationService.module.ts Normal file
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 {
}