Skip to content
Snippets Groups Projects
Commit da5b6e73 authored by florimondmanca's avatar florimondmanca
Browse files

refactor student signup form 1

parent eaaca087
No related branches found
No related tags found
1 merge request!26Release first-users version to production
Show whitespace changes
Inline Side-by-side
Showing
with 287 additions and 261 deletions
src/app/app.component.ts
+ 0
− 1
View file @ da5b6e73
...@@ -28,7 +28,6 @@ export class AppComponent implements OnInit, OnDestroy { ...@@ -28,7 +28,6 @@ export class AppComponent implements OnInit, OnDestroy {
); );
this.sub.add( this.sub.add(
this.loaderService.loading().subscribe(loading => { this.loaderService.loading().subscribe(loading => {
console.log(loading);
this.active = !loading; this.active = !loading;
}) })
); );
......
src/app/core/address.model.ts
+ 14
− 1
View file @ da5b6e73
import { Injectable } from '@angular/core';
import { IAdapter } from './interfaces'; import { IAdapter } from './interfaces';
export interface Country { export interface Country {
...@@ -29,7 +30,9 @@ export class Address extends AddressSchema { ...@@ -29,7 +30,9 @@ export class Address extends AddressSchema {
} }
} }
@Injectable({
providedIn: 'root'
})
export class AddressAdapter implements IAdapter<Address> { export class AddressAdapter implements IAdapter<Address> {
adapt(data: any): Address { adapt(data: any): Address {
return new Address({ return new Address({
...@@ -43,4 +46,14 @@ export class AddressAdapter implements IAdapter<Address> { ...@@ -43,4 +46,14 @@ export class AddressAdapter implements IAdapter<Address> {
}, },
}); });
} }
encode(obj: Address): any {
return {
line1: obj.line1,
line2: obj.line2,
post_code: obj.postCode,
city: obj.city,
country: obj.country,
}
}
} }
src/app/signup/core/index.ts 0 → 100644
+ 2
− 0
View file @ da5b6e73
export * from './registration.model';
export * from './registration.service';
src/app/signup/core/registration.model.ts 0 → 100644
+ 51
− 0
View file @ da5b6e73
import { Injectable } from '@angular/core';
import { Address, AddressAdapter } from 'app/core';
interface EmergencyContact {
firstName: string;
lastName: string;
email: string;
homePhone: string;
mobilePhone: string;
}
class RegistrationSchema {
email: string;
firstName: string;
lastName: string;
dateOfBirth: Date;
phone?: string;
school: string;
grade: string;
address: Address;
emergencyContact: EmergencyContact;
}
export class Registration extends RegistrationSchema {
constructor(args: RegistrationSchema) {
super();
Object.assign(this, args);
}
}
@Injectable({
providedIn: 'root'
})
export class RegistrationAdapter {
constructor(private addressAdapter: AddressAdapter) { }
encode(obj: Registration): any {
return {
email: obj.email,
first_name: obj.firstName,
last_name: obj.lastName,
date_of_birth: obj.dateOfBirth.toISOString(),
phone: obj.phone,
school: obj.school,
grade: obj.grade,
address: this.addressAdapter.encode(obj.address),
}
}
}
src/app/signup/core/registration.service.ts 0 → 100644
+ 23
− 0
View file @ da5b6e73
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { environment } from 'environments/environment';
import { Registration, RegistrationAdapter } from './registration.model';
@Injectable({
providedIn: 'root',
})
export class RegistrationService {
private baseUrl = environment.apiUrl + 'registrations/';
constructor(private http: HttpClient, private adapter: RegistrationAdapter) { }
create(registration: Registration, password: string): Observable<any> {
const body: any = this.adapter.encode(registration);
body.password = password;
return of(body);
// return this.http.post(this.baseUrl, body);
}
}
src/app/signup/signup.module.ts
+ 2
− 1
View file @ da5b6e73
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { import {
...@@ -29,6 +29,7 @@ import { SignupRoutingModule } from './signup-routing.module'; ...@@ -29,6 +29,7 @@ import { SignupRoutingModule } from './signup-routing.module';
imports: [ imports: [
CommonModule, CommonModule,
FormsModule, FormsModule,
ReactiveFormsModule,
RouterModule, RouterModule,
SignupRoutingModule, SignupRoutingModule,
// Material // Material
......
src/app/signup/student-signup-one/signup-page.component.html
+ 111
− 68
View file @ da5b6e73
<div class="content background"> <form [formGroup]="formGroup" (ngSubmit)="submit()" class="form-signin">
<form ngNoForm class="form-signin">
<img class="logo" src="assets/img/oser-logo.png" alt=""/> <img class="logo" src="assets/img/oser-logo.png"/>
<h1 class="form-signin-heading">Inscription</h1> <h1 class="form-signin-heading">Inscription</h1>
<h3 for="email">Identifiants de connexion</h3> <h3>Identifiants de connexion</h3>
<mat-form-field class="block">
<input matInput name="email" placeholder="Adresse mail" required [(ngModel)]="student.email"> <!-- Email -->
<mat-form-field class="full-width">
<input matInput type="email" formControlName="email" placeholder="Adresse email" required>
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput placeholder="Mot de passe" [type]="hide ? 'password' : 'text'" required [(ngModel)]="student.password"> <!-- Password -->
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon> <mat-form-field class="full-width">
<input matInput [type]="hide ? 'password' : 'text'" formControlName="password" placeholder="Mot de passe" required>
<button mat-icon-button matSuffix (click)="hide = !hide">
<mat-icon>
{{ hide ? 'visibility' : 'visibility_off' }}
</mat-icon>
</button>
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" required #name="ngModel" [(ngModel)]="confirm"> <!-- Confirm password -->
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon> <mat-form-field class="full-width">
<input matInput [type]="hide ? 'password' : 'text'" formControlName="passwordConfirm" placeholder="Mot de passe (à nouveau)" required>
<button mat-icon-button matSuffix (click)="hide = !hide">
<mat-icon>
{{ hide ? 'visibility' : 'visibility_off' }}
</mat-icon>
</button>
</mat-form-field> </mat-form-field>
<div *ngIf="(name.dirty || name.touched)">
<div *ngIf="!(student.password == confirm)"
class="alert alert-danger">Les mots de passe doivent être identiques</div>
<div *ngIf="(student.password == confirm)"
class="alert alert-valid">Les mots de passe sont identiques</div>
</div>
<h3 for="name">Informations Personnelles</h3> <h3>Informations personnelles</h3>
<mat-form-field class="block">
<mat-select placeholder="Tu es..." required> <!-- Gender -->
<mat-option value="option">un garçon</mat-option> <mat-form-field class="full-width">
<mat-option value="option">une fille</mat-option> <mat-select formControlName="gender" placeholder="Tu es…" required>
<mat-option value="M">Un garçon</mat-option>
<mat-option value="F">Une fille</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput name="surname" placeholder="Nom" required [(ngModel)]="student.last_name"> <!-- First name -->
<mat-form-field class="full-width">
<input matInput type="text" formControlName="firstName" placeholder="Prénom" required>
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput name="name" placeholder="Prénom" required [(ngModel)]="student.first_name"> <!-- Last name -->
<mat-form-field class="full-width">
<input matInput type="text" formControlName="lastName" placeholder="Nom" required>
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput [matDatepicker]="picker" name="birth" placeholder="Date d'anniversaire" disable required [(ngModel)]="student.birth"> <!-- Date of birth -->
<mat-form-field class="full-width">
<input matInput type="date" [matDatepicker]="picker" formControlName="dateOfBirth" placeholder="Date de naissance" required>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker> <mat-datepicker #picker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput name="telephone" placeholder="Telephone" required [(ngModel)]="student.phone"> <!-- Phone -->
<mat-form-field class="full-width">
<input matInput type="tel" formControlName="phone" placeholder="Numéro de téléphone" required>
</mat-form-field>
<h3>Adresse postale</h3>
<div formGroupName="address">
<!-- Line 1 -->
<mat-form-field class="full-width">
<input matInput type="text" formControlName="line1" placeholder="Rue, numéro, voie" required>
</mat-form-field> </mat-form-field>
<h3 for="adress">Adresse</h3> <!-- Line 2 -->
<mat-form-field class="block"> <mat-form-field class="full-width">
<input matInput name="street" placeholder="Adresse" required [(ngModel)]="student.adress.street"> <input matInput type="text" formControlName="line2" placeholder="Bâtiment, boite postale, lieu-dit">
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput name="town" placeholder="Ville" required [(ngModel)]="student.adress.town"> <!-- Post code -->
<mat-form-field class="full-width">
<input matInput type="text" formControlName="postCode" placeholder="Code postal" required>
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput name="code" placeholder="Code Postal" required [(ngModel)]="student.adress.code"> <!-- City -->
<mat-form-field class="full-width">
<input matInput type="text" formControlName="city" placeholder="Ville" required>
</mat-form-field> </mat-form-field>
</div>
<h3>Personne à contacter en cas d'urgence</h3>
<h3 for="family">Personne à contacter en cas d'urgence</h3> <div formGroupName="emergencyContact">
<mat-form-field class="block"> <!-- First name -->
<input matInput name="nameparent" placeholder="Prénom" required [(ngModel)]="student.emergency_contact.nameparent"> <mat-form-field class="full-width">
<input matInput type="text" formControlName="firstName" placeholder="Prénom" required>
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput name="surnameparent" placeholder="Nom" required [(ngModel)]="student.emergency_contact.surnameparent"> <!-- Last name -->
<mat-form-field class="full-width">
<input matInput type="text" formControlName="lastName" placeholder="Nom" required>
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput name="email_parent" placeholder="Email contact" required [(ngModel)]="student.emergency_contact.email_parent"> <!-- Email address -->
<mat-form-field class="full-width">
<input matInput type="email" formControlName="email" placeholder="Adresse email" required>
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput name="home_phone" placeholder="Téléphone fixe" required [(ngModel)]="student.emergency_contact.home_phone"> <!-- Mobile phone -->
<mat-form-field class="full-width">
<input matInput type="tel" formControlName="mobilePhone" placeholder="Téléphone portable">
</mat-form-field> </mat-form-field>
<mat-form-field class="block">
<input matInput name="mobile_phone" placeholder="Téléphone mobile" required [(ngModel)]="student.emergency_contact.mobile_phone"> <!-- Home phone -->
<mat-form-field class="full-width">
<input matInput type="tel" formControlName="homePhone" placeholder="Téléphone fixe">
</mat-form-field> </mat-form-field>
</div>
<div class="centerButton"> <div class="text-center">
<input class="btn btn-primary" type="button" value="S'inscrire" routerLink="/signupTutoréTwo"/> <button mat-raised-button color="primary" [disabled]="!formGroup.valid">Suivant</button>
</div> </div>
</form> </form>
</div>
src/app/signup/student-signup-one/signup-page.component.scss
+ 9
− 89
View file @ da5b6e73
.content { @import '~sass/variables';
:host {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center; align-items: center;
background-color: $color-light-blue;
} }
.form-signin { form {
width: 100%; width: 100%;
max-width: 45em; max-width: 40em;
background: white; background: white;
border: 1px solid lightgray; border: 1px solid $color-light-gray;
border-radius: 8px; border-radius: 4px;
padding: 3em; padding: 3em;
margin: 3em; margin: 3em;
box-sizing: border-box; box-sizing: border-box;
} }
.form-signin .form-signin-heading, .form-signin .checkbox {
margin-bottom: 30px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="confirm"] {
margin-bottom: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.logo { .logo {
width: 100%; width: 100%;
max-width: 20em; max-width: 15em;
height: auto; height: auto;
display: block; display: block;
margin: auto; margin: auto;
} }
.block {
width: 100%;
}
.background {
background-color: rgb(3, 180, 180);
}
.centerButton{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.labelPersonalQuestions{
display: flex;
flex-direction: column;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
background-color: rgb(236, 236, 236);
}
.dots{
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
}
.dot{
margin-left: 10px;
margin-right: 10px;
}
.practice{
margin-bottom: 15px;
}
.labelPracticeInfo{
font-size: 14px;
}
.textMotivation{
margin-bottom: 10px;
}
\ No newline at end of file
src/app/signup/student-signup-one/signup-page.component.ts
+ 75
− 42
View file @ da5b6e73
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { StudentService } from './student.service'; import { tap } from 'rxjs/operators';
import { Registration, RegistrationService } from '../core';
@Component({ @Component({
selector: 'app-signup-page', selector: 'app-signup-page',
...@@ -11,51 +13,82 @@ export class SignupTutoreOneComponent implements OnInit { ...@@ -11,51 +13,82 @@ export class SignupTutoreOneComponent implements OnInit {
hide = true; hide = true;
student = { registration: Registration;
first_name: '', formGroup: FormGroup;
last_name: '',
birth: '', constructor(
email: '', private registrationService: RegistrationService,
phone: '', private formBuilder: FormBuilder,
adress: { ) { }
street: '',
town: '',
code: '',
},
emergency_contact: {
nameparent: '',
surnameparent: '',
email_parent: '',
home_phone: '',
mobile_phone: '',
},
password: '',
};
constructor(private studentService: StudentService) { }
ngOnInit() { ngOnInit() {
this.createForm();
}
createForm() {
// this.formGroup = this.formBuilder.group({
// email: '',
// password: '',
// passwordConfirm: '',
// firstName: '',
// lastName: '',
// gender: null,
// dateOfBirth: null,
// phone: '',
// school: '',
// address: this.formBuilder.group({
// line1: '',
// line2: '',
// postCode: '',
// city: '',
// country: {
// name: 'France',
// code: 'FR',
// }
// }),
// emergencyContact: this.formBuilder.group({
// firstName: '',
// lastName: '',
// email: '',
// homePhone: '',
// mobilePhone: '',
// })
// })
this.formGroup = this.formBuilder.group({
email: 'florimond.manca@foo.baz',
password: '1234',
passwordConfirm: '1234',
firstName: 'Florimond',
lastName: 'Manca',
gender: 'M',
dateOfBirth: new Date('1996-06-02'),
phone: '0612345678',
address: this.formBuilder.group({
line1: '1 Rue des Lilas',
line2: '',
postCode: '91190',
city: 'Gif-sur-Yvette',
country: {
name: 'France',
code: 'FR',
}
}),
emergencyContact: this.formBuilder.group({
firstName: 'Alice',
lastName: 'Brandon',
email: 'alice.brandon@example.com',
homePhone: '',
mobilePhone: '',
})
})
} }
addStudent() { submit() {
this.studentService.addNewStudent( const registration: Registration = this.formGroup.value;
this.student.first_name, const password: string = this.formGroup.controls.password.value;
this.student.last_name, this.registrationService.create(registration, password).pipe(
this.student.birth, tap(console.log),
this.student.email, ).subscribe();
this.student.phone,
this.student.adress.street,
this.student.adress.town,
this.student.adress.code,
this.student.emergency_contact.nameparent,
this.student.emergency_contact.surnameparent,
this.student.emergency_contact.email_parent,
this.student.emergency_contact.home_phone,
this.student.emergency_contact.mobile_phone,
this.student.password,
).subscribe(
resp => console.log(resp)
);
} }
} }
src/app/signup/student-signup-one/student.service.ts deleted 100644 → 0
+ 0
− 57
View file @ eaaca087
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'environments/environment';
@Injectable({
providedIn: 'root',
})
export class StudentService {
private apiUrl = environment.apiUrl;
constructor(private _http: HttpClient) { }
/** Students */
addNewStudent(first_name: string,
last_name: string,
birthday: string,
email: string,
phone: string,
street: string,
code: string,
town: string,
nameparent: string,
surnameparent: string,
email_parent: string,
home_phone: string,
mobile_phone: string,
password: string): Observable<any> {
const headers = new HttpHeaders();
headers.append('Content-Type', 'application/json; charset=utf-8');
const body = {
first_name: first_name,
last_name: last_name,
date_of_birth: birthday,
email: email,
phone: phone,
adress: {
line1: street,
line2: '',
post_code: code,
city: town,
},
emergency_contact: {
first_name: nameparent,
last_name: surnameparent,
email: email_parent,
home_phone: home_phone,
mobile_phone: mobile_phone,
},
};
return this._http.post(this.apiUrl + 'registrations/', body, { headers: headers });
}
}
src/app/visits/visit-card/visit-card.component.ts
+ 0
− 1
View file @ da5b6e73
...@@ -26,7 +26,6 @@ export class VisitCardComponent implements OnInit { ...@@ -26,7 +26,6 @@ export class VisitCardComponent implements OnInit {
this.participant$.subscribe( this.participant$.subscribe(
(participant: Participant) => { (participant: Participant) => {
this.participant = participant; this.participant = participant;
console.log(participant);
} }
); );
} }
......
src/app/visits/visit-detail/visit-detail.component.ts
+ 0
− 1
View file @ da5b6e73
...@@ -28,7 +28,6 @@ export class VisitDetailComponent implements OnInit { ...@@ -28,7 +28,6 @@ export class VisitDetailComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.visit = this.route.snapshot.data['visit']; this.visit = this.route.snapshot.data['visit'];
this.geocoder = this.route.snapshot.data['geocoder']; this.geocoder = this.route.snapshot.data['geocoder'];
console.log(this.geocoder);
this.userId = this.auth.getUser().id; this.userId = this.auth.getUser().id;
this.getParticipant(); this.getParticipant();
this.getAcceptedParticipants(); this.getAcceptedParticipants();
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment