From fc72879451b9a1b07ddec92bc6300d192b274d32 Mon Sep 17 00:00:00 2001 From: rusikv Date: Fri, 20 Sep 2024 12:37:50 +0300 Subject: [PATCH] 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 | 36 ------------------- .../alarm/alarm-assignee-panel.component.ts | 6 ++-- .../alarm-assignee-select-panel.component.ts | 6 ++-- .../alarm/alarm-assignee.component.ts | 8 ++--- .../alarm/alarm-comment.component.html | 2 +- .../alarm/alarm-comment.component.ts | 6 ++-- .../components/alarm/alarm-table-config.ts | 10 +++--- .../alarm/alarms-table-widget.component.ts | 8 +++-- ui-ngx/src/app/shared/models/alarm.models.ts | 34 ++++++++++++++++++ 9 files changed, 59 insertions(+), 57 deletions(-) diff --git a/ui-ngx/src/app/core/services/utils.service.ts b/ui-ngx/src/app/core/services/utils.service.ts index f22d253c80..4e78336b32 100644 --- a/ui-ngx/src/app/core/services/utils.service.ts +++ b/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; 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 aaeafbdc09..4b764e657b 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 @@ -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('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); } } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select-panel.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select-panel.component.ts index 4da142a464..81b81b5cb4 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-select-panel.component.ts +++ b/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('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); } } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.ts index 2504990a07..21d3e7cdbd 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.ts +++ b/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) { 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 9254b2c681..d98e960081 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 @@ -75,7 +75,7 @@ {{ getUserInitials(displayDataElement.displayName) }} - no_accounts + no_accounts
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 1971a34bec..88277588dc 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 @@ -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; diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts index 31cc1d0ae7..10496b256e 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts +++ b/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 templateContent = ` - ${this.utilsService.getUserInitials(entity.assignee)} + ${getUserInitials(entity.assignee)} - ${this.utilsService.getUserDisplayName(entity.assignee)} + ${getUserDisplayName(entity.assignee)} `; } else { templateContent = ` @@ -234,7 +236,7 @@ export class AlarmTableConfig extends EntityTableConfig } 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) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts index 8b91484cb0..bf000404e0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts +++ b/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) { diff --git a/ui-ngx/src/app/shared/models/alarm.models.ts b/ui-ngx/src/app/shared/models/alarm.models.ts index 3ecb99b5bd..8cc1e1b88c 100644 --- a/ui-ngx/src/app/shared/models/alarm.models.ts +++ b/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(); +};