dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Add useEntityDisplayName input property in entity-autocomplete.component and entity-list.component

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2025-10-08 16:30:40 +03:00
parent e3967e31fc
commit 7ee879a9c1
9 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
View File

@ -60,7 +60,7 @@
#entityAutocomplete="matAutocomplete"
[displayWith]="displayEntityFn">
<mat-option *ngFor="let entity of filteredEntities | async" [value]="entity">
<span [innerHTML]="entity.name | highlight:searchText:true:'ig'"></span>
<span [innerHTML]="displayEntityFn(entity) | highlight:searchText:true:'ig'"></span>
</mat-option>
<mat-option *ngIf="!(filteredEntities | async)?.length" [value]="null">
<div (click)="$event.stopPropagation()">

8
ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
View File

@ -22,7 +22,7 @@ import { catchError, debounceTime, map, share, switchMap, tap } from 'rxjs/opera
import { Store } from '@ngrx/store';
import { AppState } from '@app/core/core.state';
import { AliasEntityType, EntityType } from '@shared/models/entity-type.models';
import { BaseData } from '@shared/models/base-data';
import { BaseData, getEntityDisplayName } from '@shared/models/base-data';
import { EntityId } from '@shared/models/id/entity-id';
import { EntityService } from '@core/http/entity.service';
import { getCurrentAuthUser } from '@core/auth/auth.selectors';
@ -138,6 +138,10 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
@coerceArray()
additionalClasses: Array<string>;
@Input()
@coerceBoolean()
useEntityDisplayName = false;
@Output()
entityChanged = new EventEmitter<BaseData<EntityId>>();
@ -395,7 +399,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
}
displayEntityFn(entity?: BaseData<EntityId>): string | undefined {
return entity ? entity.name : undefined;
return entity ? (this.useEntityDisplayName ? getEntityDisplayName(entity) : entity.name) : undefined;
}
private fetchEntities(searchText?: string): Observable<Array<BaseData<EntityId>>> {

1
ui-ngx/src/app/shared/components/entity/entity-list-select.component.html
View File

@ -36,6 +36,7 @@
*ngIf="modelValue.entityType"
[required]="required"
[entityType]="modelValue.entityType"
[useEntityDisplayName]="useEntityDisplayName"
formControlName="entityIds">
</tb-entity-list>
</div>

3
ui-ngx/src/app/shared/components/entity/entity-list-select.component.ts
View File

@ -68,6 +68,9 @@ export class EntityListSelectComponent implements ControlValueAccessor, OnInit {
@Input()
additionEntityTypes: {[key in string]: string} = {};
@Input({transform: booleanAttribute})
useEntityDisplayName = false;
displayEntityTypeSelect: boolean;
private defaultEntityType: EntityType | AliasEntityType = null;

4
ui-ngx/src/app/shared/components/entity/entity-list.component.html
View File

@ -28,7 +28,7 @@
class="tb-chip-row-ellipsis"
[removable]="!disabled"
(removed)="remove(entity)">
{{entity.name}}
{{ displayEntityFn(entity) }}
<mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
</mat-chip-row>
<input matInput type="text" placeholder="{{ !disabled ? placeholderText : '' }}"
@ -51,7 +51,7 @@
class="tb-autocomplete"
[displayWith]="displayEntityFn">
<mat-option *ngFor="let entity of filteredEntities | async" [value]="entity">
<span [innerHTML]="entity.name | highlight:searchText"></span>
<span [innerHTML]="displayEntityFn(entity) | highlight:searchText"></span>
</mat-option>
<mat-option *ngIf="!(filteredEntities | async)?.length" [value]="null">
<div (click)="$event.stopPropagation()">

8
ui-ngx/src/app/shared/components/entity/entity-list.component.ts
View File

@ -39,7 +39,7 @@ import { Observable } from 'rxjs';
import { filter, map, mergeMap, share, tap } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { EntityType } from '@shared/models/entity-type.models';
import { BaseData } from '@shared/models/base-data';
import { BaseData, getEntityDisplayName } from '@shared/models/base-data';
import { EntityId } from '@shared/models/id/entity-id';
import { EntityService } from '@core/http/entity.service';
import { MatAutocomplete } from '@angular/material/autocomplete';
@ -125,6 +125,10 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, OnChan
@coerceBoolean()
allowCreateNew: boolean;
@Input()
@coerceBoolean()
useEntityDisplayName = false;
@Output()
createNew = new EventEmitter<string>();
@ -277,7 +281,7 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, OnChan
}
public displayEntityFn(entity?: BaseData<EntityId>): string | undefined {
return entity ? entity.name : undefined;
return entity ? (this.useEntityDisplayName ? getEntityDisplayName(entity) : entity.name) : undefined;
}
private fetchEntities(searchText?: string): Observable<Array<BaseData<EntityId>>> {

1
ui-ngx/src/app/shared/components/entity/entity-select.component.html
View File

@ -33,6 +33,7 @@
[appearance]="appearance"
[required]="required"
[entityType]="modelValue.entityType"
[useEntityDisplayName]="useEntityDisplayName"
formControlName="entityId">
</tb-entity-autocomplete>
</div>

4
ui-ngx/src/app/shared/components/entity/entity-select.component.ts
View File

@ -62,6 +62,10 @@ export class EntitySelectComponent implements ControlValueAccessor, OnInit, Afte
@Input()
appearance: MatFormFieldAppearance = 'fill';
@Input()
@coerceBoolean()
useEntityDisplayName = false;
displayEntityTypeSelect: boolean;
AliasEntityType = AliasEntityType;

13
ui-ngx/src/app/shared/models/base-data.ts
View File

@ -16,7 +16,9 @@
import { EntityId } from '@shared/models/id/entity-id';
import { HasUUID } from '@shared/models/id/has-uuid';
import { isDefinedAndNotNull } from '@core/utils';
import { isDefinedAndNotNull, isNotEmptyStr } from '@core/utils';
import { EntityType } from '@shared/models/entity-type.models';
import { User } from '@shared/models/user.model';
export declare type HasId = EntityId | HasUUID;
@ -49,3 +51,12 @@ export function hasIdEquals(id1: HasId, id2: HasId): boolean {
return id1 === id2;
}
}
export function getEntityDisplayName(entity: BaseData<EntityId>): string {
if (entity?.id?.entityType === EntityType.USER) {
const user = entity as User;
const userName = (user?.firstName ?? '') + " " + (user?.lastName ?? '');
return isNotEmptyStr(userName) ? userName.trim() : entity?.name;
}
return isNotEmptyStr(entity?.label) ? entity.label : entity?.name;
}