From 86a1dbb3e391b8947ea98719606e7cb490e3b0bc Mon Sep 17 00:00:00 2001
From: bastien ollier <bastien.ollier@etu.uca.fr>
Date: Mon, 17 Jun 2024 15:21:00 +0200
Subject: [PATCH 1/3] update interface detail recipe

---
 src/app/recipe-add/recipe-add.component.html | 50 +++++++++++---------
 src/app/recipe-add/recipe-add.component.ts   | 10 ++--
 src/app/recipe.service.ts                    | 20 +++++++-
 src/app/recipe/recipe.component.html         | 41 ++++++++++++++--
 src/app/recipe/recipe.component.ts           |  3 +-
 5 files changed, 91 insertions(+), 33 deletions(-)

diff --git a/src/app/recipe-add/recipe-add.component.html b/src/app/recipe-add/recipe-add.component.html
index 1509a3f..9c70e38 100644
--- a/src/app/recipe-add/recipe-add.component.html
+++ b/src/app/recipe-add/recipe-add.component.html
@@ -1,21 +1,25 @@
 <form [formGroup]="createForm" (ngSubmit)="onSubmit()">
-    <mat-form-field>
-        <label for="name">Nom</label>
-        <input matInput id="name" type="text" formControlName="name" required>
-        @if (createForm.controls.name.errors?.['minlength']) {
-            <mat-error>Le nom doit contenir au moins {{ createForm.controls.name.errors!['minlength'].requiredLength }} caractères.</mat-error>
-        }
-        @if (createForm.controls.name.errors?.['maxlength']) {
-            <mat-error>Le nom ne peut dépasser {{ createForm.controls.name.errors!['maxlength'].requiredLength }} caractères.</mat-error>
-        }
-    </mat-form-field>
-    <mat-form-field>
-        <label for="description">Description</label>
-        <textarea matInput id="description" type="text" formControlName="description" required></textarea>
-        @if (createForm.controls.description.errors?.['maxlength']) {
-            <mat-error>La description ne peut dépasser {{ createForm.controls.description.errors!['maxlength'].requiredLength }} caractères.</mat-error>
-        }
-    </mat-form-field>
+    <div>
+        <mat-form-field>
+            <label for="name">Nom</label>
+            <input matInput id="name" type="text" formControlName="name" required>
+            @if (createForm.controls.name.errors?.['minlength']) {
+                <mat-error>Le nom doit contenir au moins {{ createForm.controls.name.errors!['minlength'].requiredLength }} caractères.</mat-error>
+            }
+            @if (createForm.controls.name.errors?.['maxlength']) {
+                <mat-error>Le nom ne peut dépasser {{ createForm.controls.name.errors!['maxlength'].requiredLength }} caractères.</mat-error>
+            }
+        </mat-form-field>
+    </div>
+    <div>
+        <mat-form-field>
+            <label for="description">Description</label>
+            <textarea matInput id="description" type="text" formControlName="description" required></textarea>
+            @if (createForm.controls.description.errors?.['maxlength']) {
+                <mat-error>La description ne peut dépasser {{ createForm.controls.description.errors!['maxlength'].requiredLength }} caractères.</mat-error>
+            }
+        </mat-form-field>
+    </div>
     <div>
         <label for="image">Image</label>
         <button type="button" mat-raised-button (click)="fileInput.click()">Téléverser</button>
@@ -29,11 +33,13 @@
                 <li>#{{ ingredient.idIngredient }} <input [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}"></li>
             }
         </ul>
-        <select id="selectedIngredient" formControlName="selectedIngredient">
-            @for (ingredient of ingredients; track ingredient.id) {
-                <option [ngValue]="ingredient.id">{{ ingredient.name }}</option>
-            }
-        </select>
+        <mat-form-field>
+            <select matInput id="selectedIngredient" formControlName="selectedIngredient">
+                @for (ingredient of ingredients; track ingredient.id) {
+                    <option matInput [ngValue]="ingredient.id">{{ ingredient.name }}</option>
+                }
+            </select>
+        </mat-form-field>
         <button mat-button type="button" (click)="onAddIngredient()">Add</button>
     </div>
     <button mat-flat-button class="button" type="submit">{{ recipeId === -1 ? 'Ajouter' : 'Éditer' }}</button>
diff --git a/src/app/recipe-add/recipe-add.component.ts b/src/app/recipe-add/recipe-add.component.ts
index 75949af..9303167 100644
--- a/src/app/recipe-add/recipe-add.component.ts
+++ b/src/app/recipe-add/recipe-add.component.ts
@@ -22,10 +22,7 @@ export class RecipeAddComponent {
   });
 
   ingredientEntries: IngredientEntry[] = [];
-  ingredients: Ingredient[] = [{
-    id: 1,
-    name: 'Paprika',
-  }];
+  ingredients: Ingredient[] = [];
 
   selectedFilename: string = '';
 
@@ -48,7 +45,10 @@ export class RecipeAddComponent {
     return this.#recipeId;
   }
 
-  constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {}
+  constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {
+    this.ingredients = this.recipes.getAllIngredients();
+    console.log(this.ingredients);
+  }
 
   onSubmit(): void {
     if (this.createForm.invalid) {
diff --git a/src/app/recipe.service.ts b/src/app/recipe.service.ts
index 3a0bdd9..4b40f6a 100644
--- a/src/app/recipe.service.ts
+++ b/src/app/recipe.service.ts
@@ -1,12 +1,15 @@
 import { Injectable } from '@angular/core';
-import { Recipe } from '../cookbook/type';
+import { Ingredient, Recipe } from '../cookbook/type';
 
 @Injectable({
   providedIn: 'root',
 })
 export class RecipeService {
   #recipes: Recipe[] = [
-    { id: 0, name: 'crepe1', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
+    { id: 0, name: 'crepe1', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [
+      {idIngredient:1,idRecipe:0,quantity:10},
+      {idIngredient:2,idRecipe:0,quantity:15}
+    ] },
     { id: 1, name: 'crepe2', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
     { id: 2, name: 'crepe3', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
     { id: 3, name: 'crepe4', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
@@ -22,14 +25,27 @@ export class RecipeService {
     { id: 13, name: 'crepe14', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
   ];
 
+  #ingredients: Ingredient[] = [
+    { id:1, name:'Sucre'},
+    { id:2, name:'Farine'}
+  ]
+
   getAll(): Recipe[] {
     return this.#recipes;
   }
 
+  getAllIngredients(): Ingredient[] {
+    return this.#ingredients;
+  }
+
   get(id: number): Recipe | null {
     return this.#recipes.find((recipe) => recipe.id === id) || null;
   }
 
+  getIngredientById(id: number): Ingredient | null {
+    return this.#ingredients.find((ingredient) => ingredient.id === id) || null;
+  }
+
   add(recipe: Omit<Recipe, 'id'>): void {
     const id = this.#recipes.length ? Math.max(...this.#recipes.map((recipe) => recipe.id)) + 1 : 1;
     this.#recipes.push({
diff --git a/src/app/recipe/recipe.component.html b/src/app/recipe/recipe.component.html
index 73c1a8d..45bad88 100644
--- a/src/app/recipe/recipe.component.html
+++ b/src/app/recipe/recipe.component.html
@@ -1,4 +1,39 @@
-<p>{{recipe.id}}</p>
-<p>{{recipe.name}}</p>
-<p>{{recipe.description}}</p>
+<style>
+ .container {
+	 background-color: #fff;
+	 position: relative;
+	 display: grid;
+	 grid-template-columns: 300px 600px;
+}
+ .container img {
+	 width: 300px;
+	 height: 300px;
+}
+
+ .container_text {
+	 padding: 40px 40px 0;
+}
+</style>
+
+<div class="container">
+    <img ng-if="recipe.image" src="https://placehold.co/200x200" alt={{recipe.name}}/>
+
+    <div class="container_text">
+
+     <h1>{{recipe.name}}</h1>
+     <p>
+        {{recipe.description}}
+     </p>
+
+     <h3>Ingredients</h3>
+     <p>
+        <li *ngFor="let ingredient of recipe.ingredients">
+            {{ this.recipes.getIngredientById(ingredient.idIngredient)?.name }}: {{ ingredient.quantity }}g
+        </li>
+     </p>
+
+    </div>
+</div>
+
+
 
diff --git a/src/app/recipe/recipe.component.ts b/src/app/recipe/recipe.component.ts
index 51c8101..d93933c 100644
--- a/src/app/recipe/recipe.component.ts
+++ b/src/app/recipe/recipe.component.ts
@@ -1,11 +1,12 @@
 import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Recipe } from '../../cookbook/type';
 import { RecipeService } from '../recipe.service';
 
 @Component({
   selector: 'app-recipe',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './recipe.component.html',
 })
 export class RecipeComponent {

From 3a48fd842694747ce83a1924386450b181f7f0b9 Mon Sep 17 00:00:00 2001
From: bastien ollier <bastien.ollier@etu.uca.fr>
Date: Mon, 24 Jun 2024 10:56:24 +0200
Subject: [PATCH 2/3] add mat angular

---
 src/app/recipe-add/recipe-add.component.html | 14 ++++++++++----
 src/app/recipe-add/recipe-add.component.ts   | 14 ++++++++++++--
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/app/recipe-add/recipe-add.component.html b/src/app/recipe-add/recipe-add.component.html
index 9c70e38..549e3dd 100644
--- a/src/app/recipe-add/recipe-add.component.html
+++ b/src/app/recipe-add/recipe-add.component.html
@@ -20,6 +20,7 @@
             }
         </mat-form-field>
     </div>
+
     <div>
         <label for="image">Image</label>
         <button type="button" mat-raised-button (click)="fileInput.click()">Téléverser</button>
@@ -30,15 +31,20 @@
         <label for="description">Ingrédients</label>
         <ul>
             @for (ingredient of ingredientEntries; track ingredient.idIngredient) {
-                <li>#{{ ingredient.idIngredient }} <input [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}"></li>
+                <li>
+                    {{ getIngredient(ingredient.idIngredient).name }}
+                    <mat-form-field>
+                        <input matInput [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}">
+                    </mat-form-field>
+                </li>
             }
         </ul>
         <mat-form-field>
-            <select matInput id="selectedIngredient" formControlName="selectedIngredient">
+            <mat-select matInput id="selectedIngredient" formControlName="selectedIngredient">
                 @for (ingredient of ingredients; track ingredient.id) {
-                    <option matInput [ngValue]="ingredient.id">{{ ingredient.name }}</option>
+                    <mat-option value="{{ingredient.id}}">{{ ingredient.name }}</mat-option>
                 }
-            </select>
+            </mat-select>
         </mat-form-field>
         <button mat-button type="button" (click)="onAddIngredient()">Add</button>
     </div>
diff --git a/src/app/recipe-add/recipe-add.component.ts b/src/app/recipe-add/recipe-add.component.ts
index 9303167..c0ee157 100644
--- a/src/app/recipe-add/recipe-add.component.ts
+++ b/src/app/recipe-add/recipe-add.component.ts
@@ -6,11 +6,13 @@ import { RecipeService } from '../recipe.service';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButton } from '@angular/material/button';
+import { MatOption } from '@angular/material/core';
+import { MatSelect } from '@angular/material/select';
 
 @Component({
   selector: 'app-recipe-add',
   standalone: true,
-  imports: [ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatButton, MatFormFieldModule],
+  imports: [ReactiveFormsModule, FormsModule, MatFormFieldModule, MatOption, MatSelect, MatInputModule, MatButton, MatFormFieldModule],
   templateUrl: './recipe-add.component.html',
 })
 export class RecipeAddComponent {
@@ -25,6 +27,9 @@ export class RecipeAddComponent {
   ingredients: Ingredient[] = [];
 
   selectedFilename: string = '';
+  getIngredient(n: number): Ingredient {
+    return this.ingredients.find(v => v.id === n)!
+  }
 
   #recipeId: number = -1;
   @Input()
@@ -47,7 +52,6 @@ export class RecipeAddComponent {
 
   constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {
     this.ingredients = this.recipes.getAllIngredients();
-    console.log(this.ingredients);
   }
 
   onSubmit(): void {
@@ -71,13 +75,19 @@ export class RecipeAddComponent {
 
   onAddIngredient(): void {
     const value = this.createForm.value;
+    console.log(value);
+
     if (!value.selectedIngredient) {
       return;
     }
     const id = parseInt(value.selectedIngredient!);
     if (this.ingredientEntries.find((ingredient) => ingredient.idIngredient === id)) {
+      console.log("oh");
       return;
     }
+    console.log("ah");
+    console.log(this.ingredients.find(v => v.id === id)?.name)
+    console.log(this.ingredients);
     this.ingredientEntries.push({
       idIngredient: id,
       idRecipe: -1,

From 45d11a8a0ece767dfa68a888fc714056ae4dc982 Mon Sep 17 00:00:00 2001
From: bastien ollier <bastien.ollier@etu.uca.fr>
Date: Mon, 24 Jun 2024 11:03:37 +0200
Subject: [PATCH 3/3] add submit button with mat angular

---
 src/app/recipe-add/recipe-add.component.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/recipe-add/recipe-add.component.ts b/src/app/recipe-add/recipe-add.component.ts
index c0ee157..1e0e2d7 100644
--- a/src/app/recipe-add/recipe-add.component.ts
+++ b/src/app/recipe-add/recipe-add.component.ts
@@ -82,12 +82,8 @@ export class RecipeAddComponent {
     }
     const id = parseInt(value.selectedIngredient!);
     if (this.ingredientEntries.find((ingredient) => ingredient.idIngredient === id)) {
-      console.log("oh");
       return;
     }
-    console.log("ah");
-    console.log(this.ingredients.find(v => v.id === id)?.name)
-    console.log(this.ingredients);
     this.ingredientEntries.push({
       idIngredient: id,
       idRecipe: -1,