card membre
This commit is contained in:
parent
a9970a50eb
commit
0d4ac5606b
19 changed files with 308 additions and 11826 deletions
|
|
@ -1,40 +1,36 @@
|
|||
<app-header></app-header>
|
||||
<div class="row">
|
||||
<div class="col-md-auto">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<app-side-bar></app-side-bar>
|
||||
<div class="col-9 offset-2" id="main">
|
||||
<h1>Ma team</h1>
|
||||
<div class="d-flex justify-content-center">
|
||||
<button button type="button" class="btn btn-primary btn-lg"
|
||||
routerLink="../creation-team"
|
||||
routerLinkActive="active-custom">Créer ma team</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<button button type="button" class="btn btn-primary btn-lg"
|
||||
routerLink="../modifier-compte"
|
||||
routerLinkActive="active-custom">Modifier mon compte</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<button button type="button" class="btn btn-primary btn-lg"
|
||||
routerLink="../supprimer-compte"
|
||||
routerLinkActive="active-custom">Supprimer mon compte</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<button button type="button" class="btn btn-primary btn-lg"
|
||||
routerLink="../ajout-membre"
|
||||
routerLinkActive="active-custom">Ajouter un membre</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" *ngFor="let membreData of listMembres">
|
||||
<app-card-member [membre]="membreData">
|
||||
</app-card-member>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" col compte text-center">
|
||||
<h1>Ma Team</h1>
|
||||
<main class="contenu-compte">
|
||||
<div class="d-flex justify-content-center">
|
||||
<button button type="button" class="btn btn-primary btn-lg"
|
||||
routerLink="../creation-team"
|
||||
routerLinkActive="active-custom">Créer ma team</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<button button type="button" class="btn btn-primary btn-lg"
|
||||
routerLink="../modifier-compte"
|
||||
routerLinkActive="active-custom">Modifier mon compte</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<button button type="button" class="btn btn-primary btn-lg"
|
||||
routerLink="../supprimer-compte"
|
||||
routerLinkActive="active-custom">Supprimer mon compte</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<button button type="button" class="btn btn-primary btn-lg"
|
||||
routerLink="../ajout-membre"
|
||||
routerLinkActive="active-custom">Ajouter un membre</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<button button type="button" class="btn btn-primary btn-lg"
|
||||
routerLink="../modifier-membre"
|
||||
routerLinkActive="active-custom">Modifier ce membre</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<button button type="button" class="btn btn-primary btn-lg"
|
||||
routerLink="../supprimer-membre"
|
||||
routerLinkActive="active-custom">Supprimer ce membre</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
.contenu.compte{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
button{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { MembreService } from 'src/app/services/membre.service';
|
||||
import { TeamService } from 'src/app/services/team.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-account',
|
||||
|
|
@ -6,10 +8,16 @@ import { Component, OnInit } from '@angular/core';
|
|||
styleUrls: ['./page-account.component.scss']
|
||||
})
|
||||
export class PageAccountComponent implements OnInit {
|
||||
public listMembres: any[];
|
||||
|
||||
constructor() { }
|
||||
constructor(private teamService: TeamService, private membreService: MembreService) {
|
||||
this.listMembres = [];
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.membreService.getMembres().subscribe((membres: any[]) => {
|
||||
this.listMembres = membres;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,142 +1,141 @@
|
|||
<app-header></app-header>
|
||||
<div class="row">
|
||||
<div class="col-md-auto">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<app-side-bar></app-side-bar>
|
||||
<div class="col-9 offset-2" id="main">
|
||||
<div class="form-addMember">
|
||||
<form (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
|
||||
<div class="form-floating">
|
||||
<input type="color"
|
||||
class="form-control"
|
||||
id="floatingInputcouleur"
|
||||
placeholder=""
|
||||
name="couleur"
|
||||
formControlName="couleurFc">
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputlastName"
|
||||
placeholder=""
|
||||
name="lastName"
|
||||
formControlName="lastNameFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['lastNameFc'].touched &&
|
||||
addMemberForm.controls['lastNameFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['lastNameFc'].touched &&
|
||||
!addMemberForm.controls['lastNameFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputlastName">VOTRE NOM</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputfirstName"
|
||||
placeholder=""
|
||||
name="firstName"
|
||||
formControlName="firstNameFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['firstNameFc'].touched &&
|
||||
addMemberForm.controls['firstNameFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['firstNameFc'].touched &&
|
||||
!addMemberForm.controls['firstNameFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputfirstName">VOTRE PRENOM</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="date"
|
||||
class="form-control"
|
||||
id="floatingInputdateNaissance"
|
||||
placeholder=""
|
||||
name="dateNaissance"
|
||||
formControlName="dateNaissanceFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['dateNaissanceFc'].touched &&
|
||||
addMemberForm.controls['dateNaissanceFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['dateNaissanceFc'].touched &&
|
||||
!addMemberForm.controls['dateNaissanceFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputdateNaissance">VOTRE DATE DE NAISSANCE</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="floatingInputemail"
|
||||
placeholder=""
|
||||
name="email"
|
||||
formControlName="emailFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['emailFc'].touched &&
|
||||
addMemberForm.controls['emailFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['emailFc'].touched &&
|
||||
!addMemberForm.controls['emailFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputemail">VOTRE EMAIL</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="floatingPassword"
|
||||
placeholder=""
|
||||
name="password"
|
||||
formControlName="passwordFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['passwordFc'].touched &&
|
||||
addMemberForm.controls['passwordFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['passwordFc'].touched &&
|
||||
!addMemberForm.controls['passwordFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingPassword">MOT DE PASSE</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="floatingpasswordConfirm"
|
||||
placeholder=""
|
||||
name="passwordConfirm"
|
||||
formControlName="passwordConfirmFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['passwordConfirmFc'].touched &&
|
||||
addMemberForm.controls['passwordConfirmFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['passwordConfirmFc'].touched &&
|
||||
!addMemberForm.controls['passwordConfirmFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingPasswordConfirm">CONFIRMEZ VOTRE MOT DE PASSE</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
[disabled]="addMemberForm.invalid"
|
||||
>Ajouter le membre</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" col addMember-form text-center">
|
||||
<h1>Ajouter un membre</h1>
|
||||
<main class="form-addMember">
|
||||
<form (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
|
||||
<div class="form-floating">
|
||||
<input type="color"
|
||||
class="form-control"
|
||||
id="floatingInputcouleur"
|
||||
placeholder=""
|
||||
name="couleur"
|
||||
formControlName="couleurFc">
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputlastName"
|
||||
placeholder=""
|
||||
name="lastName"
|
||||
formControlName="lastNameFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['lastNameFc'].touched &&
|
||||
addMemberForm.controls['lastNameFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['lastNameFc'].touched &&
|
||||
!addMemberForm.controls['lastNameFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputlastName">VOTRE NOM</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputfirstName"
|
||||
placeholder=""
|
||||
name="firstName"
|
||||
formControlName="firstNameFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['firstNameFc'].touched &&
|
||||
addMemberForm.controls['firstNameFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['firstNameFc'].touched &&
|
||||
!addMemberForm.controls['firstNameFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputfirstName">VOTRE PRENOM</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="date"
|
||||
class="form-control"
|
||||
id="floatingInputdateNaissance"
|
||||
placeholder=""
|
||||
name="dateNaissance"
|
||||
formControlName="dateNaissanceFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['dateNaissanceFc'].touched &&
|
||||
addMemberForm.controls['dateNaissanceFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['dateNaissanceFc'].touched &&
|
||||
!addMemberForm.controls['dateNaissanceFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputdateNaissance">VOTRE DATE DE NAISSANCE</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="floatingInputemail"
|
||||
placeholder=""
|
||||
name="email"
|
||||
formControlName="emailFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['emailFc'].touched &&
|
||||
addMemberForm.controls['emailFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['emailFc'].touched &&
|
||||
!addMemberForm.controls['emailFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputemail">VOTRE EMAIL</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="floatingPassword"
|
||||
placeholder=""
|
||||
name="password"
|
||||
formControlName="passwordFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['passwordFc'].touched &&
|
||||
addMemberForm.controls['passwordFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['passwordFc'].touched &&
|
||||
!addMemberForm.controls['passwordFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingPassword">MOT DE PASSE</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="floatingpasswordConfirm"
|
||||
placeholder=""
|
||||
name="passwordConfirm"
|
||||
formControlName="passwordConfirmFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
addMemberForm.controls['passwordConfirmFc'].touched &&
|
||||
addMemberForm.controls['passwordConfirmFc'].valid,
|
||||
'is-invalid':
|
||||
addMemberForm.controls['passwordConfirmFc'].touched &&
|
||||
!addMemberForm.controls['passwordConfirmFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingPasswordConfirm">CONFIRMEZ VOTRE MOT DE PASSE</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
[disabled]="addMemberForm.invalid"
|
||||
>Ajouter le membre</button>
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export class PageAddMemberComponent implements OnInit {
|
|||
|
||||
|
||||
if (membre.email !== '' && membre.password !== '') {
|
||||
this.authService.signup(membre).subscribe((resp) => {
|
||||
this.membreService.addMembre(membre).subscribe((resp) => {
|
||||
this.router.navigate(['compte']);
|
||||
});
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue