Customization: fixes, rename service

Customization admin: update the updateCss method, add delete

src/app/pages/connect-admin-customization/connect-admin-customization.component.ts

@@ -1,7 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {Subscription} from 'rxjs';
-import {LayoutService} from "../../openaireLibrary/services/layout.service";
+import {CustomizationService} from "../../openaireLibrary/services/customization.service";
 import {properties} from "../../../environments/environment";
+import {Layout} from "../../openaireLibrary/connect/community/CustomizationOptions";
 declare var UIkit;
 
 @Component({
@@ -21,11 +22,22 @@ declare var UIkit;
       </div>
        
       <div inner>
-        <div class="uk-alert uk-alert-warning ">
+        <div class="uk-alert uk-alert-warning uk-margin-top ">
           <div class="uk-text-large">Use only after connect deployment. And only if there are css updates!</div>
           Press the following button to update the timestamp in the saved layouts and recreate the css files. 
         </div>
         <button (click)="updateCss()" class="uk-button uk-button-danger" [class.uk-disabled]="savingChanges"> Update CSS</button>
+        <ng-container *ngIf="properties.domain != 'production'">
+          <hr>
+          <div class="uk-alert uk-alert-danger uk-margin-top ">
+            Delete after next deployment
+          </div>
+          <div class="uk-alert uk-alert-warning uk-margin-top ">
+            <div class="uk-text-large">Use to clean up multiple layouts of a community id.</div>
+          </div>
+          <div input [(value)]="community" [placeholder]="'e.g. galaxy'"></div>
+          <button (click)="deleteLayout()" class="uk-button uk-button-danger" [class.uk-disabled]="!community"> Delete layout</button>
+        </ng-container>
       </div>
     </div>
     
@@ -34,14 +46,13 @@ declare var UIkit;
 export class ConnectAdminCustomizationComponent implements OnInit {
   private subscriptions: any[] = [];
   savingChanges = false;
+  community;
+  properties = properties;
 
-  constructor( private layoutService: LayoutService,) {
+  constructor( private customizationService: CustomizationService) {
   }
 
   ngOnInit() {
-    // this.sub =this.communityService.getCommunityAsObservable().subscribe(community => {
-    //   this.community = community;
-    // });
   }
   ngOnDestroy() {
 
@@ -54,23 +65,52 @@ export class ConnectAdminCustomizationComponent implements OnInit {
   updateCss(){
     let date = new Date();
     this.savingChanges = true;
-    this.subscriptions.push(this.layoutService.getLayouts(properties, ).subscribe(layouts => {
+    let connectCssIsSaved = false;
+    let defaultCssIsSaved = false;
+    this.subscriptions.push(this.customizationService.getLayouts(properties, ).subscribe(layouts => {
 
       for(let layout of layouts){
-        if(layout.portalPid != 'connect'){
+        layout.date = date;
-          layout.date = date;
+        if(layout.portalPid == 'connect'){
-          this.subscriptions.push(this.layoutService.saveLayout(properties, layout.portalPid, layout, "community").subscribe(data =>{
+          connectCssIsSaved = true;
-            this.subscriptions.push(this.layoutService.createCSS(layout.portalPid,properties.connectPortalUrl, layout.date.valueOf(), layout.layoutOptions).subscribe(data =>{
+          this.callSaveAndCreate(layout, "connect")
-              UIkit.notification(layout.portalPid +"-"+ layout.date.valueOf() +  ".css " + " was created successfully! ", {
+        }else if(layout.portalPid == 'default'){
-                status: 'success',
+          defaultCssIsSaved = true;
-                timeout: 6000,
+          this.callSaveAndCreate(layout, "connect")
-                pos: 'bottom-right'
+        }else {
-              });
+          this.callSaveAndCreate(layout, "community");
-
-            }));
-          }));
         }
       }
+      if(!connectCssIsSaved){
+        let layout =  new Layout("connect", null);
+        layout.date = date;
+        this.callSaveAndCreate(layout, "connect")
+      }
+      if(!defaultCssIsSaved){
+        let layout =  new Layout("default", null);
+        layout.date = date;
+        this.callSaveAndCreate(layout, "connect")
+      }
     }));
   }
+
+  callSaveAndCreate(layout, portalType){
+    this.subscriptions.push(this.customizationService.saveLayout(properties, layout.portalPid, layout, portalType).subscribe(data =>{
+      this.subscriptions.push(this.customizationService.createCSS(layout.portalPid,properties.connectPortalUrl, layout.date.valueOf(), layout.layoutOptions).subscribe(data =>{
+        UIkit.notification(layout.portalPid +"-"+ layout.date.valueOf() +  ".css " + " was created successfully! ", {
+          status: 'success',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+
+      }));
+    }));
+  }
+  deleteLayout(){
+    if(this.community && this.community.length > 0) {
+      this.subscriptions.push(this.customizationService.deleteLayout(properties, this.community,  "community").subscribe(data => {
+
+      }));
+    }
+  }
 }

src/app/pages/connect-admin-customization/connect-admin-customization.module.ts

@@ -5,13 +5,14 @@ import {ConnectAdminCustomizationComponent} from "./connect-admin-customization.
 import {AdminTabsModule} from "../../openaireLibrary/dashboard/sharedComponents/admin-tabs/admin-tabs.module";
 import {ConnectAdminCustomizationRoutingModule} from "./connect-admin-customization-routing.module";
 import {PageContentModule} from "../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
-import {LayoutService} from "../../openaireLibrary/services/layout.service";
+import {CustomizationService} from "../../openaireLibrary/services/customization.service";
+import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
 
 @NgModule({
   imports: [
-    CommonModule, RouterModule, AdminTabsModule, ConnectAdminCustomizationRoutingModule, PageContentModule
+    CommonModule, RouterModule, AdminTabsModule, ConnectAdminCustomizationRoutingModule, PageContentModule, InputModule
   ],
-  providers: [LayoutService],
+  providers: [CustomizationService],
   declarations: [ConnectAdminCustomizationComponent],
   exports: [ConnectAdminCustomizationComponent]
 })

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

@@ -170,10 +170,10 @@
         </a>
       </div>
       <color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
-          " draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
+          " draftCustomizationOptions.identity.mainColor= $event; ; updateBackgroundsBasedOnIdentity(); updateButtonsBasedOnIdentity()"
              label="Primary"></color>
       <color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
-          " draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
+          " draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsBasedOnIdentity(); updateButtonsBasedOnIdentity()"
              label="Secondary"></color>
     </div>
   </div>

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

@@ -8,7 +8,7 @@ import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.cla
 import {DomSanitizer, Title} from '@angular/platform-browser';
 import {CustomizationOptions, Layout} from '../../openaireLibrary/connect/community/CustomizationOptions';
 import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
-import {LayoutService} from '../../openaireLibrary/services/layout.service';
+import {CustomizationService} from '../../openaireLibrary/services/customization.service';
 import {properties} from '../../../environments/environment';
 import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
 import {Subscription} from 'rxjs';
@@ -101,7 +101,7 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
               private _router: Router,
               private title: Title,
               private sanitizer: DomSanitizer,
-              private layoutService: LayoutService,
+              private layoutService: CustomizationService,
               private utilsService: UtilitiesService,
               private userManagementService: UserManagementService) {
   }
@@ -174,7 +174,7 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
     this.publishedCustomizationOptions =  this.copyObject(this.publishedLayout.layoutOptions)
     this.publishedLayout.date = new Date();
     this.subscriptions.push(this.layoutService.saveLayout(this.properties, this.communityId, this.publishedLayout).subscribe(layout => {
-
+      this.publishedLayout._id = layout._id;
 
       this.subscriptions.push(this.layoutService.createCSS(this.communityId,this.properties.connectPortalUrl, this.publishedLayout.date.valueOf(), this.publishedLayout.layoutOptions).subscribe(data => {
         console.log(data)
@@ -237,7 +237,10 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
       let d = new Date();
       let prefix = "-preview-" + d.valueOf();
       this.subscriptions.push(this.layoutService.createCSS(this.communityId, this.properties.connectPortalUrl, prefix, this.appliedCustomizationOptions).subscribe(data => {
-        this.previewUrl = this.getCommunityUrlSatinized(this.communityId + prefix);
+
+        setTimeout(() => {
+          this.previewUrl = this.getCommunityUrlSatinized(this.communityId + prefix);
+        }, 1500);
 
       }, error => {
 

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

@@ -10,7 +10,7 @@ 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 {CustomizationService} from '../../openaireLibrary/services/customization.service';
 import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
 import {PageContentModule} from '../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module';
 import {QuickLookComponent} from './quickLook.component';
@@ -37,7 +37,7 @@ import {SideBarModule} from "../../openaireLibrary/dashboard/sharedComponents/si
         CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent, BackgroundUploadComponent
     ],
   providers: [
-    LayoutService
+    CustomizationService
   ],
   exports: [
     CustomizationComponent