From c99a369663dfa18854f094f742d962fe644311f2 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Wed, 2 Oct 2024 16:17:38 +0300
Subject: [PATCH] add spinner, mark form as dirty on email editor ready to
 avoid accidental clicking out of view, change button ui

---
 .../editor/notification-template-editor.component.html      | 6 +++---
 .../editor/notification-template-editor.component.ts        | 1 +
 .../notification-template/notification-template.module.ts   | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html b/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
index 54052c464..5104fbcbd 100644
--- a/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
+++ b/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.html
@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary" (click)="cancel()" type="button">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="rounded-btn secondary" type="button" (click)="delete()">
+					<button mat-button class="rounded-btn delete" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn secondary" (click)="attemptSave()" [disabled]="!editorReady"> 
+					<button mat-button class="rounded-btn primary" (click)="attemptSave()" [disabled]="!editorReady"> 
 						<mat-icon>save</mat-icon>
 						{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
diff --git a/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.ts b/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.ts
index 6d1922ba6..cf5c74886 100644
--- a/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.ts
+++ b/frontend/src/notification-service/ui/admin/notification-template/editor/notification-template-editor.component.ts
@@ -335,6 +335,7 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
             const design = JSON.parse(body)?.design as JSONTemplate;
             this.emailEditor.loadDesign(design);
         }
+        this.formGroup.markAsDirty();
         this.editorReady = true;
     }
 
diff --git a/frontend/src/notification-service/ui/admin/notification-template/notification-template.module.ts b/frontend/src/notification-service/ui/admin/notification-template/notification-template.module.ts
index 824df748b..243309eef 100644
--- a/frontend/src/notification-service/ui/admin/notification-template/notification-template.module.ts
+++ b/frontend/src/notification-service/ui/admin/notification-template/notification-template.module.ts
@@ -39,7 +39,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 		EditorModule,
 		NotificationServiceFormattingModule,
         EmailEditorModule,
-        MatProgressSpinnerModule
+        MatProgressSpinnerModule,
 	],
 	declarations: [
 		NotificationTemplateEditorComponent,