Dependency Day + Basic Setup #3
|
@ -31,6 +31,7 @@
|
||||||
"src/assets"
|
"src/assets"
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
|
"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
|
||||||
"src/styles.scss"
|
"src/styles.scss"
|
||||||
],
|
],
|
||||||
"scripts": []
|
"scripts": []
|
||||||
|
@ -99,6 +100,7 @@
|
||||||
"src/assets"
|
"src/assets"
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
|
"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
|
||||||
"src/styles.scss"
|
"src/styles.scss"
|
||||||
],
|
],
|
||||||
"scripts": []
|
"scripts": []
|
||||||
|
|
|
@ -3,12 +3,14 @@ import { RouterModule, Routes } from '@angular/router';
|
||||||
import { StudentListComponent } from './components/students/student-list/student-list.component';
|
import { StudentListComponent } from './components/students/student-list/student-list.component';
|
||||||
import { VisitsComponent } from './components/visits/visits.component';
|
import { VisitsComponent } from './components/visits/visits.component';
|
||||||
import { VisitsDatetimeComponent } from './components/visits/visits-datetime/visits-datetime.component';
|
import { VisitsDatetimeComponent } from './components/visits/visits-datetime/visits-datetime.component';
|
||||||
|
import {StudentRegisterComponent} from "./components/students/student-register/student-register.component";
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{ path: 'students', component: StudentListComponent },
|
{ path: 'students', component: StudentListComponent },
|
||||||
{ path: 'visits', component: VisitsComponent },
|
{ path: 'visits', component: VisitsComponent },
|
||||||
{ path: 'select', component: VisitsDatetimeComponent },
|
{ path: 'select', component: VisitsDatetimeComponent },
|
||||||
{ path: 'visits/:date/:time', component: VisitsComponent },
|
{ path: 'register', component: StudentRegisterComponent },
|
||||||
|
{ path: 'visits/:date/:time', component: VisitsComponent },
|
||||||
{ path: '**', redirectTo: 'students' }
|
{ path: '**', redirectTo: 'students' }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
import { FormsModule } from '@angular/forms';
|
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { StudentListComponent } from './components/students/student-list/student-list.component';
|
import { StudentListComponent } from './components/students/student-list/student-list.component';
|
||||||
|
@ -20,6 +20,12 @@ import { VisitsDatetimeComponent } from './components/visits/visits-datetime/vis
|
||||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
||||||
|
import { StudentRegisterComponent } from './components/students/student-register/student-register.component';
|
||||||
|
import {MatStepperModule} from "@angular/material/stepper";
|
||||||
|
import {MatInputModule} from "@angular/material/input";
|
||||||
|
import {MatButtonModule} from "@angular/material/button";
|
||||||
|
import {MatRadioModule} from "@angular/material/radio";
|
||||||
|
import {MatSelectModule} from "@angular/material/select";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -32,7 +38,8 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
||||||
EnrollPipe,
|
EnrollPipe,
|
||||||
VisitsComponent,
|
VisitsComponent,
|
||||||
StudentEnrollComponent,
|
StudentEnrollComponent,
|
||||||
VisitsDatetimeComponent
|
VisitsDatetimeComponent,
|
||||||
|
StudentRegisterComponent,
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -47,6 +54,12 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
||||||
MatFormFieldModule,
|
MatFormFieldModule,
|
||||||
MatRippleModule,
|
MatRippleModule,
|
||||||
MatNativeDateModule,
|
MatNativeDateModule,
|
||||||
|
MatStepperModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatButtonModule,
|
||||||
|
MatRadioModule,
|
||||||
|
MatSelectModule
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
@ -0,0 +1,84 @@
|
||||||
|
<!--<button mat-raised-button (click)="isEditable = !isEditable">-->
|
||||||
|
<!-- {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}-->
|
||||||
|
<!--</button>-->
|
||||||
|
|
||||||
|
<mat-stepper linear #stepper>
|
||||||
|
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
||||||
|
<form [formGroup]="firstFormGroup">
|
||||||
|
<ng-template matStepLabel>Personal Information</ng-template>
|
||||||
|
<div class="formContainer">
|
||||||
|
<div class="leftContainer">
|
||||||
|
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>Name</mat-label>
|
||||||
|
<input matInput formControlName="firstCtrl" placeholder="Last name, 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>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>Birthdate</mat-label>
|
||||||
|
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
|
||||||
|
</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-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>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>Postal Code</mat-label>
|
||||||
|
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>Phone</mat-label>
|
||||||
|
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" 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>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button mat-button matStepperNext>Next</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</mat-step>
|
||||||
|
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
|
||||||
|
<form [formGroup]="secondFormGroup">
|
||||||
|
<ng-template matStepLabel>Fill out your address</ng-template>
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>Address</mat-label>
|
||||||
|
<input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
|
||||||
|
required>
|
||||||
|
</mat-form-field>
|
||||||
|
<div>
|
||||||
|
<button mat-button matStepperPrevious>Back</button>
|
||||||
|
<button mat-button matStepperNext>Next</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</mat-step>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</mat-step>
|
||||||
|
</mat-stepper>
|
|
@ -0,0 +1,43 @@
|
||||||
|
.mat-stepper-horizontal {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-stepper-horizontal {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: #0366d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: white;
|
||||||
|
background-color: #1576d5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formContainer {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
}
|
||||||
|
.leftContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
.rightContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 45%;
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { StudentRegisterComponent } from './student-register.component';
|
||||||
|
|
||||||
|
describe('StudentRegisterComponent', () => {
|
||||||
|
let component: StudentRegisterComponent;
|
||||||
|
let fixture: ComponentFixture<StudentRegisterComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ StudentRegisterComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(StudentRegisterComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'li-student-register',
|
||||||
|
templateUrl: './student-register.component.html',
|
||||||
|
styleUrls: ['./student-register.component.scss']
|
||||||
|
})
|
||||||
|
|
||||||
|
export class StudentRegisterComponent implements OnInit {
|
||||||
|
firstFormGroup!: FormGroup;
|
||||||
|
secondFormGroup!: FormGroup;
|
||||||
|
isEditable = false;
|
||||||
|
|
||||||
|
constructor(private _formBuilder: FormBuilder) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.firstFormGroup = this._formBuilder.group({
|
||||||
|
firstCtrl: ['', Validators.required],
|
||||||
|
});
|
||||||
|
this.secondFormGroup = this._formBuilder.group({
|
||||||
|
secondCtrl: ['', Validators.required],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -65,4 +65,6 @@ body {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #1b6ec2;
|
background-color: #1b6ec2;
|
||||||
border-color: #1861ac;
|
border-color: #1861ac;
|
||||||
}
|
}
|
||||||
|
html, body { height: 100%; }
|
||||||
|
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||||
|
|
Loading…
Reference in New Issue