Merge branch 'feat/1055_notifications-final' of https://github.com/Aa…

…m-Digital/ndb-core into feat/notification-rule-condition-component

src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts

@@ -11,9 +11,11 @@ import {
   Directive,
   DoCheck,
   ElementRef,
+  EventEmitter,
   HostBinding,
   Input,
   OnDestroy,
+  Output,
 } from "@angular/core";
 import { Subject } from "rxjs";
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
@@ -34,10 +36,12 @@ export abstract class CustomFormControlDirective<T>
   get required() {
     return this._required;
   }
+
   set required(req: boolean) {
     this._required = coerceBooleanProperty(req);
     this.stateChanges.next();
   }
+
   private _required = false;
 
   stateChanges = new Subject<void>();
@@ -80,6 +84,8 @@ export abstract class CustomFormControlDirective<T>
 
   _value: T;
 
+  @Output() valueChange = new EventEmitter<T>();
+
   constructor(
     public elementRef: ElementRef<HTMLElement>,
     public errorStateMatcher: ErrorStateMatcher,
@@ -126,6 +132,7 @@ export abstract class CustomFormControlDirective<T>
 
   writeValue(val: T): void {
     this.value = val;
+    this.valueChange.emit(val);
   }
 
   registerOnChange(fn: any): void {

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

@@ -6,9 +6,8 @@ import {
 } from "app/core/common-components/basic-autocomplete/basic-autocomplete.component";
 import { EntityConstructor } from "../model/entity";
 import { EntityRegistry } from "../database-entity.decorator";
-import { EntitySchemaService } from "../schema/entity-schema.service";
-import { DefaultDatatype } from "../default-datatype/default.datatype";
 import { EntitySchema } from "../schema/entity-schema";
+import { FormFieldConfig } from "../../common-components/entity-form/FormConfig";
 
 @Component({
   selector: "app-entity-field-select",
@@ -20,41 +19,38 @@ import { EntitySchema } from "../schema/entity-schema";
     { provide: MatFormFieldControl, useExisting: EntityFieldSelectComponent },
   ],
 })
-export class EntityFieldSelectComponent extends BasicAutocompleteComponent<string> {
-  private entityCtor: EntityConstructor;
+export class EntityFieldSelectComponent extends BasicAutocompleteComponent<
+  FormFieldConfig,
+  string
+> {
   @Input() override placeholder: string =
-    $localize`:EntityFieldSelect placeholder: Select Entity Field`;
+    $localize`:EntityFieldSelect placeholder:Select Entity Field`;
 
-  override optionToString = (option: string) =>
-    this.entityCtor.schema.get(option).label;
-  dataTypeMap: { [name: string]: DefaultDatatype };
-  selectedEntityField: string;
-  @Input() override hideOption: (option: string) => boolean;
+  override optionToString = (option: FormFieldConfig) => option.label;
+  override valueMapper = (option: FormFieldConfig) => option.id;
 
-  private entityRegistry = inject(EntityRegistry);
-  private entitySchemaService = inject(EntitySchemaService);
+  @Input() override hideOption: (option: FormFieldConfig) => boolean;
 
-  @Input() set entityType(entity: string) {
+  @Input() set entityType(entity: string | EntityConstructor) {
     if (!entity) {
       return;
     }
-    this.initializeEntity(entity);
-  }
+    if (typeof entity === "string") {
+      this._entityType = this.entityRegistry.get(entity);
+    } else {
+      this._entityType = entity;
+    }
 
-  private initializeEntity(entity: string): void {
-    this.entityCtor = this.entityRegistry.get(entity);
-    this.dataTypeMap = {};
-    this.options = this.getAllFieldProps(this.entityCtor.schema);
+    this.options = this.getAllFieldProps(this._entityType.schema);
   }
 
-  private getAllFieldProps(schema: EntitySchema): string[] {
+  private _entityType: EntityConstructor;
+
+  private entityRegistry = inject(EntityRegistry);
+
+  private getAllFieldProps(schema: EntitySchema): FormFieldConfig[] {
     return [...schema.entries()]
       .filter(([_, fieldSchema]) => fieldSchema.label)
-      .map(([name, fieldSchema]) => {
-        this.dataTypeMap[name] = this.entitySchemaService.getDatatypeOrDefault(
-          fieldSchema.dataType,
-        );
-        return name;
-      });
+      .map(([name, fieldSchema]) => ({ ...fieldSchema, id: name }));
   }
 }

src/app/core/import/import-column-mapping/import-column-mapping.component.html

@@ -16,28 +16,28 @@
   <div *ngFor="let col of columnMapping">
     <mat-form-field>
       <mat-label>{{ col.column }}</mat-label>
-      <app-basic-autocomplete
-        [options]="allProps"
+      <app-entity-field-select
+        [entityType]="entityCtor.label"
+        [hideOption]="isUsed"
         [(ngModel)]="col.propertyName"
         (ngModelChange)="updateMapping(col)"
-        [optionToString]="labelMapper"
-        [hideOption]="isUsed"
       />
     </mat-form-field>
 
-    <button
-      class="margin-left-small"
-      mat-stroked-button
-      *ngIf="dataTypeMap[col.propertyName]?.importConfigComponent"
-      (click)="openMappingComponent(col)"
-      i18n="
-        import - column mapping - configure additional transformation button
-      "
-      [matBadge]="mappingAdditionalWarning?.[col.column]"
-      [matBadgeHidden]="!mappingAdditionalWarning?.[col.column]"
-      matBadgeColor="warn"
-    >
-      Configure value mapping
-    </button>
+    @if (dataTypeMap[col.propertyName]?.importConfigComponent) {
+      <button
+        class="margin-left-small"
+        mat-stroked-button
+        (click)="openMappingComponent(col)"
+        i18n="
+          import - column mapping - configure additional transformation button
+        "
+        [matBadge]="mappingAdditionalWarning?.[col.column]"
+        [matBadgeHidden]="!mappingAdditionalWarning?.[col.column]"
+        matBadgeColor="warn"
+      >
+        Configure value mapping
+      </button>
+    }
   </div>
 </div>

src/app/core/import/import-column-mapping/import-column-mapping.component.ts

@@ -11,16 +11,17 @@ import { EntityRegistry } from "../../entity/database-entity.decorator";
 import { EntityConstructor } from "../../entity/model/entity";
 import { MatDialog } from "@angular/material/dialog";
 import { HelpButtonComponent } from "../../common-components/help-button/help-button.component";
-import { NgForOf, NgIf } from "@angular/common";
+import { NgForOf } from "@angular/common";
 import { MatInputModule } from "@angular/material/input";
-import { BasicAutocompleteComponent } from "../../common-components/basic-autocomplete/basic-autocomplete.component";
+import { EntityFieldSelectComponent } from "../../entity/entity-field-select/entity-field-select.component";
 import { FormsModule } from "@angular/forms";
 import { MatButtonModule } from "@angular/material/button";
 import { MatBadgeModule } from "@angular/material/badge";
 import { EntitySchemaService } from "../../entity/schema/entity-schema.service";
 import { ComponentRegistry } from "../../../dynamic-components";
 import { DefaultDatatype } from "../../entity/default-datatype/default.datatype";
 import { ImportColumnMappingService } from "./import-column-mapping.service";
+import { FormFieldConfig } from "../../common-components/entity-form/FormConfig";
 
 /**
  * Import sub-step: Let user map columns from import data to entity properties
@@ -35,10 +36,9 @@ import { ImportColumnMappingService } from "./import-column-mapping.service";
     HelpButtonComponent,
     NgForOf,
     MatInputModule,
-    BasicAutocompleteComponent,
+    EntityFieldSelectComponent,
     FormsModule,
     MatButtonModule,
-    NgIf,
     MatBadgeModule,
   ],
 })
@@ -47,37 +47,33 @@ export class ImportColumnMappingComponent implements OnChanges {
   @Input() columnMapping: ColumnMapping[] = [];
   @Output() columnMappingChange = new EventEmitter<ColumnMapping[]>();
 
+  entityCtor: EntityConstructor;
+
   @Input() set entityType(value: string) {
     if (!value) {
       return;
     }
 
     this.entityCtor = this.entities.get(value);
     this.dataTypeMap = {};
-    this.allProps = [...this.entityCtor.schema.entries()]
+
+    [...this.entityCtor.schema.entries()]
       .filter(([_, schema]) => schema.label)
       .map(([name, schema]) => {
         this.dataTypeMap[name] = this.schemaService.getDatatypeOrDefault(
           schema.dataType,
         );
-        return name;
       });
   }
 
-  private entityCtor: EntityConstructor;
-
-  /** entity properties that have a label */
-  allProps: string[] = [];
-
   /** properties that need further adjustments through a component */
   dataTypeMap: { [name: string]: DefaultDatatype };
 
   /** warning label badges for a mapped column that requires user configuration for the "additional" details */
   mappingAdditionalWarning: { [key: string]: string } = {};
 
-  labelMapper = (name: string) => this.entityCtor.schema.get(name).label;
-  isUsed = (option: string) =>
-    this.columnMapping.some(({ propertyName }) => propertyName === option);
+  isUsed = (option: FormFieldConfig) =>
+    this.columnMapping.some(({ propertyName }) => propertyName === option.id);
 
   constructor(
     private entities: EntityRegistry,

src/app/features/notification/notification-rule/notification-rule.component.html

@@ -13,11 +13,13 @@
       <div
         class="flex-row justify-content-center align-center notification-rule-option"
       >
-        <mat-form-field class="full-width-field">
+        <mat-form-field
+          class="full-width-field"
+          (click)="handleToggleAccordion(notificationRuleItem)"
+        >
           <mat-label i18n>Select an entity type</mat-label>
           <app-entity-type-select
             formControlName="entityType"
-            (click)="handleToggleAccordion(notificationRuleItem)"
           ></app-entity-type-select>
         </mat-form-field>
         <app-help-button