From d673acae09796d203b8949c9672c4e3868c662e4 Mon Sep 17 00:00:00 2001 From: "matis.mazingue" Date: Sat, 29 Jun 2024 10:46:02 +0200 Subject: [PATCH 1/3] =?UTF-8?q?add=20+=20edit=20ingredient=20versio=20stub?= =?UTF-8?q?,=20version=20api=20comment=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.routes.ts | 4 ++ .../ingredient-add.component.html | 27 ++++++++++ .../ingredient-add.component.scss | 0 .../ingredient-add.component.ts | 38 ++++++++++++++ .../ingredient-edit.component.html | 10 ++++ .../ingredient-edit.component.scss | 0 .../ingredient-edit.component.ts | 50 +++++++++++++++++++ .../ingredient-list.component.html | 14 +++++- .../ingredient-list.component.ts | 27 +++++++++- src/app/services/ingredient.service.ts | 38 ++++++++++++++ 10 files changed, 205 insertions(+), 3 deletions(-) create mode 100644 src/app/ingredient-add/ingredient-add.component.html create mode 100644 src/app/ingredient-add/ingredient-add.component.scss create mode 100644 src/app/ingredient-add/ingredient-add.component.ts create mode 100644 src/app/ingredient-edit/ingredient-edit.component.html create mode 100644 src/app/ingredient-edit/ingredient-edit.component.scss create mode 100644 src/app/ingredient-edit/ingredient-edit.component.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index f662ef8..92f7fb2 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -4,12 +4,16 @@ import { RecipeListComponent } from './recipe-list/recipe-list.component'; import { HomeComponent } from './home/home.component'; import { RecipeAddComponent } from './recipe-add/recipe-add.component'; import { IngredientListComponent } from './ingredient-list/ingredient-list.component'; +import { IngredientEditComponent } from './ingredient-edit/ingredient-edit.component'; +import { IngredientAddComponent } from './ingredient-add/ingredient-add.component'; export const routes: Routes = [ { path: 'add', component: RecipeAddComponent }, { path: 'recipe/:id', component: RecipeComponent }, { path: 'list', component: RecipeListComponent }, { path: 'ingredients', component: IngredientListComponent }, + { path: 'ingredient/add', component: IngredientAddComponent }, + { path: 'ingredient/:id/edit', component: IngredientEditComponent }, { path: '', component: HomeComponent }, { path: '**', redirectTo: '' }, ]; diff --git a/src/app/ingredient-add/ingredient-add.component.html b/src/app/ingredient-add/ingredient-add.component.html new file mode 100644 index 0000000..e05512d --- /dev/null +++ b/src/app/ingredient-add/ingredient-add.component.html @@ -0,0 +1,27 @@ + + +
+

Add New Ingredient

+
+ + Name + + + +
+
diff --git a/src/app/ingredient-add/ingredient-add.component.scss b/src/app/ingredient-add/ingredient-add.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/ingredient-add/ingredient-add.component.ts b/src/app/ingredient-add/ingredient-add.component.ts new file mode 100644 index 0000000..57b683a --- /dev/null +++ b/src/app/ingredient-add/ingredient-add.component.ts @@ -0,0 +1,38 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { IngredientService } from '../services/ingredient.service'; +import { Ingredient } from '../models/ingredient'; +import { HttpClientModule } from '@angular/common/http'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatButtonModule } from '@angular/material/button'; +import { MatSelectModule } from '@angular/material/select'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-ingredient-add', + standalone: true, + imports: [HttpClientModule, MatFormFieldModule, MatButtonModule, MatSelectModule, FormsModule], + templateUrl: './ingredient-add.component.html', + styleUrl: './ingredient-add.component.scss' +}) +export class IngredientAddComponent { + // version api + // ingredient: Ingredient = new Ingredient(0, ''); + name: string = ''; + + constructor(private ingredientService: IngredientService, private router: Router) {} + + addIngredient(): void { + if (this.name.trim()) { + this.ingredientService.addIngredient(this.name.trim()); + this.router.navigate(['/ingredients']); + } + } + + // version api + // addIngredient(): void { + // this.ingredientService.addIngredient(this.ingredient).subscribe(() => { + // this.router.navigate(['/ingredients']); + // }); + // } +} diff --git a/src/app/ingredient-edit/ingredient-edit.component.html b/src/app/ingredient-edit/ingredient-edit.component.html new file mode 100644 index 0000000..6d50564 --- /dev/null +++ b/src/app/ingredient-edit/ingredient-edit.component.html @@ -0,0 +1,10 @@ +
+

Edit Ingredient

+
+ + Name + + + +
+
diff --git a/src/app/ingredient-edit/ingredient-edit.component.scss b/src/app/ingredient-edit/ingredient-edit.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/ingredient-edit/ingredient-edit.component.ts b/src/app/ingredient-edit/ingredient-edit.component.ts new file mode 100644 index 0000000..0dfb73a --- /dev/null +++ b/src/app/ingredient-edit/ingredient-edit.component.ts @@ -0,0 +1,50 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Ingredient } from '../models/ingredient'; +import { IngredientService } from '../services/ingredient.service'; +import { CommonModule } from '@angular/common'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatButtonModule } from '@angular/material/button'; +import { FormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; + +@Component({ + selector: 'app-ingredient-edit', + standalone: true, + imports: [CommonModule, MatFormFieldModule, MatButtonModule, FormsModule], + templateUrl: './ingredient-edit.component.html', + styleUrls: ['./ingredient-edit.component.scss'] +}) +export class IngredientEditComponent implements OnInit { + ingredient!: Ingredient; + + constructor( + private route: ActivatedRoute, + private router: Router, + private ingredientService: IngredientService + ) {} + + ngOnInit(): void { + const id = Number(this.route.snapshot.paramMap.get('id')); + this.ingredient = this.ingredientService.getIngredient(id); + } + + save(): void { + // Implement save logic here + this.router.navigate(['/ingredients']); + } + + // version api + // ngOnInit(): void { + // const id = Number(this.route.snapshot.paramMap.get('id')); + // this.ingredientService.getIngredient(id).subscribe((ingredient) => { + // this.ingredient = ingredient; + // }); + // } + + // save(): void { + // this.ingredientService.updateIngredient(this.ingredient.id, this.ingredient).subscribe(() => { + // this.router.navigate(['/ingredients']); + // }); + // } +} diff --git a/src/app/ingredient-list/ingredient-list.component.html b/src/app/ingredient-list/ingredient-list.component.html index f42222c..5652ef4 100644 --- a/src/app/ingredient-list/ingredient-list.component.html +++ b/src/app/ingredient-list/ingredient-list.component.html @@ -1,5 +1,8 @@

List of Ingredients

+ @@ -10,7 +13,16 @@ - + diff --git a/src/app/ingredient-list/ingredient-list.component.ts b/src/app/ingredient-list/ingredient-list.component.ts index 715b70a..40a1ab1 100644 --- a/src/app/ingredient-list/ingredient-list.component.ts +++ b/src/app/ingredient-list/ingredient-list.component.ts @@ -4,13 +4,15 @@ import { IngredientService } from '../services/ingredient.service'; import { MatTableModule, MatTableDataSource } from '@angular/material/table'; import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator'; import { CommonModule } from '@angular/common'; +import { Router } from '@angular/router'; +import { HttpClientModule } from '@angular/common/http'; @Component({ selector: 'app-ingredient-list', standalone: true, templateUrl: './ingredient-list.component.html', styleUrls: ['./ingredient-list.component.scss'], - imports: [CommonModule, MatTableModule, MatPaginatorModule], + imports: [CommonModule, MatTableModule, MatPaginatorModule, HttpClientModule], }) export class IngredientListComponent implements OnInit { ingredients: Ingredient[] = []; @@ -20,7 +22,7 @@ export class IngredientListComponent implements OnInit { @ViewChild(MatPaginator) paginator!: MatPaginator; - constructor(private ingredientService: IngredientService) {} + constructor(private ingredientService: IngredientService, private router: Router) {} ngOnInit(): void { this.ingredients = this.ingredientService.getIngredients(); @@ -30,4 +32,25 @@ export class IngredientListComponent implements OnInit { ngAfterViewInit() { this.dataSource.paginator = this.paginator; } + + // version api + + // ngOnInit(): void { + // this.loadIngredients(); + // } + + // loadIngredients(): void { + // this.ingredientService.getIngredients().subscribe((ingredients) => { + // this.ingredients = ingredients; + // this.dataSource.data = this.ingredients; + // }); + // } + + onEditIngredient(ingredient: Ingredient): void { + this.router.navigate(['/ingredient', ingredient.id, 'edit']); + } + + navToAddIngredient(): void { + this.router.navigate(['/ingredient/add']); + } } diff --git a/src/app/services/ingredient.service.ts b/src/app/services/ingredient.service.ts index 5458ffa..f7fe246 100644 --- a/src/app/services/ingredient.service.ts +++ b/src/app/services/ingredient.service.ts @@ -1,5 +1,7 @@ import { Injectable } from '@angular/core'; import { Ingredient } from '../models/ingredient'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root', @@ -38,4 +40,40 @@ export class IngredientService { (ingredient) => ingredient.id === id ) as Ingredient; } + + addIngredient(name: string): void { + const newId = Math.max(...this.ingredients.map(ingredient => ingredient.id)) + 1; + const newIngredient = new Ingredient(newId, name); + this.ingredients.push(newIngredient); + } } + +// version api +// @Injectable({ +// providedIn: 'root', +// }) +// export class IngredientService { +// private apiUrl = 'https://664ba07f35bbda10987d9f99.mockapi.io/api/ingrédients'; + +// constructor(private http: HttpClient) {} + +// getIngredients(): Observable { +// return this.http.get(this.apiUrl); +// } + +// getIngredient(id: number): Observable { +// return this.http.get(`${this.apiUrl}/${id}`); +// } + +// addIngredient(ingredient: Ingredient): Observable { +// return this.http.post(this.apiUrl, ingredient); +// } + +// updateIngredient(id: number, ingredient: Ingredient): Observable { +// return this.http.put(`${this.apiUrl}/${id}`, ingredient); +// } + +// deleteIngredient(id: number): Observable { +// return this.http.delete(`${this.apiUrl}/${id}`); +// } +// } From 475886ab96ae940e54e6cbfa3ffef207879d91a3 Mon Sep 17 00:00:00 2001 From: "matis.mazingue" Date: Sat, 29 Jun 2024 10:59:43 +0200 Subject: [PATCH 2/3] delete ingredientRecipe --- src/app/services/recipe.service.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/app/services/recipe.service.ts b/src/app/services/recipe.service.ts index 25de6d0..5f164b9 100644 --- a/src/app/services/recipe.service.ts +++ b/src/app/services/recipe.service.ts @@ -22,8 +22,18 @@ export class RecipeService { deleteRecipe(recipeId: number): void { let recipes = this.getRecipes(); - recipes = recipes.filter(recipe => recipe.id !== recipeId); - localStorage.setItem(this.localStorageKey, JSON.stringify(recipes)); + const deletedRecipe = recipes.find(recipe => recipe.id === recipeId); + + if (deletedRecipe) { + // Remove the recipe from recipes array + recipes = recipes.filter(recipe => recipe.id !== recipeId); + localStorage.setItem(this.localStorageKey, JSON.stringify(recipes)); + + // Remove associated IngredientRecipe objects + let ingredientRecipes = this.getIngredientRecipes(recipeId); + ingredientRecipes = ingredientRecipes.filter(ir => ir.idRecipe !== recipeId); + localStorage.setItem(this.ingredientRecipeKey, JSON.stringify(ingredientRecipes)); + } } getIngredientRecipes(recipeId: number): IngredientRecipe[] { From 6f4d7663288d8a1a38f2962ed80b2e814d3d6001 Mon Sep 17 00:00:00 2001 From: "matis.mazingue" Date: Sat, 29 Jun 2024 11:10:30 +0200 Subject: [PATCH 3/3] order recipe --- src/app/home/home.component.html | 6 ++++++ src/app/home/home.component.ts | 16 +++++++++++++--- src/app/recipe-list/recipe-list.component.html | 3 +++ src/app/recipe-list/recipe-list.component.ts | 4 ++++ src/app/services/recipe.service.ts | 12 ++++++++++++ 5 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index f85c800..4a852a8 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,5 +1,11 @@

Projet Recipe


+

Commandes en cours

+
    +
  • + {{ recipe.name }} +
    • +

Bienvenue sur Recipe

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index deb69c4..afcc3ff 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,12 +1,22 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { Recipe } from '../models/recipe'; +import { RecipeService } from '../services/recipe.service'; @Component({ selector: 'app-home', standalone: true, - imports: [], + imports: [CommonModule], templateUrl: './home.component.html', styleUrl: './home.component.scss' }) -export class HomeComponent { +export class HomeComponent implements OnInit { + currentOrders: Recipe[] = []; + constructor(private recipeService: RecipeService) {} + + ngOnInit(): void { + // Charger les commandes en cours depuis le service + this.currentOrders = this.recipeService.getCurrentOrders(); + } } diff --git a/src/app/recipe-list/recipe-list.component.html b/src/app/recipe-list/recipe-list.component.html index 7ee5e93..1373591 100644 --- a/src/app/recipe-list/recipe-list.component.html +++ b/src/app/recipe-list/recipe-list.component.html @@ -42,6 +42,9 @@
Name{{ ingredient.name }} + {{ ingredient.name }} + +
Show + diff --git a/src/app/recipe-list/recipe-list.component.ts b/src/app/recipe-list/recipe-list.component.ts index af2769b..08e4da0 100644 --- a/src/app/recipe-list/recipe-list.component.ts +++ b/src/app/recipe-list/recipe-list.component.ts @@ -52,4 +52,8 @@ export class RecipeListComponent implements OnInit { this.recipes = this.recipeService.getRecipes(); this.dataSource.data = this.recipes; } + + onOrderRecipe(recipe: Recipe): void { + this.recipeService.orderRecipe(recipe); + } } diff --git a/src/app/services/recipe.service.ts b/src/app/services/recipe.service.ts index 5f164b9..55c562e 100644 --- a/src/app/services/recipe.service.ts +++ b/src/app/services/recipe.service.ts @@ -8,6 +8,7 @@ import { IngredientRecipe } from '../models/ingredient-recipe'; export class RecipeService { private localStorageKey = 'recipes'; private ingredientRecipeKey = 'ingredientRecipes'; + private currentOrdersKey = 'currentOrders'; getRecipes(): Recipe[] { const recipesJson = localStorage.getItem(this.localStorageKey); @@ -55,4 +56,15 @@ export class RecipeService { ); return ingredientRecipe ? ingredientRecipe.quantity : 0; } + + orderRecipe(recipe: Recipe): void { + let currentOrders: Recipe[] = JSON.parse(localStorage.getItem(this.currentOrdersKey) || '[]'); + currentOrders.push(recipe); + localStorage.setItem(this.currentOrdersKey, JSON.stringify(currentOrders)); + } + + getCurrentOrders(): Recipe[] { + const currentOrdersJson = localStorage.getItem(this.currentOrdersKey); + return currentOrdersJson ? JSON.parse(currentOrdersJson) : []; + } }