modifs

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

@@ -1,5 +1,5 @@
 <div class="form-plant">
-      <form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
+      <form [formGroup]="plantForm" (ngSubmit)="onSubmit()">
         <div class="form-floating">
           <input
             type="text"

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

@@ -1,7 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Plant } from '../../models/plant';
-import { AdminService } from '../../services/admin.service';
 
 @Component({
   selector: 'app-formulaire',
@@ -10,14 +9,15 @@ import { AdminService } from '../../services/admin.service';
 })
 export class FormulaireComponent implements OnInit {
   plantForm!: FormGroup;
-
-  @Input() plantInfos!: Plant;
   @Input()buttonLabel!:String;
-  constructor(private fb : FormBuilder, private adminService: AdminService) {
+  @Input() plantInfos!: Plant;
+  @Output() submitted = new EventEmitter();
 
+  constructor(private fb : FormBuilder) {
   }
 
   ngOnInit(): void {
+    console.log(this.plantInfos);
     this.plantForm = this.fb.group({
       nameFc: new FormControl(this.plantInfos.name, [Validators.required]),
       priceFc: new FormControl(this.plantInfos.price, [Validators.required]),
@@ -28,10 +28,9 @@ export class FormulaireComponent implements OnInit {
     });
   }
 
-  
+  onSubmit(){
-
+    this.submitted.emit(this.plantForm.value)
-  addPlant(){}
+  }
-
+
-  updatePlant(){}
 }
 

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

@@ -1,2 +1,2 @@
 <h1>Ajouter une plante</h1>
-<app-formulaire [buttonLabel]="'Ajouter une plante'" [isAdd]="true"></app-formulaire>
+<app-formulaire [buttonLabel]="'Ajouter une plante'"></app-formulaire>

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

@@ -1,2 +1,2 @@
 <h1>Modifier la plante</h1>
-<app-formulaire *ngIf="plantInfos" [buttonLabel]="'Modifier la plante'" [isAdd]= "false"></app-formulaire>
+<app-formulaire *ngIf="editPlant" [plantInfos]="editPlant" (submitted)="update($event)" [buttonLabel]="'Modifier la plante'"></app-formulaire>

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder,FormGroup} from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { Plant } from '../../models/plant';
 import { AdminService } from '../../services/admin.service';
 
@@ -10,10 +10,8 @@ import { AdminService } from '../../services/admin.service';
   styleUrls: ['./page-modifier.component.scss']
 })
 export class PageModifierComponent implements OnInit {
-  plantForm: FormGroup;
+  editPlant!: Plant;
-  updatePlantForm: FormGroup;
+  plantId!: string;
-  plantInfos: any;
-  plantId: any;
 
 
 
@@ -21,61 +19,54 @@ export class PageModifierComponent implements OnInit {
     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 **/
+    /** Pour récuperer l'id de la plante à modifier et appel Api**/
-    this.plantId = this.route.snapshot.paramMap.get('id');
+    this.route.paramMap.subscribe((params : ParamMap) => {
+      const id = params.get('id')
+      if( id != null){
+        this.plantId = id;
+        console.log(this.plantId);
 
-    /** Appel Api **/
         this.adminService
         .getPlantById(this.plantId)
-      .subscribe((plantInfos: any) => {
+        .subscribe((plantData: any) => {
-        this.plantInfos = plantInfos;
+          this.editPlant = plantData;
-        console.log(this.plantInfos);
+          console.log(this.editPlant);
-        console.log(this.plantInfos.product_name);
+          console.log(this.editPlant.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 {
+  public update(event: any): void {
-    const nameValue = this.updatePlantForm.value['nameFc'];
+    console.log(event);
-    const priceValue = this.updatePlantForm.value['priceFc'];
+    // const nameValue = this.updatePlantForm.value['nameFc'];
-    const ratingValue = this.updatePlantForm.value['ratingFc'];
+    // const priceValue = this.updatePlantForm.value['priceFc'];
-    const quantityValue = this.updatePlantForm.value['quantityFc'];
+    // const ratingValue = this.updatePlantForm.value['ratingFc'];
-    const categoryValue = this.updatePlantForm.value['categoryFc'];
+    // const quantityValue = this.updatePlantForm.value['quantityFc'];
-    const inStockValue = this.updatePlantForm.value['inStockFc'];
+    // const categoryValue = this.updatePlantForm.value['categoryFc'];
-    const urlPicture = "https//picsum.photos/id/18/200/300";
+    // const inStockValue = this.updatePlantForm.value['inStockFc'];
+    // const urlPicture = "https//picsum.photos/id/18/200/300";
 
-    const plant: Plant = {
+    // const plant: Plant = {
-      id: this.plantId,
+    //   id: this.plantId,
-      name: nameValue,
+    //   name: nameValue,
-      price: priceValue,
+    //   price: priceValue,
-      quantity: quantityValue,
+    //   quantity: quantityValue,
-      rating: ratingValue,
+    //   rating: ratingValue,
-      category: categoryValue,
+    //   category: categoryValue,
-      inStock: [inStockValue],
+    //   inStock: [inStockValue],
-      urlPicture
+    //   urlPicture
-    };
+    // };
-    this.adminService.updatePlant(plant)?.subscribe((resp) => {
+    // this.adminService.updatePlant(plant)?.subscribe((resp) => {
-      this.router.navigate(['admin']);
+    //   this.router.navigate(['admin']);
-    });
+    // });
   }
 
 }