Adding Command section, local storage exceed problem, adding error managing

.idea/workspace.xml

@@ -4,13 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="c5a06892-a370-4c6a-a9cf-5d61f93a285b" name="Changes" comment="Adding recipe-details front">
+    <list default="true" id="c5a06892-a370-4c6a-a9cf-5d61f93a285b" name="Changes" comment="Adding Command section, local storage exceed problem, adding error managing">
-      <change afterPath="$PROJECT_DIR$/daidokoro/src/app/model/quantified-ingredient-getter.model.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/daidokoro/src/app/service/command.service.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/command/command.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/command/command.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/command/command.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/command/command.component.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/model/quantified-ingredient.model.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/model/quantified-ingredient.model.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/model/recipe.model.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/model/recipe.model.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -87,7 +87,7 @@
       <workItem from="1718625479373" duration="4985000" />
       <workItem from="1719217543390" duration="31000" />
       <workItem from="1719217580949" duration="135000" />
-      <workItem from="1719755658119" duration="5058000" />
+      <workItem from="1719755658119" duration="6807000" />
     </task>
     <task id="LOCAL-00001" summary="Adding Front">
       <option name="closed" value="true" />
@@ -113,7 +113,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719757925681</updated>
     </task>
-    <option name="localTasksCounter" value="4" />
+    <task id="LOCAL-00004" summary="Adding recipe-details front">
+      <option name="closed" value="true" />
+      <created>1719760748129</created>
+      <option name="number" value="00004" />
+      <option name="presentableId" value="LOCAL-00004" />
+      <option name="project" value="LOCAL" />
+      <updated>1719760748129</updated>
+    </task>
+    <option name="localTasksCounter" value="5" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -136,6 +144,7 @@
     <MESSAGE value="Adding Form front with the new form" />
     <MESSAGE value="Adding Ingredients from API, add and edit working good, front of the ingredients page" />
     <MESSAGE value="Adding recipe-details front" />
-    <option name="LAST_COMMIT_MESSAGE" value="Adding recipe-details front" />
+    <MESSAGE value="Adding Command section, local storage exceed problem, adding error managing" />
+    <option name="LAST_COMMIT_MESSAGE" value="Adding Command section, local storage exceed problem, adding error managing" />
   </component>
 </project>

daidokoro/src/app/component/command/command.component.html

@@ -1 +1,51 @@
-<p>command works!</p>
+<style>
+  .command-list {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .recipe-item {
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin: 10px 0;
+    padding: 10px 20px;
+    width: 80%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .recipe-item h3 {
+    margin: 0;
+  }
+
+  .recipe-item button {
+    background-color: #ff5252;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+
+  .recipe-item button:hover {
+    background-color: #ff0000;
+  }
+</style>
+
+<div class="command-list">
+  <h2>Ma Commande</h2>
+  <div *ngFor="let recipe of recipes" class="recipe-item">
+    <img src="{{recipe.$image}}" width="10%" alt="ImageRecipe"
+         onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
+    <h3>{{ recipe.$name }}</h3>
+    <button (click)="removeRecipe(recipe)">Retirer</button>
+  </div>
+  <p *ngIf="recipes.length === 0">Aucune recette dans la commande.</p>
+</div>

daidokoro/src/app/component/command/command.component.ts

@@ -1,11 +1,25 @@
 import { Component } from '@angular/core';
+import { CommandService } from '../../service/command.service';
+import { Recipe } from '../../model/recipe.model';
+import {NgFor, NgIf} from '@angular/common';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-command',
   standalone: true,
-  imports: [],
+  imports: [NgFor, RouterLink, NgIf],
   templateUrl: './command.component.html'
 })
 export class CommandComponent {
+  recipes: Recipe[] = [];
+  errorMessage: string | null = null;
 
+  constructor(private commandService: CommandService) {
+    this.recipes = this.commandService.getRecipes();
+  }
+
+  removeRecipe(recipe: Recipe) {
+    this.commandService.removeRecipe(recipe);
+    this.recipes = this.commandService.getRecipes();
+  }
 }

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

@@ -71,12 +71,14 @@
     border: 1px solid #bbb;
     border-radius: 5px;
   }
-  .page-link.active {
+  .error-message {
-    background-color: #333;
+    color: red;
-    color: white;
+    font-weight: bold;
+    margin-bottom: 4%;
   }
 </style>
 <body>
+<div *ngIf="errorMessageDisplay" class="error-message">{{ errorMessage }}</div>
 <div [ngClass]="{'four-column': !isFormVisible, 'two-column': isFormVisible}" class="recipe-container">
   <div class="recipe-card" *ngFor="let recipe of paginatedRecipes">
     <img [src]="recipe.$image" alt="Recette 1" class="recipe-image"
@@ -85,6 +87,7 @@
       <h2 class="recipe-title">{{recipe.$name}}</h2>
       <p class="recipe-description">{{recipe.$description}}</p>
       <button (click)="detailsRecipe(recipe.$id)" class="details-button">Détails</button>
+      <button (click)="addToCommand(recipe)" class="details-button" >Ajouter à ma commande</button>
     </div>
   </div>
 </div>

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

@@ -1,9 +1,10 @@
 import {Component, Input, OnInit} from '@angular/core';
 import { RecipeService } from '../../service/recipe.service';
 import { Recipe } from '../../model/recipe.model';
-import {NgClass, NgOptimizedImage} from "@angular/common";
+import {NgClass, NgIf, NgOptimizedImage} from "@angular/common";
 import {NgFor} from "@angular/common";
 import {Router, RouterLinkActive} from "@angular/router";
+import {CommandService} from "../../service/command.service";
 
 @Component({
   selector: 'app-recipe-list',
@@ -12,19 +13,23 @@ import {Router, RouterLinkActive} from "@angular/router";
     NgOptimizedImage,
     NgFor,
     NgClass,
-    RouterLinkActive
+    RouterLinkActive,
+    NgIf
   ],
   standalone: true
 })
 export class RecipeListComponent implements OnInit {
   recipes: Recipe[] = [];
+  errorMessageDisplay: boolean = false;
+  errorMessage: string | null = null;
+
   @Input() isFormVisible!: boolean;
 
   currentPage: number = 0;
   pageSize: number = 4;
   totalPages: any = 0;
 
-  constructor(private recipeService: RecipeService,private router : Router) {}
+  constructor(private recipeService: RecipeService,private router : Router, private commandService: CommandService) {}
 
   ngOnInit(): void {
     this.recipes = this.recipeService.getRecipes();
@@ -55,4 +60,19 @@ export class RecipeListComponent implements OnInit {
   detailsRecipe(id : number){
     this.router.navigateByUrl('/recipe/'+id);
   }
+
+
+  addToCommand(recipe: Recipe) {
+    try {
+      this.commandService.addRecipe(recipe);
+      this.errorMessageDisplay = false;
+    } catch (e) {
+      if (e instanceof DOMException && e.name === 'QuotaExceededError') {
+        this.errorMessageDisplay = true;
+        this.errorMessage = 'Local Storage saturé, impossible d\'ajouter la recette dans le local storage des commandes.';
+      } else {
+        throw e;
+      }
+    }
+  }
 }

daidokoro/src/app/service/command.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Recipe } from "../model/recipe.model";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CommandService {
+  private recipes: Recipe[] = JSON.parse(localStorage.getItem('command') || '[]');
+
+  addRecipe(recipe: Recipe) {
+    this.recipes.push(recipe);
+    localStorage.setItem('command', JSON.stringify(this.recipes));
+  }
+
+  getRecipes(): Recipe[] {
+    return this.recipes;
+  }
+
+  removeRecipe(recipe: Recipe) {
+    const index = this.recipes.indexOf(recipe);
+    if (index > -1) {
+      this.recipes.splice(index, 1);
+    }
+  }
+}