argos/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html

<div class="container-fluid">
	<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>
<mat-dialog-content>
	<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 account-icon-wrapper">
													<mat-icon class="account-icon">account_circle</mat-icon>
												</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 account-icon-wrapper">
																					<mat-icon class="account-icon">account_circle</mat-icon>
																				</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>
</mat-dialog-content>