Release 3.32.3

src/app/child-dev-project/attendance/edit-attendance/edit-attendance.component.html

@@ -1,4 +1,4 @@
-<app-edit-entity-array
+<app-edit-entity
   [formControl]="formControl"
   [formFieldConfig]="formFieldConfig"
   [entity]="entity"

src/app/child-dev-project/attendance/edit-attendance/edit-attendance.component.spec.ts

@@ -10,22 +10,31 @@ import { InteractionType } from "../../notes/model/interaction-type.interface";
 import { defaultInteractionTypes } from "../../../core/config/default-config/default-interaction-types";
 import { MatInputHarness } from "@angular/material/input/testing";
 import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";
+import { Child } from "../../children/model/child";
+import { LoginState } from "../../../core/session/session-states/login-state.enum";
 
 describe("EditAttendanceComponent", () => {
   let component: EditAttendanceComponent;
   let fixture: ComponentFixture<EditAttendanceComponent>;
   let categoryForm: FormControl<InteractionType>;
   let childrenForm: FormControl<string[]>;
 
+  let childrenEntities: Child[];
+
   beforeEach(async () => {
+    childrenEntities = [new Child("child1"), new Child("child2")];
+
     await TestBed.configureTestingModule({
-      imports: [EditAttendanceComponent, MockedTestingModule.withState()],
+      imports: [
+        EditAttendanceComponent,
+        MockedTestingModule.withState(LoginState.LOGGED_IN, childrenEntities),
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(EditAttendanceComponent);
     component = fixture.componentInstance;
     categoryForm = new FormControl<InteractionType>(defaultInteractionTypes[0]);
-    childrenForm = new FormControl(["child1", "child2"]);
+    childrenForm = new FormControl(childrenEntities.map((c) => c.getId()));
     component.parent = new FormGroup({
       children: childrenForm,
       category: categoryForm,
@@ -66,18 +75,18 @@ describe("EditAttendanceComponent", () => {
     categoryForm.setValue(defaultInteractionTypes.find((c) => c.isMeeting));
     fixture.detectChanges();
     const attendanceForm = component.parent.get("childrenAttendance");
-    const a1 = component.getAttendance("child1");
-    const a2 = component.getAttendance("child2");
+    const a1 = component.getAttendance(childrenEntities[0].getId());
+    const a2 = component.getAttendance(childrenEntities[1].getId());
     a1.remarks = "absent";
     a2.remarks = "excused";
 
     expect([...attendanceForm.value.values()]).toHaveSize(2);
 
-    component.removeChild("child2");
+    component.removeChild(childrenEntities[1].getId());
 
-    expect(childrenForm.value).toEqual(["child1"]);
+    expect(childrenForm.value).toEqual([childrenEntities[0].getId()]);
     expect([...attendanceForm.value.values()]).toHaveSize(1);
-    expect(attendanceForm.value.get("child1")).toBe(a1);
+    expect(attendanceForm.value.get(childrenEntities[0].getId())).toBe(a1);
   });
 
   it("should mark form as dirty when some attendance detail was changed", async () => {
@@ -88,10 +97,15 @@ describe("EditAttendanceComponent", () => {
       await TestbedHarnessEnvironment.loader(fixture).getAllHarnesses(
         MatInputHarness,
       );
-    const firstRemarkInput = inputElements[1];
+    const firstRemarkInput = inputElements[2];
     await firstRemarkInput.setValue("new remarks");
 
-    expect(component.getAttendance("child1").remarks).toEqual("new remarks");
+    const placeholder = await firstRemarkInput.getPlaceholder();
+    const name = await firstRemarkInput.getName();
+
+    expect(
+      component.getAttendance(childrenEntities[0].getId()).remarks,
+    ).toEqual("new remarks");
     expect(component.formControl.dirty).toBeTrue();
   });
 });

src/app/child-dev-project/attendance/edit-attendance/edit-attendance.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from "@angular/core";
 import { EditComponent } from "../../../core/entity/default-datatype/edit-component";
-import { EditEntityArrayComponent } from "../../../core/basic-datatypes/entity-array/edit-entity-array/edit-entity-array.component";
+import { EditEntityComponent } from "../../../core/basic-datatypes/entity-array/edit-entity/edit-entity.component";
 import { DynamicComponent } from "../../../core/config/dynamic-components/dynamic-component.decorator";
 import { startWith } from "rxjs/operators";
 import { FormControl } from "@angular/forms";
@@ -24,7 +24,7 @@ import { MatCardModule } from "@angular/material/card";
   selector: "app-edit-attendance",
   standalone: true,
   imports: [
-    EditEntityArrayComponent,
+    EditEntityComponent,
     NgIf,
     NgForOf,
     FontAwesomeModule,

src/app/child-dev-project/notes/model/note.ts

@@ -151,8 +151,7 @@ export class Note extends Entity {
    */
   @DatabaseField({
     label: $localize`:label for the related Entities:Related Records`,
-    viewComponent: "DisplayEntityArray",
-    editComponent: "EditEntityArray",
+    dataType: "entity-array",
     // by default no additional relatedEntities can be linked apart from children and schools, overwrite this in config to display (e.g. additional: "ChildSchoolRelation")
     additional: undefined,
     anonymize: "retain",

src/app/core/basic-datatypes/entity-array/edit-entity-array/edit-entity-array.component.html → src/app/core/basic-datatypes/entity-array/edit-entity/edit-entity.component.html

@@ -1,10 +1,9 @@
 <app-entity-select
   [entityType]="entityName"
-  [selection]="formControl.value"
-  (selectionChange)="formControl.markAsDirty(); formControl.setValue($event)"
-  [disabled]="formControl.disabled"
   [label]="label"
   [placeholder]="placeholder"
   [showEntities]="showEntities"
+  [multi]="multi"
+  [form]="formControl"
 >
 </app-entity-select>

src/app/core/basic-datatypes/entity-array/edit-entity/edit-entity.component.spec.ts

@@ -0,0 +1,67 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+
+import { EditEntityComponent } from "./edit-entity.component";
+import { Child } from "../../../../child-dev-project/children/model/child";
+import { setupEditComponent } from "../../../entity/default-datatype/edit-component.spec";
+import { MockedTestingModule } from "../../../../utils/mocked-testing.module";
+import { ArrayDatatype } from "../../array/array.datatype";
+import { EntityDatatype } from "../../entity/entity.datatype";
+import { EntityArrayDatatype } from "../entity-array.datatype";
+import { FormFieldConfig } from "../../../common-components/entity-form/FormConfig";
+
+describe("EditEntityComponent", () => {
+  let component: EditEntityComponent;
+  let fixture: ComponentFixture<EditEntityComponent<any>>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [EditEntityComponent, MockedTestingModule.withState()],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditEntityComponent);
+    component = fixture.componentInstance;
+    setupEditComponent(component);
+    component.entityName = Child.ENTITY_TYPE;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  function testMultiFlag(
+    formFieldConfig: Partial<FormFieldConfig>,
+    expectedMulti: boolean,
+  ) {
+    component.multi = !expectedMulti;
+    component.formFieldConfig = { id: "test", ...formFieldConfig };
+    component.ngOnInit();
+    expect(component.multi).toBe(expectedMulti);
+  }
+
+  it("should detect 'multi' select for array datatypes", () => {
+    testMultiFlag(
+      {
+        dataType: ArrayDatatype.dataType,
+        innerDataType: EntityDatatype.dataType,
+      },
+      true,
+    );
+
+    testMultiFlag(
+      {
+        dataType: EntityArrayDatatype.dataType,
+      },
+      true,
+    );
+
+    testMultiFlag(
+      {
+        dataType: EntityDatatype.dataType,
+      },
+      false,
+    );
+  });
+});

src/app/core/basic-datatypes/entity-array/edit-entity-array/edit-entity-array.component.ts → src/app/core/basic-datatypes/entity-array/edit-entity/edit-entity.component.ts

@@ -2,27 +2,36 @@ import { Component, Input, OnInit } from "@angular/core";
 import { EditComponent } from "../../../entity/default-datatype/edit-component";
 import { DynamicComponent } from "../../../config/dynamic-components/dynamic-component.decorator";
 import { EntitySelectComponent } from "../../../common-components/entity-select/entity-select.component";
+import { isArrayDataType } from "../../datatype-utils";
 
-@DynamicComponent("EditEntityArray")
+/**
+ * A form field to select among the entities of the given type(s).
+ * Can be configured as single or multi select.
+ */
+@DynamicComponent("EditEntity")
 @Component({
-  selector: "app-edit-entity-array",
-  templateUrl: "./edit-entity-array.component.html",
+  selector: "app-edit-entity",
+  templateUrl: "./edit-entity.component.html",
   imports: [EntitySelectComponent],
   standalone: true,
 })
-export class EditEntityArrayComponent
-  extends EditComponent<string[]>
+export class EditEntityComponent<T extends string[] | string = string[]>
+  extends EditComponent<T>
   implements OnInit
 {
   @Input() showEntities = true;
   placeholder: string;
 
   @Input() entityName: string;
 
+  multi: boolean = false;
+
   ngOnInit() {
     super.ngOnInit();
 
-    this.entityName = this.formFieldConfig.additional;
+    this.entityName = this.entityName ?? this.formFieldConfig.additional;
+
+    this.multi = isArrayDataType(this.formFieldConfig.dataType);
 
     this.placeholder = $localize`:Placeholder for input to add entities|context Add User(s):Add ${this.label}`;
   }

src/app/core/basic-datatypes/entity-array/edit-entity-array/entity-reference-array.stories.ts → src/app/core/basic-datatypes/entity-array/edit-entity/entity-reference.stories.ts

@@ -36,7 +36,7 @@ const Template: StoryFn<FormComponent<any>> = (args: FormComponent<any>) => ({
 const fieldConfig: FormFieldConfig = {
   id: "relatedEntities",
   viewComponent: "DisplayEntityArray",
-  editComponent: "EditEntityArray",
+  editComponent: "EditEntity",
   label: "test related entities label",
   description: "test tooltip",
 };

src/app/core/basic-datatypes/entity-array/entity-array.datatype.ts

@@ -21,8 +21,7 @@ import { EntityDatatype } from "../entity/entity.datatype";
 import { ArrayDatatype } from "../array/array.datatype";
 
 /**
- * Datatype for the EntitySchemaService to handle multiple references to other entities
- * using EditEntityArrayComponent in the UI.
+ * Datatype for the EntitySchemaService to handle multiple references to other entities.
  * Stored as simple array of id strings.
  *
  * For example:
@@ -34,7 +33,7 @@ export class EntityArrayDatatype extends ArrayDatatype<string, string> {
   static override dataType = "entity-array";
   static override label: string = $localize`:datatype-label:link to other records (multi-select)`;
 
-  editComponent = "EditEntityArray";
+  editComponent = "EditEntity";
   viewComponent = "DisplayEntityArray";
 
   transformToDatabaseFormat(value, schema: EntitySchemaField, parent) {