From c5b01c39db74df3c78e9a0dd777b5d9165293c7e Mon Sep 17 00:00:00 2001 From: Hugo PRADIER Date: Mon, 17 Jun 2024 15:13:12 +0200 Subject: [PATCH] ajout page de detail + recipe list sous forme de tableau --- src/app/home/home.component.html | 4 +- .../recipe-list/recipe-list.component.html | 71 ++++++++++++++++--- src/app/recipe-list/recipe-list.component.ts | 20 +++++- src/app/recipe/recipe.component.html | 39 +++++++++- src/app/recipe/recipe.component.scss | 4 ++ src/app/recipe/recipe.component.ts | 47 ++++++++++-- 6 files changed, 166 insertions(+), 19 deletions(-) diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 3b76aaa..f85c800 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,5 +1,5 @@
-

Projet Book

+

Projet Recipe


-

Bienvenue sur Book

+

Bienvenue sur Recipe

diff --git a/src/app/recipe-list/recipe-list.component.html b/src/app/recipe-list/recipe-list.component.html index e1dbeb1..2c31f45 100644 --- a/src/app/recipe-list/recipe-list.component.html +++ b/src/app/recipe-list/recipe-list.component.html @@ -1,11 +1,62 @@ - -
-

{{ recipe.name }}

-

{{ recipe.description }}

- {{ recipe.name }} - +
+

List of recipes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name{{ recipe.name }}Description{{ recipe.description }}Image + {{ recipe.name }} + + Placeholder Image + + Show + +
+ +
diff --git a/src/app/recipe-list/recipe-list.component.ts b/src/app/recipe-list/recipe-list.component.ts index d3b2de6..6925919 100644 --- a/src/app/recipe-list/recipe-list.component.ts +++ b/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 = new MatTableDataSource(); + 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]); + } } diff --git a/src/app/recipe/recipe.component.html b/src/app/recipe/recipe.component.html index 8cab4a7..ee19345 100644 --- a/src/app/recipe/recipe.component.html +++ b/src/app/recipe/recipe.component.html @@ -1 +1,38 @@ -

recipe works!

+
+ + + + {{ recipe.name }} + {{ recipe.description }} + {{ recipe.name }} + + Placeholder Image + + + + +

Ingredients

+
    +
  • + {{ ingredient.name }}: {{ getIngredientQuantity(ingredient.id) }} +
    • +
+ + + + + +
diff --git a/src/app/recipe/recipe.component.scss b/src/app/recipe/recipe.component.scss index e69de29..011730b 100644 --- a/src/app/recipe/recipe.component.scss +++ b/src/app/recipe/recipe.component.scss @@ -0,0 +1,4 @@ +.example-card { + max-width: 600px; + margin-bottom: 8px; +} diff --git a/src/app/recipe/recipe.component.ts b/src/app/recipe/recipe.component.ts index 4592700..79606ac 100644 --- a/src/app/recipe/recipe.component.ts +++ b/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(); + } }