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": "^17.2.4",
"@angular/platform-browser-dynamic": "^17.2.4", "@angular/platform-browser-dynamic": "^17.2.4",
"@angular/router": "^17.2.4", "@angular/router": "^17.2.4",
"angular-iban": "^17.0.0",
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3", "bootstrap-icons": "^1.11.3",
"moment": "^2.30.1", "moment": "^2.30.1",
@ -7163,6 +7164,19 @@
"ajv": "^8.8.2" "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": { "node_modules/ansi-colors": {
"version": "4.1.3", "version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@ -11102,6 +11116,11 @@
"node": ">=10.17.0" "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": { "node_modules/iconv-lite": {
"version": "0.4.24", "version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -24512,6 +24531,14 @@
"fast-deep-equal": "^3.1.3" "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": { "ansi-colors": {
"version": "4.1.3", "version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@ -27423,6 +27450,11 @@
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==", "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
"dev": true "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": { "iconv-lite": {
"version": "0.4.24", "version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "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": "^17.2.4",
"@angular/platform-browser-dynamic": "^17.2.4", "@angular/platform-browser-dynamic": "^17.2.4",
"@angular/router": "^17.2.4", "@angular/router": "^17.2.4",
"angular-iban": "^17.0.0",
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3", "bootstrap-icons": "^1.11.3",
"moment": "^2.30.1", "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 { MatTooltipModule } from '@angular/material/tooltip';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'; import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter'; import { MomentDateAdapter } from '@angular/material-moment-adapter';
import {AngularIbanModule} from "angular-iban";
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -68,6 +69,7 @@ import { MomentDateAdapter } from '@angular/material-moment-adapter';
MatCheckboxModule, MatCheckboxModule,
MatTooltipModule, MatTooltipModule,
MatIconModule, MatIconModule,
AngularIbanModule
], ],
providers: [ providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }, { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },

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

@ -4,86 +4,165 @@
<mat-stepper> <mat-stepper>
<!-- Step 1--> <!-- Step 1-->
<mat-step [stepControl]="firstFormGroup" class="firstStep"> <!-- <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
<form [formGroup]="firstFormGroup" class="flexContainerRow width50"> <!-- <form [formGroup]="firstFormGroup" class="flexContainerRow width50">-->
<ng-template matStepLabel>Persönliche Informationen</ng-template> <!-- <ng-template matStepLabel>Persönliche Informationen</ng-template>-->
<div class="leftContainer"> <!-- <div class="leftContainer">-->
<mat-form-field appearance="fill"> <!-- <mat-form-field appearance="fill">-->
<mat-label>Name</mat-label> <!-- <mat-label>Name</mat-label>-->
alioezdemir marked this conversation as resolved Outdated
igorpropisnov commented 2024-03-20 22:56:10 +01:00
Outdated
Review
Copy Link

Placeholder auf Deutsch

Placeholder auf Deutsch
<input <!-- <input-->
matInput <!-- matInput-->
formControlName="firstName" <!-- formControlName="firstName"-->
placeholder="First name" <!-- placeholder="First name"-->
required /> <!-- required />-->
</mat-form-field> <!-- </mat-form-field>-->
<mat-form-field appearance="fill"> <!-- <mat-form-field appearance="fill">-->
<mat-label>Nachname</mat-label> <!-- <mat-label>Nachname</mat-label>-->
alioezdemir marked this conversation as resolved Outdated
igorpropisnov commented 2024-03-20 22:56:17 +01:00
Outdated
Review
Copy Link

Placeholder auf Deutsch

Placeholder auf Deutsch
<input <!-- <input-->
matInput <!-- matInput-->
formControlName="lastName" <!-- formControlName="lastName"-->
placeholder="Last name" <!-- placeholder="Last name"-->
required /> <!-- required />-->
</mat-form-field> <!-- </mat-form-field>-->
<mat-form-field appearance="fill"> <!-- <mat-form-field appearance="fill">-->
<mat-label>Geburtstag</mat-label> <!-- <mat-label>Geburtstag</mat-label>-->
<input <!-- <input-->
matInput <!-- matInput-->
alioezdemir marked this conversation as resolved Outdated
igorpropisnov commented 2024-03-20 22:44:11 +01:00
Outdated
Review
Copy Link

Hint muss hier DD.MM.YYYY sein

Hint muss hier DD.MM.YYYY sein
[matDatepicker]="birthdatePicker" <!-- [matDatepicker]="birthdatePicker"-->
formControlName="birthdate" <!-- formControlName="birthdate"-->
required /> <!-- required />-->
<mat-hint>MM.DD.YYYY</mat-hint> <!-- <mat-hint>MM.DD.YYYY</mat-hint>-->
<mat-datepicker-toggle <!-- <mat-datepicker-toggle-->
matSuffix <!-- matSuffix-->
[for]="birthdatePicker"></mat-datepicker-toggle> <!-- [for]="birthdatePicker"></mat-datepicker-toggle>-->
<mat-datepicker <!-- <mat-datepicker-->
#birthdatePicker <!-- #birthdatePicker-->
startView="multi-year"></mat-datepicker> <!-- startView="multi-year"></mat-datepicker>-->
</mat-form-field> <!-- </mat-form-field>-->
<mat-form-field> <!-- <mat-form-field>-->
<mat-label>Geschlecht</mat-label> <!-- <mat-label>Geschlecht</mat-label>-->
<mat-select> <!-- <mat-select>-->
<mat-option value="male">männlich</mat-option> <!-- <mat-option value="male">männlich</mat-option>-->
<mat-option value="female">weiblich</mat-option> <!-- <mat-option value="female">weiblich</mat-option>-->
<mat-option value="divers">divers</mat-option> <!-- <mat-option value="divers">divers</mat-option>-->
</mat-select> <!-- </mat-select>-->
</mat-form-field> <!-- </mat-form-field>-->
</div> <!-- </div>-->
<div class="rightContainer"> <!-- <div class="rightContainer">-->
<mat-form-field appearance="fill"> <!-- <mat-form-field appearance="fill">-->
<mat-label>Adresse</mat-label> <!-- <mat-label>Adresse</mat-label>-->
<input matInput formControlName="address" required /> <!-- <input matInput formControlName="address" required />-->
</mat-form-field> <!-- </mat-form-field>-->
<mat-form-field appearance="fill"> <!-- <mat-form-field appearance="fill">-->
<mat-label>Postleitzahl</mat-label> <!-- <mat-label>Postleitzahl</mat-label>-->
<input matInput formControlName="postalCode" required /> <!-- <input matInput formControlName="postalCode" required />-->
</mat-form-field> <!-- </mat-form-field>-->
<mat-form-field appearance="fill"> <!-- <mat-form-field appearance="fill">-->
<mat-label>Telefon</mat-label> <!-- <mat-label>Telefon</mat-label>-->
<input matInput formControlName="phone" required /> <!-- <input matInput formControlName="phone" required />-->
</mat-form-field> <!-- </mat-form-field>-->
<mat-form-field appearance="fill"> <!-- <mat-form-field appearance="fill">-->
<mat-label>E-Mail</mat-label> <!-- <mat-label>E-Mail</mat-label>-->
<input matInput formControlName="email" required /> <!-- <input matInput formControlName="email" required />-->
<mat-error>Ungültige E-Mail Adresse</mat-error> <!-- <mat-error>Ungültige E-Mail Adresse</mat-error>-->
</mat-form-field> <!-- </mat-form-field>-->
</div> <!-- </div>-->
</form> <!-- </form>-->
<div class="buttonsContainer"> <!-- <div class="buttonsContainer">-->
<button mat-button matStepperPrevious class="backButton">Zurück</button> <!-- <button mat-button matStepperPrevious class="backButton">Zurück</button>-->
<button <!-- <button-->
mat-button <!-- mat-button-->
matStepperNext <!-- matStepperNext-->
[disabled]="firstFormGroup.status == 'INVALID'"> <!-- [disabled]="firstFormGroup.status == 'INVALID'">-->
Weiter <!-- Weiter-->
</button> <!-- </button>-->
</div> <!-- </div>-->
</mat-step> <!-- </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--> <!-- Step 2-->
<mat-step [stepControl]="secondFormGroup"> <mat-step [stepControl]="secondFormGroup">
@ -98,7 +177,7 @@
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>IBAN</mat-label> <mat-label>IBAN</mat-label>
<input matInput formControlName="iban" required /> <input matInput formControlName="iban" required/>
</mat-form-field> </mat-form-field>
</div> </div>

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