Merge branch 'master' of https://codefirst.iut.uca.fr/git/aurian.jault/bromista-nisqa-receta

src/app/components/ingredient-mini/ingredient-mini.component.css

@@ -0,0 +1,15 @@
+.ingredient-mini {
+  min-width: 130px;
+  background-color: #d3d3d3;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+
+  .ingredient-mini-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+}

src/app/components/ingredient-mini/ingredient-mini.component.html

@@ -0,0 +1,4 @@
+<div class="ingredient-mini">
+  <span class="ingredient-mini-title">{{ ingredient.name }}</span>
+  <span>{{ ingredient.qty }}g</span>
+</div>

src/app/components/ingredient-mini/ingredient-mini.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IngredientMiniComponent } from './ingredient-mini.component';
+
+describe('IngredientMiniComponent', () => {
+  let component: IngredientMiniComponent;
+  let fixture: ComponentFixture<IngredientMiniComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IngredientMiniComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(IngredientMiniComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/ingredient-mini/ingredient-mini.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Ingredient } from '../../model/ingredient.model'
+import { Input } from '@angular/core'; 
+
+@Component({
+  selector: 'app-ingredient-mini',
+  standalone: true,
+  imports: [],
+  templateUrl: './ingredient-mini.component.html',
+  styleUrl: './ingredient-mini.component.css'
+})
+export class IngredientMiniComponent {
+  @Input() ingredient!: Ingredient;
+}

src/app/components/recipe-detail/recipe-detail.component.css

@@ -2,3 +2,10 @@ img {
   max-height: 300px;
   height: 300px;
 }
+
+#recipe-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+}

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

@@ -4,4 +4,8 @@
   <p>{{ recipe.description }}</p>
 
   <h2>{{ 'recipe.ingredients' | transloco }}</h2>
+
+  <div id="recipe-list">
+    <app-ingredient-mini *ngFor="let ingredient of recipe.ingredients" [ingredient]="ingredient"></app-ingredient-mini>
+  </div>
 </div>

src/app/components/recipe-detail/recipe-detail.component.ts

@@ -3,11 +3,14 @@ import { Recipe } from '../../model/recipe.model';
 import { RecipeService } from '../../services/recipe.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { TranslocoPipe } from '@jsverse/transloco';
+import { IngredientMiniComponent } from '../ingredient-mini/ingredient-mini.component';
+import { NgFor } from '@angular/common';
+
 
 @Component({
   selector: 'app-recipe-detail',
   standalone: true,
-  imports: [TranslocoPipe],
+  imports: [NgFor, TranslocoPipe, IngredientMiniComponent],
   templateUrl: './recipe-detail.component.html',
   styleUrl: './recipe-detail.component.css'
 })

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

@@ -11,6 +11,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSelectModule} from '@angular/material/select';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-recipe-form',
@@ -35,7 +36,7 @@ export class RecipeFormComponent {
   defaultOption: string = this.ingredientsOptions[2];
   filename: string = '';
 
-  constructor(private fb: FormBuilder, private recipeService: RecipeService) {
+  constructor(private fb: FormBuilder, private recipeService: RecipeService, private router: Router) {
     this.recipeForm = this.fb.group({
       name: ['', Validators.required],
       description: ['', Validators.required],
@@ -86,9 +87,8 @@ export class RecipeFormComponent {
         }))
       };
       console.log('Recipe added:', newRecipe);
-      this.recipeService.addRecipe(newRecipe);
+      let newId = this.recipeService.addRecipe(newRecipe);
-      this.recipeForm.reset();
+      this.router.navigate(['recipe', newId - 1]);
-      this.filename = "No file provided"
     } else {
       console.log('Form is invalid');
     }

src/app/services/recipe.service.ts

@@ -22,11 +22,12 @@ export class RecipeService {
   }
 
   // Add a new recipe
-  addRecipe(recipe: Recipe): void {
+  addRecipe(recipe: Recipe): number {
     this.getRecipes();
     recipe.id = this.recipes.length
-    this.recipes.push(recipe);
+    let newId = this.recipes.push(recipe);
     localStorage.setItem(this.localStorageKey, JSON.stringify(this.recipes));
+    return newId;
   }
 
   // Clear all recipes (for example, if needed)

src/styles.css

@@ -1,8 +1,3 @@
 :root {
   font-family: "Helvetica";
 }
-
-html,
-body {
-  height: 100%;
-}