Carte détail grossière

src/app/pages/page-accueil/page-accueil.component.html

@@ -2,9 +2,7 @@
     <app-filter-side-bar [listCategories]="listCategoriesFilter"></app-filter-side-bar>
 
     <div class="custom-main container p-3">
-      <input class="form-control"
+        <input class="form-control" type="text" placeholder="Recherche ta belle plante"
-          type="text"
-          placeholder="Recherche ta belle plante"
             aria-label="Input Recherche ta belle plante">
 
         <div class="py-3">
@@ -16,12 +14,9 @@
 
         <div class="row">
             <div class="col" *ngFor="let product of listData">
-              <app-card-plante [plant]="product"
+                <app-card-plante [plant]="product" [routerLink]="['/details/:productId']" (clickLike)="onEventLike()">
-              [routerLink]="['/details/:productId']" 
-                          (clickLike)="onEventLike()">
                 </app-card-plante>
             </div>
         </div>
     </div>
 </div>
-

src/app/pages/page-details/page-details.component.html

@@ -1,3 +1,25 @@
-<p (clickCardId) = "test($event)"></p>
+<div class="container" *ngIf="detailsPlant">
-
+    <div class="row my-4">
-
+        <img src="{{detailsPlant.product_url_picture}}" class="col-sm-5" style="width: 30rem;"
+            alt="Image de {{ detailsPlant.product_name }}">
+        <div class="col-sm-6">
+            <h4 style=" color: green;">{{detailsPlant.product_breadcrumb_label}}</h4>
+            <h2 class="card-title" style="font-size: 30px;">{{ detailsPlant.product_name }}</h2>
+            <div>
+            </div>
+            <div class="card-content">
+            </div>
+            <div style="border-style: solid; border-color: green; margin: auto; text-align: center;">
+                <p>
+                    Plante appréciant la chaleur et un bon réseau wifi,
+                    interconnectée avec son propriétaire et détestant les chats.
+                    Beaucoup de café et un peu d’eau. Ne pas sortir en extérieur, sauf en terrasse. Floraison totale au
+                    mois de juin.
+                </p>
+            </div>
+            <div class="card-content" style="font-weight: bold">{{ detailsPlant.product_unitprice_ati }} €
+            </div>
+            <div>Quantité restante : {{detailsPlant.product_qty}}</div>
+        </div>
+    </div>
+</div>

src/app/pages/page-details/page-details.component.ts

@@ -10,7 +10,7 @@ import { PlantouneService } from 'src/app/services/plantoune.service';
 })
 export class PageDetailsComponent implements OnInit {
 
-  product : any;
+  detailsPlant: any;
   public listData: any[];
 
   constructor(private route: ActivatedRoute, private plantouneService: PlantouneService) {
@@ -31,9 +31,13 @@ export class PageDetailsComponent implements OnInit {
         const routeParams = this.route.snapshot.paramMap;
         const productIdFromRoute = Number(routeParams.get('productId'));
 
-    //trouve le produit qui correspond à l'Id de la route
+        // Faire appel au service et récuperer et executer la requete http  et lui fournir le productId
+        this.plantouneService.getPlantById(productIdFromRoute).subscribe
+          (plant => {
+            this.detailsPlant = plant[0];
+            console.log(this.detailsPlant);
+          })
 
-   this.product = this.listData.find (product => product.product_id === productIdFromRoute);
 
       })
   }

src/app/services/plantoune.service.ts

@@ -11,6 +11,11 @@ export class PlantouneService {
   constructor(private httpClient: HttpClient) { }
 
   getData(): Observable<any[]> {
+    
     return this.httpClient.get<any[]>('http://localhost:3000/list_products');
   }
+  
+  getPlantById(id : any): Observable<any[]> {
+    return this.httpClient.get<any[]>('http://localhost:3000/list_products?product_id=' + id);
+  }
 }