Skip to content

Commit c414c1b

Browse files
AdonisVienetAdonisVienet
authored
Merge pull request #14 from AdonisVienet/localBapt
Local bapt
2 parents 48cd4c4 + 38a0754 commit c414c1b

6 files changed

Lines changed: 236 additions & 78 deletions

File tree

‎src/app/dashboard/dashboard.component.html‎

Lines changed: 40 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,22 @@
22
<html>
33
<div>
44

5+
56
<br>
67
<br>
7-
<h1>Hello {{user.prenomUtilisateur}}</h1>
88
<br>
99
<br>
1010
<h1>Hello {{user.prenomUtilisateur}}</h1>
11+
1112
<div style="position: relative; left: 10px; background-color: white; border-color: black; border-width: thick;">
13+
<br>
14+
<br>
15+
<div>
16+
<br>
17+
<br>
18+
<p>Bonjour {{user.prenomUtilisateur}}, vous êtes bien sur le site officiel de <b>Real
19+
Estate Agency</b></p>
20+
</div>
1221
<table>
1322
<th>
1423
<h2 style="color: chocolate;"><b>Qui sommes nous ? </b></h2>
@@ -499,116 +508,87 @@ <h4 class="card-title">Employees Stats</h4>
499508
</div>-->
500509
<br>
501510
<br>
502-
<div style="position: relative; left: 25px;bottom: 0px;">
511+
<div style="position: relative; left: 1px;bottom: 0px;">
503512
<div class="card card-plain">
504-
<div class="card-header card-header-danger">
505-
<h4 class="card-title mt-0"> Top 5 des plus recherchés</h4>
506-
<p class="card-category">Si vous manquez d'inspi, voici les biens les plus demandés...</p>
513+
<div style="background-color: chocolate; color: black;">
514+
<h3> &nbsp;&nbsp; Nos services, votre bonheur </h3>
515+
<p style="color: white;"> &nbsp; Si vous manquez d'inspiration, voici échantillon de ce que vous pourriez
516+
trouvez sur notre site ! </p>
517+
</div>
518+
<div>
519+
<img src="assets/img/villa.jpg" width="150" height="100"
520+
style="position: relative; left: 250px; top: 150px;">
507521
</div>
508522
<div class="card-body">
509-
<div class="table-responsive">
510-
<table class="table table-hover">
523+
<div class="table-responsive" style="color: chocolate;">
524+
<table class="table table-hover" style="background-color: white;">
511525
<thead class="">
512526
<th>
513-
Type de bien
514-
</th>
515-
<th>
516-
Ville
527+
<b>Type de bien</b>
517528
</th>
518529
<th>
519-
Country
530+
<b>Ville</b>
520531
</th>
521532
<th>
522-
City
523-
</th>
533+
<b>Description</b>
524534
<th>
525-
Salary
535+
&nbsp;
526536
</th>
527537
</thead>
528538
<tbody>
529539
<tr>
530540
<td>
531-
1
532-
</td>
533-
<td>
534-
Dakota Rice
541+
Appartement
535542
</td>
536543
<td>
537-
Niger
544+
Paris
538545
</td>
539546
<td>
540-
Oud-Turnhout
541-
</td>
542-
<td>
543-
$36,738
547+
Appartement bien situé et bien isolé du bruit !
544548
</td>
545549
</tr>
546550
<tr>
547551
<td>
548-
2
549-
</td>
550-
<td>
551-
Minerva Hooper
552+
Maison
552553
</td>
553554
<td>
554-
Curaçao
555+
Canne
555556
</td>
556557
<td>
557-
Sinaai-Waas
558-
</td>
559-
<td>
560-
$23,789
558+
Villa somptueuse au bord de la mer...
561559
</td>
562560
</tr>
563561
<tr>
564562
<td>
565-
3
566-
</td>
567-
<td>
568-
Sage Rodriguez
563+
Appartement
569564
</td>
570565
<td>
571-
Netherlands
566+
Annecy
572567
</td>
573568
<td>
574-
Baileux
575-
</td>
576-
<td>
577-
$56,142
569+
Si vous recherchez un nid douillet, il est fait pour vous !
578570
</td>
579571
</tr>
580572
<tr>
581573
<td>
582-
4
583-
</td>
584-
<td>
585-
Philip Chaney
586-
</td>
587-
<td>
588-
Korea, South
574+
Terrain
589575
</td>
590576
<td>
591-
Overland Park
577+
TrouPerdu
592578
</td>
593579
<td>
594-
$38,735
580+
Constructible, sans vis-à-vis, l'idéal pour se construire un havre de paix
595581
</td>
596582
</tr>
597583
<tr>
598584
<td>
599-
5
600-
</td>
601-
<td>
602-
Doris Greene
603-
</td>
604-
<td>
605-
Malawi
585+
Garage
606586
</td>
607587
<td>
608-
Feldkirchen in Kärnten
588+
Lyon
609589
</td>
610590
<td>
611-
$63,542
591+
Ce pourrait être votre premier bien immobilier en location !
612592
</td>
613593
</tr>
614594
</tbody>

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

Lines changed: 118 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,124 @@
1-
<div class="main-content">
2-
<div class="container-fluid">
3-
<div class="card card-plain">
4-
<div class="card-header card-header-danger">
5-
<h4 class="card-title">Liste de tous les utilisateurs</h4>
6-
<p class="card-category">Seuls les administrateurs peuvent y avoir accès. Les modifications sont
7-
enregistrées directement dans la DB
8-
</p>
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>
914
</div>
10-
<div class="row">
11-
<div class="col-md-12">
12-
<div class="card-body">
13-
<p>gentille liste de tous les utilisateurs</p>
14-
<p>Cliquer sur modifier/sauvegarder</p>
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="Nom " 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="Prénom" value="Luck"> </div>
34+
</div>
35+
</div>
36+
<div class="col-lg-6">
37+
<div class="form-group"> <label class="form-control-label" for="input-email">Email
38+
address</label> <input type="email" [(ngModel)]="utilisateur.emailUtilisateur"
39+
name="emailUtilisateur" id="input-email"
40+
class="form-control form-control-alternative" placeholder="mail@example.com">
41+
</div>
42+
</div>
43+
<div class="col-lg-6">
44+
<div class="form-group"> <label class="form-control-label" for="input-date">Date de
45+
naissance</label> <input type="date"
46+
[(ngModel)]="utilisateur.dateNaissanceUtilisateur" name="dateNaissanceUtilisateur"
47+
id="input-date" 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="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" for="input-password">Role</label>
69+
<select class="form-control form-control-alternative" multiple name="roles"
70+
[(ngModel)]="utilisateur.roles">
71+
<option *ngFor="let r of roles" [ngValue]="r">{{r.libelle}}</option>
72+
</select>
73+
</div>
74+
</div>
1575
</div>
76+
<div> <button class="btn btn-danger">Ajouter</button> </div>
77+
</form>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
<!--Formulaire d'ajout fin-->
83+
<!--Table d'affichage des données début-->
84+
<div class="container-fluid mt--7">
85+
<div class="row">
86+
<div class="col">
87+
<div class="card shadow">
88+
<div class="card-header border-0">
89+
<h3 class="mb-0">Users list</h3>
90+
</div>
91+
<div class="table-responsive">
92+
<table class="table align-items-center table-flush">
93+
<thead class="thead-light">
94+
<tr>
95+
<th scope="col">Firstname</th>
96+
<th scope="col">Last name</th>
97+
<th scope="col">Username</th>
98+
<th scope="col">Password</th>
99+
<th scope="col">Date of birth</th>
100+
<th scope="col">Rule</th>
101+
<th style="text-align: center;" scope="col">Action</th>
102+
</tr>
103+
</thead>
104+
<tbody>
105+
<tr *ngFor="let u of users">
106+
<td>{{u.nomUitlisateur}}</td>
107+
<td>{{u.prenomUtilisateur}}</td>
108+
<td>{{u.username}}</td>
109+
<td>{{u.password}}</td>
110+
<td>{{u.dateNaissance}}</td>
111+
<td>
112+
<p style="margin: 0px;" *ngFor="let r of u.roles">{{r.libelle}}</p>
113+
</td>
114+
<td> <button (click)="deleteUtilisateur(u.idUtilisateur)">Delete</button>
115+
<button (click)="editUtilisateur(u)">Edit</button>
116+
</td>
117+
</tbody>
118+
</table>
16119
</div>
17120
</div>
18121
</div>
19122
</div>
20-
</div>
123+
</div>
124+
<!--Table d'affichage des données fin-->

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

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,60 @@
1+
import { HttpClient } from '@angular/common/http';
12
import { Component, OnInit } from '@angular/core';
3+
import { Router } from '@angular/router';
4+
import { AppService } from 'app/app.service';
5+
import { Utilisateur } from 'app/model/utilisateur';
6+
import { RoleService } from 'app/services/role.service';
7+
import { UtilisateurService } from 'app/services/utilisateur.service';
28

39
@Component({
410
selector: 'app-icons',
511
templateUrl: './icons.component.html',
612
styleUrls: ['./icons.component.css']
713
})
8-
export class IconsComponent implements OnInit {
914

10-
constructor() { }
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[];
20+
roles!: any[];
21+
utilisateur: Utilisateur = new Utilisateur();
22+
// DI : par constructeur
23+
constructor(private utilisateurService: UtilisateurService, private roleService: RoleService, private appService: AppService, private router: Router) { }
24+
ngOnInit(): void {
25+
this.findAllUtilisateurs();
26+
this.findAllRole();
27+
}
28+
29+
findAllUtilisateurs() {
30+
// Utilisation de l'expression lambde dans le subscribe
31+
// data => {this.users = data}
32+
this.utilisateurService.findAll().subscribe(data => { this.users = data; });
33+
}
1134

12-
ngOnInit() {
35+
findAllRole() {
36+
this.roleService.findAll().subscribe(data => { this.roles = data; });
37+
}
38+
saveUtilisateur() {
39+
this.utilisateurService.save(this.utilisateur).subscribe(
40+
() => {
41+
this.findAllUtilisateurs(); // MAJ la lise des utilisateurs
42+
this.utilisateur = new Utilisateur(); // Vider le formulaire
43+
}
44+
)
45+
}
46+
deleteUtilisateur(id: number) {
47+
this.utilisateurService.delete(id).subscribe(() => { this.findAllUtilisateurs(); })
1348
}
1449

50+
editUtilisateur(utilisateur: Utilisateur) {
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]);
57+
}
1558
}
59+
60+

0 commit comments

Comments
 (0)