From d673acae09796d203b8949c9672c4e3868c662e4 Mon Sep 17 00:00:00 2001 From: "matis.mazingue" Date: Sat, 29 Jun 2024 10:46:02 +0200 Subject: [PATCH] =?UTF-8?q?add=20+=20edit=20ingredient=20versio=20stub,=20?= =?UTF-8?q?version=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}`); +// } +// }
Name{{ ingredient.name }} + {{ ingredient.name }} + +