liste des offres et espace perso fonctionnel

AdonisVienet · AdonisVienet · commit a9868baa58ba · 2023-02-27T09:30:21.000+01:00
diff --git a/src/app/components/offre/offre.component.ts b/src/app/components/offre/offre.component.ts
@@ -13,6 +13,8 @@ export class OffreComponent implements OnInit {
 
   offre: Offre = new Offre();
 
+  selectedFiles?: FileList;
+  currentFileUpload?: File;
   offres!: any[];
   users!: any[];
 
@@ -33,13 +35,16 @@ export class OffreComponent implements OnInit {
     this.utilisateurService.findAll().subscribe(data => { this.users = data; });
   }
 
-  saveOffre() {
-    this.offreService.save(this.offre).subscribe(
-      () => {
-        this.findAllOffre();
-        this.offre = new Offre();
-      }
-    )
+  selectFile(event: any) {
+    this.selectedFiles = event.target.files;
+  }
+  save() {
+    this.currentFileUpload = this.selectedFiles?.item(0) as File;
+    this.offreService.save(this.currentFileUpload, this.offre).subscribe(() => {
+      this.findAllUtilisateurs();
+      this.offre = new Offre();
+      this.selectedFiles = undefined;
+    })
   }
   deleteOffre(id: number) {
     this.offreService.delete(id).subscribe(
diff --git a/src/app/icons/icons.component.ts b/src/app/icons/icons.component.ts
@@ -27,8 +27,6 @@ export class IconsComponent {
   }
 
   findAllUtilisateurs() {
-    // Utilisation de l'expression lambde dans le subscribe  
-    // data => {this.users = data}   
     this.utilisateurService.findAll().subscribe(data => { this.users = data; });
   }
 
diff --git a/src/app/mdp/mdp.component.html b/src/app/mdp/mdp.component.html
diff --git a/src/app/mdp/mdp.component.scss b/src/app/mdp/mdp.component.scss
diff --git a/src/app/mdp/mdp.component.spec.ts b/src/app/mdp/mdp.component.spec.ts
diff --git a/src/app/mdp/mdp.component.ts b/src/app/mdp/mdp.component.ts
diff --git a/src/app/services/offre.service.ts b/src/app/services/offre.service.ts
@@ -1,6 +1,7 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpRequest } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Offre } from 'app/model/offre';
+import { catchError, Observable, throwError } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -9,21 +10,38 @@ export class OffreService {
 
   private BASE_URL = "http://localhost:8080/offres"
 
-  constructor(private httpClient:HttpClient) { }
-
-  public findAll() : Observable<any>
-  { return this.httpClient.get(this.BASE_URL);}
-
-  public save(offre:any) : Observable<any>
-  { return this.httpClient.post(this.BASE_URL, offre); }
+  constructor(private httpClient: HttpClient) { }
+
+  public findAll(): Observable<any> { return this.httpClient.get(this.BASE_URL); }
+
+  public save(image: File, offre: Offre): Observable<Object> {
+    const formData = new FormData();
+    formData.append('adresseFront', offre.adresseOffre);
+    formData.append('villeFront', offre.ville);
+    formData.append('prixFront', offre.prixOffre.toString());
+    formData.append('surfaceFront', offre.surfaceOffre.toString());
+    formData.append('descriptionFront', offre.description);
+    formData.append('imageFront', image);
+    formData.append('disponibiliteFront', offre.disponibiliteOffre.toString());
+    formData.append('orientationFront', offre.orientationOffre);
+    formData.append('etatFront', offre.etatOffre.toString());
+    formData.append('typeFront', offre.typeOffre);
+    const requestHttp = new HttpRequest('POST', this.BASE_URL, formData, {
+      reportProgress: true, responseType: 'json'
+    });
+    return this.httpClient.request(requestHttp).pipe(
+      catchError((error) => {
+        console.error(error);
+        return throwError(error);
+      })
+    );
+  }
 
-  public delete(id:number) : Observable<any>
-  { return this.httpClient.delete(this.BASE_URL +"/" + id); }
+  public delete(id: number): Observable<any> { return this.httpClient.delete(this.BASE_URL + "/" + id); }
 
-  public findOne(id:number) : Observable<any>
-  { return this.httpClient.get(this.BASE_URL + "/" + id); }
+  public findOne(id: number): Observable<any> { return this.httpClient.get(this.BASE_URL + "/" + id); }
 
-  public update(offre:any):Observable<any>{
+  public update(offre: any): Observable<any> {
     var offreJSON = JSON.parse(offre);
     return this.httpClient.put(this.BASE_URL + "/" + offreJSON.idoffre, offreJSON);
   }
diff --git a/src/app/services/utilisateur.service.ts b/src/app/services/utilisateur.service.ts
@@ -54,8 +54,9 @@ export class UtilisateurService {
   }
   // put --> verbe http : PUT --> URL : BASE_URL/id et dans le body l'objet utilisateur 
   public update(utilisateur: any): Observable<any> {
-    var utilisateurJSON = JSON.parse(utilisateur); // conversion de string vers format JSON 
-    return this.httpClient.put(this.BASE_URL + "/" + utilisateurJSON.idUtilisateur, utilisateurJSON);
+    //var utilisateurJSON = JSON.parse(utilisateur); // conversion de string vers format JSON 
+    // return this.httpClient.put(this.BASE_URL + "/" + utilisateurJSON.idUtilisateur, utilisateurJSON);
+    return this.httpClient.put(this.BASE_URL + "/" + utilisateur.idUtilisateur, utilisateur);
   }
 
 }
diff --git a/src/app/table-list/table-list.component.html b/src/app/table-list/table-list.component.html
@@ -15,39 +15,44 @@
                     <div class="col">
                         <div class="card shadow">
                             <div class="card-header border-0">
-                                <h3 class="mb-0">List des offres</h3>
+                                <h3 class="mb-0">Liste des offres</h3>
                             </div>
                             <div class="table-responsive">
-                                <table class="table align-items-center table-flush">
-                                    <thead class="thead-light">
+                                <table class="table table-striped align-items-center table-flush">
+                                    <thead class="thead-dark">
                                         <tr>
-                                            <th scope="col">imageOffre</th>
-                                            <th scope="col">description</th>
-                                            <th scope="col">ville</th>
-                                            <th scope="col">adresse</th>
-                                            <th scope="col">surfaceOffre</th>
-                                            <th scope="col">orientationOffre</th>
-                                            <th scope="col">etatOffre</th>
-                                            <th scope="col">typeOffre</th>
-                                            <th scope="col">prixOffre</th>
-                                            <th scope="col">disponibiliteOffre</th>
-                                            <!-- <th style="text-align: center;" scope="col">Action</th> -->
+                                            <th class="text-center text-nowrap" scope="col">Image</th>
+                                            <th class="text-center text-nowrap" scope="col">Description
+                                            </th>
+                                            <th class="text-center text-nowrap" scope="col">Ville</th>
+                                            <th class="text-center text-nowrap" scope="col">Adresse</th>
+                                            <th class="text-center text-nowrap" scope="col">Surface</th>
+                                            <th class="text-center text-nowrap" scope="col">Orientation
+                                            </th>
+                                            <th class="text-center text-nowrap" scope="col">Etat</th>
+                                            <th class="text-center text-nowrap" scope="col">Type</th>
+                                            <th class="text-center text-nowrap" scope="col">Prix</th>
+                                            <th class="text-center text-nowrap" scope="col">
+                                                Disponibilité</th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <tr *ngFor="let o of offres">
-                                            <td>{{o.imageOffre}}</td>
-                                            <td>{{o.description}}</td>
-                                            <td>{{o.ville}}</td>
-                                            <td>{{o.adresse}}</td>
-                                            <td>{{o.surfaceOffre}}</td>
-                                            <td>{{o.orientationOffre}}</td>
-                                            <td>{{o.etatOffre}}</td>
-                                            <td>{{o.typeOffre}}</td>
-                                            <td>{{o.prixOffre}}</td>
-                                            <td>{{o.disponibiliteOffre}}</td>
+                                            <td class="text-center"><img src="data:image/jpeg;base64,{{o.imageOffre}}"
+                                                    height="120" width="120" /></td>
+                                            <td class="text-center">{{o.description}}</td>
+                                            <td class="text-center">{{o.ville}}</td>
+                                            <td class="text-center">{{o.adresse}}</td>
+                                            <td class="text-center">{{o.surfaceOffre}}</td>
+                                            <td class="text-center">{{o.orientationOffre}}</td>
+                                            <td class="text-center">{{o.etatOffre}}</td>
+                                            <td class="text-center">{{o.typeOffre}}</td>
+                                            <td class="text-center">{{o.prixOffre}}</td>
+                                            <td class="text-center">{{o.disponibiliteOffre}}</td>
                                         </tr>
                                     </tbody>
+
+
                                 </table>
                             </div>
                         </div>
diff --git a/src/app/typography/typography.component.ts b/src/app/typography/typography.component.ts
@@ -13,6 +13,7 @@ export class TypographyComponent implements OnInit {
   // Déclaration d'un tableau d'utilisateur 
   // any : n'importe quel type de données 
   // ! ==> le tableau n'est pas initialisé 
+  currentFileUpload?: File;
   offres!: any[];
   offre: Offre = new Offre();
   etatOffre: enumEtatOffre;
@@ -29,7 +30,7 @@ export class TypographyComponent implements OnInit {
   }
 
   saveOffre() {
-    this.offreService.save(this.offre).subscribe(
+    this.offreService.save(this.currentFileUpload, this.offre).subscribe(
       () => {
         this.findAllOffre();
         this.offre = new Offre();
diff --git a/src/app/user-profile/user-profile.component.html b/src/app/user-profile/user-profile.component.html
@@ -1,24 +1,58 @@
-<div class="main-content">
-  <div class="container-fluid">
-    <div class="row">
-      <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>
-
+<!-- Formulaire d'ajout début-->
+<div class="container-fluid mt--7">
+  <div class="col-xl-12 order-xl-1">
+    <div class="card bg-secondary shadow">
+      <div class="card-header bg-white border-0">
+        <div class="row align-items-center">
+          <div class="col-8">
+            <h3 class="mb-0">Mon espace perso :</h3>
+          </div>
         </div>
       </div>
+      <div class="card-body">
+        <form (ngSubmit)="updateUtilisateur()">
+          <h6 class="text-muted mb-4">Informations de l'utilisateur</h6>
+          <div class="form-group row">
+            <label for="input-first-name" class="col-sm-3 col-form-label">Nom</label>
+            <div class="col-sm-9">
+              <input type="text" [(ngModel)]="user.nomUtilisateur" name="nomUtilisateur" id="input-first-name"
+                class="form-control">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="input-last-name" class="col-sm-3 col-form-label">Prénom</label>
+            <div class="col-sm-9">
+              <input type="text" [(ngModel)]="user.prenomUtilisateur" name="prenomUtilisateur" id="input-last-name"
+                class="form-control">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="input-last-name" class="col-sm-3 col-form-label">Date de naissance</label>
+            <div class="col-sm-9">
+              <input type="date" [(ngModel)]="user.dateNaissanceUtilisateur" name="date de naissance"
+                id="input-last-name" class="form-control">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="input-last-name" class="col-sm-3 col-form-label">Email</label>
+            <div class="col-sm-9">
+              <input type="email" [(ngModel)]="user.emailUtilisateur" name="email" id="input-last-name"
+                class="form-control">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="input-last-name" class="col-sm-3 col-form-label">Numero de telephone</label>
+            <div class="col-sm-9">
+              <input type="text" [(ngModel)]="user.numTelUtilisateur" name="numero de telephone" id="input-last-name"
+                class="form-control">
+            </div>
+          </div>
+          <div class="form-group text-center">
+            <button class="btn btn-primary" type="submit">Modifier</button>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
-</div>
+</div>
+<!--Formulaire d'ajout fin-->
diff --git a/src/app/user-profile/user-profile.component.ts b/src/app/user-profile/user-profile.component.ts
@@ -1,5 +1,6 @@
 import { HttpClient, HttpRequest } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AppService } from 'app/app.service';
 import { Utilisateur } from 'app/model/utilisateur';
@@ -16,14 +17,14 @@ export class UserProfileComponent implements OnInit {
 
   private BASE_URL = "http://localhost:8080/utilisateurs";
   users!: any[];
-  roles!: any[];
   utilisateur: Utilisateur = new Utilisateur();
 
   // Step 3
   idUser: any;
+  editForm: FormGroup;
   user: Utilisateur = new Utilisateur();
 
-  constructor(private appService: AppService, private utilisateurService: UtilisateurService, private roleService: RoleService, private httpClient: HttpClient, private router: Router) {
+  constructor(private appService: AppService, private utilisateurService: UtilisateurService, private formBuilder: FormBuilder, private httpClient: HttpClient, private router: Router) {
 
   }
   // Step 5
@@ -35,27 +36,27 @@ export class UserProfileComponent implements OnInit {
     this.idUser = this.appService.idUser;
     console.log("user profile " + this.idUser);
     this.findOne(this.idUser);
-    this.findAllUtilisateurs();
-    this.findAllRole();
+    // this.findAllUtilisateurs();
+    //this.updateUtilisateur();
   }
 
   findAllUtilisateurs() {
     this.utilisateurService.findAll().subscribe(data => { this.users = data; });
   }
 
-  findAllRole() {
-    this.roleService.findAll().subscribe(data => { this.roles = data; });
-  }
-
-  deleteUtilisateur(id: number) {
-    this.utilisateurService.delete(id).subscribe(
+  updateUtilisateur() {
+    console.log("update utilisateur", this.user);
+    this.utilisateurService.save(this.user).subscribe(
       () => {
-        this.findAllUtilisateurs();
+        console.log("Update ok");
       }
     )
   }
-
-  updateProfil(value) {
-    console.log(value);
-  }
-}
+  //   this.utilisateurService.update(this.utilisateur).subscribe(
+  //     () => {
+  //       this.findAllUtilisateurs(); // MAJ la lise des utilisateurs
+  //       this.utilisateur = new Utilisateur(); // Vider le formulaire
+  //     }
+  //   )
+  // }
+}

Original file line number	Diff line number	Diff line change
`@@ -27,8 +27,6 @@ export class IconsComponent {`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`findAllUtilisateurs() {`
`30`		`- // Utilisation de l'expression lambde dans le subscribe`
`31`		`- // data => {this.users = data}`
`32`	`30`	`this.utilisateurService.findAll().subscribe(data => { this.users = data; });`
`33`	`31`	`}`
`34`	`32`
Original file line number	Diff line number	Diff line change
`@@ -54,8 +54,9 @@ export class UtilisateurService {`
`54`	`54`	`}`
`55`	`55`	`// put --> verbe http : PUT --> URL : BASE_URL/id et dans le body l'objet utilisateur`
`56`	`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);`
	`57`	`+ //var utilisateurJSON = JSON.parse(utilisateur); // conversion de string vers format JSON`
	`58`	`+ // return this.httpClient.put(this.BASE_URL + "/" + utilisateurJSON.idUtilisateur, utilisateurJSON);`
	`59`	`+ return this.httpClient.put(this.BASE_URL + "/" + utilisateur.idUtilisateur, utilisateur);`
`59`	`60`	`}`
`60`	`61`
`61`	`62`	`}`