UI: moved getUserDisplayName and getUserInitials methods from utils service to alarm models, applied same size to deleted user icon as user avatar in alarm comments

ui-ngx/src/app/core/services/utils.service.ts

@@ -31,7 +31,6 @@ import {
   hashCode,
   isDefined,
   isDefinedAndNotNull,
-  isNotEmptyStr,
   isString,
   isUndefined,
   objToBase64,
@@ -43,8 +42,6 @@ import { customTranslationsPrefix, i18nPrefix } from '@app/shared/models/constan
 import { DataKey, Datasource, DatasourceType, KeyInfo } from '@shared/models/widget.models';
 import { DataKeyType } from '@app/shared/models/telemetry/telemetry.models';
 import {
-  AlarmAssignee,
-  AlarmCommentInfo,
   alarmFields,
   alarmSeverityTranslations,
   alarmStatusTranslations
@@ -381,39 +378,6 @@ export class UtilsService {
     });
   }
 
-  public getUserDisplayName(alarmAssignee: AlarmAssignee |  AlarmCommentInfo) {
-    let displayName = '';
-    if (isNotEmptyStr(alarmAssignee.firstName) || isNotEmptyStr(alarmAssignee.lastName)) {
-      if (alarmAssignee.firstName) {
-        displayName += alarmAssignee.firstName;
-      }
-      if (alarmAssignee.lastName) {
-        if (displayName.length > 0) {
-          displayName += ' ';
-        }
-        displayName += alarmAssignee.lastName;
-      }
-    } else {
-      displayName = alarmAssignee.email;
-    }
-    return displayName;
-  }
-
-  getUserInitials(alarmAssignee: AlarmAssignee): string {
-    let initials = '';
-    if (isNotEmptyStr(alarmAssignee.firstName) || isNotEmptyStr(alarmAssignee.lastName)) {
-      if (alarmAssignee.firstName) {
-        initials += alarmAssignee.firstName.charAt(0);
-      }
-      if (alarmAssignee.lastName) {
-        initials += alarmAssignee.lastName.charAt(0);
-      }
-    } else {
-      initials += alarmAssignee.email.charAt(0);
-    }
-    return initials.toUpperCase();
-  }
-
   public stringToHslColor(str: string, saturationPercentage: number, lightnessPercentage: number): string {
     if (str && str.length) {
       const hue = hashCode(str) % 360;

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

@@ -44,7 +44,7 @@ import { AlarmService } from '@core/http/alarm.service';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { UtilsService } from '@core/services/utils.service';
-import { AlarmAssigneeOption } from '@shared/models/alarm.models';
+import { AlarmAssigneeOption, getUserDisplayName, getUserInitials } from '@shared/models/alarm.models';
 
 export const ALARM_ASSIGNEE_PANEL_DATA = new InjectionToken<any>('AlarmAssigneePanelData');
 
@@ -188,7 +188,7 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
   }
 
   getUserInitials(entity: UserEmailInfo): string {
-    return this.utilsService.getUserInitials(entity);
+    return getUserInitials(entity);
   }
 
   getFullName(entity: UserEmailInfo): string {
@@ -209,7 +209,7 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
   }
 
   getAvatarBgColor(entity: UserEmailInfo) {
-    return this.utilsService.stringToHslColor(this.utilsService.getUserDisplayName(entity), 40, 60);
+    return this.utilsService.stringToHslColor(getUserDisplayName(entity), 40, 60);
   }
 
 }

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

@@ -36,7 +36,7 @@ import { emptyPageData } from '@shared/models/page/page-data';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { UtilsService } from '@core/services/utils.service';
-import { AlarmAssigneeOption } from '@shared/models/alarm.models';
+import { AlarmAssigneeOption, getUserDisplayName, getUserInitials } from '@shared/models/alarm.models';
 
 export const ALARM_ASSIGNEE_SELECT_PANEL_DATA = new InjectionToken<any>('AlarmAssigneeSelectPanelData');
 
@@ -166,7 +166,7 @@ export class AlarmAssigneeSelectPanelComponent implements  OnInit, AfterViewInit
   }
 
   getUserInitials(entity: UserEmailInfo): string {
-    return this.utilsService.getUserInitials(entity);
+    return getUserInitials(entity);
   }
 
   getFullName(entity: UserEmailInfo): string {
@@ -187,7 +187,7 @@ export class AlarmAssigneeSelectPanelComponent implements  OnInit, AfterViewInit
   }
 
   getAvatarBgColor(entity: UserEmailInfo) {
-    return this.utilsService.stringToHslColor(this.utilsService.getUserDisplayName(entity), 40, 60);
+    return this.utilsService.stringToHslColor(getUserDisplayName(entity), 40, 60);
   }
 
 }

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

@@ -16,7 +16,7 @@
 
 import { Component, EventEmitter, Injector, Input, Output, StaticProvider, ViewContainerRef } from '@angular/core';
 import { UtilsService } from '@core/services/utils.service';
-import { AlarmAssignee, AlarmInfo } from '@shared/models/alarm.models';
+import { AlarmAssignee, AlarmInfo, getUserDisplayName, getUserInitials } from '@shared/models/alarm.models';
 import {
   ALARM_ASSIGNEE_PANEL_DATA,
   AlarmAssigneePanelComponent,
@@ -55,7 +55,7 @@ export class AlarmAssigneeComponent {
       this.userAssigned = this.alarm.assigneeId && ((isNotEmptyStr(this.alarm.assignee?.firstName) ||
         isNotEmptyStr(this.alarm.assignee?.lastName)) || isNotEmptyStr(this.alarm.assignee?.email));
       if (this.userAssigned) {
-        return this.utilsService.getUserDisplayName(this.alarm.assignee);
+        return getUserDisplayName(this.alarm.assignee);
       } else {
         return this.translateService.instant(this.alarm.assigneeId ? 'alarm.user-deleted' : 'alarm.unassigned');
       }
@@ -63,11 +63,11 @@ export class AlarmAssigneeComponent {
   }
 
   getUserInitials(alarmAssignee: AlarmAssignee): string {
-    return this.utilsService.getUserInitials(alarmAssignee);
+    return getUserInitials(alarmAssignee);
   }
 
   getAvatarBgColor(entity: AlarmAssignee) {
-    return this.utilsService.stringToHslColor(this.utilsService.getUserDisplayName(entity), 40, 60);
+    return this.utilsService.stringToHslColor(getUserDisplayName(entity), 40, 60);
   }
 
   openAlarmAssigneePanel($event: Event, alarm: AlarmInfo) {

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

@@ -75,7 +75,7 @@
               {{ getUserInitials(displayDataElement.displayName) }}
             </div>
             <ng-template #userDeleted>
-              <mat-icon matPrefix class="mat-icon tb-mat-30" fxHide.xs>no_accounts</mat-icon>
+              <mat-icon class="mat-icon tb-mat-28" fxHide.xs>no_accounts</mat-icon>
             </ng-template>
             <div fxFlex fxLayout="column" fxLayoutGap="5px">
               <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">

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

@@ -27,7 +27,7 @@ import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { MAX_SAFE_PAGE_SIZE, PageLink } from '@shared/models/page/page-link';
 import { DateAgoPipe } from '@shared/pipe/date-ago.pipe';
 import { map } from 'rxjs/operators';
-import { AlarmComment, AlarmCommentType } from '@shared/models/alarm.models';
+import { AlarmComment, AlarmCommentType, getUserDisplayName } from '@shared/models/alarm.models';
 import { UtilsService } from '@core/services/utils.service';
 import { EntityType } from '@shared/models/entity-type.models';
 import { DatePipe } from '@angular/common';
@@ -79,7 +79,7 @@ export class AlarmCommentComponent implements OnInit {
 
   userDisplayName$ = this.store.pipe(
     select(selectUserDetails),
-    map((user) => this.utilsService.getUserDisplayName(user))
+    map((user) => getUserDisplayName(user))
   );
 
   currentUserDisplayName: string;
@@ -127,7 +127,7 @@ export class AlarmCommentComponent implements OnInit {
             displayDataElement.commentId = alarmComment.id.id;
             displayDataElement.userExists = isNotEmptyStr(alarmComment.firstName) || isNotEmptyStr(alarmComment.lastName) ||
               isNotEmptyStr(alarmComment.email);
-            displayDataElement.displayName = displayDataElement.userExists ? this.utilsService.getUserDisplayName(alarmComment) :
+            displayDataElement.displayName = displayDataElement.userExists ? getUserDisplayName(alarmComment) :
               this.translate.instant('alarm.user-deleted');
             displayDataElement.edit = false;
             displayDataElement.isEdited = alarmComment.comment.edited;

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

@@ -38,7 +38,9 @@ import {
   alarmSeverityColors,
   alarmSeverityTranslations,
   AlarmsMode,
-  alarmStatusTranslations
+  alarmStatusTranslations,
+  getUserDisplayName,
+  getUserInitials
 } from '@app/shared/models/alarm.models';
 import { AlarmService } from '@app/core/http/alarm.service';
 import { DialogService } from '@core/services/dialog.service';
@@ -217,9 +219,9 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
       templateContent = `
         <span class="assigned-container">
          <span class="user-avatar" style="background-color: ${this.getAvatarBgColor(entity.assignee)}">
-           ${this.utilsService.getUserInitials(entity.assignee)}
+           ${getUserInitials(entity.assignee)}
          </span>
-         <span class="user-display-name">${this.utilsService.getUserDisplayName(entity.assignee)}</span>
+         <span class="user-display-name">${getUserDisplayName(entity.assignee)}</span>
         </span>`;
     } else {
       templateContent = `
@@ -234,7 +236,7 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
   }
 
   getAvatarBgColor(alarmAssignee: AlarmAssignee) {
-    return this.utilsService.stringToHslColor(this.utilsService.getUserDisplayName(alarmAssignee), 40, 60);
+    return this.utilsService.stringToHslColor(getUserDisplayName(alarmAssignee), 40, 60);
   }
 
   openAlarmAssigneePanel($event: Event, entity: AlarmInfo) {

ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts

@@ -98,7 +98,9 @@ import {
   alarmFields,
   AlarmInfo,
   alarmSeverityColors,
-  AlarmStatus
+  AlarmStatus,
+  getUserDisplayName,
+  getUserInitials
 } from '@shared/models/alarm.models';
 import { DatePipe } from '@angular/common';
 import {
@@ -1119,11 +1121,11 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   }
 
   getUserDisplayName(alarmAssignee: AlarmAssignee) {
-    return this.utils.getUserDisplayName(alarmAssignee);
+    return getUserDisplayName(alarmAssignee);
   }
 
   getUserInitials(alarmAssignee: AlarmAssignee): string {
-    return this.utils.getUserInitials(alarmAssignee);
+    return getUserInitials(alarmAssignee);
   }
 
   getAvatarBgColor(alarmAssignee: AlarmAssignee) {

ui-ngx/src/app/shared/models/alarm.models.ts

@@ -27,6 +27,7 @@ import { AlarmCommentId } from '@shared/models/id/alarm-comment-id';
 import { UserId } from '@shared/models/id/user-id';
 import { AlarmFilter } from '@shared/models/query/query.models';
 import { HasTenantId } from '@shared/models/entity.models';
+import { isNotEmptyStr } from '@core/utils';
 
 export enum AlarmsMode {
   ALL,
@@ -350,3 +351,36 @@ export class AlarmQueryV2 {
   }
 
 }
+
+export const getUserDisplayName = (alarmAssignee: AlarmAssignee |  AlarmCommentInfo) => {
+  let displayName = '';
+  if (isNotEmptyStr(alarmAssignee.firstName) || isNotEmptyStr(alarmAssignee.lastName)) {
+    if (alarmAssignee.firstName) {
+      displayName += alarmAssignee.firstName;
+    }
+    if (alarmAssignee.lastName) {
+      if (displayName.length > 0) {
+        displayName += ' ';
+      }
+      displayName += alarmAssignee.lastName;
+    }
+  } else {
+    displayName = alarmAssignee.email;
+  }
+  return displayName;
+};
+
+export const getUserInitials = (alarmAssignee: AlarmAssignee): string => {
+  let initials = '';
+  if (isNotEmptyStr(alarmAssignee.firstName) || isNotEmptyStr(alarmAssignee.lastName)) {
+    if (alarmAssignee.firstName) {
+      initials += alarmAssignee.firstName.charAt(0);
+    }
+    if (alarmAssignee.lastName) {
+      initials += alarmAssignee.lastName.charAt(0);
+    }
+  } else {
+    initials += alarmAssignee.email.charAt(0);
+  }
+  return initials.toUpperCase();
+};