feat: ReceiverInputComponent zu ReceiverTableComponent hinzufügen

- `ReceiverInputComponent` für E-Mail-Eingabe mit Autocomplete erstellt
- `ReceiverInputComponent` in `ReceiverTableComponent` integriert
- `ReceiverInputComponent` mit Eingabeoptionen für E-Mail-Adressen konfiguriert

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.html

@@ -0,0 +1,12 @@
+<form class="example-form">
+    <mat-form-field class="example-full-width">
+        <mat-label>Email</mat-label>
+        <input type="text" aria-label="Email" matInput [formControl]="control"
+            [matAutocomplete]="auto">
+        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+            @for (option of filteredOptions | async; track option) {
+            <mat-option [value]="option">{{option}}</mat-option>
+            }
+        </mat-autocomplete>
+    </mat-form-field>
+</form>

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.scss

@@ -0,0 +1,7 @@
+.mat-stepper-vertical {
+    margin-top: 8px;
+}
+
+.mat-mdc-form-field {
+    margin-top: 16px;
+}

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.spec.ts

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

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { Observable, map, startWith } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+
+@Component({
+  selector: 'receiver-input',
+  standalone: true,
+  imports: [
+    MatInputModule,
+    MatAutocompleteModule,
+    ReactiveFormsModule,
+    AsyncPipe
+  ],
+  templateUrl: './receiver-input.component.html',
+  styleUrl: './receiver-input.component.scss'
+})
+export class ReceiverInputComponent implements OnInit, OnChanges {
+  ngOnInit(): void {
+    this.setupFiltering();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['options']) {
+      this.setupFiltering();
+    }
+  }
+
+  control = new FormControl('');
+  filteredOptions!: Observable<string[]>;
+
+  @Input() options: string[] = [];
+  @Input() filter: (value: string) => string[] = value => {
+    const filterValue = value.toLowerCase();
+    return this.options.filter(option => option.toLowerCase().includes(filterValue));
+  }
+
+  private setupFiltering(): void {
+    this.filteredOptions = this.control.valueChanges.pipe(
+      startWith(''),
+      map(value => this.filter(value || '')),
+    );
+  }
+}

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html

@@ -1,21 +1,8 @@
 <table mat-table [dataSource]="receiverData" class="mat-elevation-z8">
-
     <ng-container matColumnDef="email">
         <th mat-header-cell *matHeaderCellDef> Email </th>
         <td mat-cell *matCellDef="let element">
-            <form class="example-form">
+            <receiver-input [options]="receiver_mails"></receiver-input>
-                <mat-form-field class="example-full-width">
-                    <mat-label>Email</mat-label>
-                    <input type="text" aria-label="Email" matInput [formControl]="control"
-                        [matAutocomplete]="auto">
-                    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
-                        @for (option of filteredOptions | async; track option) {
-                        <mat-option [value]="option">{{option}}</mat-option>
-                        }
-                    </mat-autocomplete>
-                </mat-form-field>
-            </form>
-
         </td>
     </ng-container>
 

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.scss

@@ -1,7 +0,0 @@
-.mat-stepper-vertical {
-    margin-top: 8px;
-}
-
-.mat-mdc-form-field {
-    margin-top: 16px;
-}

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
 import { Observable } from 'rxjs';
@@ -8,9 +8,10 @@ import { AsyncPipe } from '@angular/common';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ReceiverService } from '../../services/receiver.service'
+import { ReceiverInputComponent } from '../receiver-input/receiver-input.component';
 
 @Component({
-  selector: 'receiver-input',
+  selector: 'receiver-table',
   standalone: true,
   imports: [
     MatTableModule,
@@ -19,7 +20,8 @@ import { ReceiverService } from '../../services/receiver.service'
     MatInputModule,
     MatAutocompleteModule,
     ReactiveFormsModule,
-    AsyncPipe
+    AsyncPipe,
+    ReceiverInputComponent
   ],
   templateUrl: './receiver-table.component.html',
   styleUrl: './receiver-table.component.scss'
@@ -29,32 +31,17 @@ export class ReceiverTableComponent implements OnInit {
   constructor(private receiverService: ReceiverService) { }
 
   async ngOnInit() {
-    this.receiverService.getReceiver().subscribe({
+    this.receiver_mails = await this.receiverService.getReceiverAsync().then((receivers: any[]) => receivers.map(r => r.emailAddress));
-      next: (receivers) => {
-        this.options = receivers.map((r: any) => r.emailAddress);
-
-        this.filteredOptions = this.control.valueChanges.pipe(
-          startWith(''),
-          map(value => {
-            console.log(value);
-            return this._filter(value || '');
-          }),
-        );
-      }
-    })
   }
 
-  typeControl = new FormControl('Mietvertrag', [Validators.required]);
-
   control = new FormControl('');
-  options: string[] = [];
+  receiver_mails: string[] = [];
   filteredOptions!: Observable<string[]>;
 
-
+  receiver_filter(value: string): string[] {
-  private _filter(value: string): string[] {
     const filterValue = value.toLowerCase();
 
-    return this.options.filter(option => option.toLowerCase().includes(filterValue));
+    return this.receiver_mails.filter(option => option.toLowerCase().includes(filterValue));
   }
 
   //table
@@ -63,5 +50,4 @@ export class ReceiverTableComponent implements OnInit {
   ];
 
   displayedColumns: string[] = ['email', 'name', 'accessCode'];
-
 }