diff --git a/ui-ngx/src/app/core/services/utils.service.ts b/ui-ngx/src/app/core/services/utils.service.ts index ae2754c0eb..f22d253c80 100644 --- a/ui-ngx/src/app/core/services/utils.service.ts +++ b/ui-ngx/src/app/core/services/utils.service.ts @@ -31,6 +31,7 @@ import { hashCode, isDefined, isDefinedAndNotNull, + isNotEmptyStr, isString, isUndefined, objToBase64, @@ -41,7 +42,13 @@ import { TranslateService } from '@ngx-translate/core'; import { customTranslationsPrefix, i18nPrefix } from '@app/shared/models/constants'; import { DataKey, Datasource, DatasourceType, KeyInfo } from '@shared/models/widget.models'; import { DataKeyType } from '@app/shared/models/telemetry/telemetry.models'; -import { alarmFields, alarmSeverityTranslations, alarmStatusTranslations } from '@shared/models/alarm.models'; +import { + AlarmAssignee, + AlarmCommentInfo, + alarmFields, + alarmSeverityTranslations, + alarmStatusTranslations +} from '@shared/models/alarm.models'; import { materialColors } from '@app/shared/models/material.models'; import { WidgetInfo } from '@home/models/widget-component.models'; import jsonSchemaDefaults from 'json-schema-defaults'; @@ -374,6 +381,39 @@ 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 427fc50adf..aaeafbdc09 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 @@ -110,9 +110,7 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe this.filteredUsers = this.selectUserFormGroup.get('user').valueChanges .pipe( debounceTime(150), - map(value => { - return value ? (typeof value === 'string' ? value : '') : '' - }), + map(value => value ? (typeof value === 'string' ? value : '') : ''), distinctUntilChanged(), switchMap(name => this.fetchUsers(name)), share(), @@ -123,7 +121,7 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe ngAfterViewInit() { setTimeout(() => { this.userInput.nativeElement.focus(); - }, 0) + }, 0); } ngOnDestroy() { @@ -149,7 +147,7 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe this.alarmService.assignAlarm(this.alarmId, user.id.id, {ignoreLoading: true}).subscribe( () => { this.reassigned = true; - this.overlayRef.dispose() + this.overlayRef.dispose(); }); } @@ -157,7 +155,7 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe this.alarmService.unassignAlarm(this.alarmId, {ignoreLoading: true}).subscribe( () => { this.reassigned = true; - this.overlayRef.dispose() + this.overlayRef.dispose(); }); } @@ -170,9 +168,7 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe return this.userService.getUsersForAssign(this.alarmId, pageLink, {ignoreLoading: true}) .pipe( catchError(() => of(emptyPageData())), - map(pageData => { - return pageData.data; - }) + map(pageData => pageData.data) ); } @@ -191,42 +187,11 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe }, 0); } - getUserDisplayName(entity: User) { - let displayName = ''; - if ((entity.firstName && entity.firstName.length > 0) || - (entity.lastName && entity.lastName.length > 0)) { - if (entity.firstName) { - displayName += entity.firstName; - } - if (entity.lastName) { - if (displayName.length > 0) { - displayName += ' '; - } - displayName += entity.lastName; - } - } else { - displayName = entity.email; - } - return displayName; + getUserInitials(entity: UserEmailInfo): string { + return this.utilsService.getUserInitials(entity); } - getUserInitials(entity: User): string { - let initials = ''; - if (entity.firstName && entity.firstName.length || - entity.lastName && entity.lastName.length) { - if (entity.firstName) { - initials += entity.firstName.charAt(0); - } - if (entity.lastName) { - initials += entity.lastName.charAt(0); - } - } else { - initials += entity.email.charAt(0); - } - return initials.toUpperCase(); - } - - getFullName(entity: User): string { + getFullName(entity: UserEmailInfo): string { let fullName = ''; if ((entity.firstName && entity.firstName.length > 0) || (entity.lastName && entity.lastName.length > 0)) { @@ -243,8 +208,8 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe return fullName; } - getAvatarBgColor(entity: User) { - return this.utilsService.stringToHslColor(this.getUserDisplayName(entity), 40, 60); + getAvatarBgColor(entity: UserEmailInfo) { + return this.utilsService.stringToHslColor(this.utilsService.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 440db28c51..4da142a464 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 @@ -165,39 +165,8 @@ export class AlarmAssigneeSelectPanelComponent implements OnInit, AfterViewInit }, 0); } - getUserDisplayName(entity: UserEmailInfo) { - let displayName = ''; - if ((entity.firstName && entity.firstName.length > 0) || - (entity.lastName && entity.lastName.length > 0)) { - if (entity.firstName) { - displayName += entity.firstName; - } - if (entity.lastName) { - if (displayName.length > 0) { - displayName += ' '; - } - displayName += entity.lastName; - } - } else { - displayName = entity.email; - } - return displayName; - } - getUserInitials(entity: UserEmailInfo): string { - let initials = ''; - if (entity.firstName && entity.firstName.length || - entity.lastName && entity.lastName.length) { - if (entity.firstName) { - initials += entity.firstName.charAt(0); - } - if (entity.lastName) { - initials += entity.lastName.charAt(0); - } - } else { - initials += entity.email.charAt(0); - } - return initials.toUpperCase(); + return this.utilsService.getUserInitials(entity); } getFullName(entity: UserEmailInfo): string { @@ -218,7 +187,7 @@ export class AlarmAssigneeSelectPanelComponent implements OnInit, AfterViewInit } getAvatarBgColor(entity: UserEmailInfo) { - return this.utilsService.stringToHslColor(this.getUserDisplayName(entity), 40, 60); + return this.utilsService.stringToHslColor(this.utilsService.getUserDisplayName(entity), 40, 60); } } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html index b687a837e3..229566a3ae 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html @@ -20,10 +20,12 @@ subscriptSizing="dynamic"> alarm.assignee - + {{ getUserInitials(alarm.assignee) }} - account_circle + + {{ alarm?.assigneeId ? 'no_accounts' : 'account_circle' }} + arrow_drop_down 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 0fc489fbfe..2504990a07 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 @@ -25,6 +25,7 @@ import { import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; import { TranslateService } from '@ngx-translate/core'; +import { isNotEmptyStr } from '@core/utils'; @Component({ selector: 'tb-alarm-assignee', @@ -41,6 +42,8 @@ export class AlarmAssigneeComponent { @Output() alarmReassigned = new EventEmitter(); + userAssigned: boolean; + constructor(private utilsService: UtilsService, private overlay: Overlay, private viewContainerRef: ViewContainerRef, @@ -49,68 +52,22 @@ export class AlarmAssigneeComponent { getAssignee() { if (this.alarm) { - if (this.alarm.assignee) { - return this.getUserDisplayName(this.alarm.assignee); + 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); } else { - return this.translateService.instant('alarm.unassigned'); + return this.translateService.instant(this.alarm.assigneeId ? 'alarm.user-deleted' : 'alarm.unassigned'); } } } - getUserDisplayName(entity: AlarmAssignee) { - let displayName = ''; - if ((entity.firstName && entity.firstName.length > 0) || - (entity.lastName && entity.lastName.length > 0)) { - if (entity.firstName) { - displayName += entity.firstName; - } - if (entity.lastName) { - if (displayName.length > 0) { - displayName += ' '; - } - displayName += entity.lastName; - } - } else { - displayName = entity.email; - } - return displayName; - } - - getUserInitials(entity: AlarmAssignee): string { - let initials = ''; - if (entity.firstName && entity.firstName.length || - entity.lastName && entity.lastName.length) { - if (entity.firstName) { - initials += entity.firstName.charAt(0); - } - if (entity.lastName) { - initials += entity.lastName.charAt(0); - } - } else { - initials += entity.email.charAt(0); - } - return initials.toUpperCase(); - } - - getFullName(entity: AlarmAssignee): string { - let fullName = ''; - if ((entity.firstName && entity.firstName.length > 0) || - (entity.lastName && entity.lastName.length > 0)) { - if (entity.firstName) { - fullName += entity.firstName; - } - if (entity.lastName) { - if (fullName.length > 0) { - fullName += ' '; - } - fullName += entity.lastName; - } - } - return fullName; + getUserInitials(alarmAssignee: AlarmAssignee): string { + return this.utilsService.getUserInitials(alarmAssignee); } getAvatarBgColor(entity: AlarmAssignee) { - return this.utilsService.stringToHslColor(this.getUserDisplayName(entity), 40, 60); + return this.utilsService.stringToHslColor(this.utilsService.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 14da818faa..9254b2c681 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 @@ -69,10 +69,14 @@ *ngIf="!displayDataElement.edit; else commentEditing" (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)" (mouseleave)="onCommentMouseLeave(i)"> -
{{ getUserInitials(displayDataElement.displayName) }}
+ + no_accounts +
{{ displayDataElement.displayName }} diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss index 1a84a681f1..ec48adfa11 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss @@ -86,7 +86,7 @@ $border: 1px solid mat.get-color-from-palette($tb-primary); background-color: $primary-color; border: $border; border-bottom: none; - border-radius: 8px 8px 0px 0px; + border-radius: 8px 8px 0 0; &.activity-only { border: none; @@ -94,7 +94,7 @@ $border: 1px solid mat.get-color-from-palette($tb-primary); &.asc { border-bottom: $border; - box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08); + box-shadow: 0 4px 10px rgba(23, 33, 90, 0.08); &.activity-only { border: none; @@ -116,7 +116,7 @@ $border: 1px solid mat.get-color-from-palette($tb-primary); .comments-container { border: $border; border-top: none; - border-radius: 0px 0px 8px 8px; + border-radius: 0 0 8px 8px; &.activity-only { border: none; @@ -134,6 +134,11 @@ $border: 1px solid mat.get-color-from-palette($tb-primary); &:hover { background-color: $primary-color; } + + .mat-icon { + align-self: start; + color: rgba(0, 0, 0, 0.38); + } } .user-avatar { 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 7c52ac972c..1971a34bec 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 @@ -21,31 +21,33 @@ import { TranslateService } from '@ngx-translate/core'; import { AlarmCommentService } from '@core/http/alarm-comment.service'; import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms'; import { DialogService } from '@core/services/dialog.service'; -import { AuthUser, User } from '@shared/models/user.model'; +import { AuthUser } from '@shared/models/user.model'; import { getCurrentAuthUser, selectUserDetails } from '@core/auth/auth.selectors'; 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, AlarmCommentInfo, AlarmCommentType } from '@shared/models/alarm.models'; +import { AlarmComment, AlarmCommentType } 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'; import { ImportExportService } from '@shared/import-export/import-export.service'; +import { isNotEmptyStr } from '@core/utils'; interface AlarmCommentsDisplayData { - commentId?: string, - displayName?: string, - createdTime: string, - createdDateAgo?: string, - edit?: boolean, - isEdited?: boolean, + commentId?: string; + displayName?: string; + createdTime: string; + createdDateAgo?: string; + edit?: boolean; + isEdited?: boolean; editedTime?: string; - editedDateAgo?: string, - showActions?: boolean, - commentText?: string, - isSystemComment?: boolean, - avatarBgColor?: string + editedDateAgo?: string; + showActions?: boolean; + commentText?: string; + isSystemComment?: boolean; + avatarBgColor?: string; + userExists?: boolean; } @Component({ @@ -58,7 +60,7 @@ export class AlarmCommentComponent implements OnInit { alarmId: string; @Input() - alarmActivityOnly: boolean = false; + alarmActivityOnly = false; authUser: AuthUser; @@ -73,11 +75,11 @@ export class AlarmCommentComponent implements OnInit { direction: Direction.DESC }; - editMode: boolean = false; + editMode = false; userDisplayName$ = this.store.pipe( select(selectUserDetails), - map((user) => this.getUserDisplayName(user)) + map((user) => this.utilsService.getUserDisplayName(user)) ); currentUserDisplayName: string; @@ -115,15 +117,18 @@ export class AlarmCommentComponent implements OnInit { (pagedData) => { this.alarmComments = pagedData.data; this.displayData.length = 0; - for (let alarmComment of pagedData.data) { - let displayDataElement = {} as AlarmCommentsDisplayData; + for (const alarmComment of pagedData.data) { + const displayDataElement = {} as AlarmCommentsDisplayData; displayDataElement.createdTime = this.datePipe.transform(alarmComment.createdTime, 'yyyy-MM-dd HH:mm:ss'); displayDataElement.createdDateAgo = this.dateAgoPipe.transform(alarmComment.createdTime); displayDataElement.commentText = alarmComment.comment.text; displayDataElement.isSystemComment = alarmComment.type === AlarmCommentType.SYSTEM; if (alarmComment.type === AlarmCommentType.OTHER) { displayDataElement.commentId = alarmComment.id.id; - displayDataElement.displayName = this.getUserDisplayName(alarmComment); + displayDataElement.userExists = isNotEmptyStr(alarmComment.firstName) || isNotEmptyStr(alarmComment.lastName) || + isNotEmptyStr(alarmComment.email); + displayDataElement.displayName = displayDataElement.userExists ? this.utilsService.getUserDisplayName(alarmComment) : + this.translate.instant('alarm.user-deleted'); displayDataElement.edit = false; displayDataElement.isEdited = alarmComment.comment.edited; displayDataElement.editedTime = this.datePipe.transform(alarmComment.comment.editedOn, 'yyyy-MM-dd HH:mm:ss'); @@ -136,17 +141,17 @@ export class AlarmCommentComponent implements OnInit { this.displayData.push(displayDataElement); } } - ) + ); } changeSortDirection() { - let currentDirection = this.alarmCommentSortOrder.direction; + const currentDirection = this.alarmCommentSortOrder.direction; this.alarmCommentSortOrder.direction = currentDirection === Direction.DESC ? Direction.ASC : Direction.DESC; this.loadAlarmComments(); } exportAlarmActivity() { - let fileName = this.translate.instant('alarm.alarm') + '_' + this.translate.instant('alarm-activity.activity'); + const fileName = this.translate.instant('alarm.alarm') + '_' + this.translate.instant('alarm-activity.activity'); this.importExportService.exportCsv(this.getDataForExport(), fileName.toLowerCase()); } @@ -162,7 +167,7 @@ export class AlarmCommentComponent implements OnInit { comment: { text: commentInputValue } - } + }; this.doSave(comment); this.clearCommentInput(); } @@ -185,7 +190,7 @@ export class AlarmCommentComponent implements OnInit { () => { this.loadAlarmComments(); } - ) + ); } editComment(commentId: string): void { @@ -217,18 +222,18 @@ export class AlarmCommentComponent implements OnInit { .subscribe(() => { this.loadAlarmComments(); } - ) + ); } } - ) + ); } getSortDirectionIcon() { - return this.alarmCommentSortOrder.direction === Direction.DESC ? 'mdi:sort-descending' : 'mdi:sort-ascending' + return this.alarmCommentSortOrder.direction === Direction.DESC ? 'mdi:sort-descending' : 'mdi:sort-ascending'; } getSortDirectionTooltipText() { - let text = this.alarmCommentSortOrder.direction === Direction.DESC ? 'alarm-activity.newest-first' : + const text = this.alarmCommentSortOrder.direction === Direction.DESC ? 'alarm-activity.newest-first' : 'alarm-activity.oldest-first'; return this.translate.instant(text); } @@ -264,25 +269,6 @@ export class AlarmCommentComponent implements OnInit { return this.utilsService.stringToHslColor(userDisplayName, 40, 60); } - private getUserDisplayName(alarmCommentInfo: AlarmCommentInfo | User): string { - let name = ''; - if ((alarmCommentInfo.firstName && alarmCommentInfo.firstName.length > 0) || - (alarmCommentInfo.lastName && alarmCommentInfo.lastName.length > 0)) { - if (alarmCommentInfo.firstName) { - name += alarmCommentInfo.firstName; - } - if (alarmCommentInfo.lastName) { - if (name.length > 0) { - name += ' '; - } - name += alarmCommentInfo.lastName; - } - } else { - name = alarmCommentInfo.email; - } - return name; - } - getAlarmCommentFormControl(): AbstractControl { return this.alarmCommentFormGroup.get('alarmComment'); } @@ -308,16 +294,16 @@ export class AlarmCommentComponent implements OnInit { } private getDataForExport() { - let dataToExport = []; - for (let row of this.displayData) { - let exportRow = { + const dataToExport = []; + for (const row of this.displayData) { + const exportRow = { [this.translate.instant('alarm-activity.author')]: row.isSystemComment ? this.translate.instant('alarm-activity.system') : row.displayName, [this.translate.instant('alarm-activity.created-date')]: row.createdTime, [this.translate.instant('alarm-activity.edited-date')]: row.editedTime, [this.translate.instant('alarm-activity.text')]: row.commentText - } - dataToExport.push(exportRow) + }; + dataToExport.push(exportRow); } return dataToExport; } 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 4a3fa5890b..31cc1d0ae7 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 @@ -31,13 +31,13 @@ import { forkJoin, Observable } from 'rxjs'; import { PageData } from '@shared/models/page/page-data'; import { EntityId } from '@shared/models/id/entity-id'; import { + AlarmAssignee, AlarmInfo, AlarmQueryV2, AlarmSearchStatus, alarmSeverityColors, alarmSeverityTranslations, AlarmsMode, - AlarmStatus, alarmStatusTranslations } from '@app/shared/models/alarm.models'; import { AlarmService } from '@app/core/http/alarm.service'; @@ -60,7 +60,7 @@ import { AlarmAssigneePanelData } from '@home/components/alarm/alarm-assignee-panel.component'; import { ComponentPortal } from '@angular/cdk/portal'; -import { getEntityDetailsPageURL, isDefinedAndNotNull } from '@core/utils'; +import { getEntityDetailsPageURL, isDefinedAndNotNull, isNotEmptyStr } from '@core/utils'; import { UtilsService } from '@core/services/utils.service'; import { AlarmFilterConfig } from '@shared/models/query/query.models'; import { EntityService } from '@core/http/entity.service'; @@ -129,22 +129,15 @@ export class AlarmTableConfig extends EntityTableConfig }))); this.columns.push( new EntityTableColumn('assignee', 'alarm.assignee', '240px', - (entity) => { - return this.getAssigneeTemplate(entity) - }, - () => ({}), - false, - () => ({}), - (entity) => undefined, - false, + (entity) => this.getAssigneeTemplate(entity), () => ({}), false, () => ({}), () => undefined, false, { icon: 'keyboard_arrow_down', type: CellActionDescriptorType.DEFAULT, - isEnabled: (entity) => true, + isEnabled: () => true, name: this.translate.instant('alarm.assign'), onAction: ($event, entity) => this.openAlarmAssigneePanel($event, entity) }) - ) + ); this.columns.push( new EntityTableColumn('status', 'alarm.status', '25%', (entity) => this.translate.instant(alarmStatusTranslations.get(entity.status)))); @@ -177,7 +170,7 @@ export class AlarmTableConfig extends EntityTableConfig isEnabled: true, onAction: ($event, entities) => this.deleteAlarms($event, entities) } - ) + ); } fetchAlarms(pageLink: TimePageLink): Observable> { @@ -216,61 +209,32 @@ export class AlarmTableConfig extends EntityTableConfig } getAssigneeTemplate(entity: AlarmInfo): string { - return ` - - ${isDefinedAndNotNull(entity.assigneeId) ? - ` - - ${this.getUserInitials(entity)} - - ${this.getUserDisplayName(entity)} - ` - : - ` - account_circle - ${this.translate.instant('alarm.unassigned')} - ` - } - ` - } + const hasAssigneeId = isDefinedAndNotNull(entity.assigneeId); + let templateContent: string; - getUserDisplayName(entity: AlarmInfo) { - let displayName = ''; - if ((entity.assignee.firstName && entity.assignee.firstName.length > 0) || - (entity.assignee.lastName && entity.assignee.lastName.length > 0)) { - if (entity.assignee.firstName) { - displayName += entity.assignee.firstName; - } - if (entity.assignee.lastName) { - if (displayName.length > 0) { - displayName += ' '; - } - displayName += entity.assignee.lastName; - } + if (hasAssigneeId && ((isNotEmptyStr(entity.assignee?.firstName) || isNotEmptyStr(entity.assignee?.lastName)) || + isNotEmptyStr(entity.assignee?.email))) { + templateContent = ` + + + ${this.utilsService.getUserInitials(entity.assignee)} + + ${this.utilsService.getUserDisplayName(entity.assignee)} + `; } else { - displayName = entity.assignee.email; + templateContent = ` + + + ${hasAssigneeId ? 'no_accounts' : 'account_circle'} + + ${this.translate.instant(hasAssigneeId ? 'alarm.user-deleted' : 'alarm.unassigned')} + `; } - return displayName; + return `${templateContent}`; } - getUserInitials(entity: AlarmInfo): string { - let initials = ''; - if (entity.assignee.firstName && entity.assignee.firstName.length || - entity.assignee.lastName && entity.assignee.lastName.length) { - if (entity.assignee.firstName) { - initials += entity.assignee.firstName.charAt(0); - } - if (entity.assignee.lastName) { - initials += entity.assignee.lastName.charAt(0); - } - } else { - initials += entity.assignee.email.charAt(0); - } - return initials.toUpperCase(); - } - - getAvatarBgColor(entity: AlarmInfo) { - return this.utilsService.stringToHslColor(this.getUserDisplayName(entity), 40, 60); + getAvatarBgColor(alarmAssignee: AlarmAssignee) { + return this.utilsService.stringToHslColor(this.utilsService.getUserDisplayName(alarmAssignee), 40, 60); } openAlarmAssigneePanel($event: Event, entity: AlarmInfo) { @@ -312,7 +276,7 @@ export class AlarmTableConfig extends EntityTableConfig this.viewContainerRef, injector)); componentRef.onDestroy(() => { if (componentRef.instance.reassigned) { - this.updateData() + this.updateData(); } }); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html index 0aca6e05bc..b8fc11aed5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html @@ -88,24 +88,24 @@ - - - {{ getUserInitials(alarm) }} + + + {{ getUserInitials(alarm.assignee) }} - - {{ getUserDisplayName(alarm) }} + + {{ getUserDisplayName(alarm.assignee) }} - - account_circle - - alarm.unassigned + + + {{ alarm.assigneeId ? 'no_accounts' : 'account_circle' }} + + {{ (alarm.assigneeId ? 'alarm.user-deleted' : 'alarm.unassigned') | translate }} + - +