From 69aafef56837a204eb58af1b197a79d0fe560814 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Tue, 28 Feb 2023 15:04:03 +0200
Subject: [PATCH] Changed display comments button position, moved comments
 dialog actions on top, added ignore loading on writing comments and reassign

---
 .../alarm/alarm-assignee-panel.component.ts   |  4 +--
 .../alarm/alarm-comment-dialog.component.html | 15 ++---------
 .../alarm/alarm-comment-dialog.component.ts   | 14 ++--------
 .../alarm/alarm-comment.component.html        | 10 ++++---
 .../alarm/alarm-comment.component.ts          | 12 ++++-----
 .../alarm/alarm-details-dialog.component.ts   |  2 +-
 .../lib/alarms-table-widget.component.html    |  4 ++-
 .../lib/alarms-table-widget.component.ts      | 26 +++++++++----------
 ...larms-table-widget-settings.component.html |  6 ++---
 9 files changed, 38 insertions(+), 55 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.ts
index 2cf382afcf..bd50beef31 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.ts
@@ -129,12 +129,12 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
   }
 
   assign(user: User): void {
-    this.alarmService.assignAlarm(this.alarmId, user.id.id).subscribe(
+    this.alarmService.assignAlarm(this.alarmId, user.id.id, {ignoreLoading: true}).subscribe(
       () => this.overlayRef.dispose());
   }
 
   unassign(): void {
-    this.alarmService.unassignAlarm(this.alarmId).subscribe(
+    this.alarmService.unassignAlarm(this.alarmId, {ignoreLoading: true}).subscribe(
       () => this.overlayRef.dispose());
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
index 76fac3aaae..94f8f47eb1 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
@@ -33,23 +33,12 @@
                       [commentsHeaderEnabled]="commentsHeaderEnabled">
     </tb-alarm-comment>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <button mat-button color="primary"
+  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end">
+    <button mat-raised-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="close()" cdkFocusInitial>
       {{ 'action.close' | translate }}
     </button>
-    <span fxFlex></span>
-    <button mat-raised-button color="primary"
-            type="button"
-            (click)="changeSortDirection()">
-      {{ 'alarm-comment.sort-direction' | translate}}
-    </button>
-    <button mat-raised-button color="primary"
-            type="button"
-            (click)="refresh()">
-      {{ 'alarm-comment.refresh' | translate}}
-    </button>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.ts
index 5f28ce905e..026ebae8c0 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.ts
@@ -14,14 +14,13 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, ViewChild } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { AlarmInfo } from '@shared/models/alarm.models';
-import { AlarmCommentComponent } from '@home/components/alarm/alarm-comment.component';
 
 export interface AlarmCommentDialogData {
   alarmId?: string;
@@ -37,9 +36,8 @@ export interface AlarmCommentDialogData {
 export class AlarmCommentDialogComponent extends DialogComponent<AlarmCommentDialogComponent, void> {
 
   alarmId: string;
-  commentsHeaderEnabled: boolean = false;
 
-  @ViewChild('alarmCommentComponent', { static: true }) alarmCommentComponent: AlarmCommentComponent;
+  commentsHeaderEnabled: boolean = false;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -50,14 +48,6 @@ export class AlarmCommentDialogComponent extends DialogComponent<AlarmCommentDia
     this.alarmId = this.data.alarmId;
   }
 
-  changeSortDirection() {
-    this.alarmCommentComponent.changeSortDirection();
-  }
-
-  refresh() {
-    this.alarmCommentComponent.loadAlarmComments();
-  }
-
   close(): void {
     this.dialogRef.close();
   }
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
index 26f5bfdd1d..990ceb53d0 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
@@ -16,10 +16,12 @@
 
 -->
 
-<div fxFlexFill [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments" fxLayout="column">
-  <div *ngIf="commentsHeaderEnabled" class="tb-alarm-comments-header" fxLayout="row" fxLayoutAlign="space-between baseline">
-    <span class="tb-alarm-comments-header-title">{{ 'alarm-comment.comments' | translate }}</span>
-    <div>
+<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()"
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts
index ef6e782b1e..6e32979a14 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts
@@ -105,7 +105,7 @@ export class AlarmCommentComponent implements OnInit {
 
   loadAlarmComments(): void {
     this.alarmCommentService.getAlarmComments(this.alarmId, new PageLink(MAX_SAFE_PAGE_SIZE, 0, null,
-      this.alarmCommentSortOrder)).subscribe(
+      this.alarmCommentSortOrder), {ignoreLoading: true}).subscribe(
       (pagedData) => {
         this.alarmComments = pagedData.data;
         this.displayData.length = 0;
@@ -168,7 +168,7 @@ export class AlarmCommentComponent implements OnInit {
   }
 
   private doSave(comment: AlarmComment): void {
-    this.alarmCommentService.saveAlarmComment(this.alarmId, comment).subscribe(
+    this.alarmCommentService.saveAlarmComment(this.alarmId, comment, {ignoreLoading: true}).subscribe(
       () => {
         this.loadAlarmComments();
       }
@@ -200,10 +200,10 @@ export class AlarmCommentComponent implements OnInit {
       this.translate.instant('action.delete')).subscribe(
       (result) => {
         if (result) {
-          this.alarmCommentService.deleteAlarmComments(this.alarmId, commentId).subscribe(
-            () => {
-              this.loadAlarmComments();
-            }
+          this.alarmCommentService.deleteAlarmComments(this.alarmId, commentId, {ignoreLoading: true})
+            .subscribe(() => {
+                this.loadAlarmComments();
+              }
           )
         }
       }
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.ts
index e86b470566..ee32f26392 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.ts
@@ -108,7 +108,7 @@ export class AlarmDetailsDialogComponent extends DialogComponent<AlarmDetailsDia
   }
 
   loadAlarm() {
-    this.alarmService.getAlarmInfo(this.alarmId).subscribe(
+    this.alarmService.getAlarmInfo(this.alarmId, {ignoreLoading: true}).subscribe(
       alarm => this.loadAlarmSubject.next(alarm)
     );
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
index 694a96047e..11d0d22879 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
@@ -92,7 +92,9 @@
                   </span>
                   <span [matTooltip]="getUserDisplayName(alarm)"
                         matTooltipPosition="above"
-                        style="text-overflow: ellipsis">{{ getUserDisplayName(alarm) }}</span>
+                        style="text-overflow: ellipsis">
+                    {{ getUserDisplayName(alarm) }}
+                  </span>
                 </span>
                 <span *ngIf="!alarm.assigneeId" class="unassigned-container" fxLayout="row" fxLayoutAlign="start center">
                   <mat-icon class="material-icons unassigned-icon">account_circle</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
index 6d6d27e6e7..5b233ba2d1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
@@ -143,11 +143,11 @@ interface AlarmsTableWidgetSettings extends TableWidgetSettings {
   enableSelection: boolean;
   enableStatusFilter?: boolean;
   enableFilter: boolean;
+  displayComments: boolean;
   displayDetails: boolean;
   allowAcknowledgment: boolean;
   allowClear: boolean;
   allowAssign: boolean;
-  displayComments: boolean;
 }
 
 interface AlarmWidgetActionDescriptor extends TableCellButtonActionDescriptor {
@@ -197,11 +197,11 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
 
   private alarmsTitlePattern: string;
 
+  private displayComments = false;
   private displayDetails = true;
   public allowAcknowledgment = true;
   private allowClear = true;
   public allowAssign = true;
-  private displayComments = false;
 
   private defaultPageSize = 10;
   private defaultSortOrder = '-' + alarmFields.createdTime.value;
@@ -335,10 +335,10 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   private initializeConfig() {
     this.ctx.widgetActions = [this.searchAction, this.alarmFilterAction, this.columnDisplayAction];
 
+    this.displayComments = isDefined(this.settings.displayComments) ? this.settings.displayComments : false;
     this.displayDetails = isDefined(this.settings.displayDetails) ? this.settings.displayDetails : true;
     this.allowAcknowledgment = isDefined(this.settings.allowAcknowledgment) ? this.settings.allowAcknowledgment : true;
     this.allowClear = isDefined(this.settings.allowClear) ? this.settings.allowClear : true;
-    this.displayComments = isDefined(this.settings.displayComments) ? this.settings.displayComments : false;
     this.allowAssign = isDefined(this.settings.allowAssign) ? this.settings.allowAssign : true;
 
     if (this.settings.alarmsTitle && this.settings.alarmsTitle.length) {
@@ -464,6 +464,16 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     this.sortOrderProperty = sortColumn ? sortColumn.def : null;
 
     const actionCellDescriptors: AlarmWidgetActionDescriptor[] = [];
+    if (this.displayComments) {
+      actionCellDescriptors.push(
+        {
+          displayName: this.translate.instant('alarm-comment.comments'),
+          icon: 'comment',
+          comments: true
+        } as AlarmWidgetActionDescriptor
+      );
+    }
+
     if (this.displayDetails) {
       actionCellDescriptors.push(
         {
@@ -494,16 +504,6 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       );
     }
 
-    if (this.displayComments) {
-      actionCellDescriptors.push(
-        {
-          displayName: this.translate.instant('alarm-comment.comments'),
-          icon: 'comment',
-          comments: true
-        } as AlarmWidgetActionDescriptor
-      );
-    }
-
     this.setCellButtonAction = !!(actionCellDescriptors.length + this.ctx.actionsApi.getActionDescriptors('actionCellButton').length);
 
     if (this.setCellButtonAction) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
index 79a8f400e3..abeba224ce 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
@@ -58,6 +58,9 @@
       </mat-select>
     </mat-form-field>
     <section fxLayout="column" fxLayoutGap="8px">
+      <mat-slide-toggle formControlName="displayComments">
+        {{ 'widgets.table.display-alarm-comments' | translate }}
+      </mat-slide-toggle>
       <mat-slide-toggle fxFlex formControlName="displayDetails">
         {{ 'widgets.table.display-alarm-details' | translate }}
       </mat-slide-toggle>
@@ -70,9 +73,6 @@
       <mat-slide-toggle formControlName="allowAssign">
         {{ 'widgets.table.allow-alarms-assign' | translate }}
       </mat-slide-toggle>
-      <mat-slide-toggle formControlName="displayComments">
-        {{ 'widgets.table.display-alarm-comments' | translate }}
-      </mat-slide-toggle>
       <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
         <mat-slide-toggle fxFlex formControlName="displayPagination">
           {{ 'widgets.table.display-pagination' | translate }}