avancées sur update member/ page account ok / add Member ok
This commit is contained in:
Sana EL HIRI
parent
11e4d7321e
commit
f2f790211c
16 changed files with 383 additions and 72 deletions
|
|
@ -1,11 +1,96 @@
|
|||
<app-header></app-header>
|
||||
<app-side-bar></app-side-bar>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-9 offset-2" id="main">
|
||||
<h1 class="d-flex justify-content-center">Modifier profil</h1>
|
||||
<div class="form-updateMember">
|
||||
<form (ngSubmit)="onSubmit()" [formGroup]="updateMembreForm">
|
||||
<div class="form-floating input">
|
||||
<input
|
||||
type="color"
|
||||
class="form-control"
|
||||
id="floatingInputcouleur"
|
||||
placeholder=""
|
||||
name="couleur"
|
||||
formControlName="couleurFc"
|
||||
value="{{membreInfos.couleur}}"
|
||||
/>
|
||||
</div>
|
||||
<label for="floatingInputcouleur" class="d-flex justify-content-center" >Choisissez une couleur</label>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputlastName"
|
||||
placeholder=""
|
||||
name="lastName"
|
||||
formControlName="lastNameFc"
|
||||
value="{{membreInfos.nom}}"
|
||||
/>
|
||||
<label for="floatingInputlastName">Nom</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputfirstName"
|
||||
placeholder=""
|
||||
name="firstName"
|
||||
formControlName="firstNameFc"
|
||||
value="{{membreInfos.prenom}}"
|
||||
/>
|
||||
<label for="floatingInputfirstName">Prénom</label>
|
||||
</div>
|
||||
<div class="form-floating ">
|
||||
<input
|
||||
type="date"
|
||||
class="form-control"
|
||||
id="floatingInputdateNaissance"
|
||||
placeholder=""
|
||||
name="dateNaissance"
|
||||
formControlName="dateNaissanceFc"
|
||||
value="{{membreInfos.dateNaissance}}"
|
||||
/>
|
||||
<label for="floatingInputdateNaissance"
|
||||
>Date de naissance</label
|
||||
>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="floatingInputemail"
|
||||
placeholder=""
|
||||
name="email"
|
||||
formControlName="emailFc"
|
||||
value="{{membreInfos.email}}"
|
||||
/>
|
||||
<label for="floatingInputemail">Email</label>
|
||||
</div>
|
||||
<div class="form-floating select">
|
||||
<select
|
||||
class="form-control"
|
||||
id="floatingInputRole"
|
||||
placeholder=""
|
||||
name="Role"
|
||||
formControlName="roleFc"
|
||||
value="{{membreInfos.roleList}}"
|
||||
>
|
||||
<option value="ROLE_PARENT">Adulte</option>
|
||||
<option value="ROLE_ENFANT">Enfant</option>
|
||||
</select>
|
||||
<label value="ROLE_PARENT">Sélectionnez un profil</label>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-auto">
|
||||
<app-side-bar></app-side-bar>
|
||||
</div>
|
||||
<div class="col compte text-center">
|
||||
<h1>Modifier ce membre</h1>
|
||||
<main class="contenu-compte"></main>
|
||||
<button
|
||||
class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
|
||||
>Valider
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
.login-form {
|
||||
height: 100vh;
|
||||
padding-top: 40px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
h1{
|
||||
color: rgba(0, 0, 0, 0.658);
|
||||
font-size: 34px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.form-updateMember {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: solid 1px;
|
||||
border-radius: 10px;
|
||||
background-color: #fcddec;
|
||||
border-color: #ef5da8;
|
||||
}
|
||||
|
||||
.form-updateMember .checkbox {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-updateMember .form-floating:focus-within {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.form-updateMember input[type="email"] {
|
||||
margin-bottom: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-updateMember input[type="color"] {
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
margin-top: -70px;
|
||||
margin-left: 100px;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.form-updateMember input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
margin-top: -15px;
|
||||
border-radius: 80%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.form-updateMember input[type="text"] {
|
||||
margin-bottom: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-updateMember input[type="date"] {
|
||||
margin-bottom: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-updateMember input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
margin-top: 10px;
|
||||
background-color: #ffff;
|
||||
color: #ef5da8 !important;
|
||||
border-color: #ef5da8 !important;
|
||||
}
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Membre } from 'src/app/models/membre';
|
||||
import { MembreService } from 'src/app/services/membre.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-update-member',
|
||||
|
|
@ -6,10 +10,117 @@ import { Component, OnInit } from '@angular/core';
|
|||
styleUrls: ['./page-update-member.component.scss']
|
||||
})
|
||||
export class PageUpdateMemberComponent implements OnInit {
|
||||
public updateMembreForm: FormGroup;
|
||||
public membreData: FormGroup;
|
||||
public membreInfos: any;
|
||||
public membreId: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
constructor(private membreService: MembreService,
|
||||
private router: Router,
|
||||
private fb: FormBuilder,
|
||||
private route: ActivatedRoute) {
|
||||
this.updateMembreForm = new FormGroup({});
|
||||
this.membreData = this.initForm();
|
||||
this.membreInfos = '';
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
/** Pour récuperer l'id du membre à modifier **/
|
||||
this.membreId = this.route.snapshot.paramMap.get('id');
|
||||
|
||||
/** Appel Api **/
|
||||
this.membreService
|
||||
.getMembreId(this.membreId)
|
||||
.subscribe((membreInfos: any) => {
|
||||
this.membreInfos = membreInfos;
|
||||
});
|
||||
|
||||
/** group est déprécié mais pas d'autres solutions sinon revoir la fonction confirmeValidator **/
|
||||
this.updateMembreForm = this.fb.group(
|
||||
{
|
||||
firstNameFc: new FormControl('', [Validators.required]),
|
||||
lastNameFc: new FormControl('', [Validators.required]),
|
||||
dateNaissanceFc: new FormControl('', [Validators.required]),
|
||||
roleFc: new FormControl('', []),
|
||||
couleurFc: new FormControl('', []),
|
||||
emailFc: new FormControl('', [
|
||||
Validators.email,
|
||||
Validators.required,
|
||||
Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/gim),
|
||||
]),
|
||||
passwordFc: new FormControl('', [
|
||||
Validators.minLength(8),
|
||||
]),
|
||||
passwordConfirmFc: new FormControl('', [
|
||||
Validators.minLength(8),
|
||||
]),
|
||||
},
|
||||
{
|
||||
validator: this.ConfirmedValidator('passwordFc', 'passwordConfirmFc'),
|
||||
}
|
||||
)};
|
||||
|
||||
/** Méthode qui initialise les champs du formulaire avec les infos de la BDD **/
|
||||
private initForm(membre?: Membre): FormGroup {
|
||||
return this.fb.group({
|
||||
nom:[membre ? membre.nom : ''],
|
||||
prenom: [membre ? membre.prenom : ''],
|
||||
email: [membre ? membre.email : ''],
|
||||
password: [membre ? membre.password : ''],
|
||||
couleur: [membre ? membre.couleur : ''],
|
||||
dateNaissance: [membre ? membre.dateNaissance : ''],
|
||||
passwordConfirm: [membre ? membre.passwordConfirm : ''],
|
||||
roleList: [membre ? membre.roleList : ['']],
|
||||
});
|
||||
}
|
||||
|
||||
/** Méthode qui envoie les champs modifiés pour mise à jour **/
|
||||
public onSubmit(): void {
|
||||
const firstNameValue = this.updateMembreForm.value['firstNameFc'];
|
||||
const lastNameValue = this.updateMembreForm.value['lastNameFc'];
|
||||
const emailValue = this.updateMembreForm.value['emailFc'];
|
||||
const passwordValue = this.updateMembreForm.value['passwordFc'];
|
||||
const dateNaissanceValue = this.updateMembreForm.value['dateNaissanceFc'];
|
||||
const couleurValue = this.updateMembreForm.value['couleurFc'];
|
||||
const passwordConfirmValue = this.updateMembreForm.value['passwordConfirmFc'];
|
||||
const roleValue = this.updateMembreForm.value['roleFc'];
|
||||
|
||||
const membre: Membre = {
|
||||
id: this.membreId,
|
||||
nom: lastNameValue,
|
||||
prenom: firstNameValue,
|
||||
email: emailValue,
|
||||
password: passwordValue,
|
||||
dateNaissance: dateNaissanceValue,
|
||||
couleur: couleurValue,
|
||||
passwordConfirm: passwordConfirmValue,
|
||||
roleList: [roleValue]
|
||||
};
|
||||
|
||||
this.membreService.updateMembre(membre).subscribe((resp) => {
|
||||
this.router.navigate(['compte']);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** Méthode pour compare le mot de passe et la confirmation de mot de passe **/
|
||||
ConfirmedValidator(controlName: string, matchingControlName: string) {
|
||||
return (formGroup: FormGroup) => {
|
||||
const control = formGroup.controls[controlName];
|
||||
const matchingControl = formGroup.controls[matchingControlName];
|
||||
if (
|
||||
matchingControl.errors &&
|
||||
!matchingControl.errors['confirmedValidator']
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (control.value !== matchingControl.value) {
|
||||
matchingControl.setErrors({ confirmedValidator: true });
|
||||
} else {
|
||||
matchingControl.setErrors(null);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue