add unlayer email editor to notification template editor

frontend/package.json

@@ -27,6 +27,7 @@
     "@ngx-translate/http-loader": "^8.0.0",
     "@swimlane/ngx-datatable": "^20.1.0",
     "@tinymce/tinymce-angular": "^8.0.0",
+    "angular-email-editor": "^15.2.0",
     "angular-mentions": "^1.5.0",
     "bootstrap": "^4.6.0",
     "cookieconsent": "^3.1.1",

frontend/src/notification-service/ui/admin/notification-template/editor/field-options/notification-template-field-options.component.scss

@@ -0,0 +1,7 @@
+::ng-deep .unlayer-editor {
+    max-width: 100% !important;
+    iframe {
+        max-width: 100% !important;
+        min-width: 50% !important;
+    }
+}

frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html

@@ -15,7 +15,7 @@
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn secondary" (click)="formSubmit()">
+					<button mat-button class="rounded-btn secondary" (click)="attemptSave()">
 						<mat-icon>save</mat-icon>
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -144,8 +144,13 @@
 											</mat-form-field>
 										</div>
 										<div class="col-12">
-											<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-TEXT' | translate}}</mat-label>
+											<h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-TEXT' | translate}}</h4>
-											<editor class="w-100 mt-2" [init]="{
+                                            <mat-progress-spinner class="ml-auto mr-auto" *ngIf="!editorReady" mode="indeterminate" [diameter]="24"></mat-progress-spinner>
+                                            <email-editor 
+                                                [maxWidth]="'800px'"
+                                                (ready)="onEditorReady($event)"
+                                            ></email-editor>
+											<!-- <editor class="w-100 mt-2" [init]="{
 											base_url: '/tinymce',
 											suffix: '.min',
 											height: 800,
@@ -163,9 +168,9 @@
 											'undo redo | formatselect | bold italic backcolor | \
 											alignleft aligncenter alignright alignjustify | \
 											bullist numlist outdent indent | code | searchreplace | preview | removeformat | help | link | image'
-										}" [formControl]="formGroup.get('value').get('bodyText')"></editor>
+										}" [formControl]="formGroup.get('value').get('bodyText')"></editor> -->
 										<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('backendError')">{{formGroup.get('value').get('bodyText').getError('backendError').message}}</mat-error>
-										<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+										<!-- <mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
 										</div>
 									</div>
 								</div>

frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.scss

@@ -18,4 +18,5 @@
   ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
 	  background-color: #b0b0b0;
   }
+
   

frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatChipEditedEvent, MatChipInputEvent } from '@angular/material/chips';
@@ -36,6 +36,7 @@ import { NotificationTemplateEditorModel } from './notification-template-editor.
 import { NotificationTemplateEditorResolver } from './notification-template-editor.resolver';
 import { NotificationTemplateEditorService } from './notification-template-editor.service';
 import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
+import { EmailEditorComponent } from 'angular-email-editor';
 
 @Component({
 	selector: 'app-notification-template-editor',
@@ -44,7 +45,11 @@ import { RouterUtilsService } from '@app/core/services/router/router-utils.servi
 	providers: [NotificationTemplateEditorService]
 })
 export class NotificationTemplateEditorComponent extends BaseEditor<NotificationTemplateEditorModel, NotificationTemplate> implements OnInit {
+    @ViewChild(EmailEditorComponent)
+    private emailEditor: EmailEditorComponent;
 
+
+    editorReady = false;
 	isNew = true;
 	isDeleted = false;
 	formGroup: UntypedFormGroup = null;
@@ -184,7 +189,7 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 
 	persistEntity(onSuccess?: (response) => void): void {
 		const formData = this.formService.getValue(this.formGroup.value) as NotificationTemplatePersist;
-
+        
 		this.notificationTemplateService.persist(formData)
 			.pipe(takeUntil(this._destroyed)).subscribe(
 				complete => onSuccess ? onSuccess(complete) : this.onCallbackSuccess(complete),
@@ -192,6 +197,17 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 			);
 	}
 
+    attemptSave(): void {
+        if(this.emailEditor?.editor){
+            this.emailEditor?.editor?.exportHtml((data) => {
+                this.formGroup.get('value').get('bodyText').setValue(JSON.stringify(data));
+                this.formSubmit();
+            });
+        }else {
+            this.formSubmit();
+        }
+    }
+
 	formSubmit(): void {
 		this.formService.removeAllBackEndErrors(this.formGroup);
 		this.formService.touchAllFormFields(this.formGroup);
@@ -309,4 +325,13 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 		return values;
 	}
 
+    onEditorReady() {
+        const body = this.formGroup.get('value')?.get('bodyText')?.value;
+        if(body){
+            const design = JSON.parse(body)?.design;
+            this.emailEditor.loadDesign(design);
+        }
+        this.editorReady = true;
+    }
+
 }

frontend/src/notification-service/ui/admin/notification-template/notification-template.module.ts

@@ -18,6 +18,8 @@ import { MatIconModule } from '@angular/material/icon';
 import { EditorModule } from '@tinymce/tinymce-angular';
 import { NotificationTemplateFieldOptionsComponent } from './editor/field-options/notification-template-field-options.component';
 import { NotificationServiceFormattingModule } from '@notification-service/core/formatting/formatting.module';
+import { EmailEditorModule } from 'angular-email-editor';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @NgModule({
 	imports: [
@@ -35,7 +37,9 @@ import { NotificationServiceFormattingModule } from '@notification-service/core/
 		RichTextEditorModule,
 		MatIconModule,
 		EditorModule,
-		NotificationServiceFormattingModule
+		NotificationServiceFormattingModule,
+        EmailEditorModule,
+        MatProgressSpinnerModule
 	],
 	declarations: [
 		NotificationTemplateEditorComponent,