From f795b1447fc6e6afbd2e1a114dda088e336ba2ae Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Thu, 22 Aug 2024 22:34:07 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20ClearableInputComponent=20hinzuf=C3=BCg?=
 =?UTF-8?q?en=20und=20in=20ReceiverTableComponent=20integrieren?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `ClearableInputComponent` erstellt mit einer Löschen-Schaltfläche für Texteingaben
- `ClearableInputComponent` in `ReceiverTableComponent` integriert, um dynamische Eingabefelder zu verwalten
- `receiver-table.component.html` aktualisiert, um `ClearableInputComponent` für das Feld 'Anrede Email' zu verwenden
---
 .../clearable-input.component.html            |  9 ++++++++
 .../clearable-input.component.scss            |  7 ++++++
 .../clearable-input.component.spec.ts         | 23 +++++++++++++++++++
 .../clearable-input.component.ts              | 18 +++++++++++++++
 .../receiver-table.component.html             |  4 +++-
 .../receiver-table.component.ts               |  8 ++++---
 6 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.html
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.scss
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.spec.ts
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.ts

diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.html
new file mode 100644
index 00000000..4a3dea40
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.html
@@ -0,0 +1,9 @@
+<mat-form-field class="example-form-field">
+    <mat-label>{{label}}</mat-label>
+    <input matInput type="text" [(ngModel)]="value">
+    @if (value) {
+    <button matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
+        <mat-icon>close</mat-icon>
+    </button>
+    }
+</mat-form-field>
\ No newline at end of file
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.scss b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.scss
new file mode 100644
index 00000000..fa438f72
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-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/components/clearable-input/clearable-input.component.spec.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.spec.ts
new file mode 100644
index 00000000..f0fa9753
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClearableInputComponent } from './clearable-input.component';
+
+describe('ClearableInputComponent', () => {
+  let component: ClearableInputComponent;
+  let fixture: ComponentFixture<ClearableInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ClearableInputComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ClearableInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.ts
new file mode 100644
index 00000000..426d142b
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/clearable-input/clearable-input.component.ts
@@ -0,0 +1,18 @@
+import {Component, Input} from '@angular/core';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {FormsModule} from '@angular/forms';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+
+@Component({
+  selector: 'clearable-input',
+  standalone: true,
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule],
+  templateUrl: './clearable-input.component.html',
+  styleUrl: './clearable-input.component.scss'
+})
+export class ClearableInputComponent {
+  @Input() public value: string = '';
+  @Input() public label: string = '';
+}
\ No newline at end of file
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html
index 638ed612..a7b69ac5 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html
@@ -8,7 +8,9 @@
 
     <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> Anrede Email </th>
-        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+        <td mat-cell *matCellDef="let element">
+            <clearable-input [label]="'Anrede Email'" [value]="element.name"></clearable-input>
+        </td>
     </ng-container>
 
     <ng-container matColumnDef="accessCode">
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts
index b7d5b520..b469e8ed 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts
@@ -2,13 +2,14 @@ import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/
 import { 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'
 import { ReceiverInputComponent } from '../receiver-input/receiver-input.component';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import { ClearableInputComponent } from '../clearable-input/clearable-input.component'
 
 @Component({
   selector: 'receiver-table',
@@ -21,7 +22,8 @@ import { ReceiverInputComponent } from '../receiver-input/receiver-input.compone
     MatAutocompleteModule,
     ReactiveFormsModule,
     AsyncPipe,
-    ReceiverInputComponent
+    ReceiverInputComponent,
+    MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule, ClearableInputComponent
   ],
   templateUrl: './receiver-table.component.html',
   styleUrl: './receiver-table.component.scss'