Clean up customization component, rename layoutService to customizationService, change the way default and connect css are renderes (read layout date from admin service)

server.ts

@@ -95,10 +95,9 @@ function buildAll(res: Response = null) {
     }
   });
 }
-properties.portalBuildTime = (new Date()).valueOf();
+if(properties.environment == 'development') {
-buildCss('connect', properties.portalBuildTime);
+  buildAll();
-buildCss('default', properties.portalBuildTime);
+}
-buildAll();
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {
@@ -187,11 +186,11 @@ export function app() {
   });
   
   server.post('/build-css/:id/:suffix', (req, res) => {
-    let layoutURL = properties.adminToolsAPIURL + '/community/' + req.params.id + '/layout';
+    let layoutURL = properties.adminToolsAPIURL + (req.params.id == 'connect' || req.params.id == 'default'? '/connect/': '/community/') + req.params.id + '/layout';
     axios.get(layoutURL).then(response => {
       if (response.data) {
-        let variables = Layout.getVariables(response.data);
+        let variables = (req.params.id == 'connect' || req.params.id == 'default')?null:Layout.getVariables(response.data);
-        if (variables) {
+        if (variables || (req.params.id == 'connect' || req.params.id == 'default')) {
           buildCss(response.data.portalPid, req.params.suffix, variables);
         }
         res.status(200).send({

src/app/app.component.ts

@@ -11,12 +11,12 @@ import {UserManagementService} from "./openaireLibrary/services/user-management.
 import {ConfigurationService} from "./openaireLibrary/utils/configuration/configuration.service";
 import {properties} from '../environments/environment';
 import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
-import {Subscriber} from "rxjs";
+import {AsyncSubject, Subscriber} from "rxjs";
 import {CommunityService} from "./openaireLibrary/connect/community/community.service";
 import {StringUtils} from "./openaireLibrary/utils/string-utils.class";
 import {LoginErrorCodes} from "./openaireLibrary/login/utils/guardHelper.class";
 import {CustomizationOptions, Layout} from "./openaireLibrary/connect/community/CustomizationOptions";
-import {LayoutService} from "./openaireLibrary/services/layout.service";
+import {CustomizationService} from "./openaireLibrary/services/customization.service";
 import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
 import {Meta} from "@angular/platform-browser";
 import {CommunityInfo} from "./openaireLibrary/connect/community/communityInfo";
@@ -127,12 +127,16 @@ export class AppComponent implements OnInit, OnDestroy {
   @ViewChild('quickContact') quickContact: QuickContactComponent;
   private subscriptions = [];
   layout: Layout = null;
+  layouts: Layout[] = null;
+  layoutDefault: Layout = null;
+  layoutConnect: Layout = null;
+  layoutSub = new AsyncSubject();
   previewLayout = null;
   constructor(private  route: ActivatedRoute, private propertiesService: EnvironmentSpecificService,
               private _communitiesService: CommunitiesService, private smoothScroll: SmoothScroll,
               private router: Router, private userManagementService: UserManagementService,
               private configurationService: ConfigurationService, private _communityService: CommunityService,
-              private _layoutService: LayoutService, private _meta: Meta, private seoService: SEOService,
+              private customizationService: CustomizationService, private _meta: Meta, private seoService: SEOService,
               private quickContactService: QuickContactService,
               private fb: FormBuilder,
               private emailService: EmailService,
@@ -148,17 +152,19 @@ export class AppComponent implements OnInit, OnDestroy {
         this.showGetStarted = event.url !== '/get-started';
       }
     }));
+    this.getLayouts();
   }
   
   ngOnInit() {
-    if (this.properties.environment == "production" || this.properties.environment == "development") {
+
       this.subscriptions.push(this.route.queryParams.subscribe(data => {
         this.previewLayout = (data['previewLayout'] && data['previewLayout'].length >0 ? data['previewLayout']: null);
-        this._meta.updateTag({content: 'all', name: 'robots'});
+        if (this.properties.environment == "production" || this.properties.environment == "development") {
-        this.seoService.removeLinkForPrevURL();
+          this._meta.updateTag({content: 'all', name: 'robots'});
-        this.seoService.removeLinkForNextURL();
+          this.seoService.removeLinkForPrevURL();
+          this.seoService.removeLinkForNextURL();
+        }
       }));
-    }
     this._communitiesService.updateCommunities(this.properties, this.properties.communitiesAPI);
     if (typeof document !== 'undefined') {
       try {
@@ -231,7 +237,7 @@ export class AppComponent implements OnInit, OnDestroy {
         renderer.appendChild(head, script);
       }else if(!this.previewLayout){
         this.document.getElementById("dashboardStyle").href =  ((communityId) ? communityId : this.properties.adminToolsPortalType)+ (suffix?"-"+suffix:"") + ".css";
-        console.log(this.document.getElementById("dashboardStyle"));
+        // console.log(this.document.getElementById("dashboardStyle"));
       }
 
     } catch (e) {
@@ -249,34 +255,33 @@ export class AppComponent implements OnInit, OnDestroy {
     }else{
       this.properties.adminToolsPortalType = "connect";
       if (typeof document === 'undefined') {
-        this.initCss("connect", this.properties.portalBuildTime);
+        this.initLayout('connect');
       }
     }
     this.configurationService.initCommunityInformation(this.properties, (communityId) ? communityId : this.properties.adminToolsPortalType);
 
   }
-  initLayout(communityId){
+  getLayouts(){
-    if(!this.layout && (typeof location == 'undefined' || (typeof location !== 'undefined'  && location.pathname.indexOf("/preview") == -1)) && !this.previewLayout) {
+    this.customizationService.getLayouts(this.properties).subscribe(
-      this._layoutService.getLayout(this.properties, communityId).subscribe(
+    layouts => {
-        layout => {
+      this.layouts = layouts;
-          this.layout = layout;
+      this.layoutDefault = layouts.filter(layout => layout.portalPid == 'default')[0];
-          if (layout) {
+      this.layoutConnect = layouts.filter(layout => layout.portalPid == 'connect')[0];
-            this.layout.layoutOptions = CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId);
+      this.layoutSub.next(this.layouts);
-            console.log(this.layout.date);
+      this.layoutSub.complete();
-            console.log(this.layout.date?(new Date(this.layout.date)).toISOString():null);
+    },
-            this.initCss(communityId, this.layout.date?this.layout.date:null)
+    error => {
-            // this.initCss("default");
+
-          } else {
+    }
-            // this.layout.layoutOptions = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
+  );
-            this.initCss("default", this.properties.portalBuildTime);
+  }
-          }
+  initLayout(communityId){
+    if(!this.layout && (typeof location == 'undefined') && !this.previewLayout) {
+      this.subscriptions.push(this.layoutSub.subscribe(value => {
+        this.layout = this.layouts.filter(layout => layout.portalPid == communityId)[0]?this.layouts.filter(layout => layout.portalPid == communityId)[0]:this.layouts.filter(layout => layout.portalPid == 'default')[0];
+        this.initCss(this.layout.portalPid, this.layout.date?this.layout.date:null)
+      }));
 
-        },
-        error => {
-          this.layout.layoutOptions = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
-          this.initCss("default", this.properties.portalBuildTime);
-        }
-      );
     }else if(this.previewLayout && this.previewLayout.split("-preview-")[0] == communityId){
       this.initCss(communityId, this.previewLayout.split(communityId)[1]);
     }

src/app/app.module.ts

@@ -15,9 +15,7 @@ import {BottomModule} from './openaireLibrary/sharedComponents/bottom.module';
 import {ErrorModule} from './openaireLibrary/error/error.module';
 import {NavigationBarModule} from './openaireLibrary/sharedComponents/navigationBar.module';
 import {CommunitiesService} from './openaireLibrary/connect/communities/communities.service';
-import {LayoutService} from "./openaireLibrary/services/layout.service";
 import {SubscribeModule} from './utils/subscribe/subscribe.module';
-import {CustomizationModule} from "./utils/customization/customization.module";
 import {HttpInterceptorService} from "./openaireLibrary/http-interceptor.service";
 import {InviteBasicModule} from "./utils/subscribe/invite/inviteBasic.module";
 import {PageURLResolverModule} from "./openaireLibrary/utils/pageURLResolver.module";
@@ -29,6 +27,7 @@ import {SubscribeService} from "./openaireLibrary/utils/subscribe/subscribe.serv
 import {RoleVerificationModule} from "./openaireLibrary/role-verification/role-verification.module";
 import {QuickContactModule} from "./openaireLibrary/sharedComponents/quick-contact/quick-contact.module";
 import {AlertModalModule} from "./openaireLibrary/utils/modal/alertModal.module";
+import {CustomizationService} from "./openaireLibrary/services/customization.service";
 
 @NgModule({
   
@@ -41,7 +40,6 @@ import {AlertModalModule} from "./openaireLibrary/utils/modal/alertModal.module"
     NavigationBarModule,
     BottomModule,
     CookieLawModule,
-    CustomizationModule,
     SubscribeModule.forRoot(), InviteBasicModule,
     BrowserModule.withServerTransition({appId: 'serverApp'}),
     AppRoutingModule,
@@ -52,7 +50,7 @@ import {AlertModalModule} from "./openaireLibrary/utils/modal/alertModal.module"
   declarations: [AppComponent, OpenaireErrorPageComponent],
   exports: [AppComponent],
   providers: [
-    CommunitiesService, LayoutService, IsCommunity, SubscribeService,
+    CommunitiesService, CustomizationService, IsCommunity, SubscribeService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpInterceptorService,

src/app/demo/demo.component.html

@@ -1,5 +1,3 @@
-<customization *ngIf="layout" [properties]="properties"
-               [layout]="layout" ></customization>
 <div class="">
    <div
     class="uk-padding    generalSearchForm   midBackground  ">

src/app/demo/demo.module.ts

@@ -4,7 +4,6 @@ import {DemoComponent} from "./demo.component";
 import {CommonModule} from "@angular/common";
 import {RouterModule} from "@angular/router";
 import {TabsModule} from "../openaireLibrary/utils/tabs/tabs.module";
-import {CustomizationModule} from "../utils/customization/customization.module";
 import {ResultPreviewModule} from "../openaireLibrary/utils/result-preview/result-preview.module";
 import {ResultLandingModule} from "../openaireLibrary/landingPages/result/resultLanding.module";
 
@@ -16,7 +15,6 @@ import {ResultLandingModule} from "../openaireLibrary/landingPages/result/result
       {path: '', component: DemoComponent}
     ]),
     TabsModule,
-    CustomizationModule,
     ResultPreviewModule,
     ResultLandingModule
   ],

src/app/utils/customization/customization.component.ts

@@ -1,27 +0,0 @@
-import {Component, Inject, Input, RendererFactory2, ViewEncapsulation} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
-import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
-import {LayoutService} from "../../openaireLibrary/services/layout.service";
-import {CustomizationOptions} from "../../openaireLibrary/connect/community/CustomizationOptions";
-import {DOCUMENT} from "@angular/common";
-
-@Component({
-  selector: 'customization',
-  template: ``
-})
-
-export class CustomizationComponent {
-  @Input() communityId;
-  @Input() layout: CustomizationOptions;
-  @Input() properties:EnvProperties;
-  customizationCss:string = "";
-
-
-  constructor(private route: ActivatedRoute,private router: Router, private _layoutService: LayoutService, @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2) {
-  }
-
-  public ngOnInit() {
-
-  }
-
-}

src/app/utils/customization/customization.module.ts

@@ -1,28 +0,0 @@
-import {ModuleWithProviders, NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {RouterModule} from '@angular/router';
-import {CustomizationComponent} from "./customization.component";
-import {LayoutService} from "../../openaireLibrary/services/layout.service";
-
-
-@NgModule({
-  imports: [
-    CommonModule, RouterModule
-  ],
-  declarations: [
-    CustomizationComponent
-  ],
-  exports: [
-    CustomizationComponent
-  ]
-})
-export class CustomizationModule {
-  static forRoot(): ModuleWithProviders<CustomizationModule> {
-    return {
-      ngModule: CustomizationModule,
-      providers: [
-      LayoutService
-      ]
-    }
-  }
-}