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 +187 -121
4 changed files with 187 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f148665a01 - Show all commits

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

@ -3,52 +3,29 @@
<!--</button>-->
<mat-stepper linear #stepper>
<!-- Step 2-->
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
<form [formGroup]="secondFormGroup" class="flexContainerColumn width30">
<ng-template matStepLabel>Banking Information</ng-template>
<mat-form-field appearance="fill">
<mat-label>Account Holder</mat-label>
<input matInput formControlName="accountHolder"
required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>IBAN</mat-label>
<input matInput formControlName="iban" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>BIC</mat-label>
<input matInput formControlName="bic"
required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Name of Financial Institute</mat-label>
<input matInput formControlName="nameOfFinancialInstitute"
required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Amount in €/Month</mat-label>
<input matInput formControlName="amount" required>
</mat-form-field>
<!-- Step 0-->
<mat-step [stepControl]="zeroFormGroup" class="firstStep">
<form [formGroup]="zeroFormGroup">
<ng-template matStepLabel>Registration</ng-template>
<div class="flexContainerRow width20">
<mat-checkbox formControlName="checked" required>Einzugsermächtigung</mat-checkbox>
<mat-icon aria-hidden="false" aria-label="Example home icon" matTooltip="{{infoText}}" matTooltipPosition="right">info</mat-icon>
<mat-checkbox formControlName="danceTraining">Für den Tanzunterricht (Tanz-Flatrate)</mat-checkbox>
</div>
<div class="flexContainerRow width20">
<mat-checkbox formControlName="karateTraining">Für den Karateunterricht</mat-checkbox>
</div>
<div class="flexContainerRow width20">
<mat-checkbox formControlName="freeTraining">Für freies Training (unterschriebenes Beiblatt muss der Anmeldung beiliegen)</mat-checkbox>
</div>
</form>
<div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Back</button>
<button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'" (click)="onClick()">Next</button>
<div>
<button mat-button matStepperNext [disabled]="zeroFormGroup.status == 'INVALID'" (click)="onClick()">Next</button>
</div>
</mat-step>
<!-- Step 1-->
<mat-step [stepControl]="firstFormGroup" class="firstStep">
<form [formGroup]="firstFormGroup" class="formContainer">
<form [formGroup]="firstFormGroup" class="flexContainerRow width50">
<ng-template matStepLabel>Personal Information</ng-template>
<div class="leftContainer">
@ -105,89 +82,75 @@
</mat-form-field>
</div>
</form>
<div>
<button mat-button matStepperNext [disabled]="secondFormGroup.status == 'INVALID'" (click)="onClick()">Next</button>
<div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Back</button>
<button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'" >Next</button>
</div>
</mat-step>
<!-- Step 2-->
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
<form [formGroup]="secondFormGroup" class="flexContainerColumn width30">
<ng-template matStepLabel>Banking Information</ng-template>
<mat-form-field appearance="fill">
<mat-label>Account Holder</mat-label>
<input matInput formControlName="accountHolder"
required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>IBAN</mat-label>
<input matInput formControlName="iban" required>
</mat-form-field>
<!-- &lt;!&ndash; Step 1&ndash;&gt;-->
<!-- <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
<!-- <form [formGroup]="firstFormGroup">-->
<!-- <ng-template matStepLabel>Personal Information</ng-template>-->
<!-- <div class="formContainer1 width50">-->
<!-- <div class="leftContainer">-->
<mat-form-field appearance="fill">
<mat-label>BIC</mat-label>
<input matInput formControlName="bic"
required>
</mat-form-field>
<!-- <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>Name of Financial Institute</mat-label>
<input matInput formControlName="nameOfFinancialInstitute"
required>
</mat-form-field>
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Surname</mat-label>-->
<!-- <input matInput formControlName="lastName" placeholder="Last name" required>-->
<!-- </mat-form-field>-->
<mat-form-field appearance="fill">
<mat-label>Amount in €/Month</mat-label>
<input matInput formControlName="amount" required>
</mat-form-field>
<div class="flexContainerRow width20">
<mat-checkbox formControlName="einzugsermaechtigung" required>Einzugsermächtigung</mat-checkbox>
<mat-icon aria-hidden="false" matTooltip="{{infoText}}" matTooltipPosition="right">info</mat-icon>
</div>
</form>
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Birthdate</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>Gender</mat-label>-->
<!-- <mat-select>-->
<!-- <mat-option value="male">Male</mat-option>-->
<!-- <mat-option value="female">Female</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>Address</mat-label>-->
<!-- <input matInput formControlName="address" required>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Postal Code</mat-label>-->
<!-- <input matInput formControlName="postalCode" required>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Phone</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>Invalid E-Mail Address</mat-error>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'">Next</button>-->
<!-- </div>-->
<!-- </form>-->
<!-- </mat-step>-->
<div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Back</button>
<button mat-button matStepperNext [disabled]="secondFormGroup.status == 'INVALID'" >Next</button>
</div>
</mat-step>
<!-- Step 3-->
<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>
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width30">
<ng-template matStepLabel>Consent</ng-template>
<div class="flexContainerRow width20">
<mat-checkbox formControlName="einwilligung" required>Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von
personenbezogenen Daten </mat-checkbox>
<mat-icon aria-hidden="false" matTooltip="{{infoTextEinwilligungserklaerung}}" matTooltipPosition="right">info</mat-icon>
</div>
<div class="flexContainerRow width20">
<mat-checkbox formControlName="einverstaendniserklaerung" required>Einverständniserklärung zur Nutzung von Bild- und Videomaterial </mat-checkbox>
<mat-icon aria-hidden="false" matTooltip="{{infoTextEinverstaendniserklaerung}}" matTooltipPosition="right">info</mat-icon>
</div>
</form>
<div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Back</button>
<button mat-button matStepperNext [disabled]="thirdFormGroup.status == 'INVALID'" (click)="onClick()">Submit</button>
</div>
</mat-step>
</mat-stepper>

8
frontend/src/app/components/students/student-register/student-register.component.scss
View File

@ -65,11 +65,3 @@ mat-icon {
color: white;
scale: 80%;
}
mat-checkbox {
color: white;
margin-bottom: 16px;
}

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

@ -8,8 +8,11 @@ import {FormBuilder, FormGroup, Validators} from "@angular/forms";
})
export class StudentRegisterComponent implements OnInit {
masterFormGroup!: FormGroup;
zeroFormGroup!: FormGroup;
firstFormGroup!: FormGroup;
secondFormGroup!: FormGroup;
thirdFormGroup!: FormGroup;
isEditable = false;
infoText = "Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-\n" +
"Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n" +
@ -18,9 +21,77 @@ export class StudentRegisterComponent implements OnInit {
"Verwaltungsaufwand entsteht und eine Gebühr i.H.v. derzeit 15,- € berechnet wird. Diese Gebühr\n" +
"wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht."
infoTextEinwilligungserklaerung = "Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher\n" +
"Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.\n" +
"Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben\n" +
"genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.\n" +
"Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke\n" +
"erhobenen persönlichen Daten meiner Person unter Beachtung der EU-\n" +
"Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.\n" +
"Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und\n" +
"Nutzung meiner Daten auf freiwilliger Basis erfolgt.\n" +
"Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger\n" +
"Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine\n" +
"Widerrufserklärung werde ich richten an die unten angegebene Adresse"
infoTextEinverstaendniserklaerung = "Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,\n" +
"die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf\n" +
"denen ich selbst, mein Sohn oder meine Tochter zu sehen ist auf den Webseiten von Li-Dance und in anderen Online- und/oder Printmedien veröffentlicht\n" +
"werden und für Werbezwecke von Li-Dance genutzt werden dürfen. Rechtsgrundlage: Das Recht am eigenen Bild ist ein Teil des vom Gesetz geschützten\n" +
"allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass\n" +
"Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht\n" +
"werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb\n" +
"kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.\n" +
"Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit\n" +
"Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der\n" +
"jeweiligen Veranstaltung zur Folge haben.\n" +
"Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene\n" +
"Veranstaltungen ist ausgeschlossen."
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
//TODO Test to group all forms into one master form
// this.masterFormGroup = this._formBuilder.group({
// zeroFormGroup: this._formBuilder.group({
// danceTraining: [''],
// karateTraining: [''],
// freeTraining: [''],
// }, {
// validators: [this.requireAtLeastOne]
// }),
// firstFormGroup: this._formBuilder.group({
// firstName: ['', Validators.required],
// lastName: ['', Validators.required],
// birthdate: ['', Validators.required],
// postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
// address: ['', Validators.required],
// phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
// email: ['', [Validators.required, Validators.email]],
// }),
// secondFormGroup: this._formBuilder.group({
// accountHolder: ['', Validators.required],
// iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
// bic: ['', Validators.required],
// nameOfFinancialInstitute: ['', Validators.required],
// amount: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
// einzugsermaechtigung: ['', Validators.required],
// }),
// thirdFormGroup: this._formBuilder.group({
// einwilligung: ['', Validators.required],
// einverstaendniserklaerung: ['', Validators.required],
// }),
// });
// }
this.zeroFormGroup = this._formBuilder.group({
danceTraining: [''],
karateTraining: [''],
freeTraining: [''],
}, {
validators : [this.requireAtLeastOne]
}
)
this.firstFormGroup = this._formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
@ -30,17 +101,38 @@ export class StudentRegisterComponent implements OnInit {
phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
email: ['', [Validators.required, Validators.email]],
});
this.secondFormGroup = this._formBuilder.group({
accountHolder: ['', Validators.required],
iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
bic: ['', Validators.required],
nameOfFinancialInstitute: ['', Validators.required],
amount: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
checked: ['', Validators.required],
einzugsermaechtigung: ['', Validators.required],
});
this.thirdFormGroup = this._formBuilder.group({
einwilligung: ['', Validators.required],
einverstaendniserklaerung: ['', Validators.required],
});
}
onClick() {
console.log(this.firstFormGroup)
console.log(this.zeroFormGroup)
}
// 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
}
}

21
frontend/src/styles.scss
View File

@ -1,6 +1,8 @@
/* Provide sufficient contrast against white background */
@import "~bootstrap-icons/font/bootstrap-icons.css";
a {
color: #0366d6;
}
@ -30,7 +32,24 @@ body {
font-size: 95%;
}
// customize datepicker
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: #0366d6 !important;
}
mat-checkbox-checked {
border-color: white;
}
mat-checkbox {
color: white;
margin-bottom: 16px;
}
.mat-step-header .mat-step-icon-selected, .mat-step-icon-state-edit{
background-color: #0366d6 !important;
}
// customize datepicker
//.mat-datepicker-content-container {
// background:transparent;
//}