From 57e66ea0191a81587e8853a1f439d90e9165ac25 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Mon, 15 Jul 2024 17:39:27 +0300
Subject: [PATCH] annotation dialog ui fixes

---
 .../annotation-dialog.component.html             | 10 ++--------
 .../annotation-dialog.component.ts               | 16 +++++++++++++---
 .../text-area-with-mentions.component.html       |  2 +-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
index 180c11476..f42c9324a 100644
--- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
+++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
@@ -91,10 +91,7 @@
 																</div>
 															</div>
 															<div class="row mt-3">
-																 <ng-container *ngFor="let annotationItem of getParentAnnotation(thread).payload">
-																	<div *ngIf="!annotationItem.isMention; else mention">{{annotationItem.payload}}&nbsp;</div>
-																	<ng-template #mention><div><span class="highlight-user-mention">{{annotationItem.payload}}</span>&nbsp;</div></ng-template>
-																 </ng-container>
+																<div class="col-12" [innerHtml]="getParentAnnotation(thread).payload"></div>
 																<div class="col-12 align-self-end">
 																	<div class="row mt-1">
 																		<button mat-button (click)="enableReply(thread)" class="action-button" [ngClass]="this.replyEnabledPerThread[thread] ? 'active-action' : ''" [disabled]="this.replyEnabledPerThread[thread]">{{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</button>
@@ -137,10 +134,7 @@
 																					</div>
 
 																					<div class="row mt-3 pt-1 pb-1">
-																						<ng-container *ngFor="let annotationItem of annotation.payload">
-																							<div *ngIf="!annotationItem.isMention; else subthreadMention">{{annotationItem.payload}}&nbsp;</div>
-																							<ng-template #subthreadMention><div><span class="highlight-user-mention">{{annotationItem.payload}}</span>&nbsp;</div></ng-template>
-																						 </ng-container>
+																						<div class="col-12" [innerHtml]="annotation.payload"></div>
 																					</div>
 																				</div>
 																			</div>
diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts
index 8d424fb8b..e8f8d4971 100644
--- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts
+++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, ViewChild } from '@angular/core';
+import { Component, Inject, SecurityContext, ViewChild } from '@angular/core';
 import { FormBuilder, FormControl, UntypedFormArray, UntypedFormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
@@ -64,6 +64,7 @@ export class AnnotationDialogComponent extends BaseComponent {
 	
 	queryIncludesField: boolean = false;
 	queryIncludesAnnotation: boolean = false;
+	MENTION_CLASS: string = "highlight-user-mention" 
 
 	@ViewChild('annotationStatus') annotationStatus: MatSelectionList;
 
@@ -79,6 +80,7 @@ export class AnnotationDialogComponent extends BaseComponent {
 		private statusService: StatusService,
 		protected routerUtils: RouterUtilsService,
 		private configurationService: ConfigurationService,
+		private sanitizer: DomSanitizer,
 	) {
 		super();
 		this.entityId = data.entityId;
@@ -190,8 +192,14 @@ export class AnnotationDialogComponent extends BaseComponent {
 						this.threadReplyTextsFG[element.threadId.toString()] = this.formBuilder.group({ replyText: new FormControl(null, [Validators.required]) });
 						this.annotationsPerThread[element.threadId.toString()] = data.items.filter(x => x.threadId === element.threadId && x.id !== element.id).sort((a1, a2) => new Date(a1.timeStamp).getTime() - new Date(a2.timeStamp).getTime());
 						
-						let parentAnnotation: any = data.items.filter(x => x.threadId === element.threadId && x.id === element.id)[0];
-						parentAnnotation.payload = this.parsePayload(parentAnnotation.payload);
+						const parentAnnotation: any = data.items.filter(x => x.threadId === element.threadId && x.id === element.id)[0];
+						const annotationItems = this.parsePayload(parentAnnotation.payload);
+
+						parentAnnotation.payload = annotationItems.map(item => {
+							if (item.isMention) return `<span class="${this.MENTION_CLASS}">${item.payload}</span>`
+							else return item.payload;
+						}).join('');
+						
 						this.parentAnnotationsPerThread[element.threadId.toString()] = parentAnnotation;
 						
 						this.threads.add(element.threadId);
@@ -382,6 +390,8 @@ export class AnnotationDialogComponent extends BaseComponent {
 					annotationItem.payload = this.planUsers.find(u => p.includes(u.id.toString()))?.user?.name;
 				}
 
+				annotationItem.payload = this.sanitizer.sanitize(SecurityContext.HTML, annotationItem.payload);
+
 				return annotationItem; 
 			});
 
diff --git a/frontend/src/app/ui/annotations/components/text-area-with-mentions.component.html b/frontend/src/app/ui/annotations/components/text-area-with-mentions.component.html
index 8119f1a20..2b02fd8ad 100644
--- a/frontend/src/app/ui/annotations/components/text-area-with-mentions.component.html
+++ b/frontend/src/app/ui/annotations/components/text-area-with-mentions.component.html
@@ -3,7 +3,7 @@
       <mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label>
       <textarea
         [formControl]="internalForm"
-        placeholder="Enter '@' or '#' and start typing..."
+        placeholder="{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}"
         class="w-100"
         rows="2"
         matInput