182 lines
8.7 KiB
HTML
182 lines
8.7 KiB
HTML
<div class="container form-container">
|
|
<div class="row d-flex justify-content-between align-items-center">
|
|
<div class="col-auto ml-auto" (click)="close()">
|
|
<mat-icon class="close-icon">close</mat-icon>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!-- Create New Thread -->
|
|
<div class="col-12">
|
|
<form [formGroup]="threadFormGroup">
|
|
<div class="row mt-2 mb-3">
|
|
<div class="col-12 col-md mb-2">
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<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>
|
|
</div>
|
|
<div class="col-12 col-md-auto">
|
|
<mat-form-field class="w-100 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>
|
|
</mat-select>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-12 pt-2 gr-color" *ngIf="threads?.size > 0">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<span>{{'ANNOTATION-DIALOG.TITLE' | translate}}</span>
|
|
<span class="comments-count">{{ annotationsCount }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<ng-container *ngFor="let thread of threads">
|
|
<div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private">
|
|
<div class="col-auto ml-auto">
|
|
<div class="d-flex align-items-center" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}">
|
|
<img src="/assets/images/annotations/eye-hide.png">
|
|
<div class="ml-1 mt-1">
|
|
{{getAnnotationProtectionType(thread)}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row ml-auto" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.EntityAccessors">
|
|
<div class="col-auto ml-auto">
|
|
<div class="d-flex aling-items center" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.ENTITY-ACCESSORS' | translate}}">
|
|
<img src="/assets/images/annotations/globe.png" alt="globe">
|
|
<!-- <i class="material-icons protection-icon icon-{{getAnnotationProtectionType(thread)}}"></i> -->
|
|
<span class="ml-1">
|
|
{{getAnnotationProtectionType(thread)}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-2 mb-2">
|
|
<!-- Parent Thread -->
|
|
<div class="col-12">
|
|
<div class="container">
|
|
<div class="row comment-wrapper pt-1 pb-2 h-100">
|
|
<div class="col-12 pt-1">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="row h-100">
|
|
<div class="col-auto pr-0">
|
|
<img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<span class="col user">{{getParentAnnotation(thread).author.name}}</span>
|
|
<div class="col-auto annotation-time">{{getParentAnnotation(thread).timeStamp | date: "d MMMM, y 'at' h:mm a"}}</div>
|
|
</div>
|
|
<div class="row pt-1">
|
|
<div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div>
|
|
</div>
|
|
<div class="row"> <!--pb-2-->
|
|
<div class="col-12">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<ng-container *ngIf="annotationsPerThread[thread].length === 1 && !this.showRepliesPerThread[thread]">
|
|
<button mat-button (click)="showReplies(thread)">
|
|
<img src="/assets/images/annotations/reply.png" alt="reply"> 1 {{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}
|
|
</button>
|
|
</ng-container>
|
|
<ng-container *ngIf="annotationsPerThread[thread].length > 1 && !this.showRepliesPerThread[thread]">
|
|
<button mat-button (click)="showReplies(thread)">
|
|
<img src="/assets/images/annotations/reply.png" alt="reply"> {{ annotationsPerThread[thread].length }} {{ 'ANNOTATION-DIALOG.THREADS.REPLIES' | translate}}
|
|
</button>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Previous Replies -->
|
|
<div *ngIf="this.showRepliesPerThread[thread]" class="row">
|
|
<div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="col-12">
|
|
<div class="row m-0 h-100">
|
|
<div class="col-auto pr-0 pl-0">
|
|
<div class="side-color"></div>
|
|
</div>
|
|
<div class="col pt-1">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="row h-100">
|
|
<div class="col-auto p-0">
|
|
<img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<span class="col user">{{annotation.author.name}}</span>
|
|
<div class="col-auto annotation-time">{{annotation.timeStamp | date:"d MMMM, y 'at' h:mm a"}}</div>
|
|
<!-- <div class="col annotation-time">{{annotation.timeStamp | date:'EEEE, MMMM d, y, h:mm a'}}</div> -->
|
|
</div>
|
|
|
|
<div class="row pt-1 pb-1">
|
|
<div class="col-12 annotation-full-text">{{annotation.payload}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Type reply in thread -->
|
|
<div *ngIf="this.replyEnabledPerThread[thread]" class="row">
|
|
<div class="col-12 mt-2">
|
|
<div class="row new-reply mr-0">
|
|
<div class="col">
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<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>
|
|
</div>
|
|
<div class="col-auto p-0 send-msg">
|
|
<button class="form-field-margin" mat-icon-button color="black" (click)="replyThread(thread)" matTooltip="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}">
|
|
<img class="paper-plane" src="/assets/images/annotations/paper-plane.png" alt="paper-plane">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div> |