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 +56 -56
3 changed files with 56 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 578f3f4e0c - Show all commits

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

@ -2,7 +2,7 @@
<!-- {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}--> <!-- {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}-->
<!--</button>--> <!--</button>-->
<mat-stepper linear #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">
@ -87,39 +87,37 @@
<!-- Step 2--> <!-- Step 2-->
<mat-step [stepControl]="secondFormGroup"> <mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup" class="flexContainerColumn width30"> <form [formGroup]="secondFormGroup" class="flexContainerColumn width50">
<ng-template matStepLabel>Bank Informationen</ng-template> <ng-template matStepLabel>Bank Informationen</ng-template>
<mat-form-field appearance="fill"> <div class="flexContainerRow">
<mat-label>Kontoinhaber</mat-label> <div class="leftContainer">
<input matInput formControlName="accountHolder" required /> <mat-form-field appearance="fill">
</mat-form-field> <mat-label>Kontoinhaber</mat-label>
<input matInput formControlName="accountHolder" required />
</mat-form-field>
<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>
<mat-form-field appearance="fill"> <div class="rightContainer">
<mat-label>BIC</mat-label> <mat-form-field appearance="fill">
<input matInput formControlName="bic" required /> <mat-label>BIC</mat-label>
</mat-form-field> <input matInput formControlName="bic" required />
</mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Name der Bank</mat-label> <mat-label>Name der Bank</mat-label>
<input matInput formControlName="nameOfFinancialInstitute" required /> <input matInput formControlName="nameOfFinancialInstitute" required />
</mat-form-field> </mat-form-field>
</div>
</div>
<div class="flexContainerColumn">
<div class="flexContainerRow width20"> <textarea cols="30" rows="7" readonly>{{infoTextEinzugermaechtigung}}</textarea>
<mat-checkbox formControlName="einzugsermaechtigung" required <mat-checkbox formControlName="einzugsermaechtigung" required>Einzugsermächtigung</mat-checkbox>
>Einzugsermächtigung</mat-checkbox
>
<mat-icon
aria-hidden="false"
matTooltip="{{ infoText }}"
matTooltipPosition="right"
>info</mat-icon
>
</div> </div>
</form> </form>
@ -136,30 +134,21 @@
<!-- Step 3--> <!-- Step 3-->
<mat-step> <mat-step>
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width30"> <form [formGroup]="thirdFormGroup" class="flexContainerColumn width50">
<ng-template matStepLabel>Consent</ng-template> <ng-template matStepLabel>Einwilligung</ng-template>
<div class="flexContainerRow width20"> <div class="flexContainerColumn">
<textarea cols="30" rows="10" readonly>{{infoTextEinwilligungserklaerung}}</textarea>
<mat-checkbox formControlName="einwilligung" required <mat-checkbox formControlName="einwilligung" required
>Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von >Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von
personenbezogenen Daten personenbezogenen Daten
</mat-checkbox> </mat-checkbox>
<mat-icon
aria-hidden="false"
matTooltip="{{ infoTextEinwilligungserklaerung }}"
matTooltipPosition="right"
>info</mat-icon
>
</div> </div>
<div class="flexContainerRow width20"> <br style="margin-bottom: 20px;">
<div class="flexContainerColumn">
<textarea cols="30" rows="10" readonly>{{infoTextEinverstaendniserklaerung}}</textarea>
<mat-checkbox formControlName="einverstaendniserklaerung" required <mat-checkbox formControlName="einverstaendniserklaerung" required
>Einverständniserklärung zur Nutzung von Bild- und Videomaterial >Einverständniserklärung zur Nutzung von Bild- und Videomaterial
</mat-checkbox> </mat-checkbox>
<mat-icon
aria-hidden="false"
matTooltip="{{ infoTextEinverstaendniserklaerung }}"
matTooltipPosition="right"
>info</mat-icon
>
</div> </div>
</form> </form>
@ -169,9 +158,10 @@
mat-button mat-button
matStepperNext matStepperNext
[disabled]="thirdFormGroup.status == 'INVALID'" [disabled]="thirdFormGroup.status == 'INVALID'"
> >
Fertig Fertig
</button> </button>
</div> </div>
</mat-step> </mat-step>
</mat-stepper> </mat-stepper>

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

@ -27,12 +27,12 @@ button {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
&.width50 { }
width: 50%; .width50 {
} width: 50%;
&.width20 { }
width: 20%; .width20 {
} width: 20%;
} }
.flexContainerColumn { .flexContainerColumn {
@ -63,3 +63,10 @@ mat-icon {
color: white; color: white;
scale: 80%; scale: 80%;
} }
textarea {
font-family: inherit;
border-radius: 10px 10px 0px 0px;
padding: 5px;
resize: none;
}

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

@ -7,7 +7,10 @@ export const MY_DATE_FORMAT= {
dateInput: 'DD.MM.YYYY' dateInput: 'DD.MM.YYYY'
}, },
display: { display: {
dateInput: 'DD.MM.YYYY' dateInput: 'DD.MM.YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'YYYY-MM-DD',
monthYearA11yLabel: 'MMMM YYYY'
} }
}; };
@ -21,7 +24,7 @@ export class StudentRegisterComponent implements OnInit {
firstFormGroup!: FormGroup; firstFormGroup!: FormGroup;
secondFormGroup!: FormGroup; secondFormGroup!: FormGroup;
thirdFormGroup!: FormGroup; thirdFormGroup!: FormGroup;
infoText = 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-\n' +
'Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n' + 'Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n' +
'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n' + 'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n' +