Add HTML render feature

tachojelev · Jan 28, 2021 · 62fae41 · 62fae41
1 parent a71ca23
commit 62fae41
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 8 deletions.
diff --git a/src/models/send-mail-request.ts b/src/models/send-mail-request.ts
@@ -3,4 +3,5 @@ import { RecipientRequest } from "./recipient-request";
 
 export class SendMailRequest extends EmailTemplate {
     recipients: Array<RecipientRequest>;
+    html: boolean;
 }
diff --git a/src/send-mail-template/email/email.component.html b/src/send-mail-template/email/email.component.html
@@ -35,7 +35,7 @@
         <button mat-raised-button
                 color="primary"
                 (click)="preview()"
-                [disabled]="!recipients?.length">
+                [disabled]="!recipients?.length || sending">
             Preview
         </button>
         <button mat-raised-button
@@ -46,8 +46,13 @@
                 Send
             </ng-container>
             <ng-container *ngIf="sending">
-                <mat-spinner class="send-spinner" color="accent" diameter="24"></mat-spinner>
+                <mat-spinner class="send-spinner" color="accent" diameter="28"></mat-spinner>
             </ng-container>
         </button>
+        <mat-checkbox
+            required
+            [(ngModel)]="html">
+            As HTML
+        </mat-checkbox>
     </mat-card-actions>
 </mat-card>
diff --git a/src/send-mail-template/email/email.component.scss b/src/send-mail-template/email/email.component.scss
@@ -12,6 +12,11 @@
             display: flex;
             flex-direction: column;
         }
+
+        mat-card-actions {
+            display: flex;
+            align-items: center;
+        }
     }
 
     mat-form-field {

diff --git a/src/send-mail-template/email/email.component.ts b/src/send-mail-template/email/email.component.ts
@@ -20,6 +20,8 @@ export class EmailComponent implements OnInit {
   @Input()
   recipients: Array<Recipient>;
 
+  html = false;
+
   sending = false;
 
   constructor(
@@ -49,8 +51,9 @@ export class EmailComponent implements OnInit {
   }
 
   send(): void {
+    console.log(this.html);
     this.sending = true;
-    this.mailService.sendMail(this.emailTemplate, this.recipients).subscribe(
+    this.mailService.sendMail(this.emailTemplate, this.recipients, this.html).subscribe(
       (response: number) => { this.handleSuccess(response); },
       (response: HttpErrorResponse) => { this.handleFailure(response); }
     );

diff --git a/src/send-mail-template/send-mail-template.module.ts b/src/send-mail-template/send-mail-template.module.ts
@@ -10,6 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { EmailComponent } from './email/email.component';
 import { RecipientComponent } from './recipient/recipient.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -32,7 +33,8 @@ import { PreviewComponent } from './preview/preview.component';
     MatChipsModule,
     MatDialogModule,
     MatSnackBarModule,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
+    MatCheckboxModule
   ]
 })
 export class SendMailTemplateModule { }
diff --git a/src/services/mail.service.ts b/src/services/mail.service.ts
@@ -15,26 +15,27 @@ export class MailService {
 
   constructor(private httpClient: HttpClient) { }
 
-  sendMail(emailTemplate: EmailTemplate, recipients: Array<Recipient>): Observable<number> {
+  sendMail(emailTemplate: EmailTemplate, recipients: Array<Recipient>, html: boolean): Observable<number> {
     const headers = new HttpHeaders().set('content-type', 'application/json');
-    const payload = this.buildSendMailRequest(emailTemplate, recipients);
+    const payload = this.buildSendMailRequest(emailTemplate, recipients, html);
 
     return this.httpClient.post<number>(SkaikruApi.SEND_MAILS, payload, { headers });
   }
 
   previewMail(emailTemplate: EmailTemplate, recipients: Array<Recipient>): Observable<Array<PreviewRecipientEmail>> {
     const headers = new HttpHeaders().set('content-type', 'application/json');
-    const payload = this.buildSendMailRequest(emailTemplate, recipients);
+    const payload = this.buildSendMailRequest(emailTemplate, recipients, false);
 
     return this.httpClient.post<Array<PreviewRecipientEmail>>(SkaikruApi.PREVIEW_MAILS, payload, { headers });
   }
 
-  private buildSendMailRequest(emailTemplate: EmailTemplate, recipients: Array<Recipient>): SendMailRequest {
+  private buildSendMailRequest(emailTemplate: EmailTemplate, recipients: Array<Recipient>, html: boolean): SendMailRequest {
     const sendMailRequest = new SendMailRequest();
     sendMailRequest.title = emailTemplate.title;
     sendMailRequest.message = emailTemplate.message;
     sendMailRequest.placeholders = emailTemplate.placeholders;
     sendMailRequest.recipients = this.buildRecipientRequests(recipients);
+    sendMailRequest.html = html;
 
     return sendMailRequest;
   }