From cd32ae2a35c6430c8c9e21b05fa7179bc7b51897 Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Thu, 22 Aug 2024 17:04:46 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20neuen=20Receiver-Input-Komponente=20mit?=
 =?UTF-8?q?=20Autocomplete=20und=20Tabellenanzeige=20hinzuf=C3=BCgen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implementierung der `ReceiverInputComponent` mit Angular Material Autocomplete und Tabelle
- Abruf und Filterung von E-Mail-Adressen aus `ReceiverService`
- Anzeige des E-Mail-Inputs mit Autocomplete-Optionen und einer Datentabelle
- Integration der `ReceiverInputComponent` in den `envelope-creation` Formularschritt
---
 .../envelope-creation.component.html          |  8 +--
 .../envelope-creation.component.ts            | 14 ++--
 .../receiver-input.component.html             | 34 ++++++++++
 .../receiver-input.component.scss             |  7 ++
 .../receiver-input.component.spec.ts          | 23 +++++++
 .../receiver-input.component.ts               | 64 +++++++++++++++++++
 6 files changed, 137 insertions(+), 13 deletions(-)
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.html
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.scss
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.spec.ts
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.ts

diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.html
index cdcde09d..98964489 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.html
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.html
@@ -2,6 +2,7 @@
     <mat-step [stepControl]="firstFormGroup">
         <form [formGroup]="firstFormGroup">
             <ng-template matStepLabel>Titel & Vertragstyp</ng-template>
+            <receiver-input></receiver-input>
             <mat-form-field>
                 <mat-label>Titel</mat-label>
                 <input matInput placeholder="Arbeitsvertrag" formControlName="firstCtrl" required>
@@ -21,11 +22,8 @@
     </mat-step>
     <mat-step [stepControl]="secondFormGroup">
         <form [formGroup]="secondFormGroup">
-            <ng-template matStepLabel>Fill out your address</ng-template>
-            <mat-form-field>
-                <mat-label>Address</mat-label>
-                <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY" required>
-            </mat-form-field>
+            <ng-template matStepLabel>Empfänger</ng-template>
+                <receiver-input></receiver-input>
             <div>
                 <button mat-button matStepperPrevious>Back</button>
                 <button mat-button matStepperNext>Next</button>
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.ts
index 288b0552..cf593a4c 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.ts
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.ts
@@ -5,7 +5,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSelectModule } from '@angular/material/select';
-import { ReceiverService } from '../../services/receiver.service';
+import { ReceiverInputComponent } from "./receiver-input/receiver-input.component";
 
 @Component({
   selector: 'app-envelope-creation',
@@ -17,16 +17,14 @@ import { ReceiverService } from '../../services/receiver.service';
     ReactiveFormsModule,
     MatFormFieldModule,
     MatInputModule,
-    MatSelectModule
-  ],
+    MatSelectModule,
+    ReceiverInputComponent
+],
   templateUrl: './envelope-creation.component.html',
   styleUrl: './envelope-creation.component.scss'
 })
 export class EnvelopeCreationComponent {
 
-  constructor(private receiverService: ReceiverService) {
-  }
-
   ngOnInit() {
     this.selectedType = this.types[0].value;
   }
@@ -43,8 +41,8 @@ export class EnvelopeCreationComponent {
 
   selectedType: string = "Mietvertrag"
   types: any[] = [
-    { value: 0, viewValue: 'Mietvertrag' },
-    { value: 1, viewValue: 'Kaufvertrag' }
+    {value: 0, viewValue: 'Mietvertrag'},
+    {value: 1, viewValue: 'Kaufvertrag'}
   ];
   typeControl = new FormControl('Mietvertrag', [Validators.required]);
 }
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.html
new file mode 100644
index 00000000..c063b33e
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.html
@@ -0,0 +1,34 @@
+<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">
+                <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>
+
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Anrede Email </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="accessCode">
+        <th mat-header-cell *matHeaderCellDef> Zugriffscode </th>
+        <td mat-cell *matCellDef="let element"> {{element.accessCode}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
\ No newline at end of file
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.scss b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.scss
new file mode 100644
index 00000000..fa438f72
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.scss
@@ -0,0 +1,7 @@
+.mat-stepper-vertical {
+    margin-top: 8px;
+}
+
+.mat-mdc-form-field {
+    margin-top: 16px;
+}
\ No newline at end of file
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.spec.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.spec.ts
new file mode 100644
index 00000000..b8e55f5a
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/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();
+  });
+});
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.ts
new file mode 100644
index 00000000..10d5586a
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/receiver-input/receiver-input.component.ts
@@ -0,0 +1,64 @@
+import { Component, OnInit } from '@angular/core';
+import { Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
+import { Observable } from 'rxjs';
+import { startWith, map } from 'rxjs/operators';
+import { AsyncPipe } from '@angular/common';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ReceiverService } from '../../../services/receiver.service'
+
+@Component({
+  selector: 'receiver-input',
+  standalone: true,
+  imports: [
+    MatTableModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatAutocompleteModule,
+    ReactiveFormsModule,
+    AsyncPipe
+  ],
+  templateUrl: './receiver-input.component.html',
+  styleUrl: './receiver-input.component.scss'
+})
+export class ReceiverInputComponent implements OnInit {
+
+  constructor(private receiverService: ReceiverService) { }
+
+  async ngOnInit() {
+    this.receiverService.getReceiver().subscribe({
+      next: (receivers) => {
+        this.options = receivers.map((r: any) => r.emailAddress);
+
+        this.filteredOptions = this.control.valueChanges.pipe(
+          startWith(''),
+          map(value => this._filter(value || '')),
+        );
+      }
+    })
+  }
+
+  typeControl = new FormControl('Mietvertrag', [Validators.required]);
+
+  control = new FormControl('');
+  options: string[] = [];
+  filteredOptions!: Observable<string[]>;
+
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+
+    return this.options.filter(option => option.toLowerCase().includes(filterValue));
+  }
+
+  //table
+  receiverData: { email: string; name: string; accessCode: string }[] = [
+    { email: "", name: "", accessCode: "" }
+  ];
+
+  displayedColumns: string[] = ['email', 'name', 'accessCode'];
+
+}