it-as
/
li-dance-backoffice
1
0
Fork 0
Code Issues 11 Pull Requests Projects 1 Releases Wiki Activity

Merge Anmeldeformular into main #21

Merged
it-as merged 23 commits from Anmeldeformular into main 2024-04-26 14:40:21 +02:00
Conversation 0 Commits 23 Files Changed 13 +206 -89
5 changed files with 206 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 16044591c3 - Show all commits

32
frontend/package-lock.json generated
View File

@ -19,6 +19,7 @@
"@angular/platform-browser": "^17.2.4",
"@angular/platform-browser-dynamic": "^17.2.4",
"@angular/router": "^17.2.4",
"angular-iban": "^17.0.0",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"moment": "^2.30.1",
@ -7163,6 +7164,19 @@
"ajv": "^8.8.2"
}
},
"node_modules/angular-iban": {
"version": "17.0.0",
"resolved": "https://registry.npmjs.org/angular-iban/-/angular-iban-17.0.0.tgz",
"integrity": "sha512-8wnVH2nfMN3hk/5lWOmcCRA0RAVpCk49stCXkxiiMbXeRNd2pFBM+hlZIrhC+Nxhxf07KnQOpngmXGHiv29lug==",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": "^17.x",
"@angular/core": "^17.x",
"iban": "0.0.14"
}
},
"node_modules/ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@ -11102,6 +11116,11 @@
"node": ">=10.17.0"
}
},
"node_modules/iban": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/iban/-/iban-0.0.14.tgz",
"integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w=="
},
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -24512,6 +24531,14 @@
"fast-deep-equal": "^3.1.3"
}
},
"angular-iban": {
"version": "17.0.0",
"resolved": "https://registry.npmjs.org/angular-iban/-/angular-iban-17.0.0.tgz",
"integrity": "sha512-8wnVH2nfMN3hk/5lWOmcCRA0RAVpCk49stCXkxiiMbXeRNd2pFBM+hlZIrhC+Nxhxf07KnQOpngmXGHiv29lug==",
"requires": {
"tslib": "^2.3.0"
}
},
"ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@ -27423,6 +27450,11 @@
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
"dev": true
},
"iban": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/iban/-/iban-0.0.14.tgz",
"integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w=="
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",

1
frontend/package.json
View File

@ -25,6 +25,7 @@
"@angular/platform-browser": "^17.2.4",
"@angular/platform-browser-dynamic": "^17.2.4",
"@angular/router": "^17.2.4",
"angular-iban": "^17.0.0",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"moment": "^2.30.1",

2
frontend/src/app/app.module.ts
View File

@ -31,6 +31,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTooltipModule } from '@angular/material/tooltip';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import {AngularIbanModule} from "angular-iban";
@NgModule({
declarations: [
@ -68,6 +69,7 @@ import { MomentDateAdapter } from '@angular/material-moment-adapter';
MatCheckboxModule,
MatTooltipModule,
MatIconModule,
AngularIbanModule
],
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },

227
frontend/src/app/components/students/student-register/student-register.component.html
View File

@ -4,86 +4,165 @@
<mat-stepper>
<!-- Step 1-->
<mat-step [stepControl]="firstFormGroup" class="firstStep">
<form [formGroup]="firstFormGroup" class="flexContainerRow width50">
<ng-template matStepLabel>Persönliche Informationen</ng-template>
<div class="leftContainer">
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input
matInput
formControlName="firstName"
placeholder="First name"
required />
</mat-form-field>
<!-- <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
<!-- <form [formGroup]="firstFormGroup" class="flexContainerRow width50">-->
<!-- <ng-template matStepLabel>Persönliche Informationen</ng-template>-->
<!-- <div class="leftContainer">-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Name</mat-label>-->
<!-- <input-->
<!-- matInput-->
<!-- formControlName="firstName"-->
<!-- placeholder="First name"-->
<!-- required />-->
<!-- </mat-form-field>-->
<mat-form-field appearance="fill">
<mat-label>Nachname</mat-label>
<input
matInput
formControlName="lastName"
placeholder="Last name"
required />
</mat-form-field>
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Nachname</mat-label>-->
<!-- <input-->
<!-- matInput-->
<!-- formControlName="lastName"-->
<!-- placeholder="Last name"-->
<!-- required />-->
<!-- </mat-form-field>-->
<mat-form-field appearance="fill">
<mat-label>Geburtstag</mat-label>
<input
matInput
[matDatepicker]="birthdatePicker"
formControlName="birthdate"
required />
<mat-hint>MM.DD.YYYY</mat-hint>
<mat-datepicker-toggle
matSuffix
[for]="birthdatePicker"></mat-datepicker-toggle>
<mat-datepicker
#birthdatePicker
startView="multi-year"></mat-datepicker>
</mat-form-field>
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Geburtstag</mat-label>-->
<!-- <input-->
<!-- matInput-->
<!-- [matDatepicker]="birthdatePicker"-->
<!-- formControlName="birthdate"-->
<!-- required />-->
<!-- <mat-hint>MM.DD.YYYY</mat-hint>-->
<!-- <mat-datepicker-toggle-->
<!-- matSuffix-->
<!-- [for]="birthdatePicker"></mat-datepicker-toggle>-->
<!-- <mat-datepicker-->
<!-- #birthdatePicker-->
<!-- startView="multi-year"></mat-datepicker>-->
<!-- </mat-form-field>-->
<mat-form-field>
<mat-label>Geschlecht</mat-label>
<mat-select>
<mat-option value="male">männlich</mat-option>
<mat-option value="female">weiblich</mat-option>
<mat-option value="divers">divers</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="rightContainer">
<mat-form-field appearance="fill">
<mat-label>Adresse</mat-label>
<input matInput formControlName="address" required />
</mat-form-field>
<!-- <mat-form-field>-->
<!-- <mat-label>Geschlecht</mat-label>-->
<!-- <mat-select>-->
<!-- <mat-option value="male">männlich</mat-option>-->
<!-- <mat-option value="female">weiblich</mat-option>-->
<!-- <mat-option value="divers">divers</mat-option>-->
<!-- </mat-select>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div class="rightContainer">-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Adresse</mat-label>-->
<!-- <input matInput formControlName="address" required />-->
<!-- </mat-form-field>-->
<mat-form-field appearance="fill">
<mat-label>Postleitzahl</mat-label>
<input matInput formControlName="postalCode" required />
</mat-form-field>
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Postleitzahl</mat-label>-->
<!-- <input matInput formControlName="postalCode" required />-->
<!-- </mat-form-field>-->
<mat-form-field appearance="fill">
<mat-label>Telefon</mat-label>
<input matInput formControlName="phone" required />
</mat-form-field>
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Telefon</mat-label>-->
<!-- <input matInput formControlName="phone" required />-->
<!-- </mat-form-field>-->
<mat-form-field appearance="fill">
<mat-label>E-Mail</mat-label>
<input matInput formControlName="email" required />
<mat-error>Ungültige E-Mail Adresse</mat-error>
</mat-form-field>
</div>
</form>
<div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Zurück</button>
<button
mat-button
matStepperNext
[disabled]="firstFormGroup.status == 'INVALID'">
Weiter
</button>
</div>
</mat-step>
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>E-Mail</mat-label>-->
<!-- <input matInput formControlName="email" required />-->
<!-- <mat-error>Ungültige E-Mail Adresse</mat-error>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </form>-->
<!-- <div class="buttonsContainer">-->
<!-- <button mat-button matStepperPrevious class="backButton">Zurück</button>-->
<!-- <button-->
<!-- mat-button-->
<!-- matStepperNext-->
<!-- [disabled]="firstFormGroup.status == 'INVALID'">-->
<!-- Weiter-->
<!-- </button>-->
<!-- </div>-->
<!-- </mat-step> <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
<!-- <form [formGroup]="firstFormGroup" class="flexContainerRow width50">-->
<!-- <ng-template matStepLabel>Persönliche Informationen</ng-template>-->
<!-- <div class="leftContainer">-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Name</mat-label>-->
<!-- <input-->
<!-- matInput-->
<!-- formControlName="firstName"-->
<!-- placeholder="First name"-->
<!-- required />-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Nachname</mat-label>-->
<!-- <input-->
<!-- matInput-->
<!-- formControlName="lastName"-->
<!-- placeholder="Last name"-->
<!-- required />-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Geburtstag</mat-label>-->
<!-- <input-->
<!-- matInput-->
<!-- [matDatepicker]="birthdatePicker"-->
<!-- formControlName="birthdate"-->
<!-- required />-->
<!-- <mat-hint>MM.DD.YYYY</mat-hint>-->
<!-- <mat-datepicker-toggle-->
<!-- matSuffix-->
<!-- [for]="birthdatePicker"></mat-datepicker-toggle>-->
<!-- <mat-datepicker-->
<!-- #birthdatePicker-->
<!-- startView="multi-year"></mat-datepicker>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field>-->
<!-- <mat-label>Geschlecht</mat-label>-->
<!-- <mat-select>-->
<!-- <mat-option value="male">männlich</mat-option>-->
<!-- <mat-option value="female">weiblich</mat-option>-->
<!-- <mat-option value="divers">divers</mat-option>-->
<!-- </mat-select>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div class="rightContainer">-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Adresse</mat-label>-->
<!-- <input matInput formControlName="address" required />-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Postleitzahl</mat-label>-->
<!-- <input matInput formControlName="postalCode" required />-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Telefon</mat-label>-->
<!-- <input matInput formControlName="phone" required />-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>E-Mail</mat-label>-->
<!-- <input matInput formControlName="email" required />-->
<!-- <mat-error>Ungültige E-Mail Adresse</mat-error>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </form>-->
<!-- <div class="buttonsContainer">-->
<!-- <button mat-button matStepperPrevious class="backButton">Zurück</button>-->
<!-- <button-->
<!-- mat-button-->
<!-- matStepperNext-->
<!-- [disabled]="firstFormGroup.status == 'INVALID'">-->
<!-- Weiter-->
<!-- </button>-->
<!-- </div>-->
<!-- </mat-step>-->
<!-- Step 2-->
<mat-step [stepControl]="secondFormGroup">

33
frontend/src/app/components/students/student-register/student-register.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import {Component, input, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {ValidatorService} from "angular-iban";
export const MY_DATE_FORMAT= {
parse: {
@ -9,7 +9,7 @@ export const MY_DATE_FORMAT= {
display: {
dateInput: 'DD.MM.YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'YYYY-MM-DD',
dateA11yLabel: 'DD.MM.YYYY',
monthYearA11yLabel: 'MMMM YYYY'
}
};
@ -20,6 +20,7 @@ export const MY_DATE_FORMAT= {
styleUrls: ['./student-register.component.scss'],
})
export class StudentRegisterComponent implements OnInit {
inputText: string = '';
masterFormGroup!: FormGroup;
firstFormGroup!: FormGroup;
secondFormGroup!: FormGroup;
@ -109,7 +110,7 @@ export class StudentRegisterComponent implements OnInit {
this.secondFormGroup = this._formBuilder.group({
accountHolder: ['', Validators.required],
iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
iban: ['', [Validators.required, ValidatorService.validateIban]],
bic: ['', Validators.required],
nameOfFinancialInstitute: ['', Validators.required],
einzugsermaechtigung: ['', Validators.required],
@ -119,18 +120,20 @@ export class StudentRegisterComponent implements OnInit {
einwilligung: ['', Validators.required],
einverstaendniserklaerung: ['', Validators.required],
});
this.secondFormGroup.get("iban")?.valueChanges.subscribe(value => {
if(value) {
this.capitalizeFirstTwoLetters();
}
})
}
// Custom validator function
requireAtLeastOne(formGroup: FormGroup) {
const danceTraining = formGroup.get('danceTraining')?.value;
const karateTraining = formGroup.get('karateTraining')?.value;
const freeTraining = formGroup.get('freeTraining')?.value;
if (!danceTraining && !karateTraining && !freeTraining) {
return { requiredAtLeastOne: true };
}
return null;
capitalizeFirstTwoLetters() {
let ibanValue = this.secondFormGroup.get("iban")?.value
if(ibanValue.length >= 2) {
this.secondFormGroup.patchValue({
iban: ibanValue.substring(0,2).toUpperCase()+ibanValue.substring(2)
},{emitEvent:false}) //Prevent circular change detection
}
}
}