Qunatity of ingredient in recipe

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

@@ -1,16 +1,14 @@
 <form (ngSubmit)="onSubmit(); recipeForm.ngSubmit.emit()" #recipeForm="ngForm" class="ng-submitted">
-
   <div class="form-group my-2 col-md-4">
     <label for="name">Name</label>
-    <input class="form-control" 
+    <input class="form-control"
            placeholder="Name"
            type="text"
            id="name"
            [(ngModel)]="recipe.name"
            name="name"
            required
-           #nameField="ngModel"
-    >
+           #nameField="ngModel">
     <div *ngIf="nameField.invalid && (nameField.dirty || nameField.touched || recipeForm.submitted)" class="text-danger">
       <div *ngIf="nameField.errors && nameField.errors['required']">Name is required.</div>
     </div>
@@ -18,15 +16,14 @@
 
   <div class="form-group my-2 col-md-4">
     <label for="description">Description</label>
-    <textarea class="form-control" 
+    <textarea class="form-control"
               id="description"
               [(ngModel)]="recipe.description"
               name="description"
-              required 
+              required
               rows="2"
               maxlength="{{ maxDescriptionLength }}"
-              #descriptionField="ngModel"
-    ></textarea>
+              #descriptionField="ngModel"></textarea>
     <div class="text-muted text-end">Characters left: {{ maxDescriptionLength - recipe.description.length }}</div>
     <div *ngIf="descriptionField.invalid && (descriptionField.dirty || descriptionField.touched || recipeForm.submitted)" class="text-danger">
       <div *ngIf="descriptionField.errors && descriptionField.errors['required']">Description is required.</div>
@@ -58,8 +55,7 @@
         type="number"
         [(ngModel)]="ingredientQuantities[ingredientId]"
         name="quantity_{{ ingredientId }}"
-        min="1"
-      />
+        min="1" />
       <button mat-raised-button color="warn" type="button" (click)="removeIngredient(ingredientId)">Remove</button>
     </div>
   </div>
@@ -67,9 +63,7 @@
     At least one ingredient is required.
   </div>
 
-  <!-- Bouton d'ajout de recette -->
   <button mat-raised-button type="submit" [disabled]="!recipeForm.form.valid || getIngredientKeys().length === 0" [ngClass]="{'disabled-button': getIngredientKeys().length === 0}">
     Add Recipe
   </button>
 </form>
-

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

@@ -8,6 +8,8 @@ import { Router } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
+import { RecipeService } from '../services/recipe.service';
+import { IngredientRecipe } from '../models/ingredient-recipe';
 
 @Component({
   selector: 'app-recipe-add',
@@ -33,6 +35,7 @@ export class RecipeAddComponent implements OnInit {
 
   constructor(
     private ingredientService: IngredientService,
+    private recipeService: RecipeService,
     private router: Router
   ) {}
 
@@ -87,19 +90,31 @@ export class RecipeAddComponent implements OnInit {
   onSubmit(): void {
     if (this.isSubmitting) return; // Prevent multiple submissions
 
-    this.recipe.ingredients = this.getIngredientKeys().map(
-      (id) => {
-        const ingredient = this.ingredientService.getIngredient(id);
-        return new Ingredient(id, ingredient.name);
-      }
-    );
-
     this.isSubmitting = true; // Set flag to prevent multiple submissions
 
-    const recipes = JSON.parse(localStorage.getItem('recipes') || '[]');
+    // Get the current recipes
+    const recipes = this.recipeService.getRecipes();
+
+    // Set the new recipe ID
     this.recipe.id = recipes.length ? recipes[recipes.length - 1].id + 1 : 1;
-    recipes.push(this.recipe);
-    localStorage.setItem('recipes', JSON.stringify(recipes));
+
+    // Add the ingredients with quantities
+    this.recipe.ingredients = this.getIngredientKeys().map(id => {
+      const ingredient = this.ingredientService.getIngredient(id);
+      return new Ingredient(id, ingredient.name);
+    });
+
+    // Save the recipe
+    this.recipeService.addRecipe(this.recipe);
+
+    // Save the ingredient quantities
+    this.getIngredientKeys().forEach(id => {
+      const quantity = this.ingredientQuantities[id];
+      const ingredientRecipe = new IngredientRecipe(id, this.recipe.id, quantity);
+      this.recipeService.addIngredientRecipe(ingredientRecipe);
+    });
+
+    // Navigate back to the list
     this.router.navigate(['/list']).then(() => {
       this.isSubmitting = false; // Reset flag after navigation
     });

src/app/recipe/recipe.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Recipe } from '../models/recipe';
 import { IngredientRecipe } from '../models/ingredient-recipe';
+import { RecipeService } from '../services/recipe.service';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -17,32 +18,24 @@ export class RecipeComponent implements OnInit {
   recipe: Recipe | undefined;
   ingredientRecipes: IngredientRecipe[] = [];
 
-  constructor(private route: ActivatedRoute) {}
+  constructor(
+    private route: ActivatedRoute,
+    private recipeService: RecipeService
+  ) {}
 
   ngOnInit(): void {
     const recipeId = this.route.snapshot.paramMap.get('id');
-    const recipes: Recipe[] = JSON.parse(
-      localStorage.getItem('recipes') || '[]'
+    this.recipe = this.recipeService.getRecipes().find(
+      (r) => r.id.toString() === recipeId
     );
-    this.recipe = recipes.find((r) => r.id.toString() === recipeId);
 
     if (this.recipe) {
-      this.ingredientRecipes = this.getIngredientRecipes(this.recipe.id);
+      this.ingredientRecipes = this.recipeService.getIngredientRecipes(this.recipe.id);
     }
   }
 
-  getIngredientRecipes(recipeId: number): IngredientRecipe[] {
-    const ingredientRecipes: IngredientRecipe[] = JSON.parse(
-      localStorage.getItem('ingredientRecipes') || '[]'
-    );
-    return ingredientRecipes.filter((ir) => ir.idRecipe === recipeId);
-  }
-
   getIngredientQuantity(ingredientId: number): number {
-    const ingredientRecipe = this.ingredientRecipes.find(
-      (ir) => ir.idIngredient === ingredientId
-    );
-    return ingredientRecipe ? ingredientRecipe.quantity : 0;
+    return this.recipeService.getIngredientQuantity(ingredientId, this.ingredientRecipes);
   }
 
   navBack(): void {

src/app/services/recipe.service.ts

@@ -1,11 +1,13 @@
 import { Injectable } from '@angular/core';
 import { Recipe } from '../models/recipe';
+import { IngredientRecipe } from '../models/ingredient-recipe';
 
 @Injectable({
   providedIn: 'root',
 })
 export class RecipeService {
   private localStorageKey = 'recipes';
+  private ingredientRecipeKey = 'ingredientRecipes';
 
   getRecipes(): Recipe[] {
     const recipesJson = localStorage.getItem(this.localStorageKey);
@@ -17,4 +19,24 @@ export class RecipeService {
     recipes.push(recipe);
     localStorage.setItem(this.localStorageKey, JSON.stringify(recipes));
   }
+
+  getIngredientRecipes(recipeId: number): IngredientRecipe[] {
+    const ingredientRecipes: IngredientRecipe[] = JSON.parse(
+      localStorage.getItem(this.ingredientRecipeKey) || '[]'
+    );
+    return ingredientRecipes.filter((ir) => ir.idRecipe === recipeId);
+  }
+
+  addIngredientRecipe(ingredientRecipe: IngredientRecipe): void {
+    const ingredientRecipes = this.getIngredientRecipes(ingredientRecipe.idRecipe);
+    ingredientRecipes.push(ingredientRecipe);
+    localStorage.setItem(this.ingredientRecipeKey, JSON.stringify(ingredientRecipes));
+  }
+
+  getIngredientQuantity(ingredientId: number, ingredientRecipes: IngredientRecipe[]): number {
+    const ingredientRecipe = ingredientRecipes.find(
+      (ir) => ir.idIngredient === ingredientId
+    );
+    return ingredientRecipe ? ingredientRecipe.quantity : 0;
+  }
 }