From 043b43b9be0f84414021a57b9bf1cd103733a355 Mon Sep 17 00:00:00 2001
From: amentis <amentis@cite.gr>
Date: Fri, 5 Jan 2024 18:02:06 +0200
Subject: [PATCH] notification template UI small changes

---
 ...otification-template-editor.component.html | 113 +++++++++---------
 dmp-frontend/src/assets/i18n/en.json          |   2 +-
 2 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html b/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html
index ab3cb0e4f..1c07e750e 100644
--- a/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html
@@ -326,7 +326,7 @@
 					<div class="col-4" >
 						<mat-form-field class="chip-list">
 							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC' | translate}}</mat-label>
-							<mat-chip-grid #chipGrid [formControl]="formGroup.get('value').get('cc')">
+							<mat-chip-grid #cc [formControl]="formGroup.get('value').get('cc')">
 							<mat-chip-row *ngFor="let field of ccValues"
 											(removed)="removeChipListValues('cc', field)"
 											[editable]="true"
@@ -337,7 +337,7 @@
 								</button>
 							</mat-chip-row>
 							<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" 
-									[matChipInputFor]="chipGrid"
+									[matChipInputFor]="cc"
 									[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
 									[matChipInputAddOnBlur]="true"
 									(matChipInputTokenEnd)="addChipListValues('cc',$event)"/>
@@ -355,61 +355,60 @@
 							<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
 					</div>
-				</div>	
-				<!-- <div class="col-4" >
-					<mat-form-field class="chip-list">
-						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC' | translate}}</mat-label>
-						<mat-chip-grid #chipGrid [formControl]="formGroup.get('value').get('bcc')">
-						<mat-chip-row *ngFor="let field of bccValues"
-										(removed)="removeChipListValues('bcc', field)"
-										[editable]="true"
-										(edited)="editChipListValues('bcc', $event, field)">
-							{{field}}
-							<button matChipRemove>
-							<mat-icon>cancel</mat-icon>
-							</button>
-						</mat-chip-row>
-						<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" 
-								[matChipInputFor]="chipGrid"
-								[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-								[matChipInputAddOnBlur]="true"
-								(matChipInputTokenEnd)="addChipListValues('bcc',$event)"/>
-						</mat-chip-grid>
-					</mat-form-field>
-				</div> -->
-				<div class="col-4">
-					<mat-form-field class="col-auto">
-						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC-MODE' | translate}}</mat-label>
-						<mat-select name="bccMode" [formControl]="formGroup.get('value').get('bccMode')">
-							<mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode">
-								{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
-							</mat-option>
-						</mat-select>
-						<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-					</mat-form-field>
-				</div>
-				<!-- <div class="col-4" >
-					<mat-form-field class="chip-list">
-						<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-DATA-KEYS' | translate}}</mat-label>
-						<mat-chip-grid #chipGrid [formControl]="formGroup.get('value').get('extraDataKeys')">
-						<mat-chip-row *ngFor="let field of extraDataKeys"
-										(removed)="removeChipListValues('extraDataKeys', field)"
-										[editable]="true"
-										(edited)="editChipListValues('extraDataKeys', $event, field)">
-							{{field}}
-							<button matChipRemove>
-							<mat-icon>cancel</mat-icon>
-							</button>
-						</mat-chip-row>
-						<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" 
-								[matChipInputFor]="chipGrid"
-								[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-								[matChipInputAddOnBlur]="true"
-								(matChipInputTokenEnd)="addChipListValues('extraDataKeys',$event)"/>
-						</mat-chip-grid>
-					</mat-form-field>
-				</div> -->
-				
+					<div class="col-4" >
+						<mat-form-field class="chip-list">
+							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC' | translate}}</mat-label>
+							<mat-chip-grid #bcc [formControl]="formGroup.get('value').get('bcc')">
+							<mat-chip-row *ngFor="let field of bccValues"
+											(removed)="removeChipListValues('bcc', field)"
+											[editable]="true"
+											(edited)="editChipListValues('bcc', $event, field)">
+								{{field}}
+								<button matChipRemove>
+								<mat-icon>cancel</mat-icon>
+								</button>
+							</mat-chip-row>
+							<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" 
+									[matChipInputFor]="bcc"
+									[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+									[matChipInputAddOnBlur]="true"
+									(matChipInputTokenEnd)="addChipListValues('bcc',$event)"/>
+							</mat-chip-grid>
+						</mat-form-field>
+					</div>
+					<div class="col-4">
+						<mat-form-field class="col-auto">
+							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC-MODE' | translate}}</mat-label>
+							<mat-select name="bccMode" [formControl]="formGroup.get('value').get('bccMode')">
+								<mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode">
+									{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
+								</mat-option>
+							</mat-select>
+							<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+						</mat-form-field>
+					</div>
+					<div class="col-4" >
+						<mat-form-field class="chip-list">
+							<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-DATA-KEYS' | translate}}</mat-label>
+							<mat-chip-grid #extraDataKeys [formControl]="formGroup.get('value').get('extraDataKeys')">
+							<mat-chip-row *ngFor="let field of extraDataKeys"
+											(removed)="removeChipListValues('extraDataKeys', field)"
+											[editable]="true"
+											(edited)="editChipListValues('extraDataKeys', $event, field)">
+								{{field}}
+								<button matChipRemove>
+								<mat-icon>cancel</mat-icon>
+								</button>
+							</mat-chip-row>
+							<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" 
+									[matChipInputFor]="extraDataKeys"
+									[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+									[matChipInputAddOnBlur]="true"
+									(matChipInputTokenEnd)="addChipListValues('extraDataKeys',$event)"/>
+							</mat-chip-grid>
+						</mat-form-field>
+					</div>
+				</div>			
 			</mat-card-content>
 		</mat-card>
 	</form>
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 4699bf8e6..9b995fcc5 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -1357,7 +1357,7 @@
 				"CC-MODE": "CC Mode",
 				"BCC": "BCC",
 				"BCC-MODE": "BCC Mode",
-				"EXTRA-DATA-KEYS": "EXTRA-DATA-KEYS",
+				"EXTRA-DATA-KEYS": "Extra Data Keys",
 				"FORMATTING": "Formatting"
 			},
 			"ACTIONS": {