From 11e8c46e448f191720836b9aba7c349bf454fe4e Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Tue, 20 Aug 2024 09:35:00 +0200
Subject: [PATCH] feat: Umschlag-Erstellungskomponente erstellt und Angular
 Material Stepper initialisiert

---
 .../src/app/app.routes.ts                     |  4 +-
 .../components/navbar/navbar.component.html   |  2 +-
 .../envelope-creation.component.html          | 43 +++++++++++++++++
 .../envelope-creation.component.scss          |  7 +++
 .../envelope-creation.component.spec.ts       | 23 ++++++++++
 .../envelope-creation.component.ts            | 46 +++++++++++++++++++
 6 files changed, 123 insertions(+), 2 deletions(-)
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.html
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.scss
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.spec.ts
 create mode 100644 EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.ts

diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.routes.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.routes.ts
index 627a7e5f..2da5ba78 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.routes.ts
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.routes.ts
@@ -2,9 +2,11 @@ import { Routes } from '@angular/router';
 import { HomeComponent } from '../app/pages/home/home.component'
 import { authGuard } from './guards/auth.guard'
 import { EnvelopeComponent } from './pages/envelope/envelope.component';
+import { EnvelopeCreationComponent } from './pages/envelope-creation/envelope-creation.component';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'login', component: HomeComponent },
-  { path: 'envelope', component: EnvelopeComponent, canActivate: [authGuard] }
+  { path: 'envelope', component: EnvelopeComponent, canActivate: [authGuard] },
+  { path: 'envelope-creation', component: EnvelopeCreationComponent, canActivate: [authGuard] }
 ];
\ No newline at end of file
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.html
index deb760a1..34fde41e 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.html
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.html
@@ -7,7 +7,7 @@
         [ngClass]="{ show: isExpanded }">
         <ul class=" navbar-nav flex-grow">
           <li class="nav-item" [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{exact: true}">
-            <button class="btn nav-link d-flex flex-column align-items-center justify-content-center" (click)="router.navigate(['/'])">
+            <button class="btn nav-link d-flex flex-column align-items-center justify-content-center" (click)="router.navigate(['/envelope-creation'])">
               <mat-icon>mail</mat-icon>
               <span class="fs-6">Neuer Umschlag</span>
             </button>
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
new file mode 100644
index 00000000..95ed530b
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.html
@@ -0,0 +1,43 @@
+<mat-stepper orientation="vertical" [linear]="isLinear" #stepper>
+    <mat-step [stepControl]="firstFormGroup">
+        <form [formGroup]="firstFormGroup">
+            <ng-template matStepLabel>Titel & Vertragstyp</ng-template>
+            <mat-form-field>
+                <mat-label>Titel</mat-label>
+                <input matInput placeholder="Arbeitsvertrag" formControlName="firstCtrl" required>
+            </mat-form-field>
+            <mat-form-field class="ms-5">
+                <mat-label>Vertragstyp</mat-label>
+                <mat-select [(value)]="selectedType" [formControl]="typeControl" formControlName="firstCtrl" required>
+                    @for (type of types; track type) {
+                    <mat-option [value]="type.value">{{type.viewValue}}</mat-option>
+                    }
+                </mat-select>
+            </mat-form-field>
+            <div>
+                <button mat-button matStepperNext>Next</button>
+            </div>
+        </form>
+    </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>
+            <div>
+                <button mat-button matStepperPrevious>Back</button>
+                <button mat-button matStepperNext>Next</button>
+            </div>
+        </form>
+    </mat-step>
+    <mat-step>
+        <ng-template matStepLabel>Done</ng-template>
+        <p>You are now done.</p>
+        <div>
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-button (click)="stepper.reset()">Reset</button>
+        </div>
+    </mat-step>
+</mat-stepper>
\ No newline at end of file
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
new file mode 100644
index 00000000..fa438f72
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.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/envelope-creation.component.spec.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.spec.ts
new file mode 100644
index 00000000..964ced82
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnvelopeCreationComponent } from './envelope-creation.component';
+
+describe('EnvelopeCreationComponent', () => {
+  let component: EnvelopeCreationComponent;
+  let fixture: ComponentFixture<EnvelopeCreationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EnvelopeCreationComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(EnvelopeCreationComponent);
+    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/envelope-creation.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.ts
new file mode 100644
index 00000000..bfc4ae0e
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.ts
@@ -0,0 +1,46 @@
+import { Component, 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';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+
+@Component({
+  selector: 'app-envelope-creation',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    MatStepperModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule
+  ],
+  templateUrl: './envelope-creation.component.html',
+  styleUrl: './envelope-creation.component.scss'
+})
+export class EnvelopeCreationComponent {
+
+  ngOnInit() {
+    this.selectedType = this.types[0].value;
+  }
+
+  private _formBuilder = inject(FormBuilder);
+
+  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: 1, viewValue: 'Kaufvertrag'}
+  ];
+  typeControl = new FormControl('Mietvertrag', [Validators.required]);
+}