feat: also allow scss in custom style of application

* finished allow scss available on application custom styling

* lint fixed

* remove useless import of esri key

* fix some issues with custom style edition

* clean code

---------

Co-authored-by: Antoine Hurard <[email protected]>

Author: RenzoPrats

apps/back-office/src/app/components/custom-style/custom-style.component.ts

@@ -1,4 +1,10 @@
-import { Component, Output, EventEmitter, OnInit } from '@angular/core';
+import {
+  Component,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnDestroy,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
@@ -7,6 +13,7 @@ import {
   SafeApplicationService,
   SafeUnsubscribeComponent,
   SafeConfirmService,
+  SafeRestService,
 } from '@oort-front/safe';
 import { firstValueFrom } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -15,6 +22,7 @@ import { UploadApplicationStyleMutationResponse } from './graphql/mutations';
 import { UPLOAD_APPLICATION_STYLE } from './graphql/mutations';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ButtonModule, SnackbarService, SpinnerModule } from '@oort-front/ui';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 /** Default css style example to initialize the form and editor */
 const DEFAULT_STYLE = '';
@@ -37,7 +45,7 @@ const DEFAULT_STYLE = '';
 })
 export class CustomStyleComponent
   extends SafeUnsubscribeComponent
-  implements OnInit
+  implements OnInit, OnDestroy
 {
   public formControl = new FormControl(DEFAULT_STYLE);
   public applicationId?: string;
@@ -48,7 +56,7 @@ export class CustomStyleComponent
     language: 'scss',
     fixedOverflowWidgets: true,
   };
-  private styleApplied: HTMLStyleElement;
+  private rawCustomStyle!: string;
   private savedStyle = '';
   public loading = false;
 
@@ -60,33 +68,49 @@ export class CustomStyleComponent
    * @param apollo Apollo service
    * @param translate Angular translate service
    * @param confirmService Shared confirmation service
+   * @param restService Shared rest service
    */
   constructor(
     private applicationService: SafeApplicationService,
     private snackBar: SnackbarService,
     private apollo: Apollo,
     private translate: TranslateService,
-    private confirmService: SafeConfirmService
+    private confirmService: SafeConfirmService,
+    private restService: SafeRestService
   ) {
     super();
-    this.styleApplied = document.createElement('style');
     // Updates the style when the value changes
-    this.formControl.valueChanges.subscribe((value: any) => {
-      this.applicationService.customStyleEdited = true;
-      this.styleApplied.innerText = value;
-      document.getElementsByTagName('body')[0].appendChild(this.styleApplied);
-      this.style.emit(value);
-    });
+    this.formControl.valueChanges
+      .pipe(debounceTime(1000), distinctUntilChanged())
+      .subscribe((value: any) => {
+        const scss = value as string;
+        this.restService
+          .post('style/scss-to-css', { scss }, { responseType: 'text' })
+          .subscribe({
+            next: (css) => {
+              console.log(this.applicationService.customStyle);
+              if (this.applicationService.customStyle) {
+                this.applicationService.customStyle.innerText = css;
+              }
+            },
+          });
+        this.applicationService.customStyleEdited = true;
+        this.rawCustomStyle = value;
+      });
   }
 
   ngOnInit(): void {
-    if (this.applicationService.customStyle) {
-      this.savedStyle = this.applicationService.customStyle.innerText;
-      this.styleApplied = this.applicationService.customStyle;
-      this.formControl.setValue(this.styleApplied.innerText);
+    if (this.applicationService.rawCustomStyle) {
+      this.savedStyle = this.applicationService.customStyle?.innerText || '';
+      this.rawCustomStyle = this.applicationService.rawCustomStyle;
+      this.formControl.setValue(this.rawCustomStyle, { emitEvent: false });
       this.formControl.markAsPristine();
     } else {
-      this.applicationService.customStyle = this.styleApplied;
+      const styleElement = document.createElement('style');
+      styleElement.innerText = '';
+      document.getElementsByTagName('head')[0].appendChild(styleElement);
+      this.applicationService.rawCustomStyle = this.rawCustomStyle;
+      this.applicationService.customStyle = styleElement;
     }
 
     this.applicationService.application$
@@ -117,7 +141,11 @@ export class CustomStyleComponent
         .subscribe((confirm: any) => {
           if (confirm) {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            this.applicationService.customStyle!.innerText = this.savedStyle;
+
+            if (this.applicationService.customStyle) {
+              this.applicationService.customStyleEdited = false;
+              this.applicationService.customStyle.innerText = this.savedStyle;
+            }
             this.cancel.emit(true);
           }
         });
@@ -127,6 +155,7 @@ export class CustomStyleComponent
   /** Save application custom css styling */
   async onSave(): Promise<void> {
     this.loading = true;
+
     const file = new File(
       [this.formControl.value as string],
       'customStyle.scss',
@@ -159,7 +188,8 @@ export class CustomStyleComponent
       );
       this.formControl.markAsPristine();
       this.applicationService.customStyleEdited = false;
-      this.applicationService.customStyle = this.styleApplied;
+      this.applicationService.rawCustomStyle = this.rawCustomStyle;
+      this.savedStyle = this.applicationService.customStyle?.innerText || '';
     }
     this.loading = false;
   }
@@ -182,4 +212,15 @@ export class CustomStyleComponent
       }, 100);
     }
   }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    if (
+      this.applicationService.customStyleEdited &&
+      this.applicationService.customStyle
+    ) {
+      this.applicationService.customStyleEdited = false;
+      this.applicationService.customStyle.innerText = this.savedStyle;
+    }
+  }
 }

libs/safe/src/index.ts

@@ -25,6 +25,7 @@ export * from './lib/services/paginator-translate'; // todo: update
 export * from './lib/services/context/context.service';
 export * from './lib/services/data-template/data-template.service';
 export * from './lib/services/editor/editor.service';
+export * from './lib/services/rest/rest.service';
 
 // === DIRECTIVES ===
 export * from './lib/directives/skeleton/public-api';

libs/safe/src/lib/services/application/application.service.ts

@@ -117,6 +117,7 @@ export class SafeApplicationService {
   private environment: any;
 
   /** Application custom style */
+  public rawCustomStyle?: string;
   public customStyle?: HTMLStyleElement;
   public customStyleEdited = false;
 
@@ -270,7 +271,8 @@ export class SafeApplicationService {
    */
   leaveApplication(): void {
     if (this.customStyle) {
-      document.getElementsByTagName('body')[0].removeChild(this.customStyle);
+      document.getElementsByTagName('head')[0].removeChild(this.customStyle);
+      this.rawCustomStyle = undefined;
       this.customStyle = undefined;
       this.layoutService.closeRightSidenav = true;
     }
@@ -1912,11 +1914,26 @@ export class SafeApplicationService {
       .then(async (res) => {
         if (res.type === 'application/octet-stream') {
           const styleFromFile = await res.text();
+          const scss = styleFromFile as string;
           this.customStyle = document.createElement('style');
-          this.customStyle.innerText = styleFromFile;
-          document
-            .getElementsByTagName('body')[0]
-            .appendChild(this.customStyle);
+          this.restService
+            .post('style/scss-to-css', { scss }, { responseType: 'text' })
+            .subscribe({
+              next: (css) => {
+                if (this.customStyle) {
+                  this.customStyle.innerText = css;
+                  document
+                    .getElementsByTagName('head')[0]
+                    .appendChild(this.customStyle);
+                }
+              },
+              error: () => {
+                if (this.customStyle) {
+                  this.customStyle.innerText = styleFromFile;
+                }
+              },
+            });
+          this.rawCustomStyle = styleFromFile;
         }
       })
       .catch((err) => {