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

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

@@ -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()">

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

@@ -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>>> {

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

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

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

@@ -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;

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

@@ -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()">

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

@@ -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>>> {

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

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

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

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

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

@@ -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;
+}