ajout page de detail + recipe list sous forme de tableau

src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <div>
-  <h1>Projet Book</h1>
+  <h1>Projet Recipe</h1>
   <br />
-  <p>Bienvenue sur Book</p>
+  <p>Bienvenue sur Recipe</p>
 </div>

src/app/recipe-list/recipe-list.component.html

@@ -1,11 +1,62 @@
-<button (click)="navToAddRecipe()">Add Recipe</button>
-<div *ngFor="let recipe of recipes">
-  <h3>{{ recipe.name }}</h3>
-  <p>{{ recipe.description }}</p>
-  <img *ngIf="recipe.image" [src]="recipe.image" alt="{{ recipe.name }}" />
-  <ul>
-    <li *ngFor="let ingredient of recipe.ingredients">
-      {{ ingredient.name }}: {{ getQuantity(recipe.id, ingredient.id) }}
-    </li>
-  </ul>
+<div *ngIf="recipes.length > 0">
+  <h2>List of recipes</h2>
+  <button mat-raised-button color="primary" (click)="navToAddRecipe()">
+    Add Recipe
+  </button>
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef>Name</th>
+      <td mat-cell *matCellDef="let recipe">{{ recipe.name }}</td>
+    </ng-container>
+
+    <!-- Description Column -->
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef>Description</th>
+      <td mat-cell *matCellDef="let recipe">{{ recipe.description }}</td>
+    </ng-container>
+
+    <!-- Image Column -->
+    <ng-container matColumnDef="image">
+      <th mat-header-cell *matHeaderCellDef>Image</th>
+      <td mat-cell *matCellDef="let recipe">
+        <img
+          *ngIf="recipe.image; else placeholder"
+          [src]="recipe.image"
+          alt="{{ recipe.name }}"
+          style="max-width: 200px; max-height: 200px"
+        />
+        <ng-template #placeholder>
+          <img
+            src="https://placehold.co/200x200"
+            alt="Placeholder Image"
+            style="max-width: 200px; max-height: 200px"
+          />
+        </ng-template>
+      </td>
+    </ng-container>
+
+    <!-- Action Column -->
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>Show</th>
+      <td mat-cell *matCellDef="let recipe">
+        <button mat-button color="warn" (click)="onSelectRecipe(recipe)">
+          Show
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr
+      mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      (click)="onSelectRecipe(row)"
+    ></tr>
+  </table>
+  <mat-paginator
+    [length]="recipes.length"
+    [pageSize]="5"
+    [pageSizeOptions]="[5, 10, 20]"
+  >
+  </mat-paginator>
 </div>

src/app/recipe-list/recipe-list.component.ts

@@ -1,22 +1,34 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Recipe } from '../models/recipe';
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
+import { MatTableModule, MatTableDataSource } from '@angular/material/table';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-recipe-list',
   standalone: true,
   templateUrl: './recipe-list.component.html',
   styleUrls: ['./recipe-list.component.scss'],
-  imports: [CommonModule],
+  imports: [CommonModule, MatTableModule, MatPaginatorModule, MatButtonModule],
 })
 export class RecipeListComponent implements OnInit {
   recipes: Recipe[] = [];
+  dataSource: MatTableDataSource<Recipe> = new MatTableDataSource<Recipe>();
+  displayedColumns: string[] = ['name', 'description', 'image', 'actions'];
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
 
   constructor(private router: Router) {}
 
   ngOnInit(): void {
     this.recipes = JSON.parse(localStorage.getItem('recipes') || '[]');
+    this.dataSource.data = this.recipes;
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
   }
 
   getQuantity(recipeId: number, ingredientId: number): number {
@@ -37,4 +49,8 @@ export class RecipeListComponent implements OnInit {
   navToAddRecipe(): void {
     this.router.navigate(['/add']);
   }
+
+  onSelectRecipe(recipe: Recipe): void {
+    this.router.navigate(['/recipe', recipe.id]);
+  }
 }

src/app/recipe/recipe.component.html

@@ -1 +1,38 @@
-<p>recipe works!</p>
+<div *ngIf="recipe">
+  <mat-card class="example-card" appearance="outlined">
+    <mat-card-header>
+      <mat-card-title-group>
+        <mat-card-title>{{ recipe.name }}</mat-card-title>
+        <mat-card-subtitle>{{ recipe.description }}</mat-card-subtitle>
+        <img
+          mat-card-xl-image
+          *ngIf="recipe.image; else placeholder"
+          [src]="recipe.image"
+          alt="{{ recipe.name }}"
+          style="max-width: 500px; max-height: 500px"
+        />
+        <ng-template #placeholder>
+          <img
+            mat-card-xl-image
+            src="https://placehold.co/500x500"
+            alt="Placeholder Image"
+            style="max-width: 500px; max-height: 500px"
+          />
+        </ng-template>
+      </mat-card-title-group>
+    </mat-card-header>
+    <mat-card-content>
+      <h2>Ingredients</h2>
+      <ul>
+        <li *ngFor="let ingredient of recipe.ingredients">
+          {{ ingredient.name }}: {{ getIngredientQuantity(ingredient.id) }}
+        </li>
+      </ul>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-raised-button color="primary" (click)="navBack()">
+        Back to list
+      </button>
+    </mat-card-actions>
+  </mat-card>
+</div>

src/app/recipe/recipe.component.scss

@@ -0,0 +1,4 @@
+.example-card {
+  max-width: 600px;
+  margin-bottom: 8px;
+}

src/app/recipe/recipe.component.ts

@@ -1,12 +1,51 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Recipe } from '../models/recipe';
+import { IngredientRecipe } from '../models/ingredient-recipe';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'app-recipe',
   standalone: true,
-  imports: [],
+  imports: [CommonModule, MatButtonModule, MatCardModule],
   templateUrl: './recipe.component.html',
-  styleUrl: './recipe.component.scss'
+  styleUrls: ['./recipe.component.scss'],
 })
-export class RecipeComponent {
+export class RecipeComponent implements OnInit {
+  recipe: Recipe | undefined;
+  ingredientRecipes: IngredientRecipe[] = [];
 
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    const recipeId = this.route.snapshot.paramMap.get('id');
+    const recipes: Recipe[] = JSON.parse(
+      localStorage.getItem('recipes') || '[]'
+    );
+    this.recipe = recipes.find((r) => r.id.toString() === recipeId);
+
+    if (this.recipe) {
+      this.ingredientRecipes = this.getIngredientRecipes(this.recipe.id);
+    }
+  }
+
+  getIngredientRecipes(recipeId: number): IngredientRecipe[] {
+    const ingredientRecipes: IngredientRecipe[] = JSON.parse(
+      localStorage.getItem('ingredientRecipes') || '[]'
+    );
+    return ingredientRecipes.filter((ir) => ir.idRecipe === recipeId);
+  }
+
+  getIngredientQuantity(ingredientId: number): number {
+    const ingredientRecipe = this.ingredientRecipes.find(
+      (ir) => ir.idIngredient === ingredientId
+    );
+    return ingredientRecipe ? ingredientRecipe.quantity : 0;
+  }
+
+  navBack(): void {
+    window.history.back();
+  }
 }