From 80a3a26af8f570de1356b9b8b6b4e16c4268ba2f Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Fri, 23 Aug 2024 00:26:09 +0200
Subject: [PATCH] feat: EnvelopeCreationComponent mit neuen Formularelementen
 und Datei-Upload-Schritt aktualisiert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `isLinear` und `titelControl` als @Input-Eigenschaften in `EnvelopeCreationComponent` hinzugefügt
- Datei-Upload-Funktionalität mit visueller Rückmeldung für ausgewählte Dateien implementiert
- Mat-stepper refaktoriert, um den neuen Datei-Upload-Schritt einzubeziehen
- Design durch Hinzufügen von Symbolen zu den 'Weiter'-Buttons in jedem Schritt verbessert
---
 .../envelope-creation.component.html          | 28 +++++++++-----
 .../envelope-creation.component.scss          |  4 ++
 .../envelope-creation.component.ts            | 37 ++++++++++---------
 3 files changed, 43 insertions(+), 26 deletions(-)

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 d71d3bdb..4b9cd646 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
@@ -1,14 +1,14 @@
 <mat-stepper orientation="vertical" [linear]="isLinear" #stepper>
-    <mat-step [stepControl]="firstFormGroup">
-        <form [formGroup]="firstFormGroup">
+    <mat-step>
+        <form>
             <ng-template matStepLabel>Titel & Vertragstyp</ng-template>
             <mat-form-field>
                 <mat-label>Titel</mat-label>
-                <input matInput placeholder="Arbeitsvertrag" formControlName="firstCtrl" required>
+                <input matInput placeholder="Arbeitsvertrag" [formControl]="titelControl" required>
             </mat-form-field>
             <mat-form-field class="ms-5">
                 <mat-label>Vertragstyp</mat-label>
-                <mat-select [(value)]="selectedType" [formControl]="typeControl" required>
+                <mat-select [formControl]="typeControl" required>
                     @for (type of types; track type) {
                     <mat-option [value]="type.value">{{type.viewValue}}</mat-option>
                     }
@@ -22,10 +22,10 @@
             </div>
         </form>
     </mat-step>
-    <mat-step [stepControl]="secondFormGroup">
-        <form [formGroup]="secondFormGroup">
+    <mat-step>
+        <form>
             <ng-template matStepLabel>Empfänger</ng-template>
-                <receiver-table></receiver-table>
+            <receiver-table></receiver-table>
             <div>
                 <button mat-button matStepperPrevious>Back</button>
                 <button mat-button matStepperNext>
@@ -36,8 +36,18 @@
         </form>
     </mat-step>
     <mat-step>
-        <ng-template matStepLabel>Done</ng-template>
-        <p>You are now done.</p>
+        <form>
+            <ng-template matStepLabel>Neues Dokument</ng-template>
+            <input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload>
+            <div class="file-upload">
+
+                {{fileName || "No file uploaded yet."}}
+
+                <button mat-mini-fab color="primary" class="upload-btn" (click)="fileUpload.click()">
+                    <mat-icon>attach_file</mat-icon>
+                </button>
+            </div>
+        </form>
         <div>
             <button mat-button matStepperPrevious>Back</button>
             <button mat-button (click)="stepper.reset()">Reset</button>
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.scss b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.scss
index fa438f72..594868d8 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.scss
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.scss
@@ -4,4 +4,8 @@
 
 .mat-mdc-form-field {
     margin-top: 16px;
+}
+
+.file-input {
+    display: none;
 }
\ No newline at end of file
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 858e4f4e..9b617390 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
@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { FormBuilder, Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -21,30 +21,33 @@ import { MatIconModule } from '@angular/material/icon';
     MatSelectModule,
     ReceiverTableComponent,
     MatIconModule
-],
+  ],
   templateUrl: './envelope-creation.component.html',
   styleUrl: './envelope-creation.component.scss'
 })
 export class EnvelopeCreationComponent {
 
-  ngOnInit() {
-    this.selectedType = this.types[0].value;
-  }
-
-  private _formBuilder = inject(FormBuilder);
+  @Input() isLinear = false;
 
-  firstFormGroup = this._formBuilder.group({
-    firstCtrl: ['', Validators.required],
-  });
-  secondFormGroup = this._formBuilder.group({
-    secondCtrl: ['', Validators.required],
-  });
-  isLinear = true;
+  titelControl = new FormControl('', [Validators.required]);
 
-  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]);
+
+  fileName: string = ''
+  onFileSelected(event: any) {
+    const file: File = event.target.files[0];
+
+    if (file) {
+
+      this.fileName = file.name;
+
+      const formData = new FormData();
+
+      formData.append("thumbnail", file);
+    }
+  }
 }