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 +100 -48
5 changed files with 100 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 155fcde278 - Show all commits

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

@ -26,6 +26,7 @@ import {MatInputModule} from "@angular/material/input";
import {MatButtonModule} from "@angular/material/button";
import {MatRadioModule} from "@angular/material/radio";
import {MatSelectModule} from "@angular/material/select";
import {MatIconModule} from "@angular/material/icon";
@NgModule({
declarations: [
@ -59,7 +60,7 @@ import {MatSelectModule} from "@angular/material/select";
MatInputModule,
MatButtonModule,
MatRadioModule,
MatSelectModule
MatSelectModule,
],
providers: [],
bootstrap: [AppComponent]

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

@ -3,6 +3,7 @@
<!--</button>-->
<mat-stepper linear #stepper>
<!-- Step 1-->
<mat-step [stepControl]="firstFormGroup" class="firstStep">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Personal Information</ng-template>
@ -11,54 +12,70 @@
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
<input matInput formControlName="firstName" placeholder="First name" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Surname</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
<input matInput formControlName="lastName" placeholder="Last name" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Birthdate</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
<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>Male</mat-option>
<mat-option value="valid">Female</mat-option>
<mat-option value="invalid">Divers</mat-option>
<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="firstCtrl" placeholder="Last name, First name" required>
<input matInput formControlName="address" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Postal Code</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
<input matInput formControlName="postalCode" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Phone</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
<input matInput formControlName="phone" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>E-Mail</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
<input matInput formControlName="email" required>
<mat-error>Invalid E-Mail Address</mat-error>
</mat-form-field>
</div>
</div>
<div>
<button mat-button matStepperNext>Next</button>
<button (click)="onClick()">test</button>
</div>
<div>
<button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'">Next</button>
</div>
</form>
</mat-step>
<!-- Step 2-->
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
@ -67,12 +84,17 @@
<input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
required>
</mat-form-field>
<div>
<button (click)="onClick()">test2</button>
</div>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<!-- Step 3-->
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p>

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

@ -41,3 +41,4 @@ button {
flex-direction: column;
width: 45%;
}

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

@ -16,10 +16,20 @@ export class StudentRegisterComponent implements OnInit {
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required],
firstName: ['', Validators.required], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string.
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]],
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required],
});
}
onClick() {
console.log(this.firstFormGroup)
}
}

88
frontend/src/styles.scss
View File

@ -26,45 +26,63 @@ body {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-calendar-body-cell-content {
background-color: #1861ac;
color: #fff;
font-weight: bold;
font-size: 2em;
.mat-form-field-subscript-wrapper {
font-size: 95%;
}
.mat-calendar-table {
border: 1px solid white;
}
// customize datepicker
//.mat-datepicker-content-container {
// background:transparent;
//}
//.mat-datepicker-content {
// color: black;
//}
//.mat-calendar-body-cell-content, .mat-calendar-body-label{
// color: black;
// }
.mat-calendar-table-header {
tr {
th {
padding-top: 2em;
}
th.mat-calendar-table-header-divider {
padding: 0;
}
}
}
.mat-calendar-controls,
.mat-calendar-table-header,
.mat-calendar-body-label {
color: #fff;
font-size: 2em;
}
.mat-calendar-previous-button,
.mat-calendar-next-button,
.mat-calendar-period-button {
font-size: 2em;
height: 2em;
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
//
//.mat-calendar-body-cell-content {
// background-color: #1861ac;
// color: #fff;
// font-weight: bold;
// font-size: 2em;
//}
//
//.mat-calendar-table {
// border: 1px solid white;
//}
//
//.mat-calendar-table-header {
//
// tr {
// th {
// padding-top: 2em;
// }
//
// th.mat-calendar-table-header-divider {
// padding: 0;
// }
// }
//}
//
//.mat-calendar-controls,
//.mat-calendar-table-header,
//.mat-calendar-body-label {
// color: #fff;
// font-size: 2em;
//}
//
//.mat-calendar-previous-button,
//.mat-calendar-next-button,
//.mat-calendar-period-button {
// font-size: 2em;
// height: 2em;
// color: #fff;
// background-color: #1b6ec2;
// border-color: #1861ac;
//}
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }