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

144 lines
7.5 KiB
HTML

<div class="container form-container">
<div class="row d-flex justify-content-between align-items-center m-0">
<!-- <div class="col-auto"><a class="logo"><img class="logo" src="../../../assets/images/new-dmp-logo.png" onerror="this.style.display='none'"></a></div> -->
<div class="col-auto ml-auto close-btn" (click)="close()">
<mat-icon class="close-icon">close</mat-icon>
</div>
</div>
<div class="annotation-viewer row">
<!-- Create New Thread -->
<!-- <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">
<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 class="col-6 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>
</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 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>
</form>
</div>
<div class="col-12 mb-3 pt-2 gr-color" *ngIf="threads?.size > 0">{{'ANNOTATION-DIALOG.TITLE' | translate}}</div>
<div class="col-12">
<div *ngFor="let thread of threads" class="row">
<!-- Parent Thread -->
<div class="col-12">
<div class="row parent-thread m-0 h-100">
<div class="col-auto pr-0 pl-0">
<div class="side-color"></div>
</div>
<div class="col">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Previous Replies -->
<div class="col-12">
<div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="row replies">
<div class="col-auto pr-0">
<div class="col reply child"></div>
<div class="col reply child dummy-for-next-child" *ngIf="i != annotationsPerThread[thread].length - 1"></div>
</div>
<div class="col pl-0 pt-1">
<div class="parent row m-0">
<div class="col-auto pl-0 pr-0">
<div class="side-soft-color"></div>
</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>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Type reply in thread -->
<!-- <div *ngIf="this.canEdit && !this.isDeleted" class="col-12"> -->
<div class="col-12">
<div class="row new-reply mr-0">
<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>
<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}}">
<i class="fa fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="row content">
<div class="col-12">
<h1 mat-dialog-title class="title p-0">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
</div>
<div class="col-12">
<p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p>
</div>
<div class="col-12">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-auto">
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
<mat-icon class="pr-2">file_upload</mat-icon>
{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
</button>
</div>
<div class="col-auto pl-0 pr-0">
<p class="">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p>
</div>
<div class="col-auto">
<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
<mat-icon>chevron_right</mat-icon>
{{ 'NAV-BAR.START-WIZARD' | translate }}
</button>
</div>
</div>
</div>
</div>
<div class="row m-0 pt-4">
<div class="col-auto">
<mat-icon class="material-icons-outlined warn">info</mat-icon>
</div>
<span class="col">
<b>{{'GENERAL.START-NEW-DMP-DIALOG.IMPORT' | translate }}</b> {{'GENERAL.START-NEW-DMP-DIALOG.FUNCTION-SUPPORTS' | translate }}
<b>{{'GENERAL.START-NEW-DMP-DIALOG.JSON-FILES' | translate }}</b> {{'GENERAL.START-NEW-DMP-DIALOG.PRODUCED' | translate }}
<b><a href="https://github.com/RDA-DMP-Common/RDA-DMP-Common-Standard" target="_blank">{{'GENERAL.START-NEW-DMP-DIALOG.RDA-SPECIFICATIONS' | translate }}</a></b>
{{'GENERAL.START-NEW-DMP-DIALOG.MACHINE-ACTIONABLE' | translate }}
</span>
</div> -->
</div>