From 2b85d50087fb45012d304a9b2254283989b14e7c Mon Sep 17 00:00:00 2001
From: Corentin R <corentin.richard@etu.uca.fr>
Date: Mon, 24 Jun 2024 14:38:53 +0200
Subject: [PATCH] Adding ingredients in form

---
 .../recipe-form/recipe-form.component.html    | 24 ++++++++-
 .../recipe-form/recipe-form.component.ts      | 50 ++++++++++++++++---
 .../recipe-list/recipe-list.component.html    |  2 +-
 .../src/app/service/ingredient.service.ts     |  7 ++-
 4 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.html b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
index 265e9fe..83cc959 100644
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.html
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
@@ -2,12 +2,32 @@
   <label for="id">ID: </label>
   <input id="id" type="number" formControlName="id">
 
-  <label for="name">name: </label>
+  <label for="name">Name: </label>
   <input id="name" type="text" formControlName="name">
 
-  <label for="description">description: </label>
+  <label for="description">Description: </label>
   <input id="description" type="text" formControlName="description">
 
+  <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">
+
+      <label for="ingredient-unit">Unit:</label>
+      <select id="ingredient-unit" formControlName="unit">
+        <option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
+      </select>
+
+      <label for="ingredient-name">Ingredient:</label>
+      <select id="ingredient-name" formControlName="ingredient">
+        <option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
+      </select>
+
+      <button type="button" (click)="removeIngredient(i)">Remove</button>
+    </div>
+  </div>
+
+  <button type="button" (click)="addIngredient()">Add Ingredient</button>
 
   <p>Complete the form to enable the button.</p>
   <button type="submit" [disabled]="!recipeForm.valid">Submit</button>
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
index e67befd..0ba7fc2 100644
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
@@ -1,24 +1,55 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 import {Recipe} from "../../model/recipe.model";
-import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
-
+import {FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder} from "@angular/forms";
+import { Ingredient } from '../../model/ingredient.model';
+import { Unity } from '../../model/unity';
+import { IngredientService } from '../../service/ingredient.service';
+import {NgFor} from "@angular/common";
 @Component({
   selector: 'app-recipe-form',
   standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule,NgFor],
   templateUrl: './recipe-form.component.html',
   styleUrl: './recipe-form.component.css'
 })
 export class RecipeFormComponent {
   @Output() formSubmitted = new EventEmitter<Recipe>();
+  ingredientsList: Ingredient[] = [];
+  unity = Object.values(Unity);
+
+  constructor(private formBuilder: FormBuilder, private ingredientService : IngredientService){}
+
+  ngOnInit(): void {
+    this.ingredientService.getAll().subscribe(ingredients => {
+      this.ingredientsList = ingredients;
+    });
+  }
 
-  recipeForm = new FormGroup({
+  recipeForm: FormGroup = this.formBuilder.group({
     id: new FormControl('', { nonNullable: true }),
     name: new FormControl('', { nonNullable: true }),
     description: new FormControl('', { nonNullable: true }),
-
+    ingredients: this.formBuilder.array([])
   });
 
+  get ingredients():FormArray{
+    return this.recipeForm.get('ingredients') as FormArray;
+  }
+
+  newIngredient(): FormGroup{
+    return this.formBuilder.group({
+      quantity: new FormControl(0, { nonNullable: true }),
+      unit: new FormControl('', { nonNullable: true }),
+      ingredient: new FormControl('', { nonNullable: true })
+    });
+  }
+
+  addIngredient() {
+    this.ingredients.push(this.newIngredient());
+  }
+  removeIngredient(index: number) {
+    this.ingredients.removeAt(index);
+  }
 
   onSubmit() {
     if(this.recipeForm.valid){
@@ -27,11 +58,18 @@ export class RecipeFormComponent {
         $name: this.recipeForm.value.name!,
         $description: this.recipeForm.value.description!,
         $createdAt: new Date(),
-        $ingredients: []
+        $ingredients: this.recipeForm.value.ingredients!.map((ingredient : any) => ({
+          quantity: ingredient.quantity,
+          unit: ingredient.unit,
+          ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient)
+        }))
       };
       this.formSubmitted.emit(recipe);
       this.recipeForm.reset()
+      this.ingredients.clear()
     }
 
   }
+
+
 }
diff --git a/daidokoro/src/app/component/recipe-list/recipe-list.component.html b/daidokoro/src/app/component/recipe-list/recipe-list.component.html
index c1cf7cb..1bf4ed4 100644
--- a/daidokoro/src/app/component/recipe-list/recipe-list.component.html
+++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.html
@@ -69,7 +69,7 @@
   <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';">
   <div class="recipe-content">
     <h2 class="recipe-title">{{recipe.$name}}</h2>
-    <p class="recipe-description">{{recipe.$description}}</p>é
+    <p class="recipe-description">{{recipe.$description}}</p>
     <button class="details-button" onclick="toggleDetails(this)">Détails</button>
   </div>
 </div>
diff --git a/daidokoro/src/app/service/ingredient.service.ts b/daidokoro/src/app/service/ingredient.service.ts
index 367d891..c93e160 100644
--- a/daidokoro/src/app/service/ingredient.service.ts
+++ b/daidokoro/src/app/service/ingredient.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import {Ingredient} from "../model/ingredient.model";
 import {$INGREDIENTS} from "../data/ingredient.stub";
+import {Observable, of} from "rxjs";
 
 
 @Injectable({
@@ -8,9 +9,7 @@ import {$INGREDIENTS} from "../data/ingredient.stub";
 })
 export class IngredientService {
 
-  constructor() { }
-
-  getAll() : Ingredient[] {
-    return $INGREDIENTS;
+  getAll() : Observable<Ingredient[]> {
+    return of($INGREDIENTS);
   }
 }