fix formatting notification template UI

dmp-backend/notification-service/notification/src/main/java/gr/cite/notification/service/message/builder/EmailMessageBuilder.java

@@ -80,15 +80,16 @@ public class EmailMessageBuilder extends MessageBuilderBase implements MessageBu
         String bodyTemplate = null;
         ReplaceResult bodyResult = null;
 
+        // fallback
         if (template != null && template.getValue() != null){
             if (!StringUtils.isNullOrEmpty(template.getValue().getSubjectKey())) subjectTemplate = messageInfo.getFields().stream().filter(fieldInfo -> fieldInfo.getKey().equals(template.getValue().getSubjectKey())).findFirst().orElse(new FieldInfo()).getValue();
             if (StringUtils.isNullOrEmpty(subjectTemplate)) subjectTemplate = template.getValue().getSubjectText();
-            //TODO add formatting function with db fields
+            FieldFormatting subjectFormatting = this.buildFieldFormatting(template.getValue().getSubjectFieldOptions());
-            subjectResult = this.buildTemplate(notification.getId(), subjectTemplate, messageInfo, template.getValue().getSubjectFieldOptions(), null, cipherFields.get(notification.getType()));
+            subjectResult = this.buildTemplate(notification.getId(), subjectTemplate, messageInfo, template.getValue().getSubjectFieldOptions(), subjectFormatting, cipherFields.get(notification.getType()));
 
             if(!StringUtils.isNullOrEmpty(template.getValue().getBodyKey())) bodyTemplate = messageInfo.getFields().stream().filter(fieldInfo -> fieldInfo.getKey().equals(template.getValue().getBodyKey())).findFirst().orElse(new FieldInfo()).getValue();
             if (StringUtils.isNullOrEmpty(bodyTemplate)) bodyTemplate = template.getValue().getBodyText();
-            FieldFormatting bodyFormatting = this.buildFieldFormatting(flow.getBodyFieldOptions());
+            FieldFormatting bodyFormatting = this.buildFieldFormatting(template.getValue().getBodyFieldOptions());
             bodyResult = this.buildTemplate(notification.getId(), bodyTemplate, messageInfo, template.getValue().getBodyFieldOptions(), bodyFormatting, cipherFields.get(notification.getType()));
         }else {
             if(!StringUtils.isNullOrEmpty(flow.getSubjectKey())) subjectTemplate = messageInfo.getFields().stream().filter(fieldInfo -> fieldInfo.getKey().equals(flow.getSubjectKey())).findFirst().orElse(new FieldInfo()).getValue();

dmp-backend/notification-service/notification/src/main/java/gr/cite/notification/service/message/common/MessageBuilderBase.java

@@ -154,6 +154,17 @@ public abstract class MessageBuilderBase {
 		return formatting;
 	}
 
+	protected FieldFormatting buildFieldFormatting(FieldOptions options) {
+		FieldFormatting formatting = new FieldFormatting();
+		if (options == null || options.getFormatting() == null) return formatting;
+
+		for (Map.Entry<String, String> pair : options.getFormatting().entrySet()) {
+			if (StringUtils.isNullOrEmpty(pair.getValue())) continue;
+			formatting.put(pair.getKey(), pair.getValue());
+		}
+		return formatting;
+	}
+
 	//TODO: Here check with a language accepted list and fallback to default
 	protected String lookupOrReadLocalizedFile(NotificationProperties.Template.TemplateCache templateCache, String path, String language) {
 		String filename = path.replace("{language}", language);

dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html

@@ -134,7 +134,7 @@
 										<mat-error *ngIf="subjectOptions.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 									</mat-form-field>
 									<div class="col-auto">
-										<button mat-icon-button (click)="removeOptionalItem(formGroup.get('value').get('subjectFieldOptions'),i)" [disabled]="formGroup.disabled">
+										<button mat-icon-button (click)="removeSubjectOptionalItem(i)" [disabled]="formGroup.disabled">
 											<mat-icon>remove</mat-icon>
 										</button>
 									</div>
@@ -152,22 +152,22 @@
 						<div class="row" *ngFor="let item of formGroup.get('value').get('subjectFieldOptions').get('mandatory').value; let i = index">
 							<mat-form-field class="col-md-4">
 								<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
-								<input matInput [value]="insertFormattingItem(item, null)" [disabled] = "true">
+								<input matInput [value]="item" [disabled] = "true">
 							</mat-form-field>
 							<mat-form-field class="col-md-4">
 								<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
-								<input matInput>
+								<input matInput [value] ="subjectFormatting[item]" (change)="subjectFormattingValueChange($event, item)">
 							</mat-form-field>
 						</div>
 						<div class="row" *ngFor="let item of formGroup.get('value').get('subjectFieldOptions').get('optional')['controls']; let i = index">
 							<div *ngIf="item.valid">
 								<mat-form-field class="col-md-4">
 									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
-									<input matInput [value]="insertFormattingItem(item.value.key, null)" [disabled] = "true">
+									<input matInput [value]="item.value.key" [disabled] = "true">
 								</mat-form-field>
 								<mat-form-field class="col-md-4">
 									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
-									<input matInput>
+									<input matInput [value]="subjectFormatting[item]" (change)="subjectFormattingValueChange($event, item)">
 								</mat-form-field>
 							</div>
 						</div>
@@ -261,7 +261,7 @@
 										<mat-error *ngIf="bodyOptions.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 									</mat-form-field>
 									<div class="col-auto">
-										<button mat-icon-button (click)="removeOptionalItem(formGroup.get('value').get('bodyFieldOptions'),i)" [disabled]="formGroup.disabled">
+										<button mat-icon-button (click)="removeBodyOptionalItem(i)" [disabled]="formGroup.disabled">
 											<mat-icon>remove</mat-icon>
 										</button>
 									</div>
@@ -275,25 +275,25 @@
 								</div>
 							</div>
 							<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.FORMATTING' | translate}}</h4>	
-							<div class="row" *ngFor="let item of formGroup.get('value').get('subjectFieldOptions').get('mandatory').value; let i = index">
+							<div class="row" *ngFor="let item of formGroup.get('value').get('bodyFieldOptions').get('mandatory').value; let i = index">
 								<mat-form-field class="col-md-4">
 									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
-									<input matInput [value]="insertFormattingItem(item, null)" [disabled] = "true">
+									<input matInput [value]="item" [disabled] = "true">
 								</mat-form-field>
 								<mat-form-field class="col-md-4">
 									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
-									<input matInput>
+									<input matInput [value] ="bodyFormatting[item]" (change)="bodyFormattingValueChange($event, item)">
 								</mat-form-field>
 							</div>
-							<div class="row" *ngFor="let item of formGroup.get('value').get('subjectFieldOptions').get('optional')['controls']; let i = index">
+							<div class="row" *ngFor="let item of formGroup.get('value').get('bodyFieldOptions').get('optional')['controls']; let i = index">
 								<div *ngIf="item.valid">
 									<mat-form-field class="col-md-4">
 										<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
-										<input matInput [value]="insertFormattingItem(item.value.key, null)" [disabled] = "true">
+										<input matInput [value]="item.value.key" [disabled] = "true">
 									</mat-form-field>
 									<mat-form-field class="col-md-4">
 										<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
-										<input matInput>
+										<input matInput [value]="bodyFormatting[item]" (change)="bodyFormattingValueChange($event, item)">
 									</mat-form-field>
 								</div>
 							</div>

dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.ts

@@ -54,7 +54,8 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 	bccValues: string[] = [];
 	extraDataKeys: string[] = [];
 	languageCode: string;
-	formatting: { [key: string]: string } = {};
+	subjectFormatting: { [key: string]: string } = {};
+	bodyFormatting: { [key: string]: string } = {};
 	public notificationTemplateKindEnum = this.enumUtils.getEnumValues(NotificationTemplateKind);
 	public notificationTemplateChannelEnum = this.enumUtils.getEnumValues(NotificationTemplateChannel);
 	public notificationDataTypeEnum = this.enumUtils.getEnumValues(NotificationDataType);
@@ -96,11 +97,6 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 		super(dialog, language, formService, router, uiNotificationService, httpErrorHandlingService, filterService, datePipe, route, queryParamsService);
 	}
 
-	// ngOnInit(): void {
-	// 	this.editorModel = new NotificationTemplateEditorModel().fromModel(this.notificationTemplate);
-	// 	this.formGroup = this.editorModel.buildForm(null, this.editorModel.kind === NotificationTemplateKind.Default ? true : !this.authService.permissionEnum.EditDescription);
-	// }
-
 	ngOnInit(): void {
 		this.matomoService.trackPageView('Admin: Notification Tempplates');
 		super.ngOnInit();
@@ -133,6 +129,12 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 					this.bodyFieldOptionsEnabled = true;
 					this.bodyMandatoryFields = data.value.bodyFieldOptions.mandatory;
 				}
+				if(data.value  && data.value.subjectFieldOptions  && data.value.subjectFieldOptions.formatting){
+					this.subjectFormatting = data.value.subjectFieldOptions.formatting;
+				}
+				if(data.value  && data.value.bodyFieldOptions  && data.value.bodyFieldOptions.formatting){
+					this.bodyFormatting = data.value.bodyFieldOptions.formatting;
+				}
 				this.ccValues = this.editorModel.value.cc;
 				this.bccValues = this.editorModel.value.bcc;
 				this.extraDataKeys = this.editorModel.value.extraDataKeys;
@@ -181,6 +183,7 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 	}
 
 	formSubmit(): void {
+		console.log(this.formGroup);
 		this.formService.touchAllFormFields(this.formGroup);
 		if (!this.isFormValid()) {
 			return;
@@ -224,7 +227,6 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 			.subscribe(
 				data => {
 					this.formGroup.get('languageId').patchValue(data.id);
-					console.log(this.formGroup);
 				}
 			);
 	}
@@ -271,8 +273,10 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 			this.extraDataKeys = this.edit(field, this.extraDataKeys, event);
 		}else if(type == "subject"){
 			this.subjectMandatoryFields = this.edit(field, this.subjectMandatoryFields, event);
+			this.editSubjectFormmattingKey(field, event.value.trim());
 		}else if(type == "body"){
 			this.bodyMandatoryFields = this.edit(field, this.bodyMandatoryFields, event);
+			this.editBodyFormmattingKey(field, event.value.trim());
 		}
 	}
 
@@ -285,8 +289,10 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 			this.extraDataKeys = this.remove(field, this.extraDataKeys);
 		}else if(type == "subject"){
 			this.subjectMandatoryFields = this.remove(field, this.subjectMandatoryFields);
+			this.deleteSubjectFormattingItem(field);
 		}else if(type == "body"){
 			this.bodyMandatoryFields = this.remove(field, this.bodyMandatoryFields);
+			this.deleteBodyFormattingItem(field);
 		}
 	}
 
@@ -327,15 +333,64 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
 		(formGroup.get('optional') as FormArray).push(fieldInfo.buildForm());
 	}
 
-	removeOptionalItem(formGroup: UntypedFormGroup, optionalIndex: number): void {
+	removeSubjectOptionalItem(optionalIndex: number): void {
-		(formGroup.get('optional') as FormArray).removeAt(optionalIndex);
+		const key = (this.formGroup.get('value').get('subjectFieldOptions').get('optional') as FormArray).at(optionalIndex).get("key").value;
+		this.deleteSubjectFormattingItem(key);
+	
+		(this.formGroup.get('value').get('subjectFieldOptions').get('optional') as FormArray).removeAt(optionalIndex);
+	}
+	removeBodyOptionalItem(optionalIndex: number): void {
+		const key = (this.formGroup.get('value').get('bodyFieldOptions').get('optional') as FormArray).at(optionalIndex).get("key").value;
+		this.deleteBodyFormattingItem(key);
+	
+		(this.formGroup.get('value').get('bodyFieldOptions').get('optional') as FormArray).removeAt(optionalIndex);
 	}
 
-	insertFormattingItem(key: string, value: string){
+	// subject formatting
-		this.formatting[key] = value;
+	insertSubjectFormattingItem(key: string, value: string){
-		// this.formGroup.get('value').get('subjectFieldOptions').get('formatting').patchValue(this.formatting); TODO
+		this.subjectFormatting[key] = value;
+		this.formGroup.get('value').get('subjectFieldOptions').get('formatting').setValue(this.subjectFormatting);
+	}
 
-		return key;
+	subjectFormattingValueChange(event: Event, key: string){
+		this.bodyFormatting[key] = (event.target as HTMLInputElement).value;
+		this.formGroup.get('value').get('subjectFieldOptions').get('formatting').setValue(this.bodyFormatting);
+	}
+
+	editSubjectFormmattingKey(oldKey: string, newKey: string){
+		this.insertSubjectFormattingItem(newKey, this.subjectFormatting[oldKey]);
+		this.deleteSubjectFormattingItem(oldKey);
+	}
+
+	deleteSubjectFormattingItem(key:string){
+		if (key in this.subjectFormatting) {
+			delete this.subjectFormatting[key];
+			this.formGroup.get('value').get('subjectFieldOptions').get('formatting').setValue(this.subjectFormatting);
+		}
+	}
+
+	
+	// body formatting
+	insertBodyFormattingItem(key: string, value: string){
+		this.bodyFormatting[key] = value;
+		this.formGroup.get('value').get('bodyFieldOptions').get('formatting').setValue(this.bodyFormatting);
+	}
+
+	bodyFormattingValueChange(event: Event, key: string){
+		this.bodyFormatting[key] = (event.target as HTMLInputElement).value;
+		this.formGroup.get('value').get('bodyFieldOptions').get('formatting').setValue(this.bodyFormatting);
+	}
+
+	editBodyFormmattingKey(oldKey: string, newKey: string){
+		this.insertBodyFormattingItem(newKey, this.bodyFormatting[oldKey]);
+		this.deleteBodyFormattingItem(oldKey);
+	}
+
+	deleteBodyFormattingItem(key:string){
+		if (key in this.bodyFormatting) {
+			delete this.bodyFormatting[key];
+			this.formGroup.get('value').get('bodyFieldOptions').get('formatting').setValue(this.bodyFormatting);
+		}
 	}
 
 }

dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.model.ts

@@ -169,7 +169,7 @@ export class NotificationTemplateValueEditorModel implements NotificationTemplat
 export class NotificationFieldOptionsEditorModel implements NotificationFieldOptionsPersist {
 	mandatory?: string[] = [];
 	optional?: NotificationFieldInfoEditorModel[] = [];
-	formatting?: { [key: string]: string };
+	formatting?: { [key: string]: string } = {};
 
 	protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();