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

import {Component, ElementRef, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';

import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
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 {properties} from '../../../environments/environment';
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
import {Subscription} from 'rxjs';

declare var UIkit;

@Component({
  selector: 'customization',
  templateUrl: './customization.component.html',
  styles:[`
  .refresh-indicator {
    background-color: rgba(0, 0, 0, 0.50);
    border-radius: 4px;
    position: absolute;
    color: white;
  }
  iframe, .refresh-indicator{
      height:900px;
  }
  `]
})

export class CustomizationComponent implements OnInit {

  menuSelected = 'identity';
  color = 'white';
  defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();
  publishedLayout: Layout = null;
  publishedCustomizationOptions: CustomizationOptions = null;
  draftCustomizationOptions: CustomizationOptions = null;
  appliedCustomizationOptions: CustomizationOptions = null;
  previewUrl = null;
  previewCustomization = null;


  public showLoading = true;


  public communityId = null;

  public properties: EnvProperties = null;
  private subscriptions: any[] = [];

  public enabled = true;

  constructor(private element: ElementRef,
              private route: ActivatedRoute,
              private _router: Router,
              private title: Title,
              private sanitizer: DomSanitizer,
              private layoutService: LayoutService,
              private utilsService: UtilitiesService) {
  }

  ngOnDestroy() {
    this.deleteDraftImages();

  }
  cleanUp(){
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    });
  }
  ngOnInit() {
    this.properties = properties;
    if (!Session.isLoggedIn()) {
      this._router.navigate(['/user-info'], {
        queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
      });
    } else {
      this.subscriptions.push(this.route.params.subscribe((params) => {
        this.communityId = params['community'];
        if(this.communityId == "covid-19"){
          this.defaultCustomizationOptions= new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
        }
        this.title.setTitle('Administration Dashboard | Customization');
        this.showLoading = true;
        this.subscriptions.push(this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
         this.publishedLayout = (layout?layout:new Layout(this.communityId,this.defaultCustomizationOptions));
         this.publishedCustomizationOptions = (layout?CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId):Object.assign({},this.defaultCustomizationOptions));
         this.initializeCustomizationOptions(true);
        }, error => {
          this.publishedCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
          this.initializeCustomizationOptions(true);
           UIkit.notification("An error occured fetching customizations options", {
             status: 'danger',
             timeout: 6000,
             pos: 'bottom-right'
           });
        }));
      }));
    }


  }
  hasChanges(object1,object2):boolean{
    return JSON.stringify(object1) != JSON.stringify(object2);
  }
  saveLayout() {
    if (!Session.isLoggedIn()) {
      this._router.navigate(['/user-info'], {
        queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
      });
    }
    this.publishedLayout.layoutOptions = this.draftCustomizationOptions;
    this.subscriptions.push(this.layoutService.saveLayout(this.properties, this.communityId, this.publishedLayout).subscribe(layout => {
      this.deleteOldImages();
      this.publishedLayout = layout;
      this.publishedCustomizationOptions = layout.layoutOptions;
      this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
      UIkit.notification("Customizations was succesfully saved!", {
        status: 'success',
        timeout: 6000,
        pos: 'bottom-right'
      });
    }, error => {

      UIkit.notification("An error occured on save", {
        status: 'danger',
        timeout: 6000,
        pos: 'bottom-right'
      });
    }));
  }
  private deleteOldImages( ) {
    if( this.publishedCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
       this.deleteImage(this.publishedCustomizationOptions.backgrounds.form.imageFile)
    }
  }
  private deleteDraftImages( ) {
    if( this.draftCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
      this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.draftCustomizationOptions.backgrounds.form.imageFile).subscribe(
        re => {
          this.cleanUp()
        }
      ));
    }else{
      this.cleanUp()
    }
  }
  private deleteImage( filename:string) {
    this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + filename).subscribe());
  }
  initializeCustomizationOptions(updatePreviewUrl) {
    this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
    this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
    if(updatePreviewUrl){
      this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));
    }

  }

  applyLayout() {
    this.appliedCustomizationOptions = this.copyObject(this.draftCustomizationOptions);
    if(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization){
      this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));
    }
  }

  resetLayout() {
    this.deleteDraftImages();
    this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
  }
  resetBackgroundsTo(backgrounds) {
    this.draftCustomizationOptions.backgrounds.dark.color = backgrounds.dark.color;
    this.draftCustomizationOptions.backgrounds.light.color = backgrounds.light.color;
    this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color;

  }

  resetBackgroundsAndButtonsTo(c:CustomizationOptions){
    this.resetBackgroundsTo(c.backgrounds);
    this.resetButtonsTo(c.buttons);
   }
  resetBackgroundsAndButtonsToPublished(){
    this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
  }
  resetBackgroundsAndButtonsToDefault(){
    this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
    this.updateBackgroundsAndButtonsBasedOnIdentity();
  }

  resetButtonsTo(buttonsToRevert) {
    this.draftCustomizationOptions.buttons= this.copyObject(buttonsToRevert);
  }

  resetIdentityTo( original:CustomizationOptions) {
    this.draftCustomizationOptions.identity.mainColor = this.copyObject(original.identity.mainColor);
    this.draftCustomizationOptions.identity.secondaryColor = this.copyObject(original.identity.secondaryColor);
  }
  resetIdentityToPublished() {
    this.resetIdentityTo( this.publishedCustomizationOptions);
    this.updateBackgroundsAndButtonsBasedOnIdentity()
  }
  resetIdentityToDefault() {
    this.resetIdentityTo( this.defaultCustomizationOptions);
    this.draftCustomizationOptions.identityIsCustom = false;
    this.updateBackgroundsAndButtonsBasedOnIdentity()

  }
  updateBackgroundsAndButtonsBasedOnIdentity(){
    if(!this.draftCustomizationOptions.backgroundsAndButtonsIsCustom){
      let tmp =   new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);
      this.resetBackgroundsAndButtonsTo(tmp);
    }
  }
  getCommunityUrlSatinized(layout: string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));
  }
  getCommunityUrl() {
    return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
  }

  getCommunityUrlNewLayout(layout: string) {
    this.previewCustomization = layout;
      return this.getCommunityUrl()+'/preview/?' + 'layout=' + StringUtils.URIEncode(layout);
  }

  copyObject(obj) {
    return JSON.parse(JSON.stringify(obj));
  }

}