fix: Initial values are correctly display in select component (#1248)

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

src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.html

@@ -1,9 +1,13 @@
 <div>
   <span class="indicator {{ value.style }}">&nbsp;</span>
-
   <mat-form-field class="compact-form-field">
-    <mat-select [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled">
-      <mat-option *ngFor="let s of statusValues" [value]="s">
+    <mat-select
+      [(ngModel)]="value"
+      (ngModelChange)="valueChange.emit(value)"
+      [disabled]="disabled"
+      [compareWith]="compareFn"
+    >
+      <mat-option *appConfigurableEnum="let s of statusID" [value]="s">
         <span class="indicator {{ s.style }}">&nbsp;</span>
         {{ s.label }}
       </mat-option>

src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.ts

@@ -1,14 +1,10 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { ConfigService } from "../../../core/config/config.service";
-import {
-  CONFIGURABLE_ENUM_CONFIG_PREFIX,
-  ConfigurableEnumConfig,
-} from "../../../core/configurable-enum/configurable-enum.interface";
 import {
   ATTENDANCE_STATUS_CONFIG_ID,
   AttendanceStatusType,
   NullAttendanceStatusType,
 } from "../model/attendance-status";
+import { compareEnums } from "../../../utils/utils";
 
 @Component({
   selector: "app-attendance-status-select",
@@ -19,12 +15,6 @@ export class AttendanceStatusSelectComponent {
   @Input() value: AttendanceStatusType = NullAttendanceStatusType;
   @Input() disabled: boolean = false;
   @Output() valueChange = new EventEmitter<AttendanceStatusType>();
-
-  statusValues: AttendanceStatusType[];
-
-  constructor(private configService: ConfigService) {
-    this.statusValues = this.configService.getConfig<
-      ConfigurableEnumConfig<AttendanceStatusType>
-    >(CONFIGURABLE_ENUM_CONFIG_PREFIX + ATTENDANCE_STATUS_CONFIG_ID);
-  }
+  statusID = ATTENDANCE_STATUS_CONFIG_ID;
+  compareFn = compareEnums;
 }

src/app/child-dev-project/attendance/attendance.module.ts

@@ -61,6 +61,7 @@ import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { MatPaginatorModule } from "@angular/material/paginator";
 import { ViewModule } from "../../core/view/view.module";
 import { AttendanceSummaryComponent } from "./attendance-summary/attendance-summary.component";
+import { ConfigurableEnumModule } from "../../core/configurable-enum/configurable-enum.module";
 
 @NgModule({
   declarations: [
@@ -111,6 +112,7 @@ import { AttendanceSummaryComponent } from "./attendance-summary/attendance-summ
     DashboardModule,
     MatPaginatorModule,
     ViewModule,
+    ConfigurableEnumModule,
   ],
   exports: [
     ActivityCardComponent,

src/app/child-dev-project/notes/note-details/note-details.component.html

@@ -74,7 +74,12 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
 
       <mat-form-field>
         <mat-label i18n="Status of a note"> Status </mat-label>
-        <mat-select name="followup" [(ngModel)]="entity.warningLevel" [disabled]="formDialogWrapper.readonly">
+        <mat-select
+          name="followup"
+          [(ngModel)]="entity.warningLevel"
+          [disabled]="formDialogWrapper.readonly"
+          [compareWith]="compareFn"
+        >
           <mat-option
             *appConfigurableEnum="let warningLevel of 'warning-levels'"
             [value]="warningLevel"
@@ -91,6 +96,7 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
           name="type"
           [(ngModel)]="entity.category"
           [disabled]="formDialogWrapper.readonly"
+          [compareWith]="compareFn"
         >
           <mat-option
             *appConfigurableEnum="

src/app/child-dev-project/notes/note-details/note-details.component.ts

@@ -9,6 +9,7 @@ import { School } from "../../schools/model/school";
 import { ExportColumnConfig } from "../../../core/export/export-service/export-column-config";
 import { ConfigService } from "../../../core/config/config.service";
 import { EntityListConfig } from "../../../core/entity-components/entity-list/EntityListConfig";
+import { compareEnums } from "../../../utils/utils";
 
 /**
  * Component responsible for displaying the Note creation/view window
@@ -27,6 +28,7 @@ export class NoteDetailsComponent implements ShowsEntity<Note> {
   readonly User: EntityConstructor<User> = User;
 
   readonly INTERACTION_TYPE_CONFIG = INTERACTION_TYPE_CONFIG_ID;
+  readonly compareFn = compareEnums;
   includeInactiveChildren: boolean = false;
 
   /** export format for notes to be used for downloading the individual details */

src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.html

@@ -2,7 +2,7 @@
   <mat-label>
     {{ label }}
   </mat-label>
-  <mat-select [formControlName]="formControlName" [multiple]="multi">
+  <mat-select [formControlName]="formControlName" [multiple]="multi" [compareWith]="compareFun">
     <mat-option *appConfigurableEnum="let o of enumId" [value]="o">
       {{ o.label }}
     </mat-option>

src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.ts

@@ -6,6 +6,7 @@ import {
 import { ConfigurableEnumValue } from "../configurable-enum.interface";
 import { DynamicComponent } from "../../view/dynamic-components/dynamic-component.decorator";
 import { arrayEntitySchemaDatatype } from "../../entity/schema-datatypes/datatype-array";
+import { compareEnums } from "../../../utils/utils";
 
 @DynamicComponent("EditConfigurableEnum")
 @Component({
@@ -16,6 +17,7 @@ import { arrayEntitySchemaDatatype } from "../../entity/schema-datatypes/datatyp
 export class EditConfigurableEnumComponent extends EditComponent<ConfigurableEnumValue> {
   enumId: string;
   multi = false;
+  compareFun = compareEnums;
 
   onInitFromDynamicConfig(config: EditPropertyConfig) {
     super.onInitFromDynamicConfig(config);

src/app/utils/utils.ts

@@ -3,6 +3,7 @@
  * @param date The date to be checked
  */
 import { Router } from "@angular/router";
+import { ConfigurableEnumValue } from "../core/configurable-enum/configurable-enum.interface";
 
 export function isValidDate(date: any): boolean {
   return (
@@ -89,3 +90,10 @@ export function readFile(file: Blob): Promise<string> {
     fileReader.readAsText(file);
   });
 }
+
+export function compareEnums(
+  a: ConfigurableEnumValue,
+  b: ConfigurableEnumValue
+): boolean {
+  return a?.id === b?.id;
+}