fix: created custom form input for boolean values (#1715)

closes #1683

Co-authored-by: Sebastian <sebastian.leidig@gmail.com>

src/app/core/configurable-enum/basic-autocomplete/basic-autocomplete.component.html

@@ -1,7 +1,6 @@
 <input
   #inputElement
   [formControl]="autocompleteForm"
-  class="autocomplete-input"
   matInput
   style="text-overflow: ellipsis"
   [matAutocomplete]="autoSuggestions"

src/app/core/configurable-enum/basic-autocomplete/basic-autocomplete.component.ts

@@ -18,7 +18,7 @@ import {
   NgForm,
   ReactiveFormsModule,
 } from "@angular/forms";
-import { MatInputModule } from "@angular/material/input";
+import { MatInput, MatInputModule } from "@angular/material/input";
 import {
   MatAutocompleteModule,
   MatAutocompleteTrigger,
@@ -62,7 +62,10 @@ export class BasicAutocompleteComponent<O, V = O>
   implements OnChanges
 {
   @ContentChild(TemplateRef) templateRef: TemplateRef<O>;
-  @ViewChild("inputElement") inputElement: ElementRef<HTMLInputElement>;
+  // `_elementRef` is protected in `MapInput`
+  @ViewChild(MatInput, { static: true }) inputElement: MatInput & {
+    _elementRef: ElementRef<HTMLElement>;
+  };
   @ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;
 
   @Input() valueMapper = (option: O) => option as unknown as V;
@@ -280,7 +283,7 @@ export class BasicAutocompleteComponent<O, V = O>
 
   onContainerClick(event: MouseEvent) {
     if ((event.target as Element).tagName.toLowerCase() != "input") {
-      this.inputElement.nativeElement.focus();
+      this.inputElement.focus();
     }
   }
 

src/app/core/configurable-enum/basic-autocomplete/custom-form-control.directive.ts

@@ -30,6 +30,7 @@ export abstract class CustomFormControlDirective<T>
   @Input() placeholder: string;
   @Input() required = false;
 
+  abstract inputElement: { _elementRef: ElementRef<HTMLElement> };
   stateChanges = new Subject<void>();
   focused = false;
   touched = false;
@@ -98,10 +99,10 @@ export abstract class CustomFormControlDirective<T>
   }
 
   setDescribedByIds(ids: string[]) {
-    const controlElement = this.elementRef.nativeElement.querySelector(
-      ".autocomplete-input"
-    )!;
-    controlElement.setAttribute("aria-describedby", ids.join(" "));
+    this.inputElement._elementRef.nativeElement.setAttribute(
+      "aria-describedby",
+      ids.join(" ")
+    );
   }
 
   abstract onContainerClick(event: MouseEvent);

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

@@ -0,0 +1,5 @@
+<mat-checkbox
+  [disabled]="disabled"
+  [(ngModel)]="value"
+  (change)="onChange($event.checked)"
+>{{ placeholder }}</mat-checkbox>

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

@@ -0,0 +1,3 @@
+app-boolean-input label {
+  font-size: initial
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BooleanInputComponent } from './boolean-input.component';
+
+describe('BooleanInputComponent', () => {
+  let component: BooleanInputComponent;
+  let fixture: ComponentFixture<BooleanInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ BooleanInputComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BooleanInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,55 @@
+import {
+  Component,
+  ElementRef,
+  Optional,
+  Self,
+  ViewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import { CustomFormControlDirective } from "../../../../../configurable-enum/basic-autocomplete/custom-form-control.directive";
+import { MatCheckbox, MatCheckboxModule } from "@angular/material/checkbox";
+import {
+  FormGroupDirective,
+  FormsModule,
+  NgControl,
+  NgForm,
+} from "@angular/forms";
+import { MatFormFieldControl } from "@angular/material/form-field";
+import { ErrorStateMatcher } from "@angular/material/core";
+
+@Component({
+  selector: "app-boolean-input",
+  standalone: true,
+  imports: [MatCheckboxModule, FormsModule],
+  providers: [
+    { provide: MatFormFieldControl, useExisting: BooleanInputComponent },
+  ],
+  templateUrl: "./boolean-input.component.html",
+  styleUrls: ["./boolean-input.component.scss"],
+  encapsulation: ViewEncapsulation.None,
+})
+export class BooleanInputComponent extends CustomFormControlDirective<boolean> {
+  @ViewChild(MatCheckbox, { static: true }) inputElement: MatCheckbox;
+
+  constructor(
+    elementRef: ElementRef<HTMLElement>,
+    errorStateMatcher: ErrorStateMatcher,
+    @Optional() @Self() ngControl: NgControl,
+    @Optional() parentForm: NgForm,
+    @Optional() parentFormGroup: FormGroupDirective
+  ) {
+    super(
+      elementRef,
+      errorStateMatcher,
+      ngControl,
+      parentForm,
+      parentFormGroup
+    );
+  }
+
+  onContainerClick(event: MouseEvent) {
+    if ((event.target as Element).tagName.toLowerCase() != "mat-checkbox") {
+      this.inputElement.focus();
+    }
+  }
+}

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

@@ -1,3 +1,3 @@
-<div [formGroup]="parent" class="mat-checkbox-wrapper">
-  <mat-checkbox [formControlName]="formControlName">{{ label }}</mat-checkbox>
-</div>
+<mat-form-field>
+  <app-boolean-input [formControl]="formControl" [placeholder]="label"></app-boolean-input>
+</mat-form-field>

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

@@ -0,0 +1,4 @@
+app-edit-boolean .mat-mdc-form-field-infix {
+  padding-top: 12px !important;
+  padding-bottom: 0 !important;
+}

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

@@ -1,14 +1,17 @@
-import { Component } from "@angular/core";
+import { Component, ViewEncapsulation } from "@angular/core";
 import { EditComponent } from "../edit-component";
 import { DynamicComponent } from "../../../../view/dynamic-components/dynamic-component.decorator";
 import { ReactiveFormsModule } from "@angular/forms";
-import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { BooleanInputComponent } from "./boolean-input/boolean-input.component";
 
 @DynamicComponent("EditBoolean")
 @Component({
   selector: "app-edit-boolean",
   templateUrl: "./edit-boolean.component.html",
-  imports: [ReactiveFormsModule, MatCheckboxModule],
+  styleUrls: ["./edit-boolean.component.scss"],
+  imports: [ReactiveFormsModule, MatFormFieldModule, BooleanInputComponent],
   standalone: true,
+  encapsulation: ViewEncapsulation.None,
 })
 export class EditBooleanComponent extends EditComponent<boolean> {}

src/app/core/ui/search/search.service.spec.ts

@@ -9,12 +9,18 @@ import { Database } from "../../database/database";
 
 describe("SearchService", () => {
   let service: SearchService;
+  const childToStringBefore = Child.toStringAttributes;
+  const csrToStringBefore = ChildSchoolRelation.toStringAttributes;
 
   beforeEach(() => {
     TestBed.configureTestingModule({ imports: [DatabaseTestingModule] });
   });
 
-  afterEach(() => TestBed.inject(Database).destroy());
+  afterEach(() => {
+    Child.toStringAttributes = childToStringBefore;
+    ChildSchoolRelation.toStringAttributes = csrToStringBefore;
+    return TestBed.inject(Database).destroy();
+  });
 
   it("should allow to search for toStringAttributes that are not the entityId", async () => {
     ChildSchoolRelation.toStringAttributes = ["entityId"];

src/styles/resets/_mat-input.scss

@@ -1,11 +1,7 @@
 @use "@angular/material" as mat;
 
 /* display disabled form values in black for better readability as we disable forms by default */
-.mat-mdc-input-element:disabled {
-  color: mat.get-color-from-palette(mat.$light-theme-foreground-palette, text) !important;
-}
-
-.mat-mdc-select-disabled .mat-mdc-select-value {
+.mat-mdc-input-element:disabled, .mat-mdc-select-disabled .mat-mdc-select-value, .mat-mdc-checkbox-disabled label {
   color: mat.get-color-from-palette(mat.$light-theme-foreground-palette, text) !important;
 }