@ -10,12 +10,23 @@
<!-- <div *ngIf="this.canEdit && !this.isDeleted" class="col - 12"> -->
< div class = "col-12" >
< form class = "row p-2 mt-2 mb-3 ml-0 pr-3 mr-0 new-thread" [ formGroup ] = " threadFormGroup " >
< mat-form-field class = "col-6 msg-input" >
<!-- <mat - form - field class="col - 6 msg - input" >
< textarea matInput matTextareaAutosize matAutosizeMinRows = "1" name = "thread-text" formControlName = "text" placeholder = "{{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}" required > < / textarea >
< mat-error * ngIf = "threadFormGroup.get('text').hasError('backendError')" > {{threadFormGroup.get('text').getError('backendError')?.message}}< / mat-error >
< mat-error * ngIf = "threadFormGroup.get('text').hasError('required')" > {{'COMMONS.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field > -->
< mat-form-field appearance = "outline" class = "col" >
< mat-label > {{'ANNOTATION-DIALOG.THREADS.NEW-THREAD' | translate}}< / mat-label >
< input matInput formControlName = "text" required >
< mat-icon matSuffix class = "material-symbols-outlined" >
add_reaction
< / mat-icon >
< mat-error * ngIf = "threadFormGroup.get('text').hasError('backendError')" > {{threadFormGroup.get('text').getError('backendError')?.message}}< / mat-error >
< mat-error * ngIf = "threadFormGroup.get('text').hasError('required')" > {{'COMMONS.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< mat-form-field class = "col-6 pl-0 pr-0 protection-input" >
< mat-form-field class = "col-auto pl-0 pr-0 protection-input" >
< mat-label > {{'ANNOTATION-DIALOG.THREADS.PROTECTION.TITLE' | translate}}< / mat-label >
< mat-select name = "thread-protectionType" formControlName = "protectionType" required >
< mat-option * ngFor = "let enumValue of annotationProtectionTypeEnumValues" [ value ] = " enumValue " > {{enumUtils.toAnnotationProtectionTypeString(enumValue)}}< / mat-option >
@ -23,10 +34,15 @@
< mat-error * ngIf = "threadFormGroup.get('protectionType').hasError('backendError')" > {{threadFormGroup.get('protectionType').getError('backendError')?.message}}< / mat-error >
< mat-error * ngIf = "threadFormGroup.get('protectionType').hasError('required')" > {{'COMMONS.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< div class = "col-auto send-msg" >
< button mat-raised-button type = "button" ( click ) = " createThread ( ) " >
< i class = "fa fa-paper-plane" > < / i > {{'ANNOTATION-DIALOG.THREADS.SEND' | translate}}
< / button >
< div class = "col-12 send-msg mt-1" >
< div class = "row" >
< div class = "col-auto pr-1" >
< button type = "button" class = "normal-btn-sm" ( click ) = " createThread ( ) " > {{ 'ANNOTATION-DIALOG.THREADS.SEND' | translate }} < i class = "fa fa-paper-plane ml-2" > < / i > < / button >
< / div >
< div class = "col-auto pl-1" >
< button type = "button" class = "normal-btn-light-sm" ( click ) = " close ( ) " > {{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}< / button >
< / div >
< / div >
< / div >
< / form >
< / div >
@ -43,12 +59,21 @@
< div class = "row reply-content" >
< div class = "col-12" >
< div class = "row h-100" >
< div class = "col-10 annotation-time" > {{getParentAnnotation(thread).timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}< / div >
< div class = "col-auto" * ngIf = "getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private" matTooltip = "{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}" > < i class = "material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}" > < / i > {{getAnnotationProtectionType(thread)}}< / div >
< div class = "col-auto" * ngIf = "getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors" matTooltip = "{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}" > < i class = "material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}" > < / i > {{getAnnotationProtectionType(thread)}}< / div >
< div class = "col-md-12 annotation-full-text" > {{getParentAnnotation(thread).payload}}< / div >
< div class = "col-md-12" >
< em class = "user" > {{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} {{getParentAnnotation(thread).author.name}}< / em >
< div class = "col-auto" >
< img class = "profile-picture" src = "/assets/images/user-profile-2.png" alt = "profile-picture" >
< / div >
< div class = "col" >
< div class = "row" >
< em class = "col-auto user" > {{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}} {{getParentAnnotation(thread).author.name}}< / em >
< div class = "col annotation-time" > {{getParentAnnotation(thread).timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}< / div >
< / div >
< div class = "row" >
< div class = "col-12 annotation-full-text" > {{getParentAnnotation(thread).payload}}< / div >
< / div >
< div class = "row" >
< div class = "col-auto" * ngIf = "getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private" matTooltip = "{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}" > < i class = "material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}" > < / i > {{getAnnotationProtectionType(thread)}}< / div >
< div class = "col-auto" * ngIf = "getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors" matTooltip = "{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}" > < i class = "material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}" > < / i > {{getAnnotationProtectionType(thread)}}< / div >
< / div >
< / div >
< / div >
< / div >
@ -71,11 +96,20 @@
< / div >
< div class = "col reply-content" >
< div class = "row h-100" >
< div class = "col-md-12 annotation-time" > {{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}< / div >
< div class = "col-md-12 annotation-full-text" > {{annotation.payload}}< / div >
< div class = "col-md-12" >
< em class = "gr-color" > {{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}}< / em >
{{annotation.author.name}}
< div class = "col-auto" >
< img class = "profile-picture" src = "/assets/images/user-profile-2.png" alt = "profile-picture" >
< / div >
< div class = "col" >
< div class = "row" >
< div class = "col-auto" >
< em class = "gr-color" > {{'ANNOTATION-DIALOG.THREADS.FROM-USER' | translate}}< / em >
{{annotation.author.name}}
< / div >
< div class = "col annotation-time" > {{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}< / div >
< / div >
< div class = "row" >
< div class = "col-md-12 annotation-full-text" > {{annotation.payload}}< / div >
< / div >
< / div >
< / div >
< / div >
@ -86,14 +120,23 @@
<!-- Type reply in thread -->
<!-- <div *ngIf="this.canEdit && !this.isDeleted" class="col - 12"> -->
< div class = "col-12 ">
< div class = "col-12 mt-2 ">
< div class = "row new-reply mr-0" >
< mat-form-field appearance = "outline" class = "col" >
< mat-label > {{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}< / mat-label >
< input matInput [ formControl ] = " this . threadReplyTextsFG [ thread . toString ( ) ] . get ( ' replyText ' ) " required >
< mat-icon matSuffix class = "material-symbols-outlined" >
add_reaction
< / mat-icon >
< / mat-form-field >
<!--
< mat-form-field class = "col pt-2 pb-2 pr-0" >
< textarea matInput matTextareaAutosize matAutosizeMinRows = "1" [ formControl ] = " this . threadReplyTextsFG [ thread . toString ( ) ] . get ( ' replyText ' ) " placeholder = "{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}" > < / textarea >
< mat-error * ngIf = "this.threadReplyTextsFG[thread.toString()]?.get('replyText')?.hasError('required')" > {{'COMMONS.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / mat-form-field > -->
< div class = "col-auto send-msg" >
< button class = "form-field-margin" mat-icon-button type = "button" color = "accent" ( click ) = " replyThread ( thread ) " matTooltip = "{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}" >
< button class = "form-field-margin" mat-icon-button type = "button" color = " black " ( click ) = " replyThread ( thread ) " matTooltip = "{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}" >
< i class = "fa fa-paper-plane" > < / i >
< / button >
< / div >