AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Umschlag-Erstellungskomponente erstellt und Angular Material Stepper initialisiert

Browse Source
This commit is contained in:
Developer 02 2024-08-20 09:35:00 +02:00
parent a14bd78415
commit 11e8c46e44
6 changed files with 123 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.routes.ts
View File

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

2
EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.html
View File

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

43
EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.html Normal file
View File

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

7
EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.scss Normal file
View File

@ -0,0 +1,7 @@
.mat-stepper-vertical {
margin-top: 8px;
}
.mat-mdc-form-field {
margin-top: 16px;
}

23
EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.spec.ts Normal file
View File

@ -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();
});
});

46
EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope-creation/envelope-creation.component.ts Normal file
View File

@ -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]);
}