Merge pull request 'Enhance details style' (#5) from detail_interface into main

Reviewed-on: https://codefirst.iut.uca.fr/git/clement.freville2/tiramisu/pulls/5

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

@@ -1,21 +1,26 @@
 <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>
@@ -26,14 +31,21 @@
         <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>
-        <select id="selectedIngredient" formControlName="selectedIngredient">
-            @for (ingredient of ingredients; track ingredient.id) {
-                <option [ngValue]="ingredient.id">{{ ingredient.name }}</option>
-            }
-        </select>
+        <mat-form-field>
+            <mat-select matInput id="selectedIngredient" formControlName="selectedIngredient">
+                @for (ingredient of ingredients; track ingredient.id) {
+                    <mat-option value="{{ingredient.id}}">{{ ingredient.name }}</mat-option>
+                }
+            </mat-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>

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 {
@@ -22,12 +24,12 @@ export class RecipeAddComponent {
   });
 
   ingredientEntries: IngredientEntry[] = [];
-  ingredients: Ingredient[] = [{
-    id: 1,
-    name: 'Paprika',
-  }];
+  ingredients: Ingredient[] = [];
 
   selectedFilename: string = '';
+  getIngredient(n: number): Ingredient {
+    return this.ingredients.find(v => v.id === n)!
+  }
 
   #recipeId: number = -1;
   @Input()
@@ -48,7 +50,9 @@ 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();
+  }
 
   onSubmit(): void {
     if (this.createForm.invalid) {
@@ -71,6 +75,8 @@ export class RecipeAddComponent {
 
   onAddIngredient(): void {
     const value = this.createForm.value;
+    console.log(value);
+
     if (!value.selectedIngredient) {
       return;
     }

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({

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>
+
+
 

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 {