feat: EnvelopeCreationComponent mit neuen Formularelementen und Datei-Upload-Schritt aktualisiert

- `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

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">
+    <mat-step>
-        <form [formGroup]="firstFormGroup">
+        <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">
+    <mat-step>
-        <form [formGroup]="secondFormGroup">
+        <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>
+        <form>
-        <p>You are now done.</p>
+            <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>

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;
 }

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() {
+  @Input() isLinear = false;
-    this.selectedType = this.types[0].value;
-  }
 
-  private _formBuilder = inject(FormBuilder);
+  titelControl = new FormControl('', [Validators.required]);
 
-  firstFormGroup = this._formBuilder.group({
-    firstCtrl: ['', Validators.required],
-  });
-  secondFormGroup = this._formBuilder.group({
-    secondCtrl: ['', Validators.required],
-  });
-  isLinear = true;
-
-  selectedType: string = "Mietvertrag"
   types: any[] = [
-    {value: 0, viewValue: 'Mietvertrag'},
+    { value: 0, viewValue: 'Mietvertrag' },
-    {value: 1, viewValue: 'Kaufvertrag'}
+    { 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);
+    }
+  }
 }