Skip to content

Commit 49080ca

Browse files
BaptisteMchltBaptisteMchlt
committed
normalement la liste d'utilisateur fonctionne
1 parent 0ca6e98 commit 49080ca

File tree

3 files changed

+179
-43
lines changed

3 files changed

+179
-43
lines changed

‎src/app/icons/icons.component.html‎

Lines changed: 125 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,125 @@
1-
<div>
2-
<table>
3-
<tr>
4-
<th>Nom</th>
5-
<th>Prénom</th>
6-
<th>Action</th>
7-
</tr>
8-
<tr *ngFor="let u of utilisateur">
9-
<td>{{u.nomUtilisateur}}</td>
10-
<td>{{u.prenomUtilisateur}}</td>
11-
<td><button (click)="deleteUtilisateur(u.idUtilisateur)">Delete</button>
12-
<button (click)="editUtilisateur(u)">Editer</button>
13-
</td>
14-
</tr>
15-
</table>
16-
</div>
1+
<!-- Formulaire d'ajout début-->
2+
<br>
3+
<br>
4+
<br>
5+
<div class="container-fluid mt--7">
6+
<div class="col-xl-12 order-xl-1">
7+
<div class="card bg-secondary shadow">
8+
<div class="card-header bg-white border-0">
9+
<div class="row align-items-center">
10+
<div class="col-8">
11+
<h3 class="mb-0">Créer un compte</h3>
12+
</div>
13+
</div>
14+
</div>
15+
<div class="card-body">
16+
<form (ngSubmit)="saveUtilisateur()">
17+
<h6 class="heading-small text-muted mb-4">Informations des utilisateurs</h6>
18+
<div class="pl-lg-4">
19+
<div class="row">
20+
<div class="col-lg-6">
21+
<div class="form-group">
22+
<label class="form-control-label" for="input-first-name">Nom</label>
23+
<input type="text" [(ngModel)]="utilisateur.nomUtilisateur" name="nomUtilisateur"
24+
id="input-first-name" class="form-control form-control-alternative"
25+
placeholder="First name" value="Lucky">
26+
</div>
27+
</div>
28+
<div class="col-lg-6">
29+
<div class="form-group"> <label class="form-control-label"
30+
for="input-last-name">Prénom</label> <input type="text"
31+
[(ngModel)]="utilisateur.prenomUtilisateur" name="prenomUtilisateur"
32+
id="input-last-name" class="form-control form-control-alternative"
33+
placeholder="Last name" value="Luck"> </div>
34+
</div>
35+
<div class="col-lg-6">
36+
<div class="form-group"> <label class="form-control-label" for="input-email">Email
37+
address</label> <input type="email" [(ngModel)]="utilisateur.emailUtilisateur"
38+
name="emailUtilisateur" id="input-email"
39+
class="form-control form-control-alternative" placeholder="[email protected]">
40+
</div>
41+
</div>
42+
<div class="col-lg-6">
43+
<div class="form-group"> <label class="form-control-label" for="input-date">Date de
44+
naissance</label> <input type="date"
45+
[(ngModel)]="utilisateur.dateNaissanceUtilisateur"
46+
name="dateNaissanceUtilisateur" id="input-date"
47+
class="form-control form-control-alternative"> </div>
48+
</div>
49+
</div>
50+
<div class="row">
51+
<div class="col-lg-6">
52+
<div class="form-group"> <label class="form-control-label"
53+
for="input-username">Username</label> <input type="text"
54+
[(ngModel)]="utilisateur.username" name="username" id="input-username"
55+
class="form-control form-control-alternative" placeholder="Username"
56+
value="your username"> </div>
57+
</div>
58+
<div class="col-lg-6">
59+
<div class="form-group"> <label class="form-control-label"
60+
for="input-password">Password</label> <input type="text"
61+
[(ngModel)]="utilisateur.password" name="password" id="input-password"
62+
class="form-control form-control-alternative" placeholder="your password">
63+
</div>
64+
</div>
65+
</div>
66+
<div class="row">
67+
<div class="col-lg-6">
68+
<div class="form-group"> <label class="form-control-label"
69+
for="input-password">Role</label> <select
70+
class="form-control form-control-alternative" multiple name="roles"
71+
[(ngModel)]="utilisateur.roles">
72+
<option *ngFor="let r of roles" [ngValue]="r">{{r.libelle}}</option>
73+
</select> </div>
74+
</div>
75+
</div>
76+
<div> <button class="btn btn-danger">Ajouter</button> </div>
77+
</div>
78+
</form>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
<!--Formulaire d'ajout fin-->
84+
<!--Table d'affichage des données début-->
85+
<div class="container-fluid mt--7">
86+
<div class="row">
87+
<div class="col">
88+
<div class="card shadow">
89+
<div class="card-header border-0">
90+
<h3 class="mb-0">Users list</h3>
91+
</div>
92+
<div class="table-responsive">
93+
<table class="table align-items-center table-flush">
94+
<thead class="thead-light">
95+
<tr>
96+
<th scope="col">Firstname</th>
97+
<th scope="col">Last name</th>
98+
<th scope="col">Username</th>
99+
<th scope="col">Password</th>
100+
<th scope="col">Date of birth</th>
101+
<th scope="col">Rule</th>
102+
<th style="text-align: center;" scope="col">Action</th>
103+
</tr>
104+
</thead>
105+
<tbody>
106+
<tr *ngFor="let u of utilisateur">
107+
<td>{{u.nomUtilisateur}}</td>
108+
<td>{{u.prenomUtilisateur}}</td>
109+
<td>{{u.username}}</td>
110+
<td>{{u.password}}</td>
111+
<td>{{u.dateNaissance}}</td>
112+
<td>
113+
<p style="margin: 0px;" *ngFor="let r of u.roles">{{r.libelle}}</p>
114+
</td>
115+
<td> <button (click)="deleteUtilisateur(u.idUtilisateur)">Delete</button>
116+
<button (click)="editUtilisateur(u)">Edit</button>
117+
</td>
118+
</tbody>
119+
</table>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
<!--Table d'affichage des données fin-->

‎src/app/icons/icons.component.ts‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,30 @@ import { UtilisateurService } from 'app/services/utilisateur.service';
1111
templateUrl: './icons.component.html',
1212
styleUrls: ['./icons.component.css']
1313
})
14-
export class IconsComponent implements OnInit {
15-
// Déclaration d'un tableau d'utilisateurs
16-
// ! : le tableau n'est pas initialisé
17-
users!: any[]; // any : n'importe quel type de données
18-
// step 1
14+
15+
export class IconsComponent {
16+
// Déclaration d'un tableau d'utilisateur
17+
// any : n'importe quel type de données
18+
// ! ==> le tableau n'est pas initialisé
19+
users!: any[];
1920
roles!: any[];
2021
utilisateur: Utilisateur = new Utilisateur();
21-
// DI : par constrcuteur
22-
constructor(private utilisateurService: UtilisateurService,/*step2*/private roleService: RoleService, private router: Router) { }
23-
22+
// DI : par constructeur
23+
constructor(private utilisateurService: UtilisateurService, private roleService: RoleService, private appService: AppService, private router: Router) { }
2424
ngOnInit(): void {
2525
this.findAllUtilisateurs();
26-
// step 4
27-
this.findAllRoles();
26+
this.findAllRole();
2827
}
28+
2929
findAllUtilisateurs() {
30-
// subscribe : utilisation de l'expression lambda
31-
// data => {this.users = data}
30+
// Utilisation de l'expression lambde dans le subscribe
31+
// data => {this.users = data}
3232
this.utilisateurService.findAll().subscribe(data => { this.users = data; });
3333
}
34-
// step 3
35-
findAllRoles() {
34+
35+
findAllRole() {
3636
this.roleService.findAll().subscribe(data => { this.roles = data; });
3737
}
38-
39-
40-
41-
//Méthode save :
4238
saveUtilisateur() {
4339
this.utilisateurService.save(this.utilisateur).subscribe(
4440
() => {
@@ -47,16 +43,18 @@ export class IconsComponent implements OnInit {
4743
}
4844
)
4945
}
50-
/**/
5146
deleteUtilisateur(id: number) {
52-
this.utilisateurService.delete(id).subscribe(() => { this.findAllUtilisateurs() });
47+
this.utilisateurService.delete(id).subscribe(() => { this.findAllUtilisateurs(); })
5348
}
49+
5450
editUtilisateur(utilisateur: Utilisateur) {
55-
// localStorage : créer un attribut (name = "editUserId") dans le navigateur et lui affecter une valeur (editUserId= idUtilisateur)
56-
// Step 1 : MAJ du composant
57-
localStorage.removeItem("editUserId");
58-
// Step 2 : Sélectionner une ligne :
59-
localStorage.setItem("editUserId", utilisateur.idUtilisateur.toString());
60-
this.router.navigate(['/editUser', utilisateur.idUtilisateur]);
51+
// localStorage : créer un attribut (name="editUserId") dans le navigateur et lui affecter une valeur (ediUserId= idUtilisateur)
52+
// étape 1 : MAJ du composant
53+
localStorage.removeItem("editUtilisateurId");
54+
// étape 2 : Séleectionner une ligne
55+
localStorage.setItem("editUtilisateurId", utilisateur.idUtilisateur.toString());
56+
this.router.navigate(['/editUtilisateur', utilisateur.idUtilisateur]);
6157
}
6258
}
59+
60+

‎src/app/services/utilisateur.service.ts‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Observable } from "rxjs";
88
@Injectable({
99
providedIn: 'root'
1010
})
11-
export class UtilisateurService {
11+
/*export class UtilisateurService {
1212
1313
private BASE_URL = "http://localhost:8080/utilisateurs"
1414
@@ -27,5 +27,34 @@ export class UtilisateurService {
2727
public update(utilisateur: any): Observable<any> {
2828
var utilisateurJSON = JSON.parse(utilisateur);
2929
return this.httpClient.put(this.BASE_URL + "/" + utilisateurJSON.idUtilisateur, utilisateurJSON);
30+
}*/
31+
32+
export class UtilisateurService {
33+
private BASE_URL = "http://localhost:8080/utilisateurs";
34+
// HttpClient = module qui nous permet d'utiliser les verbes http : GET POST PUT DELETE
35+
constructor(private httpClient: HttpClient) { }
36+
// findAll --> verbe http GET --> URL : BASE_URL
37+
// Observable --> une méthode qui vérifie les données dans le serveur nodejs
38+
// Afficher la liste des utilisateurs
39+
public findAll(): Observable<any> {
40+
return this.httpClient.get(this.BASE_URL);
41+
}
42+
// save --> verbe http POST --> URL : BASE_URL + Body
43+
public save(utilisateur: any): Observable<any> {
44+
return this.httpClient.post(this.BASE_URL, utilisateur);
45+
}
46+
// delete --> verbe http DELETE --> URL : BASE_URL/id
47+
public delete(id: number): Observable<any> {
48+
return this.httpClient.delete(this.BASE_URL + "/" + id);
49+
// Pour id = 1 --> http://localhost:8080/utilisateurs/1
50+
}
51+
// get with id --> verbe http : GET : URL : BASE_URL/id
52+
public findOne(id: number): Observable<any> {
53+
return this.httpClient.get(this.BASE_URL + '/' + id);
54+
}
55+
// put --> verbe http : PUT --> URL : BASE_URL/id et dans le body l'objet utilisateur
56+
public update(utilisateur: any): Observable<any> {
57+
var utilisateurJSON = JSON.parse(utilisateur); // conversion de string vers format JSON
58+
return this.httpClient.put(this.BASE_URL + "/" + utilisateurJSON.idUtilisateur, utilisateurJSON);
3059
}
3160
}

0 commit comments

Comments
 (0)