Skip to content
Snippets Groups Projects
Commit a2d0652e authored by Arthur Guedon's avatar Arthur Guedon
Browse files

adds validation and connects to students api for personnal data

parent d4db67f8
No related branches found
No related tags found
22 merge requests!68Branchetest,!64adds error message when email is already used and redirects after signup,!63Improve error message,!61adds info on phone number format,!59Adds info on phone number format,!58Personnal data fix,!57Validated signup file display,!54Validated signup file display,!53adds message after user modfies personal data,!55Fix Oser to OSER,!52closes three-panes tag,!50Donnees personnelles,!51Adds message after user changes his personal data,!49Donnees personnelles,!47Donnees personnelles,!42Donnees personnelles,!44Donnees personnelles,!48Donnees personnelles,!40adds support for personnal data,!45Donnees personnelles,!46Donnees personnelles,!43Donnees personnelles
......@@ -6,7 +6,7 @@ import { AccountComponent } from './account.component';
import {MyDataComponent} from './my-data/my-data.component'
import {EditDataComponent} from './edit-data/edit-data.component'
import {MyFileComponent} from './my-file/my-file.component'
import { PersonnalDataResolver } from './core'
import { PersonalDataResolver } from './core'
const routes: Routes = [
......@@ -19,14 +19,14 @@ const routes: Routes = [
path: 'donnees',
component: MyDataComponent,
resolve : {
personnalData : PersonnalDataResolver
'personalData' : PersonalDataResolver
},
},
{
path: 'modifier_donnees', component: EditDataComponent,
resolve : {
personnalData : PersonnalDataResolver
'personalData' : PersonalDataResolver
},
},
......
export * from './personnal-data.model';
export * from './personnal-data.service';
export * from './personal-data.model';
export * from './personal-data.service';
import { User, UserAdapter, IAdapter } from 'app/core';
export class PersonnalDataSchema {
user : User;
export class PersonalDataSchema {
user_id: string;
url : string;
firstName:string;
lastName: string;
gender: string;
nationality: string;
adressNumber:string;
addressNumber:number;
street:string;
zipCode:string;
zipCode:number;
city:string;
personnalPhone:string;
personalPhone:string;
parentsPhone:string;
parentsEmail:string;
school:string;
......@@ -23,53 +26,56 @@ export class PersonnalDataSchema {
dependantsNumber:number;
}
export class PersonnalData extends PersonnalDataSchema {
export class PersonalData extends PersonalDataSchema {
constructor(args: PersonnalDataSchema) {
constructor(args: PersonalDataSchema) {
super();
Object.assign(this, args);
}
}
export class PersonnalDataAdapter implements IAdapter<PersonnalData> {
export class PersonalDataAdapter implements IAdapter<PersonalData> {
private userAdapter = new UserAdapter();
adapt(data: any): PersonnalData {
return new PersonnalData({
user: data.user,
adapt(data: any): PersonalData {
console.log('adapting',data)
return new PersonalData({
url : data.url,
user_id: data.user_id,
firstName: data.user.first_name,
lastName: data.user.last_name,
gender: data.gender,
nationality : data.nationality,
adressNumber: data.adressNumber,
street:data.street,
zipCode:data.zipCode,
city:data.city,
personnalPhone:data.personnalPhone,
parentsPhone:data.parentsPhone,
parentsEmail:data.parentsEmail,
school:data.school,
grade:data.grade,
specialTeaching:data.specialTeaching,
scholarship:data.scholarship,
fatherActivity:data.fatherActivity,
motherActivity:data.motherActivity,
parentsStatus:data.parentsStatus,
dependantsNumber:data.dependantsNumber
gender: data.gender?data.gender:'',
nationality : data.nationality?data.nationality:'',
addressNumber: data.addressNumber?data.addressNumber:'',
street:data.street?data.street:'',
zipCode:data.zipCode?data.zipCode:'',
city:data.city?data.city:'',
personalPhone:data.personalPhone?data.personalPhone:'',
parentsPhone:data.parentsPhone?data.parentsPhone:'',
parentsEmail:data.parentsEmail?data.parentsEmail:'',
school:data.school?data.school:'',
grade:data.grade?data.grade:'',
specialTeaching:data.specialTeaching?data.specialTeaching:'',
scholarship:data.scholarship?data.scholarship:'',
fatherActivity:data.fatherActivity?data.fatherActivity:'',
motherActivity:data.motherActivity?data.motherActivity:'',
parentsStatus:data.parentsStatus?data.parentsStatus:'',
dependantsNumber:data.dependantsNumber?data.dependantsNumber:''
});
}
encode(obj: PersonnalData): any {
encode(obj: PersonalData): any {
return {
user_id: obj.user_id,
url : obj.url,
gender: obj.gender,
nationality: obj.nationality,
adressNumber: obj.adressNumber,
addressNumber: obj.addressNumber,
street:obj.street,
zipCode:obj.zipCode,
city:obj.city,
personnalPhone:obj.personnalPhone,
personalPhone:obj.personalPhone,
parentsPhone:obj.parentsPhone,
parentsEmail:obj.parentsEmail,
school:obj.school,
......
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Resolve } from '@angular/router';
import { Resolve,ActivatedRouteSnapshot } from '@angular/router';
import { Observable, of, forkJoin } from 'rxjs';
import { tap, map, filter } from 'rxjs/operators';
import { tap, map, filter,catchError } from 'rxjs/operators';
import { ApiService, AuthService,} from 'app/core';
import {PersonnalDataAdapter,PersonnalData} from './personnal-data.model'
import {PersonalDataAdapter,PersonalData} from './personal-data.model'
@Injectable({
providedIn: 'root'
})
export class PersonnalDataService extends ApiService {
export class PersonalDataService extends ApiService {
//api url
private baseUrl = this.apiUrl + 'students';
private adapter = new PersonnalDataAdapter();
private adapter = new PersonalDataAdapter();
constructor(
private http: HttpClient,
) { super(); console.log(this.baseUrl) }
private auth: AuthService
) { super(); }
//get personnalData by user
get(filters: any): Observable<PersonnalData> {
//get personalData by user
get(filters: any): Observable<PersonalData> {
const url = this.baseUrl;
return this.http.get(url, { params: filters }).pipe(
map((data: any) => {
console.log()
return data.map(item => this.adapter.adapt(item))}),
);
}
retrieve(id: number | string): Observable<PersonalData> {
let url = this.baseUrl ;
return this.http.get<PersonalData>(url).pipe(
map(v =>{
return this.adapter.adapt(v[0])}),
);
}
forUser(userId: number): Observable<PersonnalData> {
forUser(userId: number): Observable<PersonalData> {
return this.get({ user_id: String(userId)});
}
//edit personnalData for a user
edit(personnalData: PersonnalData): Observable<any> {
const body: any = this.adapter.encode(personnalData);
return this.http.post(this.baseUrl, body);
//edit personalData for a user
edit(personalData: PersonalData): Observable<any> {
const body: any = this.adapter.encode(personalData);
return this.http.put(personalData.url, body);
}
}
@Injectable({
providedIn: 'root'
})
export class PersonnalDataResolver implements Resolve<PersonnalData>{
export class PersonalDataResolver implements Resolve<PersonalData>{
constructor(private service: PersonnalDataService, private auth: AuthService) { }
constructor(private service: PersonalDataService, private auth: AuthService) { }
//fetch user
resolve() {
resolve(route: ActivatedRouteSnapshot): Observable<PersonalData> {
const user = this.auth.getUserSnapshot();
return this.service.forUser(user.id);
return this.service.retrieve(user.id).pipe(
catchError(e => of(null))
);
}
}
......
......@@ -21,29 +21,29 @@
</mat-form-field>
<p class="text-center">Adresse</p>
<div class="form-group">
<mat-form-field class="full-width adress-input quarter-display">
<input matInput type="text" formControlName="adressNumber" placeholder="Numéro de rue" required>
<mat-form-field class="full-width address-input quarter-display">
<input matInput type="text" formControlName="addressNumber" placeholder="Numéro de rue" required>
</mat-form-field>
<mat-form-field class="full-width adress-input">
<mat-form-field class="full-width address-input">
<input matInput type="text" formControlName="street" placeholder="Rue" required>
</mat-form-field>
</div>
<div class="form-group">
<mat-form-field class="full-width adress-input quarter-display">
<mat-form-field class="full-width address-input quarter-display">
<input matInput type="text" minlength="5" maxlength="5" formControlName="zipCode" placeholder="Code postal" required>
<mat-error *ngIf="formGroup.controls['city'].hasError('pattern')">
Vous devez rentrer un code postal correct
</mat-error>
</mat-form-field>
<mat-form-field class="full-width adress-input" >
<mat-form-field class="full-width address-input" >
<input matInput type="text" formControlName="city" placeholder="Ville" required>
</mat-form-field>
</div>
<p class="text-center">Informations de contact</p>
<mat-form-field class="full-width" >
<input matInput type="text" formControlName="personnalPhone" placeholder="Numéro de téléphone personnel" required>
<input matInput type="text" formControlName="personalPhone" placeholder="Numéro de téléphone personnel" required>
</mat-form-field>
<mat-form-field class="full-width" >
<input matInput type="text" formControlName="parentsPhone" placeholder="Numéro de téléphone des parents" required>
......@@ -118,11 +118,12 @@
<div class="text-center">
<button mat-raised-button color="primary" [disabled]="loading">
<button mat-raised-button color="primary" [disabled]="!formGroup.valid || loading">
Modifier
<app-load-spinner *ngIf="loading" [block]="false"></app-load-spinner>
</button>
</div>
<p class="text-center">{{error}}</p>
</form>
</app-form-page>
<messages></messages>
......
......@@ -10,7 +10,7 @@
.horizontal-display{
width:45%;
}
.adress-input{
.address-input{
margin:5px;
}
......
......@@ -3,7 +3,7 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { MatSnackBar } from '@angular/material';
import {ActivatedRoute} from '@angular/router'
import { PersonnalData,PersonnalDataService } from '../core';
import { PersonalData,PersonalDataService } from '../core';
import { tap, mergeMap } from 'rxjs/operators';
import { AuthService } from 'app/core';
import {User} from 'app/core'
......@@ -16,9 +16,10 @@ import {User} from 'app/core'
styleUrls: ['./edit-data.component.scss']
})
export class EditDataComponent implements OnInit {
personnalData: PersonnalData;
personalData: PersonalData;
formGroup : FormGroup;
loading = false;
public error : String = "";
public possibleParentsStatus = [
{id:"maried",name:"Mariés"},
{id:"divorced",name:"Divorcés"},
......@@ -65,7 +66,7 @@ export class EditDataComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private personnalDataService : PersonnalDataService,
private personalDataService : PersonalDataService,
private formBuilder: FormBuilder,
private router: Router,
private auth: AuthService,
......@@ -75,30 +76,7 @@ export class EditDataComponent implements OnInit {
ngOnInit() {
this.personnalData = this.route.snapshot.data['personnalData'];
//On enlevera l'exemple quand on se connectera au back
// this.personnalData = {
// user: new User({id:0}),
// firstName:"Exemple",
// lastName: "Exemple",
// gender: "man",
// nationality: "Française",
// adressNumber:"25",
// street:"avenue exemple",
// zipCode:"99 999",
// city:"Gif sur Yvette",
// personnalPhone:"06 99 99 99 99",
// parentsPhone:"06 99 99 99 99",
// parentsEmail:"email@email.com",
// school:"ecole",
// grade:"troisieme",
// specialTeaching:"specialite",
// scholarship:"echelon2",
// fatherActivity:"farmer",
// motherActivity:"teacher",
// parentsStatus:"divorced",
// dependantsNumber:3,
// }
this.personalData = this.route.snapshot.data['personalData'];
this.createForm()
}
......@@ -106,42 +84,44 @@ export class EditDataComponent implements OnInit {
createForm() {
this.formGroup = this.formBuilder.group({
firstName:this.personnalData.firstName,
lastName:this.personnalData.lastName,
gender:this.personnalData.gender,
nationality : this.personnalData.nationality,
adressNumber:this.personnalData.adressNumber,
street:this.personnalData.street,
zipCode:this.personnalData.zipCode,
city:this.personnalData.city,
personnalPhone:this.personnalData.personnalPhone,
parentsPhone:this.personnalData.parentsPhone,
parentsEmail:[this.personnalData.parentsEmail,Validators.email],
school:this.personnalData.school,
grade:this.personnalData.grade,
specialTeaching:this.personnalData.specialTeaching,
scholarship:this.personnalData.scholarship,
fatherActivity:this.personnalData.fatherActivity,
motherActivity:this.personnalData.motherActivity,
parentsStatus:this.personnalData.parentsStatus,
dependantsNumber:this.personnalData.dependantsNumber,
firstName:this.personalData.firstName,
lastName:this.personalData.lastName,
gender:this.personalData.gender,
nationality : this.personalData.nationality,
addressNumber:[this.personalData.addressNumber,Validators.pattern("^[0-9]*$")],
street:this.personalData.street,
zipCode:this.personalData.zipCode,
city:this.personalData.city,
personalPhone:[this.personalData.personalPhone,Validators.pattern("^[0-9, ]*[0-9, ]{10}$")],
parentsPhone:this.personalData.parentsPhone,
parentsEmail:[this.personalData.parentsEmail,Validators.email],
school:this.personalData.school,
grade:this.personalData.grade,
specialTeaching:this.personalData.specialTeaching,
scholarship:this.personalData.scholarship,
fatherActivity:this.personalData.fatherActivity,
motherActivity:this.personalData.motherActivity,
parentsStatus:this.personalData.parentsStatus,
dependantsNumber:this.personalData.dependantsNumber,
})
}
submit(){
//this.loading = true;
const {firstName,lastName,gender,nationality,adressNumber,street,zipCode,city,personnalPhone,parentsPhone,parentsEmail,school,grade,specialTeaching,scholarship,fatherActivity,motherActivity,parentsStatus,dependantsNumber} = this.formGroup.value;
const personnalData: PersonnalData = {user:this.personnalData.user,firstName,lastName,gender,nationality,adressNumber,street,zipCode,city,personnalPhone,parentsPhone,parentsEmail,school,grade,specialTeaching,scholarship,fatherActivity,motherActivity,parentsStatus,dependantsNumber};
console.log("data",personnalData)
this.loading = true;
const {firstName,lastName,gender,nationality,addressNumber,street,zipCode,city,personalPhone,parentsPhone,parentsEmail,school,grade,specialTeaching,scholarship,fatherActivity,motherActivity,parentsStatus,dependantsNumber} = this.formGroup.value;
const personalData: PersonalData = {...this.personalData,firstName,lastName,gender,nationality,addressNumber,street,zipCode,city,personalPhone,parentsPhone,parentsEmail,school,grade,specialTeaching,scholarship,fatherActivity,motherActivity,parentsStatus,dependantsNumber};
//La partie commentée sera à rajouter lors de la connexion au back
this.personnalDataService.edit(personnalData).pipe(
this.personalDataService.edit(personalData).pipe(
tap(() => this.loading = false),
tap(()=> this.error = ""),
tap(() => this.router.navigate(['./membres/compte/donnees'])),
).subscribe(
() => {},
(error) => this.loading = false,
(error) => {
this.error = "Erreur lors de la modification des données"
this.loading = false
},
);
}
......
<app-form-page>
<h1>Mes données</h1>
<p><span class='label'>Prénom : </span>{{personnalData.firstName}} </p>
<p><span class='label'>Nom : </span>{{personnalData.lastName}}</p>
<p><span class='label'>Sexe : </span>{{gender[personnalData.gender]}}</p>
<p><span class='label'>Nationalité : </span>{{personnalData.nationality}}</p>
<p><span class='label'>Prénom : </span>{{personalData.firstName}} </p>
<p><span class='label'>Nom : </span>{{personalData.lastName}}</p>
<p><span class='label'>Sexe : </span>{{gender[personalData.gender]}}</p>
<p><span class='label'>Nationalité : </span>{{personalData.nationality}}</p>
<mat-divider></mat-divider>
<p> <span class='label'>Adresse : </span>{{personnalData.adressNumber}} {{personnalData.street}} {{personnalData.zipCode}}, {{personnalData.city}}</p>
<p> <span class='label'>Adresse : </span>{{personalData.addressNumber}} {{personalData.street}} {{personalData.zipCode}}, {{personalData.city}}</p>
<mat-divider></mat-divider>
<p><span class='label'>Numéro de téléphone personnel : </span>{{personnalData.personnalPhone}}</p>
<p><span class='label'>Numéro de téléphone des parents : </span>{{personnalData.parentsPhone}}</p>
<p><span class='label'>Email des parents : </span>{{personnalData.parentsEmail}}</p>
<p><span class='label'>Numéro de téléphone personnel : </span>{{personalData.personalPhone}}</p>
<p><span class='label'>Numéro de téléphone des parents : </span>{{personalData.parentsPhone}}</p>
<p><span class='label'>Email des parents : </span>{{personalData.parentsEmail}}</p>
<mat-divider></mat-divider>
<p><span class='label'>Etablissement : </span>{{personnalData.school}}</p>
<p><span class='label'>Classe : </span>{{grade[personnalData.grade]}}</p>
<p><span class='label'>Section : </span>{{personnalData.section.toUpperCase()}}</p>
<p><span class='label'>Enseignement de spécialité : </span>{{personnalData.specialTeaching}}</p>
<p><span class='label'>Boursier : </span>{{scholarship[personnalData.scholarship]}}</p>
<p><span class='label'>Etablissement : </span>{{personalData.school}}</p>
<p><span class='label'>Classe : </span>{{grade[personalData.grade]}}</p>
<p><span class='label'>Enseignement de spécialité : </span>{{personalData.specialTeaching}}</p>
<p><span class='label'>Boursier : </span>{{scholarship[personalData.scholarship]}}</p>
<mat-divider></mat-divider>
<p><span class='label'>Activité du père : </span>{{activity[personnalData.fatherActivity]}}</p>
<p><span class='label'>Activité de la mère : </span>{{activity[personnalData.motherActivity]}}</p>
<p><span class='label'>Statut des parents : </span>{{status[personnalData.parentsStatus]}}</p>
<p><span class='label'>Nombre de personnes à charge : </span>{{personnalData.dependantsNumber}}</p>
<p><span class='label'>Activité du père : </span>{{activity[personalData.fatherActivity]}}</p>
<p><span class='label'>Activité de la mère : </span>{{activity[personalData.motherActivity]}}</p>
<p><span class='label'>Statut des parents : </span>{{status[personalData.parentsStatus]}}</p>
<p><span class='label'>Nombre de personnes à charge : </span>{{personalData.dependantsNumber}}</p>
<div class="text-center">
<button mat-raised-button color="primary" (click)="editData()" [disabled]="loading"><mat-icon aria-hidden="false" aria-label="Example home icon">edit</mat-icon>Modifier mes données</button>
</div>
......
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute,Router} from '@angular/router'
import {PersonnalData} from '../core'
import {PersonalData} from '../core'
import {User} from 'app/core'
@Component({
......@@ -10,7 +10,7 @@ import {User} from 'app/core'
})
export class MyDataComponent implements OnInit {
personnalData: PersonnalData;
personalData: PersonalData;
public gender= {
"man":"Homme",
......@@ -58,34 +58,14 @@ export class MyDataComponent implements OnInit {
this.router.navigate(['./membres/compte/modifier_donnees'])
}
constructor(private route: ActivatedRoute, private router:Router) { }
ngOnInit() {
this.personnalData = this.route.snapshot.data['personnalData'];
//On enlevera l'exemple quand on se connectera au back
// this.personnalData = {
// user: new User({id:0}),
// firstName:"Exemple",
// lastName:"Exemple",
// gender: "man",
// nationality:"Française",
// adressNumber:"25",
// street:"avenue exemple",
// zipCode:"99 999",
// city:"Gif sur Yvette",
// personnalPhone:"06 99 99 99 99",
// parentsPhone:"06 99 99 99 99",
// parentsEmail:"email@email.com",
// school:"ecole",
// grade:"troisieme",
// specialTeaching:"specialite",
// scholarship:"echelon2",
// fatherActivity:"farmer",
// motherActivity:"teacher",
// parentsStatus:"divorced",
// dependantsNumber:3,
// }
this.personalData = this.route.snapshot.data['personalData'];
}
}
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router'
import {UploadComponent} from '../upload/upload.component'
import {PersonnalData} from '../core'
import {PersonalData} from '../core'
@Component({
selector: 'app-my-file',
templateUrl: './my-file.component.html',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment