src/app/components/nav-bar/nav-bar.component.html

@@ -1,12 +1,12 @@
 <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light shadow ">
     <div class="container-fluid">
         <a class="navbar-brand" href="#">🪴 La Belle Plante</a>
-        <button class="navbar-toggler"
+        <button class="navbar-toggler" 
-            type="button"
+            type="button" 
-            data-bs-toggle="collapse"
+            data-bs-toggle="collapse" 
             data-bs-target="#navbarNavAltMarkup"
-            aria-controls="navbarNavAltMarkup"
+            aria-controls="navbarNavAltMarkup" 
-            aria-expanded="false"
+            aria-expanded="false" 
             aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -21,7 +21,6 @@
                 <a class="nav-link disabled" *ngIf="likeCounter == 0"> Pas de plante likée</a>
                 <a class="nav-link disabled" *ngIf="likeCounter == 1">Plante likée : {{ likeCounter }}</a>
                 <a class="nav-link disabled" *ngIf="likeCounter > 1">Plantes likées : {{ likeCounter }}</a>
-                <a routerLink="admin" routerLinkActive="active-custom" class="nav-link">Page administrateur</a>
             </div>
         </div>
     </div>

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/:id', component: PageModifierComponent },
+  { path: 'modifier', component: PageModifierComponent },
   { path: 'ajouter', component: PageAjouterComponent },
   { path: 'tableau', component: PageTableauComponent },
 ];

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

@@ -1,104 +1,126 @@
-<div class="form-plant">
+<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
-      <form [formGroup]="plantForm" (ngSubmit)="onSubmit()">
+  <div class="form-floating">
-        <div class="form-floating">
+    <input
-          <input
+      type="text"
-            type="text"
+      class="form-control"
-            class="form-control"
+      id="floatingInputName"
-            id="floatingInputName"
+      placeholder=""
-            placeholder=""
+      name="name"
-            name="name"
+      formControlName="nameFc"
-            formControlName="nameFc"
+      [ngClass]="{
-            [ngClass]="{
+        'is-valid':
-              'is-valid': plantForm.controls['nameFc'].valid,
+          plantForm.controls['nameFc'].touched &&
-              'is-invalid': !plantForm.controls['nameFc'].valid
+          plantForm.controls['nameFc'].valid,
-            }"
+        'is-invalid':
-          />
+          plantForm.controls['nameFc'].touched &&
-          <label for="floatingInputName">Nom</label>
+          !plantForm.controls['nameFc'].valid
-        </div>
+      }"
-        <div class="form-floating">
+    />
-          <input
+    <label for="floatingInputName">Nom</label>
-            type="text"
+  </div>
-            class="form-control"
+  <div class="form-floating">
-            id="floatingInputPrice"
+    <input
-            placeholder=""
+      type="text"
-            name="price"
+      class="form-control"
-            formControlName="priceFc"
+      id="floatingInputPrice"
-            [ngClass]="{
+      placeholder=""
-              'is-valid': plantForm.controls['priceFc'].valid,
+      name="price"
-              'is-invalid': !plantForm.controls['priceFc'].valid
+      formControlName="priceFc"
-            }"
+      [ngClass]="{
-          />
+        'is-valid':
-          <label for="floatingInputPrice">Prix</label>
+          plantForm.controls['priceFc'].touched &&
-        </div>
+          plantForm.controls['priceFc'].valid,
-        <div class="form-floating">
+        'is-invalid':
-          <input
+          plantForm.controls['priceFc'].touched &&
-            type="number"
+          !plantForm.controls['priceFc'].valid
-            class="form-control"
+      }"
-            id="floatingInputQuantity"
+    />
-            placeholder=""
+    <label for="floatingInputPrice">Prix</label>
-            name="quantity"
+  </div>
-            formControlName="quantityFc"
+  <div class="form-floating">
-            [ngClass]="{
+    <input
-              'is-valid': plantForm.controls['quantityFc'].valid,
+      type="number"
-              'is-invalid': !plantForm.controls['quantityFc'].valid
+      class="form-control"
-            }"
+      id="floatingInputQuantity"
-          />
+      placeholder=""
-          <label for="floatingInputQuantity">Quantité</label>
+      name="quantity"
-          </div>
+      formControlName="quantityFc"
-          <div class="form-floating select">
+      [ngClass]="{
-            <select
+        'is-valid':
-              class="form-control"
+          plantForm.controls['quantityFc'].touched &&
-              id="floatingInputCategory"
+          plantForm.controls['quantityFc'].valid,
-              placeholder=""
+        'is-invalid':
-              name="category"
+          plantForm.controls['quantityFc'].touched &&
-              formControlName="categoryFc"
+          !plantForm.controls['quantityFc'].valid
-            >
+      }"
-              <option value="plantes fleuries">Plantes fleuries</option>
+    />
-              <option value="orchides">Orchidées</option>
+    <label for="floatingInputQuantity">Quantité</label>
-              <option value="cactus et plantes grasses">Cactus et plantes grasses</option>
+  </div>
-              <option value="bonsas">Bonsas</option>
+  <div class="form-floating">
-              <option value="plantes vertes">Plantes vertes</option>
+    <input
-              <option value="palmier dintrieur">Palmier d'intérieur</option>
+      type="text"
-            </select>
+      class="form-control"
-            <label value="category">Sélectionnez catégorie</label>
+      id="floatingCategory"
-          </div>
+      placeholder=""
-        <div class="form-floating">
+      name="category"
-          <input
+      formControlName="categoryFc"
-            type="number"
+      [ngClass]="{
-            class="form-control"
+        'is-valid':
-            id="floatingRating"
+          plantForm.controls['categoryFc'].touched &&
-            placeholder=""
+          plantForm.controls['categoryFc'].valid,
-            name="rating"
+        'is-invalid':
-            formControlName="ratingFc"
+          plantForm.controls['categoryFc'].touched &&
-            [ngClass]="{
+          !plantForm.controls['categoryFc'].valid
-              'is-valid': plantForm.controls['ratingFc'].valid,
+      }"
-              'is-invalid': !plantForm.controls['ratingFc'].valid
+    />
-            }"
+    <label for="floatingInputCategory">Catégorie</label>
-          />
+  </div>
-          <label for="floatingRating">Note</label>
+  <div class="form-floating">
-        </div>
+    <input
-        <div class="form-floating select">
+      type="number"
-          <select
+      class="form-control"
-            class="form-control"
+      id="floatingRating"
-            id="floatingInputInStock"
+      placeholder=""
-            placeholder=""
+      name="rating"
-            name="inStock"
+      formControlName="ratingFc"
-            formControlName="inStockFc"
+      [ngClass]="{
-          >
+        'is-valid':
-            <option value="disponible">Disponible</option>
+          plantForm.controls['ratingFc'].touched &&
-            <option value="partiellement disponible">Partiellement disponible</option>
+          plantForm.controls['ratingFc'].valid,
-            <option value="non disponible">Non disponible</option>
+        'is-invalid':
-          </select>
+          plantForm.controls['ratingFc'].touched &&
-          <label value="disponible">Sélectionnez disponibilité</label>
+          !plantForm.controls['ratingFc'].valid
-        </div>
+      }"
-
+    />
-        <button
+    <label for="floatingRating">Note</label>
-          class="w-100 btn btn-lg btn-outline-success"
+  </div>
-          type="submit"
+  <div class="form-floating select">
-          [disabled]="plantForm.invalid"
+    <select
-        >
+      class="form-control"
-          {{ buttonLabel }}
+      id="floatingInputInStock"
-        </button>
+      placeholder=""
-      </form>
+      name="inStock"
-</div>
+      formControlName="inStockFc"
+    >
+      <option value="disponible">Disponible</option>
+      <option value="partiellement disponible">Partiellement disponible</option>
+      <option value="non disponible">Non disponible</option>
+    </select>
+    <label value="disponible">Sélectionnez disponibilité</label>
+  </div>
 
+  <button
+    class="w-100 btn btn-lg btn-outline-success"
+    type="submit"
+    [disabled]="plantForm.invalid"
+  >
+    Créer une plante
+  </button>
+  <button
+    class="w-100 btn btn-lg btn-outline-success"
+    type="submit"
+    [disabled]="plantForm.invalid"
+  >
+    Modifier une plante
+  </button>
+</form>

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

@@ -1,75 +0,0 @@
-.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: #306340;
-  border-color: #306340;
-}
-
-.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: #306340 !important;
-  border-color: #306340 !important;
-}

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

@@ -1,6 +1,5 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
-import { Plant } from '../../models/plant';
 
 @Component({
   selector: 'app-formulaire',
@@ -9,28 +8,10 @@ import { Plant } from '../../models/plant';
 })
 export class FormulaireComponent implements OnInit {
   plantForm!: FormGroup;
-  @Input()buttonLabel!:String;
+  constructor() {}
-  @Input() plantInfos!: any;
-  @Output() submitted = new EventEmitter();
 
-  constructor(private fb : FormBuilder) {
+  ngOnInit(): void {}
-  }
-
-  ngOnInit(): void {
-    console.log(this.plantInfos);
-    this.plantForm = this.fb.group({
-      nameFc: new FormControl(this.plantInfos.product_name, [Validators.required]),
-      priceFc: new FormControl(this.plantInfos.product_price, [Validators.required]),
-      quantityFc: new FormControl(this.plantInfos.product_qty, [Validators.required]),
-      inStockFc: new FormControl(this.plantInfos.product_instock, [Validators.required]),
-      categoryFc: new FormControl(this.plantInfos.product_breadcrumb_label, [Validators.required]),
-      ratingFc: new FormControl(this.plantInfos.product_rating, [Validators.required]),
-    });
-  }
-
-  onSubmit(){
-    this.submitted.emit(this.plantForm.value)
-  }
 
+  onSubmit(){}
 }
 

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

@@ -1,12 +1,14 @@
+import { Category } from "./category";
+
 export class Plant {
   constructor(
     public name: string='',
     public price: number =1,
     public quantity: number= 0,
-    public inStock: string[]=['disponible','partiellement disponible', 'non disponible'],
+    public instock: boolean= true,
-    public category:string[]=['plantes fleuries','orchides','cactus et plantes grasses','bonsas','plantes vertes','palmier dintrieur'],
+    public category:Category,
     public urlPicture: string = "https//picsum.photos/id/18/200/300",
     public rating: number = 0,
-    public id: string = ''
+    public id?: number
   ){}
 }

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

@@ -1,2 +1 @@
-<h1>Ajouter une plante</h1>
+<p>page-ajouter works!</p>
-<app-formulaire [plantInfos]="newplant" (submitted)="addPlant($event)" [buttonLabel]="'Ajouter une plante'"></app-formulaire>

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

@@ -1,7 +0,0 @@
-h1{
-  display: flex;
-  justify-content: center;
-  color: rgba(0, 0, 0, 0.658);
-  font-size: 28px;
-  margin-top: 20px;
-}

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

@@ -1,67 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { Router } from '@angular/router';
-import { FormulaireComponent } from '../../components/formulaire/formulaire.component';
-import { Plant } from '../../models/plant';
-import { AdminService } from '../../services/admin.service';
-
-
-
 
 @Component({
   selector: 'app-page-ajouter',
   templateUrl: './page-ajouter.component.html',
-  styleUrls: ['./page-ajouter.component.scss'],
+  styleUrls: ['./page-ajouter.component.scss']
 })
 export class PageAjouterComponent implements OnInit {
-  public newplant = new Plant();
 
-
+  constructor() { }
-  constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
-
-  }
 
   ngOnInit(): void {
-
   }
 
-  public addPlant(plant: any): void {
-    const nameValue = plant.nameFc;
-    const priceValue = plant.priceFc;
-    const ratingValue = plant.ratingFc;
-    const quantityValue = plant.quantityFc;
-    const categoryValue = plant.categoryFc;
-    const inStockValue = plant.inStockFc;
-
-    const plante: any = {
-      product_name: nameValue,
-      product_price: priceValue,
-      product_qty: quantityValue,
-      product_rating: ratingValue,
-      product_breadcrumb_label: categoryValue,
-      product_instock: [inStockValue],
-      product_url_picture : "https//picsum.photos/id/18/200/300",
-      product_discount_code : "",
-      product_color: "",
-      product_unitprice_ati: "",
-      product_unitprice_tf: "",
-      product_discount_tf: "",
-      product_discount_ati: "",
-      product_url_page: "",
-      product_shipping_method: null,
-      product_image_source: "",
-      product_seller: "market place",
-      product_web_only: "non"
-    };
-
-    this.adminService.addPlant(plante)?.subscribe((resp)=>{
-      this.router.navigate(['admin']);
-    })
-
-  }
 }

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

@@ -1,3 +1 @@
-<h1>Modifier la plante</h1>
+<p>page-modifier works!</p>
-<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.scss

@@ -1,7 +0,0 @@
-h1{
-  display: flex;
-  justify-content: center;
-  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,8 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder,FormGroup} from '@angular/forms';
-import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { Plant } from '../../models/plant';
-import { AdminService } from '../../services/admin.service';
 
 @Component({
   selector: 'app-page-modifier',
@@ -10,73 +6,10 @@ import { AdminService } from '../../services/admin.service';
   styleUrls: ['./page-modifier.component.scss']
 })
 export class PageModifierComponent implements OnInit {
-  editPlant!: Plant;
-  plantId!: string;
 
-
+  constructor() { }
-
-  constructor(private adminService: AdminService,
-    private router: Router,
-    private fb: FormBuilder,
-    private route: ActivatedRoute) {
-  }
 
   ngOnInit(): void {
-    /** Pour récuperer l'id de la plante à modifier et appel Api**/
-    this.route.paramMap.subscribe((params : ParamMap) => {
-      const id = params.get('id')
-      if( id != null){
-        this.plantId = id;
-        //console.log(this.plantId);
-
-        this.adminService
-        .getPlantById(this.plantId)
-        .subscribe((plantData: any) => {
-          this.editPlant = plantData;
-          //console.log(this.editPlant);
-          //console.log(this.editPlant.name);
-        });
-      }
-    });
-
-  }
-
-
-
-  /** Méthode qui envoie les champs modifiés pour mise à jour **/
-  public update(plant: any): void {
-    //console.log(plant);
-    const nameValue = plant.nameFc;
-    const priceValue = plant.priceFc;
-    const ratingValue = plant.ratingFc;
-    const quantityValue = plant.quantityFc;
-    const categoryValue = plant.categoryFc;
-    const inStockValue = plant.inStockFc;
-
-    const plante: any = {
-      id: this.plantId,
-      product_name: nameValue,
-      product_price: priceValue,
-      product_qty: quantityValue,
-      product_rating: ratingValue,
-      product_breadcrumb_label: categoryValue,
-      product_instock: [inStockValue],
-      product_url_picture : "https//picsum.photos/id/18/200/300",
-      product_discount_code : "",
-      product_color: "",
-      product_unitprice_ati: "",
-      product_unitprice_tf: "",
-      product_discount_tf: "",
-      product_discount_ati: "",
-      product_url_page: "",
-      product_shipping_method: null,
-      product_image_source: "",
-      product_seller: "market place",
-      product_web_only: "non"
-    };
-    this.adminService.updatePlant(plante)?.subscribe((resp) => {
-      this.router.navigate(['admin']);
-    });
   }
 
 }

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

@@ -1,35 +1,29 @@
-<div id="container">
+<table class="table" *ngIf="subCollection$ | async as collection">
-  <div id="button">
+  <thead class="thead-dark">
-    <button class="w-100 btn btn-lg btn-outline-success" routerLink="../ajouter">Ajouter une plante </button>
+    <tr>
-  </div>
+      <th scope="col">Id</th>
-  <table class="table" *ngIf="subCollection$ | async as collection">
+      <th scope="col">Nom</th>
-    <thead class="thead-dark" style="background-color: #306340 ; color:#f3f7f4 ;">
+      <th scope="col">Prix</th>
-      <tr>
+      <th scope="col">Quantité</th>
-        <th scope="col">Id</th>
+      <th scope="col">En stock</th>
-        <th scope="col">Nom</th>
+      <th scope="col">Catégorie</th>
-        <th scope="col">Prix</th>
+      <th scope="col">Note</th>
-        <th scope="col">Quantité</th>
+      <th scope="col">Modifier</th>
-        <th scope="col">En stock</th>
+      <th scope="col">Supprimer</th>
-        <th scope="col">Catégorie</th>
-        <th scope="col">Note</th>
-        <th scope="col">Modifier</th>
-        <th scope="col">Supprimer</th>
-
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let products of collection">
-        <td>{{products.id}}</td>
-        <td>{{products.name}}</td>
-        <td>{{products.price}}</td>
-        <td>{{products.quantity}}</td>
-        <td>{{products.inStock}}</td>
-        <td>{{products.category}}</td>
-        <td>{{products.rating}}</td>
-        <td><a class="bi-pencil-square" style="color: #5472b1;" routerLink="../modifier/{{products.id}}"></a></td>
-        <td class="bi-trash-fill" style="color: rgb(231, 73, 73); cursor: pointer;" (click)="onClickDelete(products.id)"></td>
-      </tr>
-    </tbody>
-  </table>
-</div>
 
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let products of collection">
+      <th scope="row">{{products.id}}</th>
+      <td>{{products.name}}</td>
+      <td>{{products.price}}</td>
+      <td>{{products.quantity}}</td>
+      <td>{{products.instock}}</td>
+      <!-- <td>{{products.Catégorie.}}</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(5)"></td>
+    </tr>
+  </tbody>
+</table>

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

@@ -1,19 +0,0 @@
-#container{
-  display: flex;
-  justify-content: center;
-  margin-top: 5rem;
-}
-table{
-  width: 75%;
-  margin-left: 2rem;
-}
-button{
-  background-color: #306340;
-  color: #f3f7f4 !important;
-  border-color: #306340 !important;
-}
-#button{
-  width: 10%;
-}
-
-

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

@@ -28,10 +28,8 @@ export class PageTableauComponent implements OnInit {
     //   })
   }
 
-  onClickDelete(id: string){
+  onClickDelete(id: number){
-    this.adminService.onClickDelete(id).subscribe((resp) => {
+    console.log(id);
-      console.log("Suppression successful : ", resp);
-    });
 
   }
 

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

@@ -1,11 +1,11 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { map, Observable, Subject, tap } from 'rxjs';
+import { map, Observable, Subject } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { Plant } from '../models/plant';
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class AdminService {
   public collection$!: Observable<Plant[]>;
@@ -21,7 +21,7 @@ export class AdminService {
         //console.log("avant mapping: ", tabObj);
         // Ici grâce à la méthode .map() on transforme tout les objet json du tableau en instance de notre classe Plant()
         return tabObj.map((obj: any) => {
-          return new Plant(obj.product_name, obj.product_price,obj.product_qty,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id);
+          return new Plant(obj.product_name, obj.product_price,obj.product_quantity,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id);
         })
       }));
     //this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`);
@@ -31,29 +31,13 @@ export class AdminService {
   public refreshCollection(): void {
     // On se sert de notre flux de donnée type observable froid
     this.collection$.subscribe((listPlant: Plant[]) => {
+      this.plantCollection = [...listPlant];
       // Utiliser un observable chaud (subject) pour nexter nos données recues de notre observable froid
       this.subCollection$.next(listPlant);
     })
   }
 
-  addPlant(plant: Plant): Observable<any> | void {
-    return this.httpClient.post(`${this.apiUrl}/list_products`, plant);
-  }
-  onClickDelete(id: string): Observable<any> {
-    return this.httpClient.delete<any>(`${this.apiUrl}/list_products/${id}`).pipe(
-      tap(() => this.refreshCollection())
-    );
-  }
   // 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);
-  }
 }