add unlayer email editor to notification template editor
This commit is contained in:
mchouliara
parent
d62b988857
commit
f0b5364937
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
::ng-deep .unlayer-editor {
|
||||
max-width: 100% !important;
|
||||
iframe {
|
||||
max-width: 100% !important;
|
||||
min-width: 50% !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
<editor class="w-100 mt-2" [init]="{
|
||||
<h4>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-TEXT' | translate}}</h4>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -19,3 +19,4 @@
|
|||
background-color: #b0b0b0;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue