Request - Update to Angular 17

[iabu94]

Please provide the support for Angular v17

[marcossantosfl]

There is a way to make it work in Angular 17 without the library

[iabu94]

@marcossantosfl please provide more context

[marcossantosfl]

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,
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: () => {

  }
});

}

}