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

2022-08-08 13:14:51 +03:00 · 2022-08-08 13:14:51 +03:00 · 415df1075a
parent 31803fd8ed
commit 415df1075a
7 changed files with 44 additions and 101 deletions
--- a/server.ts
+++ b/server.ts
@ -95,10 +95,9 @@ function buildAll(res: Response = null) {
    }
  });
 }
-properties.portalBuildTime = (new Date()).valueOf();
-buildCss('connect', properties.portalBuildTime);
-buildCss('default', properties.portalBuildTime);
-buildAll();
+if(properties.environment == 'development') {
+  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);
-        if (variables) {
+        let variables = (req.params.id == 'connect' || req.params.id == 'default')?null:Layout.getVariables(response.data);
+        if (variables || (req.params.id == 'connect' || req.params.id == 'default')) {
          buildCss(response.data.portalPid, req.params.suffix, variables);
        }
        res.status(200).send({
--- a/src/app/app.component.ts
+++ b/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'});
-        this.seoService.removeLinkForPrevURL();
-        this.seoService.removeLinkForNextURL();
+        if (this.properties.environment == "production" || this.properties.environment == "development") {
+          this._meta.updateTag({content: 'all', name: 'robots'});
+          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){
-    if(!this.layout && (typeof location == 'undefined' || (typeof location !== 'undefined'  && location.pathname.indexOf("/preview") == -1)) && !this.previewLayout) {
-      this._layoutService.getLayout(this.properties, communityId).subscribe(
-        layout => {
-          this.layout = layout;
-          if (layout) {
-            this.layout.layoutOptions = CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId);
-            console.log(this.layout.date);
-            console.log(this.layout.date?(new Date(this.layout.date)).toISOString():null);
-            this.initCss(communityId, this.layout.date?this.layout.date:null)
-            // this.initCss("default");
-          } else {
-            // this.layout.layoutOptions = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
-            this.initCss("default", this.properties.portalBuildTime);
-          }
+  getLayouts(){
+    this.customizationService.getLayouts(this.properties).subscribe(
+    layouts => {
+      this.layouts = layouts;
+      this.layoutDefault = layouts.filter(layout => layout.portalPid == 'default')[0];
+      this.layoutConnect = layouts.filter(layout => layout.portalPid == 'connect')[0];
+      this.layoutSub.next(this.layouts);
+      this.layoutSub.complete();
+    },
+    error => {
+
+    }
+  );
+  }
+  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]);
    }
--- a/src/app/app.module.ts
+++ b/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,
--- a/src/app/demo/demo.component.html
+++ b/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  ">
--- a/src/app/demo/demo.module.ts
+++ b/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
  ],
--- a/src/app/utils/customization/customization.component.ts
+++ b/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() {
-
-  }
-
-}
--- a/src/app/utils/customization/customization.module.ts
+++ b/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
-      ]
-    }
-  }
-}