fixed ingredient name display

Reviewed-on: #7

angular.json

@@ -93,5 +93,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app.component.css

@@ -10,6 +10,8 @@ nav {
     padding: 0;
 
     li {
+      display: flex;
+      align-items: center;
       list-style: none;
 
       a {
@@ -21,7 +23,9 @@ nav {
     }
 
     select {
-      border: 2px solid black;
+      font-size: 2rem;
+      appearance: none;
+      border: none;
       background-color: white;
     }
   }

src/app/app.component.html

@@ -1,16 +1,20 @@
 <nav>
   <ul>
     <li><a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">{{ 'title' | transloco }}</a></li>
-    <li><a routerLink="/recipe/add" routerLinkActive="active" ariaCurrentWhenActive="page">{{ 'recipe.add.link' |
-        transloco }}</a></li>
+    <li><a routerLink="/cart" routerLinkActive="active" ariaCurrentWhenActive="page">{{ 'cart'}}</a></li>
+    <li *ngIf="isLogged; else elseBlock"><a routerLink="/logout" routerLinkActive="active" ariaCurrentWhenActive="page">{{ 'logout' | transloco }}</a></li>
+    <ng-template #elseBlock>
+      <li><a routerLink="/login" routerLinkActive="active" ariaCurrentWhenActive="page">{{ 'login' | transloco }}</a></li>
+    </ng-template>
+
     <select (change)="changeLanguage($event)">
-      <option value="en">🇬🇧 English</option>
-      <option value="fr">🇫🇷 Français</option>
-      <option value="ru">🇷🇺 Русский</option>
+      <option value="en">🇬🇧</option>
+      <option value="fr">🇫🇷</option>
+      <option value="ru">🇷🇺</option>
     </select>
   </ul>
 </nav>
 
 <div id="page-wrapper">
   <router-outlet></router-outlet>
-</div>
+</div>

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { RecipeService } from './services/recipe.service';
 import { Recipe } from './model/recipe.model';
 import { RecipeListComponent } from './components/recipe-list/recipe-list.component';
 import { TranslocoPipe, TranslocoService } from '@jsverse/transloco';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-root',
@@ -15,16 +16,39 @@ import { TranslocoPipe, TranslocoService } from '@jsverse/transloco';
     RecipeFormComponent,
     RecipeListComponent,
     TranslocoPipe,
+    NgIf,
   ],
-  providers: [RecipeService, TranslocoService],
+  providers: [RecipeService, TranslocoService, NgIf],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
   title = 'bromista-nisqa-receta';
-
+  isLogged = false;
   constructor(protected recipeService: RecipeService, private translocoService: TranslocoService){}
 
+  ngOnInit(){
+    const rawCookie = decodeURIComponent(document.cookie);
+    const array = rawCookie.split(";");
+    const name = "isAdmin=";
+    let res:String = "";
+
+    for(let cookie of array)
+    {
+      while (cookie.charAt(0) === ' ') {
+          cookie = cookie.substring(1);
+      }
+      if (cookie.indexOf(name) === 0) {
+          res = cookie.substring(name.length, cookie.length);
+      }
+    }
+    if (res !== "true" ){
+      this.isLogged = false
+    }else
+    {
+      this.isLogged = true;
+    }
+  }
   addRecipe($event: Recipe): void {
     this.recipeService.addRecipe($event);
   }

src/app/app.config.ts

@@ -6,6 +6,8 @@ import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
 import { TranslocoHttpLoader } from './transloco-loader';
 import { provideTransloco } from '@jsverse/transloco';
+import { withFetch } from '@angular/common/http';
+
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -21,6 +23,9 @@ export const appConfig: ApplicationConfig = {
     }
     ),
     provideAnimations(),
+    provideHttpClient(
+      withFetch(),
+    ),
   ]
 };
 

src/app/app.routes.ts

@@ -4,11 +4,20 @@ import { Error404Component } from "./components/errors/errors.component";
 import { RecipeFormComponent } from "./components/recipe-form/recipe-form.component";
 import { RecipeListComponent } from "./components/recipe-list/recipe-list.component";
 import { RecipeDetailComponent } from './components/recipe-detail/recipe-detail.component';
+import { LoginComponent } from './components/login/login.component';
+import { IngredientListComponent } from './components/ingredient-list/ingredient-list.component';
+import { LogoutComponent } from './components/logout/logout.component';
+import { AuthGuard } from './auth.guard';
+import { SavedRecipeComponent } from './components/saved-recipe/saved-recipe.component';
 
 export const routes: Routes = [
   { path: '', component: RecipeListComponent },
   { path: 'error/:status', component: Error404Component},
-  
-  { path: 'recipe/add', component: RecipeFormComponent },
-  { path: 'recipe/:id', component: RecipeDetailComponent },
+
+  { path: 'recipe/add', component: RecipeFormComponent},
+  { path: 'cart', component: SavedRecipeComponent},
+  { path: 'recipe/:id', component: RecipeDetailComponent},
+  { path: 'ingredients', component: IngredientListComponent, canActivate: [AuthGuard] },
+  { path: 'login', component: LoginComponent },
+  { path: 'logout', component: LogoutComponent, canActivate: [AuthGuard]  },
 ];

src/app/auth.guard.ts

@@ -0,0 +1,29 @@
+import { inject } from "@angular/core";
+import { Router } from "@angular/router";
+
+export const AuthGuard = () => {
+  const router = inject(Router);
+  const rawCookie = decodeURIComponent(document.cookie);
+  const array = rawCookie.split(";");
+  const name = "isAdmin=";
+  let res:String = "";
+
+  for(let cookie of array)
+  {
+    while (cookie.charAt(0) === ' ') {
+        cookie = cookie.substring(1);
+    }
+    if (cookie.indexOf(name) === 0) {
+        res = cookie.substring(name.length, cookie.length);
+    }
+  }
+
+  console.log(res);
+
+   // Check cookie
+  if(res !== "true") {
+      router.navigateByUrl('/login')
+      return false
+  }
+  return true
+}

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

@@ -0,0 +1,37 @@
+<p>ingredient-list works!</p>
+<ng-container *ngIf="ingredients">
+  <div *ngFor="let ingre of ingredients">
+      <p>-----------</p>
+      <p><a>{{ ingre.name}}</a></p>
+      <p>Description: {{ ingre.description}}</p>
+      <p><button (click)="edit(ingre)">Modifier</button></p>
+  </div>
+</ng-container>
+
+
+<div class="general-form-add">
+  <h2>Ajouter un ingrédient</h2>
+  <div class="form-group">
+    <label for="newName">Nom:</label>
+    <input id="newName" [(ngModel)]="newIngredient.name" required>
+  </div>
+  <div class="form-group">
+    <label for="newDescription">Description:</label>
+    <textarea id="newDescription" [(ngModel)]="newIngredient.description" required></textarea>
+  </div>
+  <button class="button-form" (click)="addIngredient()">Ajouter</button>
+</div>
+
+<div *ngIf="editIngredient" class="general-form-edit">
+  <h2>Modifier l'ingrédient</h2>
+  <div class="form-group">
+    <label for="editName">Nom:</label>
+    <input id="editName" [(ngModel)]="editIngredient.name">
+  </div>
+  <div class="form-group">
+    <label for="editDescription">Description:</label>
+    <textarea id="editDescription" [(ngModel)]="editIngredient.description"></textarea>
+  </div>
+  <button class="button-form" (click)="updateIngredient()">Enregistrer</button>
+  <button class="button-form" (click)="cancelEdit()">Annuler</button>
+</div>

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

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

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

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { Ingredient } from '../../model/ingredient.model';
+import { IngredientService } from '../../services/ingredient.service';
+import { OnInit } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-ingredient-list',
+  standalone: true,
+  imports: [NgIf, NgFor, FormsModule],
+  providers: [],
+  templateUrl: './ingredient-list.component.html',
+  styleUrl: './ingredient-list.component.css'
+})
+export class IngredientListComponent {
+  public ingredients! : Ingredient[];
+  newIngredient: Ingredient = { id: 0, name: '', description: '', qty: 0 };
+  editIngredient: Ingredient | null = null;
+
+  constructor(private serviceIngredient : IngredientService){}
+
+  ngOnInit(): void
+  {
+    this.serviceIngredient.getIngredient().subscribe(ingredients => {
+      this.ingredients = ingredients;
+    });
+  }
+
+  edit(ingre: Ingredient){
+    this.editIngredient = ingre;
+  }
+
+  addIngredient() {
+    this.serviceIngredient.add(this.newIngredient).subscribe(ingredient => {
+      this.ingredients.push(ingredient);
+      this.newIngredient = { id: 0, name: '', description: '', qty: 0}
+    });
+  }
+
+  updateIngredient() {
+    if (this.editIngredient) {
+      this.serviceIngredient.update(this.editIngredient).subscribe(updatedIngredient => {
+        const index = this.ingredients.findIndex(i => i.id === updatedIngredient.id);
+        this.ingredients[index] = updatedIngredient;
+        this.editIngredient = null;
+      });
+    }
+  }
+
+  cancelEdit() {
+    this.editIngredient = null;
+  }
+}

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/login/login.component.html

@@ -0,0 +1,2 @@
+<p>login works!</p>
+<button (click)="setCookie()"> Log Me ! </button>

src/app/components/login/login.component.spec.ts

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

src/app/components/login/login.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Router } from "@angular/router";
+import { Inject } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css'
+})
+export class LoginComponent {
+
+  constructor(@Inject(Router) private router: Router) {}
+
+
+  setCookie():void{
+    document.cookie = "isAdmin=true";
+    this.router.navigateByUrl('/ingredients');
+  }
+}

src/app/components/logout/logout.component.html

@@ -0,0 +1 @@
+<p>logout works!</p>

src/app/components/logout/logout.component.spec.ts

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

src/app/components/logout/logout.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { Inject } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-logout',
+  standalone: true,
+  imports: [],
+  templateUrl: './logout.component.html',
+  styleUrl: './logout.component.css'
+})
+export class LogoutComponent {
+  constructor(@Inject(Router) private router: Router) {}
+
+
+  ngOnInit(){
+    document.cookie = "isAdmin=false";
+    this.router.navigateByUrl('/');
+  }
+}

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

@@ -1,4 +1,11 @@
 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>
+
+  <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'
 })
@@ -25,6 +28,7 @@ export class RecipeDetailComponent {
       this.id = params.get('id');
       if (this.id) {
         this.recipe = this.recipeService.getRecipeById(Number(this.id))!;
+        console.log(this.recipe);
       }
       if (this.recipe === undefined) {
         this.router.navigate(['/error/404'])

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

@@ -17,18 +17,18 @@
       <mat-label>Image</mat-label>
       <input matInput type="text" placeholder="No file chosen" [value]="filename" readonly>
       <input type="file" formControlName="image" (change)="onFileChange($event)" hidden #fileInput>
-      <button mat-stroked-button type="button" (click)="fileInput.click()">Browse</button>
+      <button mat-stroked-button type="button" timeout (click)="fileInput.click()">Browse</button>
     </mat-form-field>
   </p>
 
   <div formArrayName="ingredients">
-    <h3>Ingredients</h3>
+    <h3>{{ 'recipe.ingredients' | transloco }}</h3>
     <div *ngFor="let ingredient of ingredients.controls; let i = index" [formGroupName]="i" class="form-row">
       <mat-form-field>
-        <mat-label>Ingredient</mat-label>
+        <mat-label>{{ 'recipe.ingredients' | transloco }}</mat-label>
         <mat-select formControlName="name">
           @for (ingredient of ingredientsOptions; track ingredient) {
-          <mat-option [value]="ingredient">{{ ingredient }}</mat-option>
+          <mat-option [value]="ingredient.name">{{ ingredient.name }}</mat-option>
           }
         </mat-select>
       </mat-form-field>
@@ -44,4 +44,4 @@
   </div>
 
   <button class="form-submit" mat-stroked-button type="submit">{{ 'recipe.add.button-recipe' | transloco }}</button>
-</form>
+</form>

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

@@ -1,16 +1,18 @@
 import { Component } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Recipe } from '../../model/recipe.model';
-import { Ingredient } from '../../model/ingredient.model';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RecipeService } from '../../services/recipe.service';
 import { TranslocoPipe } from '@jsverse/transloco';
+import { Ingredient } from '../../model/ingredient.model';
 
 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';
+import { IngredientService } from '../../services/ingredient.service';
 
 @Component({
   selector: 'app-recipe-form',
@@ -31,17 +33,20 @@ import { MatSelectModule} from '@angular/material/select';
 export class RecipeFormComponent {
   recipeForm: FormGroup;
   base64Image: string | ArrayBuffer | null = null;
-  ingredientsOptions = ['Champignon', 'Tomata', 'Mozarella'];
-  defaultOption: string = this.ingredientsOptions[2];
+  ingredientsOptions! : Ingredient[];
+  defaultOption: string = 'Veuillez choisir';
   filename: string = '';
 
-  constructor(private fb: FormBuilder, private recipeService: RecipeService) {
+  constructor(private fb: FormBuilder, private recipeService: RecipeService, private router: Router,private serviceIngredients: IngredientService) {
     this.recipeForm = this.fb.group({
       name: ['', Validators.required],
       description: ['', Validators.required],
       image: ['', Validators.required],
       ingredients: this.fb.array([]),
     });
+    this.serviceIngredients.getIngredient().subscribe(ingredients => {
+      this.ingredientsOptions = ingredients;
+    });
   }
 
   get ingredients(): FormArray {
@@ -86,9 +91,8 @@ export class RecipeFormComponent {
         }))
       };
       console.log('Recipe added:', newRecipe);
-      this.recipeService.addRecipe(newRecipe);
-      this.recipeForm.reset();
-      this.filename = "No file provided"
+      let newId = this.recipeService.addRecipe(newRecipe);
+      this.router.navigate(['recipe', newId - 1]);
     } else {
       console.log('Form is invalid');
     }

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

@@ -3,4 +3,35 @@
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 2rem;
-}
+}
+
+.pagination {
+  font-size: 1.2rem;
+}
+
+.plus-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
+  background-color: #28a745;
+  color: white;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 50px;
+  font-size: 24px;
+  text-decoration: none;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  transition: background-color 0.3s ease;
+  z-index: 1000; /* Assure que le bouton est au-dessus des autres éléments */
+}
+
+.plus-button:hover {
+  background-color: #218838;
+}
+
+.plus-button:active {
+  background-color: #1e7e34;
+}
+

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

@@ -1,5 +1,11 @@
 <h1>{{ 'recipe.list' | transloco }}</h1>
 
 <div id="recipe-list">
-  <app-recipe-mini *ngFor="let recipe of recipes" [recipe]="recipe"></app-recipe-mini>
-</div>
+  <app-recipe-mini *ngFor="let recipe of paginatedRecipes" [recipe]="recipe"></app-recipe-mini>
+</div>
+
+<a routerLink="/recipe/add" class="plus-button">+</a>
+
+<mat-paginator class="pagination" (page)="handlePageEvent($event)" [length]="length" [pageSize]="pageSize"
+  [pageIndex]="pageIndex">
+</mat-paginator>

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

@@ -4,22 +4,35 @@ import { RecipeService } from '../../services/recipe.service';
 import { NgFor } from '@angular/common';
 import { RecipeMiniComponent } from '../recipe-mini/recipe-mini.component';
 import { TranslocoPipe } from '@jsverse/transloco';
+import { MatPaginatorModule, PageEvent} from '@angular/material/paginator';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-recipe-list',
   standalone: true,
-  imports: [NgFor, RecipeMiniComponent, TranslocoPipe],
+  imports: [NgFor, RecipeMiniComponent, TranslocoPipe, MatPaginatorModule, RouterLink],
   templateUrl: './recipe-list.component.html',
   styleUrl: './recipe-list.component.css'
 })
 export class RecipeListComponent {
-  recipes : Recipe[] = [];
+  recipes: Recipe[] = [];
+  paginatedRecipes: Recipe[] = [];
+  length?: number;
+  pageSize = 10;
+  pageIndex = 0;
 
-  constructor(protected recipeService: RecipeService){}
+  constructor(protected recipeService: RecipeService) { }
 
-  ngOnInit(){
+  ngOnInit() {
     this.recipes = this.recipeService.getRecipes();
+    this.length = this.recipes.length;
+    this.paginatedRecipes = this.recipes.slice(this.pageIndex * this.pageSize, (this.pageIndex +1) * this.pageSize)
   }
 
-
+  handlePageEvent(e: PageEvent) {
+    this.length = e.length;
+    this.pageSize = e.pageSize;
+    this.pageIndex = e.pageIndex;
+    this.paginatedRecipes = this.recipes.slice(this.pageIndex * this.pageSize, (this.pageIndex +1) * this.pageSize)
+  }
 }

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

@@ -143,4 +143,4 @@ button:hover i::after {
   100% {
     box-shadow: #27272c;
   }
-}
+}

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

@@ -7,5 +7,6 @@
     <h2>{{ recipe.name }}</h2>
     <p>{{ recipe.description | truncate:50:false }}</p>
     <a [routerLink]="['/recipe', recipe.id]">{{ 'recipe.see' | transloco }}</a>
+    <a  (click)='addRecipe(recipe)'>Add Recipe to cart</a>
   </div>
-</div>
+</div>

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

@@ -4,6 +4,7 @@ import { Input } from '@angular/core';
 import { TruncatePipe } from '../../pipes/truncate.pipe';
 import { TranslocoPipe } from '@jsverse/transloco';
 import { RouterModule } from '@angular/router';
+import { CommandeService } from '../../services/commandes.service';
 
 @Component({
   selector: 'app-recipe-mini',
@@ -15,7 +16,10 @@ import { RouterModule } from '@angular/router';
 export class RecipeMiniComponent {
   @Input() recipe!: Recipe;
 
-  navigateToRecipe(){
-    console.log("TODO");
+  constructor(protected serviceCommande: CommandeService){}
+
+  addRecipe(recipe: Recipe)
+  {
+    this.serviceCommande.addRecipe(recipe);
   }
 }

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

@@ -0,0 +1,21 @@
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  color: white;
+  background-color: #007BFF;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}
+
+.button:active {
+  background-color: #004085;
+}

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

@@ -0,0 +1,4 @@
+<div *ngIf="commandes">
+  <app-recipe-mini *ngFor="let recipe of commandes" [recipe]="recipe"></app-recipe-mini>
+  <a class="button" (click)="deleteCart()">Clear recipes</a>
+</div>

src/app/components/saved-recipe/saved-recipe.component.spec.ts

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

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

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { CommandeService } from '../../services/commandes.service';
+import { OnInit } from '@angular/core';
+import { Recipe } from '../../model/recipe.model';
+import { NgFor, NgIf } from '@angular/common';
+import { RecipeMiniComponent } from '../recipe-mini/recipe-mini.component';
+
+
+@Component({
+  selector: 'app-saved-recipe',
+  standalone: true,
+  imports: [NgIf, NgFor, RecipeMiniComponent],
+  templateUrl: './saved-recipe.component.html',
+  styleUrl: './saved-recipe.component.css'
+})
+export class SavedRecipeComponent {
+  public commandes?: Recipe[];
+
+  constructor(private serviceCommande : CommandeService){}
+
+  ngOnInit(){
+    this.commandes = this.serviceCommande.getRecipe();
+  }
+
+  deleteCart(){
+    this.commandes = [];
+    this.serviceCommande.clearRecipes();
+  }
+}

src/app/model/ingredient.model.ts

@@ -2,4 +2,5 @@ export interface Ingredient{
   id: number;
   name: string;
   qty: number;
+  description: string;
 }

src/app/services/commandes.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from "@angular/core";
+import { Recipe } from "../model/recipe.model";
+@Injectable({
+  providedIn: 'root'
+})
+export class CommandeService {
+  private commande: Recipe[] = [];
+  private localStorageKey = 'commande';
+
+  constructor(){
+    console.log(this.commande);
+  }
+
+  getRecipeById(id: number) {
+    return this.commande.find(e => e.id === id);
+  }
+
+  // Get recipes from local storage
+  getRecipe(): Recipe[] {
+    const recipesJson = localStorage.getItem(this.localStorageKey) || "[]";
+    this.commande = JSON.parse(recipesJson) || [];
+    return this.commande;
+  }
+
+  // Add a new recipe
+  addRecipe(recipe: Recipe): number {
+    this.getRecipe();
+    recipe.id = this.commande.length
+    let newId = this.commande.push(recipe);
+    localStorage.setItem(this.localStorageKey, JSON.stringify(this.commande));
+    return newId;
+  }
+
+  // Clear all recipes (for example, if needed)
+  clearRecipes(): void {
+    localStorage.removeItem(this.localStorageKey);
+  }
+}

src/app/services/ingredient.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from "@angular/core";
+import { Ingredient } from "../model/ingredient.model";
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IngredientService {
+  private path:string = "https://664ba07f35bbda10987d9f99.mockapi.io/api/ingredients";
+
+  constructor(private http: HttpClient) { }
+
+  getIngredient() : Observable<Ingredient[]>{
+    return this.http.get<Ingredient[]>(this.path);
+  }
+
+  add(ingredient: Ingredient): Observable<Ingredient> {
+    return this.http.post<Ingredient>(this.path, ingredient);
+  }
+
+  update(ingredient: Ingredient): Observable<Ingredient> {
+    return this.http.put<Ingredient>(`${this.path}/${ingredient.id}`, ingredient);
+  }
+}

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/assets/i18n/en.json

@@ -9,5 +9,7 @@
       "see": "View Recipe",
       "list": "Recipe List",
       "ingredients": "Ingredients"
-   }
+   },
+  "logout": "logout",
+  "login": "login"
 }

src/assets/i18n/fr.json

@@ -9,5 +9,7 @@
       "see": "Voir la recette",
       "list": "Liste de recettes",
       "ingredients": "Ingrédients"
-   }
+   },
+  "logout": "déconnexion",
+  "login": "connexion"
 }

src/assets/i18n/ru.json

@@ -9,5 +9,7 @@
       "see": "Посмотреть рецепт",
       "list": "Список рецептов",
       "ingredients": "Ингредиенты"
-   }
+   },
+  "logout": "logout",
+  "login": "login"
 }

src/styles.css

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