From 4b5bd584aeea08d2b7bfd561f87ef4f1d3699c8b Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Fri, 22 Jul 2022 18:35:51 +0300
Subject: [PATCH] Customization: save and build css on preview create preview
 css

---
 .../customization.component.html              |  7 ++-
 .../customization/customization.component.ts  | 61 +++++++++++++------
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html
index d206999..57aa30d 100644
--- a/src/app/pages/customization/customization.component.html
+++ b/src/app/pages/customization/customization.component.html
@@ -6,7 +6,7 @@
           <a>
             <div (click)="close()" class="uk-flex uk-flex-middle uk-flex-center">
               <div class="uk-width-auto">
-                <icon *ngIf="menuSelected.id != 'home'" class="menu-icon" name="west"  ratio="2"
+                <icon *ngIf="menuSelected.id != 'home'" class="menu-icon" name="west" ratio="2"
                       [flex]="true"></icon>
                 <icon *ngIf="menuSelected.id == 'home'" class="menu-icon" name="close" ratio="2"
                       [flex]="true"></icon>
@@ -124,7 +124,8 @@
         <div id="container" class=" uk-flex uk-flex-center uk-flex-middle">
           <div id="iframecontainer" class="">
             <div class="uk-height-1-1">
-              <div class="  uk-width-1-1  refresh-indicator">
+              <div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
+                   class="  uk-width-1-1  refresh-indicator">
                 <div class="uk-position-relative uk-height-1-1">
                   <div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
                        (click)="applyLayout()">
@@ -300,4 +301,4 @@
     </button>
   </div>
 </ng-template>
-<modal-alert #leaveModal [overflowBody]="false" (alertOutput)="confirmClose()" ></modal-alert>
+<modal-alert #leaveModal [overflowBody]="false" (alertOutput)="confirmClose()"></modal-alert>
diff --git a/src/app/pages/customization/customization.component.ts b/src/app/pages/customization/customization.component.ts
index 015649d..e267455 100644
--- a/src/app/pages/customization/customization.component.ts
+++ b/src/app/pages/customization/customization.component.ts
@@ -162,19 +162,30 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
       });
     }
     this.publishedLayout.layoutOptions = this.draftCustomizationOptions;
+    this.publishedLayout.date = new Date();
     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'
-      });
+      this.deleteOldImages();
+      this.publishedCustomizationOptions = layout.layoutOptions;
+      this.subscriptions.push(this.layoutService.createCSS(this.communityId, this.publishedLayout.date.valueOf()).subscribe(data => {
+        console.log(data)
+        UIkit.notification("Customizations was successfully saved!", {
+          status: 'success',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+      }, error => {
+
+        UIkit.notification("An error occurred on save css", {
+          status: 'danger',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+      }));
     }, error => {
 
-      UIkit.notification("An error occured on save", {
+      UIkit.notification("An error occurred on save layout", {
         status: 'danger',
         timeout: 6000,
         pos: 'bottom-right'
@@ -212,7 +223,21 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
   applyLayout() {
     this.appliedCustomizationOptions = this.copyObject(this.draftCustomizationOptions);
     if(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization){
-      this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));
+      let d = new Date();
+      let prefix = "-preview-" + d.valueOf();
+      this.subscriptions.push(this.layoutService.createCSS(this.communityId, prefix, this.appliedCustomizationOptions).subscribe(data => {
+        this.previewUrl = this.getCommunityUrlSatinized(this.communityId + prefix);
+        console.log(data)
+
+      }, error => {
+
+        UIkit.notification("An error occurred preview layout", {
+          status: 'danger',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+      }));
+
     }
   }
 
@@ -272,18 +297,16 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
       this.resetButtonsTo(tmp.buttons);
     }
   }
-  getCommunityUrlSatinized(layout: string) {
-    return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));
+  getCommunityUrlSatinized(prefix: string) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrl(prefix));
   }
-  getCommunityUrl() {
-    return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
-    // return "https://example.com"
+  getCommunityUrl(prefix) {
+    if(this.properties.environment == 'production' || this.properties.environment == 'beta')
+    return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu' + (prefix?("?previewLayout=" + prefix):"");
+    return "http://scoobydoo.di.uoa.gr:4200" + (prefix?("?previewLayout=" + prefix):"");
   }
 
-  getCommunityUrlNewLayout(layout: string) {
-    this.previewCustomization = layout;
-      return this.getCommunityUrl()+'/preview/?' + 'layout=' + StringUtils.URIEncode(layout);
-  }
+
 
   copyObject(obj) {
     return JSON.parse(JSON.stringify(obj));