select category et divers

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

@@ -43,22 +43,24 @@
       }"
     />
     <label for="floatingInputQuantity">Quantité</label>
-  </div>
-  <div class="form-floating">
-    <input
-      type="text"
-      class="form-control"
-      id="floatingCategory"
-      placeholder=""
-      name="category"
-      formControlName="categoryFc"
-      [ngClass]="{
-        'is-valid': plantForm.controls['categoryFc'].valid,
-        'is-invalid': !plantForm.controls['categoryFc'].valid
-      }"
-    />
-    <label for="floatingInputCategory">Catégorie</label>
-  </div>
+    </div>
+    <div class="form-floating select">
+      <select
+        class="form-control"
+        id="floatingInputCategory"
+        placeholder=""
+        name="category"
+        formControlName="categoryFc"
+      >
+        <option value="plantes fleuries">Plantes fleuries</option>
+        <option value="orchides">Orchidées</option>
+        <option value="cactus et plantes grasses">Cactus et plantes grasses</option>
+        <option value="bonsas">Bonsas</option>
+        <option value="plantes vertes">Plantes vertes</option>
+        <option value="palmier dintrieur">Palmier d'intérieur</option>
+      </select>
+      <label value="category">Sélectionnez catégorie</label>
+    </div>
   <div class="form-floating">
     <input
       type="number"

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

@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Plant } from '../../models/plant';
+import { AdminService } from '../../services/admin.service';
 
 @Component({
   selector: 'app-formulaire',
@@ -8,12 +10,23 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 })
 export class FormulaireComponent implements OnInit {
   plantForm!: FormGroup;
+  @Input() plantInfos!: Plant;
+  @Input() isAdd : boolean = true;
   @Input()buttonLabel!:String;
-  constructor(private fb : FormBuilder) {
-    this.plantForm = this.fb.group({});
+  constructor(private fb : FormBuilder, private adminService: AdminService) {
+
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.plantForm = this.fb.group({
+      nameFc: new FormControl(this.plantInfos.name, [Validators.required]),
+      priceFc: new FormControl(this.plantInfos.price, [Validators.required]),
+      quantityFc: new FormControl(this.plantInfos.quantity, [Validators.required]),
+      inStockFc: new FormControl(this.plantInfos.inStock, [Validators.required]),
+      categoryFc: new FormControl(this.plantInfos.category, [Validators.required]),
+      ratingFc: new FormControl(this.plantInfos.rating, [Validators.required]),
+    });
+  }
 
   onSubmit(){}
 }

src/app/modules/admin/models/plant.ts

@@ -6,7 +6,7 @@ export class Plant {
     public price: number =1,
     public quantity: number= 0,
     public inStock: string[]=['disponible','partiellement disponible', 'non disponible'],
-    public category:Category,
+    public category:string[]=['plantes fleuries','orchides','cactus et plantes grasses','bonsas','plantes vertes','palmier dintrieur'],
     public urlPicture: string = "https//picsum.photos/id/18/200/300",
     public rating: number = 0,
     public id?: number

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

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

src/app/modules/admin/pages/page-ajouter/page-ajouter.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-ajouter/page-ajouter.component.ts

@@ -20,28 +20,24 @@ import { AdminService } from '../../services/admin.service';
 })
 export class PageAjouterComponent implements OnInit {
   public plantForm: FormGroup;
+  public isAdd: boolean = false;
+
 
   constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
     this.plantForm = new FormGroup({});
+    this.isAdd = false;
   }
 
   ngOnInit(): void {
-    this.plantForm = this.fb.group({
-      nameFC: new FormControl('', [Validators.required]),
-      priceFc: new FormControl('', [Validators.required]),
-      quantityFc: new FormControl('', [Validators.required]),
-      categoryFc: new FormControl('', [Validators.required]),
-      ratingFc: new FormControl('', [Validators.required]),
-      inStockFc: new FormControl('', []),
-    });
+
   }
 
   public onSubmit(): void {
     const nameValue = this.plantForm.value['nameFC'];
     const priceValue = this.plantForm.value['priceFc'];
     const quantityValue = this.plantForm.value['quantityFc'];
-    const inStockValue = this.plantForm.value['categoryFc'];
-    const categoryValue = this.plantForm.value[''];
+    const inStockValue = this.plantForm.value['inStockFC'];
+    const categoryValue = this.plantForm.value['categotyFC'];
     const urlPicture: string = 'https//picsum.photos/id/18/200/300';
     const ratingValue = this.plantForm.value['ratingFc'];
     const idValue = this.plantForm.value[''];
@@ -51,12 +47,12 @@ export class PageAjouterComponent implements OnInit {
       price: priceValue,
       quantity: quantityValue,
       inStock: [inStockValue],
-      category: categoryValue,
+      category: [categoryValue],
       urlPicture: 'https//picsum.photos/id/18/200/300',
       rating: ratingValue,
       id: idValue,
     };
-    console.log(plant);
+    console.log("coco",plant);
 
     this.adminService.addPlant(plant)?.subscribe((resp)=>{
     })

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

@@ -19,12 +19,12 @@
       <td>{{products.name}}</td>
       <td>{{products.price}}</td>
       <td>{{products.quantity}}</td>
-      <td>{{products.instock}}</td>
-      <!-- <td>{{products.Catégorie.}}</td> -->
+      <td>{{products.inStock}}</td>
+      <td>{{products.category}}</td>
       <td>{{products.rating}}</td>
       <td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
       <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></td>
     </tr>
   </tbody>
 </table>
-<button>Ajouter une plante</button>
+<button routerLink="../ajouter">Ajouter une plante </button>