unlayer
Request - Update to Angular 17
Here how you can approach
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { MatSnackBar } from '@angular/material/snack-bar'; import { Store } from '@ngrx/store'; import { first } from 'rxjs'; import { DashboardService } from 'src/app/services/dashboard/dashboard.service'; import { FormValidatorService } from 'src/app/services/validator/form.validator'; import { addUnlayerDesignSuccess, storeUserData } from 'src/app/state/user/user.action'; import { selectUserUnlayerDesigns } from 'src/app/state/user/user.selector'; import { UserState } from 'src/app/state/user/user.state';
declare const unlayer: any;
@Component({ selector: 'app-dashboard-email-editor', templateUrl: './emaileditor.component.html', styleUrls: ['./emaileditor.component.css'] // Link to your CSS file }) export class AppDashboardEmailEditorComponent implements OnInit, AfterViewInit { @ViewChild('editor') editorContainer: ElementRef;
designs: any[] = [];
loadForm = false; loadEditor = false;
form: FormGroup = new FormGroup({}); // Initialize the form property
submitted = false; isLoading = false;
editingDesign: any;
isSaving = false;
constructor( private dashboardService: DashboardService, private formBuilder: FormBuilder, private formValidatorService: FormValidatorService, private store: Store<UserState>, private snackBar: MatSnackBar ) { this.form = this.formBuilder.group({ name: this.formValidatorService.nameControl, }); // Add custom validator for password matching }
ngOnInit(): void {
this.store.select(selectUserUnlayerDesigns).subscribe((userUnlayer: any[]) => {
if (userUnlayer.length === 0) {
}
else {
this.designs = userUnlayer;
}
});
this.fetchDesigns();
}
ngAfterViewInit(): void { // Potentially empty if initial load is conditional }
onSubmit(): void { this.isLoading = true; this.submitted = true;
const { name } = this.form.value;
const payload = { name: name };
this.dashboardService.createDesignUnlayer(payload).pipe(first()).subscribe({
next: (response: any) => {
// Use the newDesignUnlayer object within this block
this.store.dispatch(addUnlayerDesignSuccess({ unlayer: response }));
// Only set timeout inside next callback to ensure it is used after being assigned
setTimeout(() => {
this.isLoading = false;
this.submitted = false;
this.loadForm = false;
this.loadEditor = true;
console.log(response)
const data = response;
this.loadAndInitializeUnlayer(data);
}, 1500);
},
error: (error: any) => {
console.error('Failed to create design:', error.error);
this.isLoading = false;
this.submitted = false;
}
});
}
onCancel(): void { this.loadForm = false; }
get f(): { [key: string]: FormControl } { return this.form.controls as { [key: string]: FormControl }; }
newDesign(): void { this.loadForm = true; //this.loadEditor = true; //this.loadAndInitializeUnlayer(); }
private fetchDesigns(): void { this.dashboardService.getAllDesignUnlayer().pipe(first()).subscribe({ next: (response: any) => { this.store.dispatch(storeUserData({ user_unlayer_designs: response.data })); }, error: () => {
}
});
}
private loadAndInitializeUnlayer(design: any): void {
const script = document.createElement('script');
script.src = 'https://editor.unlayer.com/embed.js';
script.onload = () => this.initializeUnlayer(design);
script.onerror = () => console.error('Failed to load Unlayer script.');
document.head.appendChild(script);
}
private initializeUnlayer(design: any): void { this.editingDesign = {...design}; // Make a shallow copy of design
unlayer.init({
id: 'unlayer-editor',
displayMode: 'email',
projectId: 230914,
});
if (this.editingDesign.json) {
unlayer.loadDesign(JSON.parse(this.editingDesign.json));
}
unlayer.addEventListener('design:updated', () => {
unlayer.exportHtml((data: { design: any; html: any; }) => {
const json = JSON.stringify(data.design);
const html = data.html;
// Update the shallow copy, not the original object
const updatedDesign = {...this.editingDesign, html: html, json: json};
this.updateDesign(updatedDesign);
}, {
cleanup: true,
minify: true
});
});
}
updateDesign(payload: any): void {
this.isSaving = true;
this.dashboardService.saveDesignUnlayer(payload).pipe(first()).subscribe({
next: (response: any) => {
this.snackBar.open('Changes Saved!', 'Close', {
duration: 2000, // Adjust the duration as needed
});
this.isSaving = false;
},
error: (error: any) => {
console.log(error.error);
this.isSaving = false;
this.snackBar.open('Error to save!', 'Close', {
duration: 2000, // Adjust the duration as needed
});
}
});
}
editDesign(id: any): void {
this.dashboardService.getDesignUnlayer(id).pipe(first()).subscribe({
next: (response: any) => {
const data = response.data;
this.loadEditor = true;
this.loadAndInitializeUnlayer(data);
//this.designs = response.data;
//this.store.dispatch(storeUserData({ user_unlayer_designs: this.designs }));
},
error: () => {
}
});
}
}