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

dashboard/plugins/components/gateway-information/plugin-gateway-information.component.html

@@ -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">
+      <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="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>

dashboard/plugins/components/gateway-information/plugin-gateway-information.component.ts

@@ -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,8 +102,8 @@ 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();
+    super();
     this.searchLinkToResults = this.properties.searchLinkToResults;
     this.searchLinkToProjects = this.properties.searchLinkToProjects;
     this.searchLinkToDataProviders = this.properties.searchLinkToDataProviders;
@@ -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);
   }

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

@@ -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, 
+      <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>
   `,
 

dashboard/plugins/components/gateway-information/plugin-gateway-information.module.ts

@@ -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

dashboard/plugins/components/graph-info/plugin-graph-info.component.html

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

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

@@ -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 ">

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

@@ -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);

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

@@ -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">

dashboard/plugins/utils/base-plugin.component.ts

@@ -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;
+  target: string;
-  route:boolean;
+  route: boolean;
-  constructor(url,linkText, target = "_blank",route = false) {
+
+  constructor(url, linkText, target = "_blank", route = false) {
     this.url = url;
     this.linkText = linkText;
     this.target = target;
@@ -40,29 +46,35 @@ 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 {
   }
 
-    ngOnDestroy() {
+  ngOnDestroy() {
     this.subscriptions.forEach(subscription => {
       if (subscription instanceof Subscriber) {
         subscription.unsubscribe()
@@ -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 */
+      || (!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;
+
+  }
 }

services/customizationService.module.ts

@@ -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 {
+}