annotation dialog ui fixes

This commit is contained in:
Sofia Papacharalampous 2024-07-15 17:39:27 +03:00
parent 79acc134f9
commit 57e66ea019
3 changed files with 16 additions and 12 deletions

View File

@ -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>

View File

@ -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;
});

View File

@ -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