Merge pull request 'Adding image to Recipe and one ingredient checker' (#5) from formImage into master

Reviewed-on: #5

daidokoro/src/app/component/recipe-detail/recipe-detail.component.html

@@ -3,3 +3,5 @@
 
 <h3>{{recipe?.$description}}</h3>
 
+<img [src]="recipe?.$image" alt="Recette 1" class="recipe-image"
+     onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">

daidokoro/src/app/component/recipe-form/recipe-form.component.html

@@ -1,25 +1,32 @@
 <form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
   <label for="id">ID: </label>
-  <input id="id" type="number" formControlName="id">
+  <input id="id" type="number" formControlName="id" required>
 
   <label for="name">Name: </label>
-  <input id="name" type="text" formControlName="name">
+  <input id="name" type="text" formControlName="name" required>
 
   <label for="description">Description: </label>
-  <input id="description" type="text" formControlName="description">
+  <input id="description" type="text" formControlName="description" required>
+
+  <label for="image">Image: </label>
+  <input id="image" type="file" (change)="onFileChange($event)">
+
+  <div *ngIf="imageBase64">
+    <img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;">
+  </div>
 
   <div formArrayName="ingredients">
     <div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i">
       <label for="ingredient-quantity">Quantity:</label>
-      <input id="ingredient-quantity" type="number" formControlName="quantity">
+      <input id="ingredient-quantity" type="number" formControlName="quantity" required>
 
       <label for="ingredient-unit">Unit:</label>
-      <select id="ingredient-unit" formControlName="unit">
+      <select id="ingredient-unit" formControlName="unit" required>
         <option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
       </select>
 
       <label for="ingredient-name">Ingredient:</label>
-      <select id="ingredient-name" formControlName="ingredient">
+      <select id="ingredient-name" formControlName="ingredient" required>
         <option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
       </select>
 

daidokoro/src/app/component/recipe-form/recipe-form.component.ts

@@ -4,11 +4,12 @@ import {FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder} fro
 import { Ingredient } from '../../model/ingredient.model';
 import { Unity } from '../../model/unity';
 import { IngredientService } from '../../service/ingredient.service';
-import {NgFor} from "@angular/common";
+import {NgFor, NgIf} from "@angular/common";
+
 @Component({
   selector: 'app-recipe-form',
   standalone: true,
-  imports: [ReactiveFormsModule,NgFor],
+  imports: [ReactiveFormsModule, NgFor, NgIf],
   templateUrl: './recipe-form.component.html',
   styleUrl: './recipe-form.component.css'
 })
@@ -16,6 +17,7 @@ export class RecipeFormComponent {
   @Output() formSubmitted = new EventEmitter<Recipe>();
   ingredientsList: Ingredient[] = [];
   unity = Object.values(Unity);
+  imageBase64: string | null = null;
 
   constructor(private formBuilder: FormBuilder, private ingredientService : IngredientService){}
 
@@ -23,13 +25,15 @@ export class RecipeFormComponent {
     this.ingredientService.getAll().subscribe(ingredients => {
       this.ingredientsList = ingredients;
     });
+
   }
 
   recipeForm: FormGroup = this.formBuilder.group({
     id: new FormControl('', { nonNullable: true }),
     name: new FormControl('', { nonNullable: true }),
     description: new FormControl('', { nonNullable: true }),
-    ingredients: this.formBuilder.array([])
+    ingredients: this.formBuilder.array([this.newIngredient()]),
+    image: new FormControl('', {nonNullable: false})
   });
 
   get ingredients():FormArray{
@@ -48,7 +52,25 @@ export class RecipeFormComponent {
     this.ingredients.push(this.newIngredient());
   }
   removeIngredient(index: number) {
+    if (this.ingredients.length > 1) {
+
       this.ingredients.removeAt(index);
+    } else {
+
+    }
+  }
+
+  onFileChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files[0]) {
+      const file = input.files[0];
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.imageBase64 = reader.result as string;
+        this.recipeForm.patchValue({image: this.imageBase64});
+      };
+      reader.readAsDataURL(file);
+    }
   }
 
   onSubmit() {
@@ -62,11 +84,13 @@ export class RecipeFormComponent {
           quantity: ingredient.quantity,
           unit: ingredient.unit,
           ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient)
-        }))
+        })),
+        $image: this.recipeForm.value.image
       };
       this.formSubmitted.emit(recipe);
       this.recipeForm.reset()
       this.ingredients.clear()
+      this.addIngredient()
     }
 
   }

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

@@ -79,7 +79,8 @@
 <body>
 <div [ngClass]="{'four-column': !isFormVisible, 'two-column': isFormVisible}" class="recipe-container">
   <div class="recipe-card" *ngFor="let recipe of paginatedRecipes">
-    <img src="image1.jpg" alt="Recette 1" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
+    <img [src]="recipe.$image" alt="Recette 1" class="recipe-image"
+         onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
     <div class="recipe-content">
       <h2 class="recipe-title">{{recipe.$name}}</h2>
       <p class="recipe-description">{{recipe.$description}}</p>

daidokoro/src/app/model/recipe.model.ts

@@ -5,5 +5,6 @@ export interface Recipe {
   $name : string,
   $description: string,
   $createdAt : Date,
-  $ingredients: QuantifiedIngredient[]
+  $ingredients: QuantifiedIngredient[],
+  $image?: string
 }