Merge branch 'main' into feature/ajouter

src/app/modules/admin/admin-routing.module.ts

@@ -6,7 +6,7 @@ import { PageTableauComponent } from './pages/page-tableau/page-tableau.componen
 
 const routes: Routes = [
   { path: '', redirectTo: 'tableau', pathMatch: 'full'},
-  { path: 'modifier', component: PageModifierComponent },
+  { path: 'modifier/:id', component: PageModifierComponent },
   { path: 'ajouter', component: PageAjouterComponent },
   { path: 'tableau', component: PageTableauComponent },
 ];

src/app/modules/admin/components/formulaire/formulaire.component.html

@@ -1,4 +1,5 @@
-<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
+<div class="form-plant">
+      <form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
         <div class="form-floating">
           <input
             type="text"
@@ -98,4 +99,6 @@
         >
           {{ buttonLabel }}
         </button>
-</form>
+      </form>
+</div>
+

src/app/modules/admin/components/formulaire/formulaire.component.scss

@@ -0,0 +1,75 @@
+.login-form {
+  height: 100vh;
+  padding-top: 40px;
+  background-color: #f5f5f5;
+}
+
+.form-plant {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  border: solid 1px;
+  border-radius: 10px;
+  background-color: #64c982;
+  border-color: #64c982;
+}
+
+.form-plant .checkbox {
+  font-weight: 400;
+}
+
+.form-plant .form-floating:focus-within {
+  z-index: 2;
+}
+
+.form-plant input[type="email"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-plant input[type="color"] {
+  border: none;
+  margin-bottom: 10px;
+  margin-top: -70px;
+  margin-left: 100px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.form-plant input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 80px;
+  height: 80px;
+}
+
+.form-plant input[type="text"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-plant input[type="date"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-plant input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.btn-outline-success {
+  margin-top: 10px;
+  background-color: #ffff;
+  color: #64c982 !important;
+  border-color: #64c982 !important;
+}

src/app/modules/admin/components/formulaire/formulaire.component.ts

@@ -10,8 +10,8 @@ import { AdminService } from '../../services/admin.service';
 })
 export class FormulaireComponent implements OnInit {
   plantForm!: FormGroup;
+
   @Input() plantInfos!: Plant;
-  @Input() isAdd : boolean = true;
   @Input()buttonLabel!:String;
   constructor(private fb : FormBuilder, private adminService: AdminService) {
 
@@ -28,6 +28,10 @@ export class FormulaireComponent implements OnInit {
     });
   }
 
-  onSubmit(){}
+  
+
+  addPlant(){}
+
+  updatePlant(){}
 }
 

src/app/modules/admin/pages/page-modifier/page-modifier.component.html

@@ -1 +1,2 @@
-<p>page-modifier works!</p>
+<h1>Modifier la plante</h1>
+<app-formulaire *ngIf="plantInfos" [buttonLabel]="'Modifier la plante'" [isAdd]= "false"></app-formulaire>

src/app/modules/admin/pages/page-modifier/page-modifier.component.scss

@@ -0,0 +1,5 @@
+h1{
+  color: rgba(0, 0, 0, 0.658);
+  font-size: 28px;
+  margin-top: 20px;
+}

src/app/modules/admin/pages/page-modifier/page-modifier.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Plant } from '../../models/plant';
+import { AdminService } from '../../services/admin.service';
 
 @Component({
   selector: 'app-page-modifier',
@@ -6,10 +10,72 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./page-modifier.component.scss']
 })
 export class PageModifierComponent implements OnInit {
+  plantForm: FormGroup;
+  updatePlantForm: FormGroup;
+  plantInfos: any;
+  plantId: any;
 
-  constructor() { }
+
+
+  constructor(private adminService: AdminService,
+    private router: Router,
+    private fb: FormBuilder,
+    private route: ActivatedRoute) {
+    this.updatePlantForm = new FormGroup({});
+    this.plantForm = this.initForm();
+  }
 
   ngOnInit(): void {
+    /** Pour récuperer l'id de la plante à modifier **/
+    this.plantId = this.route.snapshot.paramMap.get('id');
+
+    /** Appel Api **/
+    this.adminService
+      .getPlantById(this.plantId)
+      .subscribe((plantInfos: any) => {
+        this.plantInfos = plantInfos;
+        console.log(this.plantInfos);
+        console.log(this.plantInfos.product_name);
+      });
+  }
+
+  /** Méthode qui initialise les champs du formulaire avec les infos du db Json **/
+  private initForm(plant?: Plant): FormGroup {
+
+    return this.fb.group({
+      nom:[plant ? plant.name : ''],
+      price: [plant ? plant.price : ''],
+      quantity: [plant ? plant.quantity : ''],
+      category: [plant ? plant.category : ''],
+      rating: [plant ? plant.rating : ''],
+      inStock: [plant ? plant.inStock : ['']],
+    });
+  }
+
+
+  /** Méthode qui envoie les champs modifiés pour mise à jour **/
+  public onSubmit(): void {
+    const nameValue = this.updatePlantForm.value['nameFc'];
+    const priceValue = this.updatePlantForm.value['priceFc'];
+    const ratingValue = this.updatePlantForm.value['ratingFc'];
+    const quantityValue = this.updatePlantForm.value['quantityFc'];
+    const categoryValue = this.updatePlantForm.value['categoryFc'];
+    const inStockValue = this.updatePlantForm.value['inStockFc'];
+    const urlPicture = "https//picsum.photos/id/18/200/300";
+
+    const plant: Plant = {
+      id: this.plantId,
+      name: nameValue,
+      price: priceValue,
+      quantity: quantityValue,
+      rating: ratingValue,
+      category: categoryValue,
+      inStock: [inStockValue],
+      urlPicture
+    };
+    this.adminService.updatePlant(plant)?.subscribe((resp) => {
+      this.router.navigate(['admin']);
+    });
   }
 
 }

src/app/modules/admin/pages/page-tableau/page-tableau.component.html

@@ -22,7 +22,7 @@
       <td>{{products.inStock}}</td>
       <td>{{products.category}}</td>
       <td>{{products.rating}}</td>
-      <td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
+      <td><a class="bi-pencil-square" routerLink="../modifier/{{products.id}}"></a></td>
       <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></td>
     </tr>
   </tbody>

src/app/modules/admin/services/admin.service.ts

@@ -48,4 +48,13 @@ export class AdminService {
   // getData(): Observable<any[]> {
   //   return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
   // }
+
+   /** Récupérer une plante par son Id **/
+  getPlantById(id: any): Observable<Plant> {
+    return this.httpClient.get<Plant>(`${this.apiUrl}/list_products/${id}`);
+  }
+  /** Modifier Plante **/
+  updatePlant(plant: Plant): Observable<any> {
+    return this.httpClient.put(`${this.apiUrl}/list_products/${plant.id}`, plant);
+  }
 }