thingsboard/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html

<!--

    Copyright © 2016-2024 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments flex flex-col">
  <div class="header" [class.activity-only]="alarmActivityOnly">
    <div class="header-container flex flex-row items-center justify-between"
         [class.asc]="isDirectionAscending()"
         [class.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">
          <tb-icon class="material-icons">{{ getSortDirectionIcon() }}</tb-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 class="flex flex-col">
    <ng-container *ngIf="!isDirectionAscending()">
      <ng-container *ngTemplateOutlet="commentInput"></ng-container>
    </ng-container>
    <div class="comments-container flex flex-col gap-3" style="padding: 24px"
         [class.asc]="isDirectionAscending()"
         [class.activity-only]="alarmActivityOnly">
      <div class="flex-1" *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 #userComment>
          <div class="user-comment flex flex-row items-center justify-start gap-2"
               *ngIf="!displayDataElement.edit; else commentEditing"
               (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)"
               (mouseleave)="onCommentMouseLeave(i)">
            <div *ngIf="displayDataElement.userExists; else userDeleted"
                 class="user-avatar flex flex-row items-center justify-center self-start xs:!hidden"
                 [style.background-color]="displayDataElement.avatarBgColor">
              {{ getUserInitials(displayDataElement.displayName) }}
            </div>
            <ng-template #userDeleted>
              <mat-icon class="mat-icon tb-mat-28 xs:!hidden">no_accounts</mat-icon>
            </ng-template>
            <div class="flex flex-1 flex-col" style="gap: 5px">
              <div class="flex flex-row items-center justify-start gap-2">
                <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>
              <span class="text">{{ displayDataElement.commentText }}</span>
            </div>
            <div class="action-buttons flex flex-row xs:flex-col"
                 [class.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 class="flex flex-row items-center justify-start gap-2">
              <div class="user-avatar flex flex-row items-center justify-center"
                   [style.background-color]="displayDataElement.avatarBgColor">
                {{ getUserInitials(displayDataElement.displayName) }}
              </div>
              <mat-form-field class="mat-block tb-appearance-transparent flex-1">
                <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 class="flex flex-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>
      </div>
    </div>
    <ng-container *ngIf="isDirectionAscending()">
      <ng-container *ngTemplateOutlet="commentInput"></ng-container>
    </ng-container>
  </div>
  <ng-template #commentInput>
    <div style="background-color: white" class="comment-input"
         [class.newest-first]="!isDirectionAscending()"
         [class.oldest-first]="isDirectionAscending()"
         [class.activity-only]="alarmActivityOnly">
      <div class="inner-wrap flex flex-row items-center justify-start gap-2">
        <div class="user-avatar flex flex-row items-center justify-center"
             *ngIf="userDisplayName$ | async; let userDisplayName"
             [style.background-color]="getCurrentUserBgColor(userDisplayName)">
          {{ getUserInitials(userDisplayName) }}
        </div>
        <mat-form-field class="mat-block tb-appearance-transparent flex-1">
          <textarea matInput
                    type="text"
                    placeholder="{{ 'alarm-activity.add' | translate }}"
                    cdkTextareaAutosize
                    cdkAutosizeMinRows="1"
                    cols="1"
                    formControlName="alarmComment"
                    (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>
      </div>
    </div>
  </ng-template>
</div>