|
|
|
@ -17,129 +17,147 @@ |
|
|
|
--> |
|
|
|
|
|
|
|
<div [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments" fxLayout="column"> |
|
|
|
<div class="tb-alarm-comments-header" fxLayout="row" fxLayoutAlign="space-between baseline"> |
|
|
|
<span *ngIf="commentsHeaderEnabled" class="tb-alarm-comments-header-title"> |
|
|
|
{{ 'alarm-comment.comments' | translate }} |
|
|
|
</span> |
|
|
|
<div style="margin-left: auto"> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="changeSortDirection()" |
|
|
|
matTooltip="{{ 'alarm-comment.sort-direction' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="material-icons">{{ getSortDirectionIcon() }}</mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="loadAlarmComments()" |
|
|
|
matTooltip="{{ 'alarm-comment.refresh' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="material-icons">refresh</mat-icon> |
|
|
|
</button> |
|
|
|
<div class="header" [ngClass]="{'activity-only': alarmActivityOnly}"> |
|
|
|
<div class="header-container" fxLayout="row" fxLayoutAlign="space-between center" |
|
|
|
[ngClass]="{'asc': isDirectionAscending(), 'activity-only': alarmActivityOnly}"> |
|
|
|
<span class="header-title" translate> |
|
|
|
alarm-activity.activity |
|
|
|
</span> |
|
|
|
<div style="margin-left: auto"> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="exportAlarmActivity()" |
|
|
|
matTooltip="{{ 'alarm-activity.export' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="material-icons" svgIcon="mdi:file-export"></mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="changeSortDirection()" |
|
|
|
[matTooltip]="getSortDirectionTooltipText()" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="material-icons" [svgIcon]="getSortDirectionIcon()"></mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="loadAlarmComments()" |
|
|
|
matTooltip="{{ 'alarm-activity.refresh' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="material-icons">refresh</mat-icon> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div fxLayout="column" fxLayoutGap="32px"> |
|
|
|
<ng-container *ngIf="isDirectionDescending()"> |
|
|
|
<div fxLayout="column"> |
|
|
|
<ng-container *ngIf="!isDirectionAscending()"> |
|
|
|
<ng-container *ngTemplateOutlet="commentInput"></ng-container> |
|
|
|
</ng-container> |
|
|
|
<div fxFlex *ngFor="let displayDataElement of displayData; index as i"> |
|
|
|
<div style="margin-left: 38px" |
|
|
|
*ngIf="displayDataElement.isSystemComment; else userComment"> |
|
|
|
<span class="tb-alarm-comments-system-text" |
|
|
|
style="margin-right: 8px"> |
|
|
|
{{ displayDataElement.commentText }} |
|
|
|
</span> |
|
|
|
<span class="tb-alarm-comments-time"> |
|
|
|
{{ displayDataElement.createdDateAgo }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<ng-template #userComment> |
|
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" |
|
|
|
*ngIf="!displayDataElement.edit; else commentEditing" |
|
|
|
(mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)" |
|
|
|
(mouseleave)="onCommentMouseLeave(i)"> |
|
|
|
<div fxLayout="row" fxLayoutAlign="center center" fxFlexAlign="start" |
|
|
|
class="tb-alarm-comments-user-avatar" |
|
|
|
[style.background-color]="displayDataElement.avatarBgColor"> |
|
|
|
{{ getUserInitials(displayDataElement.displayName) }} |
|
|
|
</div> |
|
|
|
<div fxFlex fxLayout="column" fxLayoutGap="5px"> |
|
|
|
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> |
|
|
|
<span class="tb-alarm-comments-user-name">{{ displayDataElement.displayName }}</span> |
|
|
|
<span class="tb-alarm-comments-time" *ngIf="displayDataElement.isEdited"> |
|
|
|
edited {{ displayDataElement.editedDateAgo }} |
|
|
|
</span> |
|
|
|
<span class="tb-alarm-comments-time" *ngIf="!displayDataElement.isEdited"> |
|
|
|
{{ displayDataElement.createdDateAgo }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<span class="tb-alarm-comments-text">{{ displayDataElement.commentText }}</span> |
|
|
|
</div> |
|
|
|
<div fxLayout="row" class="tb-alarm-comments-action-buttons" |
|
|
|
[ngClass]="{ 'show-buttons': displayDataElement.showActions }"> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="editComment(displayDataElement.commentId)"> |
|
|
|
<mat-icon class="material-icons">edit</mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="deleteComment(displayDataElement.commentId)"> |
|
|
|
<mat-icon class="material-icons">delete</mat-icon> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div class="comments-container" fxLayout="column" fxLayoutGap="12px" style="padding: 24px" |
|
|
|
[ngClass]="{'asc': isDirectionAscending(), 'activity-only': alarmActivityOnly}"> |
|
|
|
<div fxFlex *ngFor="let displayDataElement of displayData; index as i"> |
|
|
|
<div class="system-comment" *ngIf="displayDataElement.isSystemComment; else userComment"> |
|
|
|
<span class="system-text" style="margin-right: 8px"> |
|
|
|
{{ displayDataElement.commentText }} |
|
|
|
</span> |
|
|
|
<span class="time" style="padding: 3px" |
|
|
|
[matTooltip]="displayDataElement.createdTime" |
|
|
|
matTooltipPosition="right"> |
|
|
|
{{ displayDataElement.createdDateAgo }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<ng-template #commentEditing> |
|
|
|
<div fxLayoutAlign="row center" fxLayoutGap="8px"> |
|
|
|
<div fxLayout="row" fxLayoutAlign="center center" |
|
|
|
class="tb-alarm-comments-user-avatar" |
|
|
|
<ng-template #userComment> |
|
|
|
<div class="user-comment" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" |
|
|
|
*ngIf="!displayDataElement.edit; else commentEditing" |
|
|
|
(mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)" |
|
|
|
(mouseleave)="onCommentMouseLeave(i)"> |
|
|
|
<div class="user-avatar" fxLayout="row" fxLayoutAlign="center center" fxFlexAlign="start" fxHide.xs |
|
|
|
[style.background-color]="displayDataElement.avatarBgColor"> |
|
|
|
{{ getUserInitials(displayDataElement.displayName) }} |
|
|
|
</div> |
|
|
|
<mat-form-field fxFlex appearance="fill" class="mat-block"> |
|
|
|
<textarea matInput |
|
|
|
type="text" |
|
|
|
placeholder="{{ 'alarm-comment.add' | translate }}" |
|
|
|
cdkTextareaAutosize |
|
|
|
cdkAutosizeMinRows="1" |
|
|
|
cols="1" |
|
|
|
formControlName="alarmCommentEdit" |
|
|
|
(keyup.enter)="saveEditedComment(displayDataElement.commentId)" |
|
|
|
(keydown.enter)="$event.preventDefault()"> |
|
|
|
</textarea> |
|
|
|
<div matSuffix fxLayout="row"> |
|
|
|
<button mat-icon-button |
|
|
|
(click)="cancelEdit(displayDataElement.commentId)" |
|
|
|
type="button"> |
|
|
|
<mat-icon class="material-icons red-button">close</mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="saveEditedComment(displayDataElement.commentId)"> |
|
|
|
<mat-icon class="material-icons green-button">check</mat-icon> |
|
|
|
</button> |
|
|
|
<div fxFlex fxLayout="column" fxLayoutGap="5px"> |
|
|
|
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> |
|
|
|
<span class="user-name">{{ displayDataElement.displayName }}</span> |
|
|
|
<span class="time" |
|
|
|
[matTooltip]="displayDataElement.createdTime" |
|
|
|
matTooltipPosition="right"> |
|
|
|
{{ displayDataElement.createdDateAgo }} |
|
|
|
</span> |
|
|
|
<span class="time" *ngIf="displayDataElement.isEdited" |
|
|
|
matTooltip="{{ displayDataElement.editedDateAgo }} {{ displayDataElement.editedTime }}" |
|
|
|
matTooltipPosition="right"> |
|
|
|
Edited |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</mat-form-field> |
|
|
|
<span class="text">{{ displayDataElement.commentText }}</span> |
|
|
|
</div> |
|
|
|
<div fxLayout="row" fxLayout.xs="column" class="action-buttons" |
|
|
|
[ngClass]="{ 'show-buttons': displayDataElement.showActions }"> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="editComment(displayDataElement.commentId)"> |
|
|
|
<mat-icon class="material-icons">edit</mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="deleteComment(displayDataElement.commentId)"> |
|
|
|
<mat-icon class="material-icons">delete</mat-icon> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ng-template #commentEditing> |
|
|
|
<div fxLayoutAlign="row center" fxLayoutGap="8px"> |
|
|
|
<div fxLayout="row" fxLayoutAlign="center center" |
|
|
|
class="user-avatar" |
|
|
|
[style.background-color]="displayDataElement.avatarBgColor"> |
|
|
|
{{ getUserInitials(displayDataElement.displayName) }} |
|
|
|
</div> |
|
|
|
<mat-form-field fxFlex class="mat-block tb-appearance-transparent"> |
|
|
|
<textarea matInput |
|
|
|
type="text" |
|
|
|
placeholder="{{ 'alarm-activity.add' | translate }}" |
|
|
|
cdkTextareaAutosize |
|
|
|
cdkAutosizeMinRows="1" |
|
|
|
cols="1" |
|
|
|
formControlName="alarmCommentEdit" |
|
|
|
(keyup.enter)="saveEditedComment(displayDataElement.commentId)" |
|
|
|
(keydown.enter)="$event.preventDefault()"> |
|
|
|
</textarea> |
|
|
|
<div matSuffix fxLayout="row"> |
|
|
|
<button mat-icon-button |
|
|
|
(click)="cancelEdit(displayDataElement.commentId)" |
|
|
|
type="button"> |
|
|
|
<mat-icon class="material-icons red-button">close</mat-icon> |
|
|
|
</button> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
(click)="saveEditedComment(displayDataElement.commentId)"> |
|
|
|
<mat-icon class="material-icons green-button">check</mat-icon> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
</ng-template> |
|
|
|
</ng-template> |
|
|
|
</ng-template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ng-container *ngIf="isDirectionAscending()"> |
|
|
|
<ng-container *ngTemplateOutlet="commentInput"></ng-container> |
|
|
|
</ng-container> |
|
|
|
</div> |
|
|
|
<ng-template #commentInput> |
|
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex> |
|
|
|
<div fxLayout="row" fxLayoutAlign="center center" |
|
|
|
class="tb-alarm-comments-user-avatar" |
|
|
|
*ngIf="userDisplayName$ | async; let userDisplayName" |
|
|
|
[style.background-color]="getCurrentUserBgColor(userDisplayName)"> |
|
|
|
{{ getUserInitials(userDisplayName) }} |
|
|
|
</div> |
|
|
|
<mat-form-field appearance="fill" fxFlex class="mat-block"> |
|
|
|
<div style="background-color: white" class="comment-input" |
|
|
|
[ngClass]="{'newest-first': !isDirectionAscending(), 'oldest-first': isDirectionAscending(), 'activity-only': alarmActivityOnly}"> |
|
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="inner-wrap"> |
|
|
|
<div fxLayout="row" fxLayoutAlign="center center" |
|
|
|
class="user-avatar" |
|
|
|
*ngIf="userDisplayName$ | async; let userDisplayName" |
|
|
|
[style.background-color]="getCurrentUserBgColor(userDisplayName)"> |
|
|
|
{{ getUserInitials(userDisplayName) }} |
|
|
|
</div> |
|
|
|
<mat-form-field fxFlex class="mat-block tb-appearance-transparent"> |
|
|
|
<textarea matInput |
|
|
|
type="text" |
|
|
|
placeholder="{{ 'alarm-comment.add' | translate }}" |
|
|
|
placeholder="{{ 'alarm-activity.add' | translate }}" |
|
|
|
cdkTextareaAutosize |
|
|
|
cdkAutosizeMinRows="1" |
|
|
|
cols="1" |
|
|
|
@ -147,16 +165,17 @@ |
|
|
|
(keyup.enter)="saveComment()" |
|
|
|
(keydown.enter)="$event.preventDefault()"> |
|
|
|
</textarea> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
matSuffix |
|
|
|
*ngIf="getAlarmCommentFormControl().value" |
|
|
|
(click)="saveComment()"> |
|
|
|
<mat-icon color="primary"> |
|
|
|
send |
|
|
|
</mat-icon> |
|
|
|
</button> |
|
|
|
</mat-form-field> |
|
|
|
<button mat-icon-button |
|
|
|
type="button" |
|
|
|
matSuffix |
|
|
|
*ngIf="getAlarmCommentFormControl().value" |
|
|
|
(click)="saveComment()"> |
|
|
|
<mat-icon color="primary"> |
|
|
|
send |
|
|
|
</mat-icon> |
|
|
|
</button> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ng-template> |
|
|
|
</div> |
|
|
|
|
Andrew Shvayka
3 years ago
GitHub