Amendments after review

ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.ts

@@ -65,6 +65,8 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
 
   assigneeId?: string;
 
+  reassigned: boolean = false;
+
   selectUserFormGroup: FormGroup;
 
   @ViewChild('userInput', {static: true}) userInput: ElementRef;
@@ -130,12 +132,18 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
 
   assign(user: User): void {
     this.alarmService.assignAlarm(this.alarmId, user.id.id, {ignoreLoading: true}).subscribe(
-      () => this.overlayRef.dispose());
+      () => {
+        this.reassigned = true;
+        this.overlayRef.dispose()
+      });
   }
 
   unassign(): void {
     this.alarmService.unassignAlarm(this.alarmId, {ignoreLoading: true}).subscribe(
-      () => this.overlayRef.dispose());
+      () => {
+        this.reassigned = true;
+        this.overlayRef.dispose()
+      });
   }
 
   fetchUsers(searchText?: string): Observable<Array<UserEmailInfo>> {

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

@@ -16,14 +16,15 @@
 
 -->
 
-<div (click)="openAlarmAssigneePanel($event, alarm)">
+<mat-form-field fxFlex class="mat-block" style="margin-bottom: 25px"
-  <mat-form-field fxFlex class="mat-block">
+                (click)="openAlarmAssigneePanel($event, alarm)"
+                subscriptSizing="dynamic">
   <mat-label translate>alarm.assignee</mat-label>
   <input matInput readonly [value]="getAssignee()">
-    <span *ngIf="alarm?.assigneeId" matPrefix class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
+  <span *ngIf="alarm?.assigneeId" matPrefix class="user-avatar"
+        [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
     {{ getUserInitials(alarm.assignee) }}
   </span>
   <mat-icon *ngIf="!alarm?.assigneeId" matPrefix class="unassigned-icon">account_circle</mat-icon>
   <mat-icon matSuffix>arrow_drop_down</mat-icon>
 </mat-form-field>
-</div>

ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.ts

@@ -124,7 +124,7 @@ export class AlarmAssigneeComponent {
       config.hasBackdrop = true;
       const connectedPosition: ConnectedPosition = {
         originX: 'center',
-        originY: 'center',
+        originY: 'bottom',
         overlayX: 'center',
         overlayY: 'top'
       };

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

@@ -55,7 +55,7 @@
     <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 *ngIf="displayDataElement.isSystemComment; else userComment" style="margin-left: 38px;">
+        <div class="system-comment" *ngIf="displayDataElement.isSystemComment; else userComment">
           <span class="system-text" style="margin-right: 8px">
             {{ displayDataElement.commentText }}
           </span>
@@ -70,8 +70,7 @@
                *ngIf="!displayDataElement.edit; else commentEditing"
                (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)"
                (mouseleave)="onCommentMouseLeave(i)">
-            <div fxLayout="row" fxLayoutAlign="center center" fxFlexAlign="start"
+            <div class="user-avatar" fxLayout="row" fxLayoutAlign="center center" fxFlexAlign="start" fxHide.xs
-                 class="user-avatar"
                  [style.background-color]="displayDataElement.avatarBgColor">
               {{ getUserInitials(displayDataElement.displayName) }}
             </div>
@@ -91,7 +90,7 @@
               </div>
               <span class="text">{{ displayDataElement.commentText }}</span>
             </div>
-            <div fxLayout="row" class="action-buttons"
+            <div fxLayout="row" fxLayout.xs="column"  class="action-buttons"
                  [ngClass]="{ 'show-buttons': displayDataElement.showActions }">
               <button mat-icon-button
                       type="button"

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

@@ -166,6 +166,13 @@ $border: 1px solid mat.get-color-from-palette($tb-primary);
       }
     }
 
+    .system-comment {
+      margin-left: 38px;
+      @media #{$mat-xs} {
+        margin-left: 0;
+      }
+    }
+
     .system-text {
       font-weight: 500;
       font-size: 14px;

ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html

@@ -62,10 +62,10 @@
         </mat-form-field>
       </div>
       <mat-expansion-panel class="tb-alarm-details">
-        <mat-expansion-panel-header  fxLayout="row wrap">
+        <mat-expansion-panel-header  fxLayout="row wrap" style="margin-bottom: 8px">
           <mat-panel-title>
           </mat-panel-title>
-          <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          <mat-panel-description fxLayoutAlign="end center" translate>
             alarm.show-more
           </mat-panel-description>
         </mat-expansion-panel-header>

ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts

@@ -53,7 +53,8 @@ import { Authority } from '@shared/models/authority.enum';
 import { ChangeDetectorRef, Injector, StaticProvider, ViewContainerRef } from '@angular/core';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import {
-  ALARM_ASSIGNEE_PANEL_DATA, AlarmAssigneePanelComponent,
+  ALARM_ASSIGNEE_PANEL_DATA,
+  AlarmAssigneePanelComponent,
   AlarmAssigneePanelData
 } from '@home/components/alarm/alarm-assignee-panel.component';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -282,8 +283,13 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
       }
     ];
     const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
-    overlayRef.attach(new ComponentPortal(AlarmAssigneePanelComponent,
+    const componentRef = overlayRef.attach(new ComponentPortal(AlarmAssigneePanelComponent,
-      this.viewContainerRef, injector)).onDestroy(() => this.updateData());
+      this.viewContainerRef, injector));
+    componentRef.onDestroy(() => {
+      if (componentRef.instance.reassigned) {
+        this.updateData()
+      }
+    });
   }
 
 }