add submit button with mat angular

Reviewed-on: #4

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

@@ -1,25 +1,52 @@
 <form [formGroup]="createForm" (ngSubmit)="onSubmit()">
     <div>
-        <label for="name">Nom</label>
-        <input id="name" type="text" formControlName="name" required>
+        <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="description">Description</label>
-        <textarea id="description" type="text" formControlName="description" required></textarea>
+        <label for="image">Image</label>
+        <button type="button" mat-raised-button (click)="fileInput.click()">Téléverser</button>
+        <input hidden (change)="onFileSelected($event)" #fileInput type="file">
+        <span class="file-name">{{ selectedFilename }}</span>
     </div>
     <div>
         <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>
-        <button type="button" (click)="onAddIngredient()">Add</button>
+        <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 class="button" type="submit">Ajouter</button>
+    <button mat-flat-button class="button" type="submit">{{ recipeId === -1 ? 'Ajouter' : 'Éditer' }}</button>
 </form>

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

@@ -3,29 +3,37 @@ import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angu
 import { Router } from '@angular/router';
 import { Ingredient, IngredientEntry, Recipe } from '../../cookbook/type';
 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],
+  imports: [ReactiveFormsModule, FormsModule, MatFormFieldModule, MatOption, MatSelect, MatInputModule, MatButton, MatFormFieldModule],
   templateUrl: './recipe-add.component.html',
 })
 export class RecipeAddComponent {
   createForm = this.formBuilder.group({
     name: ['', Validators.maxLength(256)],
     description: ['', Validators.maxLength(512)],
+    image: '',
     selectedIngredient: '',
   });
 
   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()
-  set recipeId(recipeId: string) {
+  set id(recipeId: string) {
     if (recipeId === undefined) return;
     this.#recipeId = parseInt(recipeId);
     const recipe = this.recipes.get(this.#recipeId);
@@ -38,8 +46,13 @@ export class RecipeAddComponent {
       description: recipe.description,
     });
   }
+  get recipeId() {
+    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) {
@@ -49,7 +62,7 @@ export class RecipeAddComponent {
     const partial: Omit<Recipe, 'id'> = {
       name: value.name!,
       description: value.description!,
-      image: '',
+      image: value.image ?? '',
       ingredients: this.ingredientEntries,
     };
     if (this.#recipeId === -1) {
@@ -62,6 +75,8 @@ export class RecipeAddComponent {
 
   onAddIngredient(): void {
     const value = this.createForm.value;
+    console.log(value);
+
     if (!value.selectedIngredient) {
       return;
     }
@@ -75,4 +90,18 @@ export class RecipeAddComponent {
       quantity: 1,
     });
   }
+
+  onFileSelected(event: Event): void {
+    const file = (event.target as HTMLInputElement).files![0];
+    if (file) {
+      this.selectedFilename = file.name;
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        this.createForm.patchValue({
+          image: event.target!.result?.toString()
+        });
+      }
+      reader.readAsDataURL(file);
+    }
+  }
 }

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 {

src/app/recipes/recipes.component.html

@@ -26,7 +26,7 @@
       <ng-container matColumnDef="image">
         <th mat-header-cell *matHeaderCellDef> image </th>
         <td mat-cell *matCellDef="let element">
-          <img src="https://placehold.co/200x200">
+          <img [src]="element.image || 'https://placehold.co/200x200'" [alt]="element.image ? element.name : ''" width="200" height="200">
         </td>
       </ng-container>