MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
View File

@ -91,10 +91,7 @@
</div> </div>
</div> </div>
<div class="row mt-3"> <div class="row mt-3">
<ng-container *ngFor="let annotationItem of getParentAnnotation(thread).payload"> <div class="col-12" [innerHtml]="getParentAnnotation(thread).payload"></div>
<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 align-self-end"> <div class="col-12 align-self-end">
<div class="row mt-1"> <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> <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>
<div class="row mt-3 pt-1 pb-1"> <div class="row mt-3 pt-1 pb-1">
<ng-container *ngFor="let annotationItem of annotation.payload"> <div class="col-12" [innerHtml]="annotation.payload"></div>
<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> </div>
</div> </div>
</div> </div>

16
frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts
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 { FormBuilder, FormControl, UntypedFormArray, UntypedFormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@ -64,6 +64,7 @@ export class AnnotationDialogComponent extends BaseComponent {
queryIncludesField: boolean = false; queryIncludesField: boolean = false;
queryIncludesAnnotation: boolean = false; queryIncludesAnnotation: boolean = false;
MENTION_CLASS: string = "highlight-user-mention"
@ViewChild('annotationStatus') annotationStatus: MatSelectionList; @ViewChild('annotationStatus') annotationStatus: MatSelectionList;
@ -79,6 +80,7 @@ export class AnnotationDialogComponent extends BaseComponent {
private statusService: StatusService, private statusService: StatusService,
protected routerUtils: RouterUtilsService, protected routerUtils: RouterUtilsService,
private configurationService: ConfigurationService, private configurationService: ConfigurationService,
private sanitizer: DomSanitizer,
) { ) {
super(); super();
this.entityId = data.entityId; 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.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()); 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]; const parentAnnotation: any = data.items.filter(x => x.threadId === element.threadId && x.id === element.id)[0];
parentAnnotation.payload = this.parsePayload(parentAnnotation.payload); 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.parentAnnotationsPerThread[element.threadId.toString()] = parentAnnotation;
this.threads.add(element.threadId); 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.planUsers.find(u => p.includes(u.id.toString()))?.user?.name;
} }
annotationItem.payload = this.sanitizer.sanitize(SecurityContext.HTML, annotationItem.payload);
return annotationItem; return annotationItem;
}); });

2
frontend/src/app/ui/annotations/components/text-area-with-mentions.component.html
View File

@ -3,7 +3,7 @@
<mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label> <mat-label>{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}</mat-label>
<textarea <textarea
[formControl]="internalForm" [formControl]="internalForm"
placeholder="Enter '@' or '#' and start typing..." placeholder="{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}"
class="w-100" class="w-100"
rows="2" rows="2"
matInput matInput