Local ado

src/app/app.module.ts

@@ -18,6 +18,8 @@ import { GarageService } from './services/garage.service';
 import { TerrainService } from './services/terrain.service';
 import { VisiteService } from './services/visite.service';
 import { AppService } from './app.service';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   imports: [
@@ -27,7 +29,9 @@ import { AppService } from './app.service';
     ReactiveFormsModule,
     RouterModule,
     AppRoutingModule,
-    ComponentsModule
+    ComponentsModule,
+    MatMenuModule,
+    MatIconModule
   ],
   declarations: [
     AppComponent,

src/app/app.routing.ts

@@ -13,7 +13,7 @@ import { QuestionComponent } from './components/question/question.component';
 import { RoleComponent } from './components/role/role.component';
 import { TerrainComponent } from './components/terrain/terrain.component';
 import { UtilisateurComponent } from './components/utilisateur/utilisateur.component';
-import { VisiteComponent } from './components/visite/visite.component';
+import { VisiteComponent } from './components/utilisateur/visite/visite.component';
 import { LoginComponent } from './components/login/login.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 

src/app/app.service.ts

@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 @Injectable({
   providedIn: 'root'
 })
+
 export class AppService {
   // Authentification
   authenticated = false;

src/app/components/components.module.ts

@@ -14,7 +14,7 @@ import { OffreComponent } from './offre/offre.component';
 import { QuestionComponent } from './question/question.component';
 import { RoleComponent } from './role/role.component';
 import { TerrainComponent } from './terrain/terrain.component';
-import { VisiteComponent } from './visite/visite.component';
+import { VisiteComponent } from './utilisateur/visite/visite.component';
 import { LoginComponent } from 'app/components/login/login.component';
 import { FormsModule } from '@angular/forms';
 import { RegistrationComponent } from './registration/registration.component';

src/app/dashboard/dashboard.component.html

@@ -7,6 +7,7 @@
     <h1>Hello {{user.prenomUtilisateur}}</h1>
     <br>
     <br>
+    <h1>Hello {{user.prenomUtilisateur}}</h1>
     <div style="position: relative; left: 10px; background-color: white; border-color: black; border-width: thick;">
         <table>
             <th>

src/app/dashboard/dashboard.component.ts

@@ -161,4 +161,4 @@ export class DashboardComponent implements OnInit {
     this.startAnimationForBarChart(websiteViewsChart);
   }
 
-}
+}

src/app/user-profile/user-profile.component.html

@@ -1,135 +1,24 @@
-<!--<div>
-  <h1>Ajouter un utilisateur</h1>
-  <form (ngSubmit)="save()">
-    <table>
-      <tr>
-        <td>Nom</td>
-        <td><input type="text" [(ngModel)]="utilisateur.nomUtilisateur" name="nomUtilisateur" /></td>
-      </tr>
-      <tr>
-        <td>Prénom</td>
-        <td><input type="text" [(ngModel)]="utilisateur.prenomUtilisateur" name="prenomUtilisateur" /></td>
-      </tr>
-      <tr>
-        <td colspan="2"><button (click)="save()">Ajouter</button></td>
-      </tr>
-    </table>
-  </form>
-</div>-->
-
-
-
-
-
-
-
 <div class="main-content">
   <div class="container-fluid">
     <div class="row">
-      <div class="col-md-8">
-        <div class="card">
-          <div class="card-header card-header-danger">
-            <h4 class="card-title">Modification de votre profil</h4>
-            <p class="card-category">Vous pouvez modifier certaines de vos informations suite à des changements au cours
-              de votre vie (changement de téléphone, d'adresse mail, etc.)</p>
-          </div>
-          <div class="card-body">
-            <form>
-              <div class="row">
-                <div class="col-md-5">
-                  <mat-form-field class="example-full-width">
-                    <input matInput placeholder="Company (disabled)" disabled>
-                  </mat-form-field>
-                </div>
-                <div class="col-md-3">
-                  <mat-form-field class="example-full-width">
-                    <input matInput placeholder="Username">
-                  </mat-form-field>
-                </div>
-                <div class="col-md-4">
-                  <mat-form-field class="example-full-width">
-                    <input matInput placeholder="Email address" type="email">
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-md-6">
-                  <mat-form-field class="example-full-width">
-                    <input matInput placeholder="Fist Name" type="text">
-                  </mat-form-field>
-                </div>
-                <div class="col-md-6">
-                  <mat-form-field class="example-full-width">
-                    <input matInput placeholder="Last Name" type="text">
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-md-12">
-                  <mat-form-field class="example-full-width">
-                    <input matInput placeholder="Adress" type="text">
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-md-4">
-                  <mat-form-field class="example-full-width">
-                    <input matInput placeholder="City" type="text">
-                  </mat-form-field>
-                </div>
-                <div class="col-md-4">
-                  <mat-form-field class="example-full-width">
-                    <input matInput placeholder="Country" type="text">
-                  </mat-form-field>
-                </div>
-                <div class="col-md-4">
-                  <mat-form-field class="example-full-width">
-                    <input matInput placeholder="Postal Code" type="text">
-                  </mat-form-field>
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-md-12">
-                  <label>About Me</label>
-                  <mat-form-field class="example-full-width">
-                    <textarea matInput
-                      placeholder="Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo."></textarea>
-                  </mat-form-field>
-                  <!-- <div class="form-group">
+      <div class="card">
+        <div class="card-header card-header-danger">
+          <h4 class="card-title">Mon profil</h4>
+          <p class="card-category">Vous pouvez modifier certaines de vos informations suite à des changements au cours
+            de votre vie (changement de téléphone, d'adresse mail, etc.)</p>
+        </div>
+        <div class="card-chart">
+          <p>Nom : {{user.nomUtilisateur}}
+            <input #myTxt type="text" required minlength="1" [(ngModel)]="user.nomUtilisateur">
+            <button type="submit" (click)="updateProfil(myTxt.value)">Modifier</button>
+          </p>
+          <p>Prénom : {{user.prenomUtilisateur}}</p>
+          <p>Date de Naissance : {{user.nomUtilisateur}}</p>
+          <p>Adresse E-mail : {{user.emailUtilisateur}}</p>
+          <p>Numéro de telephone : {{user.numTelUtilisateur}}</p>
 
-                                      <div class="form-group">
-                                          <label class="bmd-label-floating"> Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</label>
-                                          <textarea class="form-control" rows="5"></textarea>
-                                      </div>
-                                  </div> -->
-                </div>
-              </div>
-              <button mat-raised-button type="submit" class="btn btn-danger pull-right">Update Profile</button>
-              <div class="clearfix"></div>
-            </form>
-          </div>
         </div>
       </div>
-      <div class="col-md-4">
-        <p>Le respect des données, blabla, ils ne sont pas utilisés à des fins commerciales autres que les notres, etc.
-        </p>
-      </div>
-      <!--<div class="col-md-4">
-              <div class="card card-profile">
-                  <div class="card-avatar">
-                      <a href="javascript:void(0)">
-                          <img class="img" src="./assets/img/faces/marc.jpg" />
-                      </a>
-                  </div>
-                  <div class="card-body">
-                      <h6 class="card-category text-gray">CEO / Co-Founder</h6>
-                      <h4 class="card-title">Alec Thompson</h4>
-                      <p class="card-description">
-                          Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
-                      </p>
-                      <a href="javascript:void(0)" class="btn btn-danger btn-round">Follow</a>
-                  </div>
-              </div>-->
     </div>
   </div>
 </div>

src/app/user-profile/user-profile.component.ts

@@ -1,6 +1,7 @@
 import { HttpClient, HttpRequest } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { AppService } from 'app/app.service';
 import { Utilisateur } from 'app/model/utilisateur';
 import { RoleService } from 'app/services/role.service';
 import { UtilisateurService } from 'app/services/utilisateur.service';
@@ -18,11 +19,22 @@ export class UserProfileComponent implements OnInit {
   roles!: any[];
   utilisateur: Utilisateur = new Utilisateur();
 
-  constructor(private utilisateurService: UtilisateurService, private roleService: RoleService, private httpClient: HttpClient, private router: Router) {
+  // Step 3
+  idUser: any;
+  user: Utilisateur = new Utilisateur();
 
-  }
+  constructor(private appService: AppService, private utilisateurService: UtilisateurService, private roleService: RoleService, private httpClient: HttpClient, private router: Router) {
 
-  ngOnInit(): void {
+  }
+  // Step 5
+  findOne(id: number) {
+    this.utilisateurService.findOne(id).subscribe(data => { this.user = data; });
+  }
+  ngOnInit() {
+    // Step 6
+    this.idUser = this.appService.idUser;
+    console.log("user profile " + this.idUser);
+    this.findOne(this.idUser);
     this.findAllUtilisateurs();
     this.findAllRole();
   }
@@ -35,8 +47,6 @@ export class UserProfileComponent implements OnInit {
     this.roleService.findAll().subscribe(data => { this.roles = data; });
   }
 
-
-
   deleteUtilisateur(id: number) {
     this.utilisateurService.delete(id).subscribe(
       () => {
@@ -45,4 +55,7 @@ export class UserProfileComponent implements OnInit {
     )
   }
 
+  updateProfil(value) {
+    console.log(value);
+  }
 }