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

Requested UI Changes

This commit is contained in:
aoezdemir 2024-04-07 23:28:24 +02:00
parent 2e21f3f6ac
commit 52e8b1aa89
4 changed files with 55 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,8 @@
<div class="stepperContainer">
<mat-stepper> <mat-stepper>
<!-- Step 1--> <!-- Step 1-->
<mat-step [stepControl]="firstFormGroup" class="firstStep"> <mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup" class="flexContainerRow width50"> <form [formGroup]="firstFormGroup" class="flexContainerRow">
<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">
@ -28,8 +29,8 @@
matInput matInput
[matDatepicker]="birthdatePicker" [matDatepicker]="birthdatePicker"
formControlName="birthdate" formControlName="birthdate"
placeholder="DD.MM.YYYY"
required /> required />
<mat-hint>DD.MM.YYYY</mat-hint>
<mat-datepicker-toggle <mat-datepicker-toggle
matSuffix matSuffix
[for]="birthdatePicker"></mat-datepicker-toggle> [for]="birthdatePicker"></mat-datepicker-toggle>
@ -40,7 +41,7 @@
<mat-form-field> <mat-form-field>
<mat-label>Geschlecht</mat-label> <mat-label>Geschlecht</mat-label>
<mat-select> <mat-select formControlName="gender" required >
<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>
@ -71,7 +72,6 @@
</div> </div>
</form> </form>
<div class="buttonsContainer"> <div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Zurück</button>
<button <button
mat-button mat-button
matStepperNext matStepperNext
@ -80,7 +80,6 @@
</button> </button>
</div> </div>
</mat-step> </mat-step>
<!-- Step 2--> <!-- Step 2-->
<mat-step [stepControl]="secondFormGroup"> <mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup" class="flexContainerColumn width50"> <form [formGroup]="secondFormGroup" class="flexContainerColumn width50">
@ -127,7 +126,6 @@
</button> </button>
</div> </div>
</mat-step> </mat-step>
<!-- Step 3--> <!-- Step 3-->
<mat-step> <mat-step>
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width50"> <form [formGroup]="thirdFormGroup" class="flexContainerColumn width50">
@ -154,10 +152,12 @@
mat-button mat-button
matStepperNext matStepperNext
[disabled]="thirdFormGroup.status == 'INVALID'" [disabled]="thirdFormGroup.status == 'INVALID'"
(click)="submit()"
> >
Fertig Fertig
</button> </button>
</div> </div>
</mat-step> </mat-step>
</mat-stepper> </mat-stepper>
</div>

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

@ -1,24 +1,23 @@
.stepperContainer {
display: flex;
justify-content: space-around;
}
.mat-stepper-horizontal { .mat-stepper-horizontal {
margin-top: 8px; margin-top: 8px;
background-color: transparent;
min-width: 50%;
} }
.mat-form-field { .mat-form-field {
margin-top: 16px; margin-top: 16px;
} }
.mat-stepper-horizontal {
background-color: transparent;
}
.flexContainerRow { .flexContainerRow {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.width50 {
width: 50%;
}
.width20 { .width20 {
width: 20%; width: 20%;
} }
@ -48,7 +47,6 @@
textarea { textarea {
font-family: inherit; font-family: inherit;
border-radius: 10px 10px 0px 0px;
padding: 5px; padding: 5px;
resize: none; resize: none;
} }

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

@ -26,40 +26,39 @@ export class StudentRegisterComponent implements OnInit {
secondFormGroup!: FormGroup; secondFormGroup!: FormGroup;
thirdFormGroup!: FormGroup; thirdFormGroup!: FormGroup;
infoTextEinzugermaechtigung = infoTextEinzugermaechtigung =
'Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-\n' + 'Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige' +
'Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n' + 'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.' +
'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n' + 'Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein' +
'Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein\n' + 'Verwaltungsaufwand entsteht und eine Gebühr i.H.v. derzeit 15,- € berechnet wird. Diese Gebühr' +
'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.'; 'wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht.';
infoTextEinwilligungserklaerung = infoTextEinwilligungserklaerung =
'Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher\n' + 'Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher' +
'Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.\n' + 'Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.' +
'Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben\n' + 'Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben' +
'genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.\n' + 'genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.' +
'Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke\n' + 'Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke' +
'erhobenen persönlichen Daten meiner Person unter Beachtung der EU-\n' + 'erhobenen persönlichen Daten meiner Person unter Beachtung der EU-' +
'Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.\n' + 'Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.' +
'Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und\n' + 'Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und' +
'Nutzung meiner Daten auf freiwilliger Basis erfolgt.\n' + 'Nutzung meiner Daten auf freiwilliger Basis erfolgt.' +
'Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger\n' + 'Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger' +
'Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine\n' + 'Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine' +
'Widerrufserklärung werde ich richten an die unten angegebene Adresse'; 'Widerrufserklärung werde ich richten an die unten angegebene Adresse';
infoTextEinverstaendniserklaerung = infoTextEinverstaendniserklaerung =
'Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,\n' + 'Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,' +
'die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf\n' + 'die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf' +
'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' + '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' +
'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' + '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' +
'allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass\n' + 'allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass' +
'Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht\n' + 'Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht' +
'werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb\n' + 'werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb' +
'kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.\n' + 'kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.' +
'Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit\n' + 'Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit' +
'Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der\n' + 'Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der' +
'jeweiligen Veranstaltung zur Folge haben.\n' + 'jeweiligen Veranstaltung zur Folge haben.' +
'Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene\n' + 'Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene' +
'Veranstaltungen ist ausgeschlossen.'; 'Veranstaltungen ist ausgeschlossen.';
constructor(private _formBuilder: FormBuilder, private registerService: RegisterService) {} constructor(private _formBuilder: FormBuilder, private registerService: RegisterService) {}
@ -72,14 +71,15 @@ export class StudentRegisterComponent implements OnInit {
birthdate: ['', Validators.required], birthdate: ['', Validators.required],
postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string. postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string.
address: ['', Validators.required], address: ['', Validators.required],
phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]], phone: ['', [Validators.required, Validators.pattern(/^(\+?\d{1,3})?[ ]*\d{9,}$/)]],
gender: ['', Validators.required],
email: ['', [Validators.required, Validators.email]], email: ['', [Validators.required, Validators.email]],
}); });
this.secondFormGroup = this._formBuilder.group({ this.secondFormGroup = this._formBuilder.group({
accountHolder: ['', Validators.required], accountHolder: ['', Validators.required],
iban: ['', [Validators.required, ValidatorService.validateIban]], iban: ['', [Validators.required, ValidatorService.validateIban]],
bic: ['', Validators.required], bic: ['', [Validators.required, Validators.pattern(/^[A-Z]{6}[A-Z0-9]{2}([A-Z0-9]{3})?$/)]],
nameOfFinancialInstitute: ['', Validators.required], nameOfFinancialInstitute: ['', Validators.required],
directDebitAuthorization: ['', Validators.required], directDebitAuthorization: ['', Validators.required],
}); });
@ -105,6 +105,10 @@ export class StudentRegisterComponent implements OnInit {
} }
} }
removeWhiteSpace(input:string):string {
return input.replace(/\s+/g, '')
}
submit() { submit() {
const studentRegistration: StudentRegistration = { const studentRegistration: StudentRegistration = {
// First Form Group // First Form Group
@ -113,7 +117,7 @@ export class StudentRegisterComponent implements OnInit {
birthdate: this.firstFormGroup.get('birthdate')?.value, birthdate: this.firstFormGroup.get('birthdate')?.value,
postalCode: this.firstFormGroup.get('postalCode')?.value, postalCode: this.firstFormGroup.get('postalCode')?.value,
address: this.firstFormGroup.get('address')?.value, address: this.firstFormGroup.get('address')?.value,
phone: this.firstFormGroup.get('phone')?.value, phone: this.removeWhiteSpace(this.firstFormGroup.get('phone')?.value),
email: this.firstFormGroup.get('email')?.value, email: this.firstFormGroup.get('email')?.value,
// Second Form Group // Second Form Group

4
frontend/src/styles.scss
View File

@ -23,6 +23,10 @@ $my-theme: mat.define-light-theme((
.mdc-button { .mdc-button {
background: rgba(255, 255, 255, 0.82) !important; background: rgba(255, 255, 255, 0.82) !important;
} }
.mat-horizontal-stepper-wrapper {
width: 100%;
}
body { body {