From 9b2cad1f2446e581c23be983784b4ad687c11a43 Mon Sep 17 00:00:00 2001
From: Simon <therealslimv@yahoo.de>
Date: Wed, 16 Mar 2022 17:11:08 +0100
Subject: [PATCH 1/2] fix: edit single entity correctly works in forms

---
 .../entity-form/entity-form.stories.ts        | 14 ++++++++++
 .../edit-single-entity.component.html         |  4 +--
 .../edit-single-entity.component.spec.ts      | 14 +++++++++-
 .../edit-single-entity.component.ts           | 27 +++++++++++++++++--
 4 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/app/core/entity-components/entity-form/entity-form/entity-form.stories.ts b/src/app/core/entity-components/entity-form/entity-form/entity-form.stories.ts
index e0113312fb..0c50bac62c 100644
--- a/src/app/core/entity-components/entity-form/entity-form/entity-form.stories.ts
+++ b/src/app/core/entity-components/entity-form/entity-form/entity-form.stories.ts
@@ -12,6 +12,9 @@ import { Router } from "@angular/router";
 import { EntityFormModule } from "../entity-form.module";
 import { EntityFormComponent } from "./entity-form.component";
 import { School } from "../../../../child-dev-project/schools/model/school";
+import { MockSessionModule } from "../../../session/mock-session.module";
+import { MatNativeDateModule } from "@angular/material/core";
+import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";
 
 const s1 = new School();
 s1.name = "First School";
@@ -30,6 +33,9 @@ export default {
         RouterTestingModule,
         BrowserAnimationsModule,
         ChildrenModule,
+        MockSessionModule.withState(),
+        MatNativeDateModule,
+        FontAwesomeTestingModule,
       ],
       providers: [
         {
@@ -106,6 +112,7 @@ const cols = [
       label: "Assigned school(s)",
     },
   ],
+  ["school"],
 ];
 
 Child.schema.set("has_rationCard", {
@@ -113,6 +120,13 @@ Child.schema.set("has_rationCard", {
   innerDataType: "document-status",
 });
 Child.schema.set("assignedTo", { dataType: "array", innerDataType: "string" });
+Child.schema.set("school", {
+  dataType: "string",
+  label: "Assigned School",
+  additional: School.ENTITY_TYPE,
+  viewComponent: "DisplayEntity",
+  editComponent: "EditSingleEntity",
+});
 
 const Template: Story<EntityFormComponent> = (args: EntityFormComponent) => ({
   component: EntityFormComponent,
diff --git a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html
index 25a2970a49..183f3e6de0 100644
--- a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html
+++ b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html
@@ -3,7 +3,6 @@
   <input
     #inputElement
     matInput
-    [fxHide]="!formControl.enabled"
     [placeholder]="placeholder"
     [formControl]="entityNameFormControl"
     [matAutocomplete]="autoSuggestions"
@@ -32,9 +31,8 @@
   <app-display-entity
     class="block-wrapper"
     [entityToDisplay]="selectedEntity"
-    [linkDisabled]="true"
   ></app-display-entity>
-  <button mat-icon-button (click)="editSelectedEntity()">
+  <button *ngIf="formControl.enabled" mat-icon-button (click)="editSelectedEntity()">
     <fa-icon icon="pen"></fa-icon>
   </button>
 </div>
diff --git a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.spec.ts b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.spec.ts
index db8cbd61d5..afebe45af2 100644
--- a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.spec.ts
+++ b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.spec.ts
@@ -16,6 +16,9 @@ import { School } from "../../../../../child-dev-project/schools/model/school";
 import { EntityUtilsModule } from "../../entity-utils.module";
 import { Child } from "../../../../../child-dev-project/children/model/child";
 import { TypedFormControl } from "../edit-component";
+import { ChangeDetectorRef } from "@angular/core";
+import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";
+import { RouterTestingModule } from "@angular/router/testing";
 
 describe("EditSingleEntityComponent", () => {
   let component: EditSingleEntityComponent;
@@ -27,12 +30,21 @@ describe("EditSingleEntityComponent", () => {
     mockEntityMapper.loadType.and.resolveTo([]);
 
     await TestBed.configureTestingModule({
-      imports: [EntityUtilsModule, NoopAnimationsModule],
+      imports: [
+        EntityUtilsModule,
+        NoopAnimationsModule,
+        FontAwesomeTestingModule,
+        RouterTestingModule,
+      ],
       declarations: [EditSingleEntityComponent],
       providers: [
         EntityFormService,
         EntitySchemaService,
         { provide: EntityMapperService, useValue: mockEntityMapper },
+        {
+          provide: ChangeDetectorRef,
+          useValue: jasmine.createSpyObj(["detectChanges"]),
+        },
       ],
     }).compileComponents();
   });
diff --git a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.ts b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.ts
index 8d6632b959..61980ad76c 100644
--- a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.ts
+++ b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.ts
@@ -1,4 +1,9 @@
-import { Component, ElementRef, ViewChild } from "@angular/core";
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  ViewChild,
+} from "@angular/core";
 import { EditComponent, EditPropertyConfig } from "../edit-component";
 import { Entity } from "../../../../entity/model/entity";
 import { Observable } from "rxjs";
@@ -23,7 +28,10 @@ export class EditSingleEntityComponent extends EditComponent<string> {
 
   @ViewChild("inputElement") input: ElementRef;
 
-  constructor(private dynamicEntityService: DynamicEntityService) {
+  constructor(
+    private dynamicEntityService: DynamicEntityService,
+    private changeDetection: ChangeDetectorRef
+  ) {
     super();
     this.filteredEntities = this.entityNameFormControl.valueChanges.pipe(
       untilDestroyed(this),
@@ -45,6 +53,7 @@ export class EditSingleEntityComponent extends EditComponent<string> {
 
   async onInitFromDynamicConfig(config: EditPropertyConfig) {
     super.onInitFromDynamicConfig(config);
+    this.connectFormControlDisabledStatus();
     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;
@@ -64,6 +73,20 @@ export class EditSingleEntityComponent extends EditComponent<string> {
     } else {
       this.entityNameFormControl.setValue("");
     }
+    this.changeDetection.detectChanges();
+  }
+
+  private connectFormControlDisabledStatus() {
+    if (this.formControl.disabled) {
+      this.entityNameFormControl.disable();
+    }
+    this.formControl.registerOnDisabledChange((isDisabled) => {
+      if (isDisabled) {
+        this.entityNameFormControl.disable();
+      } else {
+        this.entityNameFormControl.enable();
+      }
+    });
   }
 
   select(entityName: string) {

From bdf56718c7f86bc7bdd90558e5f5b75c0f1d343d Mon Sep 17 00:00:00 2001
From: Sebastian Leidig <sebastian.leidig@gmail.com>
Date: Wed, 23 Mar 2022 12:19:57 +0100
Subject: [PATCH 2/2] fix margin to other fields

---
 .../edit-single-entity/edit-single-entity.component.html     | 2 +-
 .../edit-single-entity/edit-single-entity.component.scss     | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html
index 183f3e6de0..f4a6733beb 100644
--- a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html
+++ b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.html
@@ -27,7 +27,7 @@
   </mat-error>
 </mat-form-field>
 
-<div *ngIf="selectedEntity && !editingSelectedEntity" style="margin-top: 7px">
+<div *ngIf="selectedEntity && !editingSelectedEntity" class="wrapper-readonly">
   <app-display-entity
     class="block-wrapper"
     [entityToDisplay]="selectedEntity"
diff --git a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.scss b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.scss
index f989381131..93ceccce02 100644
--- a/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.scss
+++ b/src/app/core/entity-components/entity-utils/dynamic-form-components/edit-single-entity/edit-single-entity.component.scss
@@ -3,3 +3,8 @@
 .block-wrapper {
   @include entity-block-border;
 }
+
+.wrapper-readonly {
+  margin-top: 7px;
+  margin-bottom: 16px;
+}