refactor: separate EntityTypeSelectComponent from its EditComponent (#…

…2718)

src/app/core/core-components.ts

@@ -241,10 +241,10 @@ export const coreComponents: ComponentTuple[] = [
       ).then((c) => c.RelatedEntitiesWithSummaryComponent),
   ],
   [
-    "EditEntityTypeDropdown",
+    "EditEntityType",
     () =>
-      import(
-        "./entity/edit-entity-type-dropdown/edit-entity-type-dropdown.component"
-      ).then((c) => c.EditEntityTypeDropdownComponent),
+      import("./entity/edit-entity-type/edit-entity-type.component").then(
+        (c) => c.EditEntityTypeComponent,
+      ),
   ],
 ];

src/app/core/entity/edit-entity-type/edit-entity-type.component.html

@@ -0,0 +1,5 @@
+<app-entity-type-select
+  [formControl]="formControl"
+  [allowMultiSelect]="multi"
+  [label]="label"
+></app-entity-type-select>

src/app/core/entity/edit-entity-type-dropdown/edit-entity-type-dropdown.component.spec.ts → src/app/core/entity/edit-entity-type/edit-entity-type.component.spec.ts

@@ -1,22 +1,19 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
-import { EditEntityTypeDropdownComponent } from "./edit-entity-type-dropdown.component";
+import { EditEntityTypeComponent } from "./edit-entity-type.component";
 import { MockedTestingModule } from "../../../utils/mocked-testing.module";
 import { setupEditComponent } from "../default-datatype/edit-component.spec";
 
 describe("EditConfigurableEnumComponent", () => {
-  let component: EditEntityTypeDropdownComponent;
-  let fixture: ComponentFixture<EditEntityTypeDropdownComponent>;
+  let component: EditEntityTypeComponent;
+  let fixture: ComponentFixture<EditEntityTypeComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        EditEntityTypeDropdownComponent,
-        MockedTestingModule.withState(),
-      ],
+      imports: [EditEntityTypeComponent, MockedTestingModule.withState()],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(EditEntityTypeDropdownComponent);
+    fixture = TestBed.createComponent(EditEntityTypeComponent);
     component = fixture.componentInstance;
     setupEditComponent(component);
     fixture.detectChanges();

src/app/core/entity/edit-entity-type/edit-entity-type.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from "@angular/core";
+import { EditComponent } from "../default-datatype/edit-component";
+import { DynamicComponent } from "../../config/dynamic-components/dynamic-component.decorator";
+import { EntityTypeSelectComponent } from "../entity-type-select/entity-type-select.component";
+
+/**
+ * Edit component for selecting an entity type from a dropdown.
+ */
+@DynamicComponent("EditEntityType")
+@Component({
+  selector: "app-edit-entity-type",
+  templateUrl: "./edit-entity-type.component.html",
+  imports: [EntityTypeSelectComponent],
+  standalone: true,
+})
+export class EditEntityTypeComponent
+  extends EditComponent<string | string[]>
+  implements OnInit
+{
+  multi = false;
+
+  override ngOnInit() {
+    super.ngOnInit();
+    this.multi = this.formFieldConfig.isArray;
+  }
+}

src/app/core/entity/edit-entity-type-dropdown/edit-entity-type-dropdown.component.html → src/app/core/entity/entity-type-select/entity-type-select.component.html

@@ -1,11 +1,12 @@
 <mat-form-field>
   <mat-label>{{ label }}</mat-label>
-
   <app-basic-autocomplete
     [formControl]="formControl"
     [options]="entityTypes"
     [optionToString]="optionToLabel"
     [valueMapper]="optionToId"
-    [multi]="multi"
+    placeholder="Select an entity type"
+    [multi]="allowMultiSelect"
+    i18n-placeholder="placeholder for Entity Type dropdown input"
   ></app-basic-autocomplete>
 </mat-form-field>

src/app/core/entity/entity-type-select/entity-type-select.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { EntityTypeSelectComponent } from "./entity-type-select.component";
+import { MockedTestingModule } from "../../../utils/mocked-testing.module";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+
+describe("EntityTypeSelectComponent", () => {
+  let component: EntityTypeSelectComponent;
+  let fixture: ComponentFixture<EntityTypeSelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        EntityTypeSelectComponent,
+        MockedTestingModule.withState(),
+        ReactiveFormsModule,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EntityTypeSelectComponent);
+    component = fixture.componentInstance;
+    component.formControl = new FormControl();
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/entity/entity-type-select/entity-type-select.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { BasicAutocompleteComponent } from "../../common-components/basic-autocomplete/basic-autocomplete.component";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { EntityConstructor } from "../model/entity";
+import { EntityRegistry } from "../database-entity.decorator";
+import { MatFormField, MatLabel } from "@angular/material/form-field";
+
+@Component({
+  selector: "app-entity-type-select",
+  templateUrl: "./entity-type-select.component.html",
+  imports: [
+    BasicAutocompleteComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+  ],
+  standalone: true,
+})
+export class EntityTypeSelectComponent implements OnInit {
+  @Input() formControl: FormControl;
+  @Input() allowMultiSelect = false;
+  @Input() label: string;
+
+  entityTypes: EntityConstructor[];
+  optionToLabel = (option: EntityConstructor) => option.label;
+  optionToId = (option: EntityConstructor) => option.ENTITY_TYPE;
+
+  constructor(private entityRegistry: EntityRegistry) {}
+
+  ngOnInit() {
+    this.entityTypes = this.entityRegistry
+      .getEntityTypes(true)
+      .map(({ value }) => value);
+  }
+}

src/app/features/public-form/public-form-config.ts

@@ -46,7 +46,7 @@ export class PublicFormConfig extends Entity {
   @DatabaseField({
     label: $localize`:PublicFormConfig:Entity`,
     description: $localize`:PublicFormConfig:The type of record that is created when a someone submits the form (e.g. if you select "Note" here, the form will create new entries in your "Notes List" and you can select only fields of your "Note" data structure for this form)`,
-    editComponent: "EditEntityTypeDropdown",
+    editComponent: "EditEntityType",
     validators: {
       required: true,
     },

src/app/features/template-export/template-export.entity.ts

@@ -47,7 +47,7 @@ export class TemplateExport extends Entity {
   @DatabaseField({
     label: $localize`:TemplateExport:Applicable Entity Types`,
     labelShort: $localize`:TemplateExport:Entity Types`,
-    editComponent: "EditEntityTypeDropdown",
+    editComponent: "EditEntityType",
     isArray: true,
   })
   applicableForEntityTypes: string[];