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

Dependency Day + Basic Setup #3

Closed
igorpropisnov wants to merge 7 commits from feature/dependency-day into main
pull from: feature/dependency-day
merge into: it-as:main
Conversation 0 Commits 7 Files Changed 8 +83 -39
4 changed files with 83 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f3a268f3f3 - Show all commits

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

@ -27,6 +27,8 @@ import {MatButtonModule} from "@angular/material/button";
import {MatRadioModule} from "@angular/material/radio";
import {MatSelectModule} from "@angular/material/select";
import {MatIconModule} from "@angular/material/icon";
import {MatCheckboxModule} from "@angular/material/checkbox";
import {MatTooltipModule} from "@angular/material/tooltip";
@NgModule({
declarations: [
@ -61,6 +63,9 @@ import {MatIconModule} from "@angular/material/icon";
MatButtonModule,
MatRadioModule,
MatSelectModule,
MatCheckboxModule,
MatTooltipModule,
MatIconModule,
],
providers: [],
bootstrap: [AppComponent]

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

@ -3,7 +3,49 @@
<!--</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>
<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>
</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>
</mat-step>
<!-- Step 1-->
<mat-step [stepControl]="firstFormGroup" class="firstStep">
<form [formGroup]="firstFormGroup" class="formContainer">
@ -38,7 +80,6 @@
<mat-option value="divers">Divers</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="rightContainer">
@ -69,45 +110,13 @@
</div>
</mat-step>
<!-- Step 2-->
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
<form [formGroup]="secondFormGroup" class="formContainer2">
<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>
</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>
</mat-step>
<!-- &lt;!&ndash; Step 1&ndash;&gt;-->
<!-- <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
<!-- <form [formGroup]="firstFormGroup">-->
<!-- <ng-template matStepLabel>Personal Information</ng-template>-->
<!-- <div class="formContainer">-->
<!-- <div class="formContainer1 width50">-->
<!-- <div class="leftContainer">-->
<!-- <mat-form-field appearance="fill">-->

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

@ -23,20 +23,28 @@ button {
color: white;
background-color: #1576d5;
}
.formContainer {
width: 50%;
.flexContainerRow {
display: flex;
flex-direction: row;
justify-content: space-between;
&.width50 {
width: 50%;
}
&.width20 {
width: 20%;
}
}
.formContainer2 {
width: 30%;
.flexContainerColumn {
display: flex;
flex-direction: column;
justify-content: space-between;
&.width30 {
width: 30%;
}
}
.leftContainer {
display: flex;
@ -48,6 +56,20 @@ button {
flex-direction: column;
width: 45%;
}
.backButton {
margin-right: 10px;
}
mat-icon {
color: white;
scale: 80%;
}
mat-checkbox {
color: white;
margin-bottom: 16px;
}

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

@ -11,6 +11,12 @@ export class StudentRegisterComponent implements OnInit {
firstFormGroup!: FormGroup;
secondFormGroup!: 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" +
"Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n"+
"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\n" +
"wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht."
constructor(private _formBuilder: FormBuilder) {}
@ -29,6 +35,8 @@ export class StudentRegisterComponent implements OnInit {
iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
bic: ['', Validators.required],
nameOfFinancialInstitute: ['', Validators.required],
amount: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
checked: ['', Validators.required],
});
}