feat: Löschen-Schaltfläche zur ReceiverInputComponent hinzufügen und Verwaltung der Empfängerdaten aktualisieren

- Löschen-Schaltfläche zur `ReceiverInputComponent` hinzugefügt, um den Texteingang zu leeren
- Logik in `receiver_filter` implementiert, um eine leere Zeile hinzuzufügen, wenn ein neuer Empfänger hinzugefügt wird, und Zeilen zu entfernen, wenn Eingaben gelöscht werden
- Verwaltung der `receiverData` aktualisiert, um dynamische Hinzufügung und Entfernung von Zeilen basierend auf Eingaben zu berücksichtigen

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

@@ -1,8 +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">
+        <input type="text" aria-label="Email" matInput [formControl]="control" [matAutocomplete]="auto">
+        @if (text) {
+        <button matSuffix mat-icon-button aria-label="Clear" (click)="text=''">
+            <mat-icon>close</mat-icon>
+        </button>
+        }
         <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
             @for (option of filteredOptions | async; track option) {
             <mat-option [value]="option">{{option}}</mat-option>

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

@@ -5,6 +5,11 @@ import { Observable, map, startWith } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
 @Component({
   selector: 'receiver-input',
   standalone: true,
@@ -12,7 +17,8 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
     MatInputModule,
     MatAutocompleteModule,
     ReactiveFormsModule,
-    AsyncPipe
+    AsyncPipe,
+    MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule
   ],
   templateUrl: './receiver-input.component.html',
   styleUrl: './receiver-input.component.scss'
@@ -28,19 +34,33 @@ export class ReceiverInputComponent implements OnInit, OnChanges {
     }
   }
 
+  private setupFiltering(): void {
+    this.filteredOptions = this.control.valueChanges.pipe(
+      startWith(''),
+      map(value => this.filter(value || '', this.options)),
+    );
+  }
+
   control = new FormControl('');
   filteredOptions!: Observable<string[]>;
 
+
   @Input() options: string[] = [];
-  @Input() filter: (value: string) => string[] = value => {
+  @Input() filter: (value: string, options: 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 || '')),
-    );
+  public get text(): string {
+    return this.control.value || '';
   }
+
+  public set text(value: string) {
+    this.control.setValue(value)
+  }
+
+  public get lenght(): number {
+    return this.text.length;
+  }
+
 }

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

@@ -2,7 +2,7 @@
     <ng-container matColumnDef="email">
         <th mat-header-cell *matHeaderCellDef> Email </th>
         <td mat-cell *matCellDef="let element">
-            <receiver-input [options]="receiver_mails"></receiver-input>
+            <receiver-input [options]="receiver_mails" [filter]="receiver_filter"></receiver-input>
         </td>
     </ng-container>
 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
@@ -34,20 +34,40 @@ export class ReceiverTableComponent implements OnInit {
     this.receiver_mails = await this.receiverService.getReceiverAsync().then((receivers: any[]) => receivers.map(r => r.emailAddress));
   }
 
-  control = new FormControl('');
-  receiver_mails: string[] = [];
-  filteredOptions!: Observable<string[]>;
-
-  receiver_filter(value: string): string[] {
+  receiver_filter: (value: string, options: string[]) => string[] = (value, options) => {
     const filterValue = value.toLowerCase();
 
-    return this.receiver_mails.filter(option => option.toLowerCase().includes(filterValue));
+    // if added into last row
+    if (value.length > 0 && (this.receiverInputs.at(-1)?.lenght ?? 0) > 0) {
+      this.receiverData.push({ email: "", name: "", accessCode: "" });
+      this.update();
+    }
+    else if (value.length == 0) {
+      for (var i = 0; i < this.receiverInputs.length - 1; i++) {
+        if (this.receiverInputs[i].lenght === 0) {
+          this.receiverData.splice(i, 1);
+          this.update();
+        }
+      }
+    }
+
+    return options.filter(option => option.toLowerCase().includes(filterValue));
+  }
+
+  receiver_mails: string[] = [];
+
+  @ViewChildren(ReceiverInputComponent) receiverInputsQueryList!: QueryList<ReceiverInputComponent>;
+  get receiverInputs(): ReceiverInputComponent[] {
+    return this.receiverInputsQueryList?.toArray() ?? [];
   }
 
-  //table
   receiverData: { email: string; name: string; accessCode: string }[] = [
     { email: "", name: "", accessCode: "" }
   ];
 
   displayedColumns: string[] = ['email', 'name', 'accessCode'];
+
+  public update() {
+    this.receiverData = [...this.receiverData];
+  }
 }