Refactor edit single entity component

src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html

@@ -1,23 +1,37 @@
-<mat-form-field [formGroup]="formControl.parent">
+<mat-form-field *ngIf="!selectedEntity || editingSelectedEntity" [formGroup]="formControl.parent">
   <mat-label>{{ label }}</mat-label>
   <input
-    #inputField
+    #inputElement
     matInput
     [fxHide]="!formControl.enabled"
     [placeholder]="placeholder"
     [formControl]="entityNameFormControl"
     [matAutocomplete]="autoSuggestions"
+    (keyup.enter)="submit()"
+    (focusout)="submit()"
   />
   <mat-autocomplete
     #autoSuggestions="matAutocomplete"
+    (optionSelected)="select($event)"
   >
     <!-- Optional header -->
     <ng-content select="mat-option"></ng-content>
-    <mat-option *ngFor="let entity of filteredEntities | async" [value]="entity.toString()" (click)="formControl.setValue(entity.getId())">
+    <mat-option *ngFor="let entity of filteredEntities | async" [value]="entity.toString()">
       <app-display-entity
         [entityToDisplay]="entity"
         [linkDisabled]="true"
       ></app-display-entity>
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>
+
+<div *ngIf="selectedEntity && !editingSelectedEntity" style="margin-top: 7px">
+  <app-display-entity
+    class="block-wrapper"
+    [entityToDisplay]="selectedEntity"
+    [linkDisabled]="true"
+  ></app-display-entity>
+  <button mat-icon-button (click)="editSelectedEntity()">
+    <mat-icon fontIcon="fa-pencil"></mat-icon>
+  </button>
+</div>

src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.scss

@@ -0,0 +1,5 @@
+.block-wrapper {
+  padding: 12px;
+  border-radius: 5px;
+  border: 1px solid lightgray;
+}

src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.spec.ts

@@ -70,10 +70,8 @@ describe("EditSingleEntityComponent", () => {
   }));
 
   it("should show name of the selected entity", fakeAsync(() => {
-    const child1 = new Child();
-    child1.name = "First Child";
-    const child2 = new Child();
-    child2.name = "Second Child";
+    const child1 = Child.create("First Child");
+    const child2 = Child.create("Second Child");
     component.formControl.setValue(child1.getId());
     mockEntityMapper.loadType.and.resolveTo([child1, child2]);
 

src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.ts

@@ -1,42 +1,53 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, ElementRef, ViewChild } from "@angular/core";
 import { EditComponent, EditPropertyConfig } from "../edit-component";
 import { ENTITY_MAP } from "../../../entity-details/entity-details.component";
 import { EntityMapperService } from "../../../../entity/entity-mapper.service";
 import { Entity } from "../../../../entity/model/entity";
 import { Observable } from "rxjs";
-import { map } from "rxjs/operators";
+import { filter, map } from "rxjs/operators";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { MatAutocompleteSelectedEvent } from "@angular/material/autocomplete";
 import { FormControl } from "@angular/forms";
 
+@UntilDestroy()
 @Component({
   selector: "app-edit-single-entity",
   templateUrl: "./edit-single-entity.component.html",
   styleUrls: ["./edit-single-entity.component.scss"],
 })
-export class EditSingleEntityComponent
-  extends EditComponent<string>
-  implements OnInit {
+export class EditSingleEntityComponent extends EditComponent<string> {
   entities: Entity[] = [];
   placeholder: string;
   filteredEntities: Observable<Entity[]>;
-  entityNameFormControl: FormControl;
+  selectedEntity?: Entity;
+  editingSelectedEntity: boolean = false;
+  entityNameFormControl = new FormControl();
+
+  @ViewChild("inputElement") input: ElementRef;
 
   constructor(private entityMapper: EntityMapperService) {
     super();
-    this.entityNameFormControl = new FormControl();
-  }
-  filter(searchText: string): Entity[] {
-    return this.entities.filter((entity) =>
-      entity.toString().toLowerCase().includes(searchText)
-    );
-  }
-  ngOnInit() {
     this.filteredEntities = this.entityNameFormControl.valueChanges.pipe(
+      untilDestroyed(this),
+      filter((s) => s !== null),
       map((searchText?: string) => this.filter(searchText))
     );
   }
+
+  private filter(searchText?: string): Entity[] {
+    if (!searchText) {
+      return this.entities;
+    } else {
+      const filterValue = searchText.toLowerCase();
+      return this.entities.filter((entity) =>
+        entity.toString().toLowerCase().includes(filterValue)
+      );
+    }
+  }
+
   async onInitFromDynamicConfig(config: EditPropertyConfig) {
     super.onInitFromDynamicConfig(config);
-    this.placeholder = $localize`:Placeholder for input to add entities|context Add User(s):Add ${this.label}`;
+    this.placeholder = $localize`:Placeholder for input to set an entity|context Select User:Select ${this.label}`;
     const entityType: string =
       config.formFieldConfig.additional || config.propertySchema.additional;
     const entityConstructor = ENTITY_MAP.get(entityType);
@@ -52,7 +63,40 @@ export class EditSingleEntityComponent
       (entity) => entity.getId() === this.formControl.value
     );
     if (selectedEntity) {
+      this.selectedEntity = selectedEntity;
+      this.editingSelectedEntity = false;
       this.entityNameFormControl.setValue(selectedEntity.toString());
+    } else {
+      this.entityNameFormControl.setValue("");
     }
   }
+
+  select(event: MatAutocompleteSelectedEvent) {
+    const entity = this.entities.find(
+      (e) => e.toString().toLowerCase() === event.option.value.toLowerCase()
+    );
+    if (entity) {
+      this.selectedEntity = entity;
+      this.editingSelectedEntity = false;
+      this.formControl.setValue(entity.getId());
+    }
+  }
+
+  submit() {
+    const currentEntity = this.entityNameFormControl.value;
+    const entity = this.entities.find((e) => e.toString() === currentEntity);
+    if (entity) {
+      this.selectedEntity = entity;
+      this.editingSelectedEntity = false;
+      this.formControl.setValue(entity.getId());
+    }
+  }
+
+  editSelectedEntity() {
+    this.editingSelectedEntity = true;
+    this.formControl.setValue(null);
+    setTimeout(() => {
+      this.input.nativeElement.focus();
+    });
+  }
 }

src/app/core/entity-components/entity-utils/entity-utils.module.ts

@@ -33,6 +33,7 @@ import { MatChipsModule } from "@angular/material/chips";
 import { EditNumberComponent } from "./dynamic-form-components/edit-number/edit-number.component";
 import { EntityFunctionPipe } from "./view-components/readonly-function/entity-function.pipe";
 import { FlexLayoutModule } from "@angular/flex-layout";
+import { MatButtonModule } from "@angular/material/button";
 
 @NgModule({
   declarations: [
@@ -72,6 +73,7 @@ import { FlexLayoutModule } from "@angular/flex-layout";
     MatAutocompleteModule,
     MatChipsModule,
     FlexLayoutModule,
+    MatButtonModule,
   ],
   entryComponents: [
     EditTextComponent,