Remove old layout route. Add get and save Layout on customization componenent.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@57318 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/app.routing.ts

@@ -48,11 +48,6 @@ const appRoutes: Routes = [
         loadChildren: './pages/community/community-edit-form/community-edit-form.module#CommunityEditFormModule',
         resolve: { envSpecific: EnvironmentSpecificResolver  }
     },
-    {
-        path: 'customization',
-        loadChildren: './pages/customization/customization.module#CustomizationModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
     {
         path: 'manage-zenodo-communities',
         loadChildren: './pages/zenodo-communities/zenodo-communities.module#ZenodoCommunitiesModule',

src/app/pages/customization/customization.component.html

@@ -548,8 +548,7 @@
     </div>
 
     <button class="uk-button  uk-margin uk-button-primary uk-button-small uk-align-right"
-            (click)="customizationOptions=copyObject(appliedCustomizationOptions);
+            (click)="saveLayout()">
-            initializeCustomizationOptions();">
       Publish
     </button>
   </div>

src/app/pages/customization/customization.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
 import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
@@ -9,6 +9,7 @@ import {Curator} from '../../openaireLibrary/utils/entities/CuratorInfo';
 import {DomSanitizer} from '@angular/platform-browser';
 import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
 import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
+import {LayoutService} from "../../openaireLibrary/services/layout.service";
 
 @Component({
   selector: 'customization',
@@ -19,7 +20,7 @@ export class CustomizationComponent implements OnInit {
 
   menuSelected = 'main';
   color = 'white';
-  communityUrl = 'http://scoobydoo.di.uoa.gr:4200/?communityId=ee';
+  communityUrl = 'http://mpagasas.di.uoa.gr:4200/?communityId=ee';
   customizationOptions: CustomizationOptions = new CustomizationOptions();
   appliedCustomizationOptions: CustomizationOptions = this.copyObject(this.customizationOptions);
   previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions);
@@ -52,12 +53,14 @@ export class CustomizationComponent implements OnInit {
   constructor(private element: ElementRef,
               private route: ActivatedRoute,
               private _router: Router,
-              private sanitizer: DomSanitizer) {
+              private sanitizer: DomSanitizer,
+              private layoutService: LayoutService) {
   }
 
 
   ngOnInit() {
     this.initializeCustomizationOptions();
+    console.log(this.customizationOptions);
     this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
       this.properties = data.envSpecific;
       if (!Session.isLoggedIn()) {
@@ -69,14 +72,29 @@ export class CustomizationComponent implements OnInit {
           this.communityId = params['communityId'];
           this.showLoading = true;
           this.updateErrorMessage = '';
-          // this.curatorId = Session.getUser().id;
+          this.layoutService.getLayout(this.communityId, this.properties.adminToolsAPIURL + 'community/').subscribe(layout => {
-
+            this.customizationOptions = layout;
+            this.appliedCustomizationOptions = this.copyObject(this.customizationOptions);
+            this.communityUrl = 'http://mpagasas.di.uoa.gr:4200/?communityId=' + this.communityId;
+            this.initializeCustomizationOptions();
+            this.previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions);
+          });
         });
       }
     });
 
   }
 
+  saveLayout() {
+    this.layoutService.
+    saveLayout(this.communityId, this.properties.adminToolsAPIURL + 'community/', this.appliedCustomizationOptions).subscribe(layout => {
+      this.customizationOptions = layout;
+      this.appliedCustomizationOptions = this.copyObject(this.customizationOptions);
+      this.initializeCustomizationOptions();
+      this.previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions);
+    });
+  }
+
   initializeCustomizationOptions() {
     this.buttonDarkBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.buttons.darkBackground);
     this.buttonLightBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.buttons.lightBackground);
@@ -85,9 +103,9 @@ export class CustomizationComponent implements OnInit {
     // this.previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions);
   }
 
-  changeStyle(colorOptions, borderOptions=null) {
+  changeStyle(colorOptions, borderOptions = null) {
     let style = '';
-    if(!borderOptions){
+    if (!borderOptions) {
       borderOptions = colorOptions;
     }
     if (colorOptions.color) {
@@ -103,17 +121,17 @@ export class CustomizationComponent implements OnInit {
       style += '; border-style:' + borderOptions.borderStyle;
     }
     if (borderOptions.borderWidth) {
-      style += '; border-width:' + borderOptions.borderWidth+'px';
+      style += '; border-width:' + borderOptions.borderWidth + 'px';
     }
     if (borderOptions.borderRadius) {
-      style += '; border-radius:' + borderOptions.borderRadius+'px';
+      style += '; border-radius:' + borderOptions.borderRadius + 'px';
     }
 
     return this.sanitizer.bypassSecurityTrustStyle(style);
   }
 
 
-  changeFontsStyle(options, color=null) {
+  changeFontsStyle(options, color = null) {
     let style = '';
 
 
@@ -122,7 +140,7 @@ export class CustomizationComponent implements OnInit {
     }
 
     if (options.size) {
-      style += '; font-size:' + options.size+'px';
+      style += '; font-size:' + options.size + 'px';
     }
 
     if (options.weight) {
@@ -146,13 +164,14 @@ export class CustomizationComponent implements OnInit {
     // console.log(layout);
     return this.communityUrl + '&layout=' + StringUtils.URIEncode(layout);
   }
-copyObject(obj){
-  return JSON.parse(JSON.stringify(obj));
-}
 
-resetBackgroundsBanners(){
+  copyObject(obj) {
-  this.appliedCustomizationOptions.panel.onDarkBackground = this.customizationOptions.panel.onDarkBackground;
+    return JSON.parse(JSON.stringify(obj));
-  this.appliedCustomizationOptions.panel.background.color = this.customizationOptions.panel.background.color;
+  }
-}
+
+  resetBackgroundsBanners() {
+    this.appliedCustomizationOptions.panel.onDarkBackground = this.customizationOptions.panel.onDarkBackground;
+    this.appliedCustomizationOptions.panel.background.color = this.customizationOptions.panel.background.color;
+  }
 
 }

src/app/pages/customization/customization.module.ts

@@ -6,25 +6,26 @@ import {RouterModule} from '@angular/router';
 import {CustomizationComponent} from './customization.component';
 
 import {CustomizationRoutingModule} from './customization-routing.module';
-// import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
+import {ColorPickerModule} from 'ngx-color-picker';
-// import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-
-import { ColorPickerModule } from 'ngx-color-picker';
 import {FontSizeComponent} from './FontSize.component';
 import {ColorComponent} from './Color.component';
 import {BorderComponent} from './Border.component';
+import {LayoutService} from '../../openaireLibrary/services/layout.service';
+// import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
+// import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
 @NgModule({
   imports: [
-     CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule
+    CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule
   ],
   declarations: [
     CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent
   ],
   providers: [
-
+    LayoutService
   ],
   exports: [
     CustomizationComponent
   ]
 })
-export class CustomizationModule { }
+export class CustomizationModule {
+}