Adding Ingredients from API, add and edit working good, front of the ingredients page

.idea/workspace.xml

@@ -4,9 +4,24 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="c5a06892-a370-4c6a-a9cf-5d61f93a285b" name="Changes" comment="Adding Front">
+    <list default="true" id="c5a06892-a370-4c6a-a9cf-5d61f93a285b" name="Changes" comment="Adding Form front with the new form">
+      <change afterPath="$PROJECT_DIR$/daidokoro/src/app/component/command/command.component.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/daidokoro/src/app/component/command/command.component.spec.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/daidokoro/src/app/component/command/command.component.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/app.component.css" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/app.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/app.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/app.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/app.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/app.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/app.config.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/app.routes.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/app.routes.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/ingredients/ingredients.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/ingredients/ingredients.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/ingredients/ingredients.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/ingredients/ingredients.component.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.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/data/link.stub.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/data/link.stub.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/model/ingredient.model.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/model/ingredient.model.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/service/ingredient.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/service/ingredient.service.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -23,7 +38,7 @@
   <component name="Git.Settings">
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="master" />
+        <entry key="$PROJECT_DIR$" value="formFront" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -43,7 +58,7 @@
   &quot;keyToString&quot;: {
     &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
     &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;formFront&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;master&quot;,
     &quot;last_opened_file_path&quot;: &quot;/home/dorian/Documents/but3/Angular/Daidokoro&quot;,
     &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
     &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
@@ -83,6 +98,7 @@
       <workItem from="1718625479373" duration="4985000" />
       <workItem from="1719217543390" duration="31000" />
       <workItem from="1719217580949" duration="135000" />
+      <workItem from="1719755658119" duration="2002000" />
     </task>
     <task id="LOCAL-00001" summary="Adding Front">
       <option name="closed" value="true" />
@@ -92,7 +108,15 @@
       <option name="project" value="LOCAL" />
       <updated>1718630357884</updated>
     </task>
-    <option name="localTasksCounter" value="2" />
+    <task id="LOCAL-00002" summary="Adding Form front with the new form">
+      <option name="closed" value="true" />
+      <created>1719666928847</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1719666928847</updated>
+    </task>
+    <option name="localTasksCounter" value="3" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -112,6 +136,7 @@
   <component name="VcsManagerConfiguration">
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
     <MESSAGE value="Adding Front" />
-    <option name="LAST_COMMIT_MESSAGE" value="Adding Front" />
+    <MESSAGE value="Adding Form front with the new form" />
+    <option name="LAST_COMMIT_MESSAGE" value="Adding Form front with the new form" />
   </component>
 </project>

daidokoro/src/app/app.component.html

@@ -26,38 +26,10 @@
       background-color: #ddd;
       color: black;
     }
-    .content {
-      padding: 20px;
-      display: flex;
-      gap: 20px;
-    }
-    .recipe-container, .form-container {
-      background-color: #bab6b6;
-      color: black;
-      padding: 20px;
-      flex: 1;
-    }
-    .recipe-container {
-      display: flex;
-      flex-direction: column;
-    }
     .recipe-container h2 {
       font-size: 3em;
       margin-bottom: 10px;
     }
-    .form-container {
-      display: none;
-      flex-direction: column;
-    }
-    .show-form .form-container {
-      display: flex;
-    }
-    .show-form .recipe-container, .show-form .form-container {
-      flex: 1;
-    }
-    .button-container {
-      margin-top: 20px;
-    }
   </style>
 </head>
 <body>
@@ -74,6 +46,7 @@
   </div>
 </div>
 
+
 <router-outlet></router-outlet>
 
 </body>

daidokoro/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, NgModule} from '@angular/core';
 import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {RecipeFormComponent} from "./component/recipe-form/recipe-form.component";
 import {AccueilComponent} from "./component/accueil/accueil.component";
@@ -13,7 +13,6 @@ import {LinkService} from "./service/link.service";
   standalone: true,
     imports: [RouterOutlet, AccueilComponent, RecipeFormComponent, NgForOf, NgIf, RecipeListComponent, RouterLink, RouterLinkActive],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
 })
 export class AppComponent {
   links : Link[] = this.linkService.getLinks()
@@ -22,12 +21,12 @@ export class AppComponent {
   }
 
   onClickLogin(event: Event): void {
-    event.preventDefault(); // Prevent the default anchor behavior
+    event.preventDefault();
     this.loginService.login();
   }
 
   onClickLogout(event: Event): void {
-    event.preventDefault(); // Prevent the default anchor behavior
+    event.preventDefault();
     this.loginService.logout();
   }
 

daidokoro/src/app/app.config.ts

@@ -2,7 +2,12 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import {provideRouter, withComponentInputBinding} from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideHttpClient } from "@angular/common/http";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes,withComponentInputBinding())]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes,withComponentInputBinding()),
+    provideHttpClient()
+  ]
 };

daidokoro/src/app/app.routes.ts

@@ -3,9 +3,11 @@ import {AuthGuard} from "./guard.guard";
 import {IngredientsComponent} from "./component/ingredients/ingredients.component";
 import {AccueilComponent} from "./component/accueil/accueil.component";
 import {RecipeDetailComponent} from "./component/recipe-detail/recipe-detail.component";
+import {CommandComponent} from "./component/command/command.component";
 
 export const routes: Routes = [
   {path: 'ingredients', component:IngredientsComponent,canActivate: [AuthGuard]},
   {path: 'recipe/:id', component: RecipeDetailComponent},
-  {path:  '', component:AccueilComponent}
+  {path:  '', component:AccueilComponent},
+  {path: 'command', component: CommandComponent}
 ];

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-command',
+  standalone: true,
+  imports: [],
+  templateUrl: './command.component.html'
+})
+export class CommandComponent {
+
+}

daidokoro/src/app/component/ingredients/ingredients.component.html

@@ -2,7 +2,7 @@
   .ingredients {
     font-family: Arial, sans-serif;
     background-color: #bab6b6;
-    margin: 0px;
+    margin: 0;
     padding: 20px;
     display: flex;
     flex-wrap: wrap;
@@ -18,33 +18,101 @@
     width: 200px;
     margin: 20px;
   }
+
   .ingredient-card:hover {
     transform: scale(1.05);
   }
-  .ingredient-image {
-    width: 100%;
-    height: 200px;
-    object-fit: cover;
-  }
 
   .ingredient-content {
     padding: 15px;
   }
+
   .ingredient-title {
     font-size: 1em;
     margin: 0 0 10px;
   }
+
+  .ingredient-actions {
+    margin-top: 10px;
+  }
+
+  .ingredient-actions button {
+    margin-right: 5px;
+  }
+
+  .general-form-add {
+    margin-top: 2%;
+    background-color: #bab6b6;
+    float: left;
+    width: 49%;
+  }
+
+  .general-form-edit {
+    margin-top: 2%;
+    background-color: #bab6b6;
+    float: right;
+    width: 49%;
+  }
+
+  .form-group {
+    margin-bottom: 10px;
+    margin-right: 2%;
+    margin-left: 2%
+  }
+
+  .form-group label {
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  .form-group input, .form-group textarea {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+
+  .button-form{
+    margin-left: 2%;
+  }
 </style>
-<body>
-  <div class="ingredients">
 
-    <div class="ingredient-card" *ngFor="let ingredient of ingredients ">
-      <img src="image1.jpg" alt="Recette 1" class="ingredient-image"
-           onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
-      <div class="ingredient-content">
-        <h2 class="ingredient-title">{{ ingredient.$name }}</h2>
+<body>
+<div class="ingredients">
+  <div class="ingredient-card" *ngFor="let ingredient of ingredients">
+    <div class="ingredient-content">
+      <h2 class="ingredient-title">{{ ingredient.name }}</h2>
+      <p>{{ ingredient.description }}</p>
+      <div class="ingredient-actions">
+        <button (click)="edit(ingredient)">Modifier</button>
       </div>
     </div>
+  </div>
+</div>
 
+<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>
 </body>

daidokoro/src/app/component/ingredients/ingredients.component.ts

@@ -1,45 +1,62 @@
-import {Component, OnInit} from '@angular/core';
-import {IngredientService} from "../../service/ingredient.service";
-import {Ingredient} from "../../model/ingredient.model";
-import {NgFor} from "@angular/common";
-import {LoginService} from "../../service/login.service";
-import {Link} from "../../model/link.model";
-import {LinkService} from "../../service/link.service";
+import { Component, OnInit } from '@angular/core';
+import { IngredientService } from "../../service/ingredient.service";
+import { Ingredient } from "../../model/ingredient.model";
+import { NgFor, NgIf } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { HttpClient } from "@angular/common/http";
 
 @Component({
   selector: 'app-ingredients',
   standalone: true,
   imports: [
     NgFor,
+    NgIf,
+    FormsModule
   ],
+  providers: [IngredientService, HttpClient],
   templateUrl: './ingredients.component.html',
   styleUrl: './ingredients.component.css'
 })
-export class IngredientsComponent implements OnInit{
+export class IngredientsComponent implements OnInit {
 
   ingredients: Ingredient[] = [];
-  links: Link[] = this.linkService.getLinks()
+  newIngredient: Ingredient = { id: '0', name: '', description: '' };
+  editIngredient: Ingredient | null = null;
 
-  constructor(private ingredientService : IngredientService,private loginService: LoginService,private linkService : LinkService) {}
+  constructor(private ingredientService: IngredientService) {}
 
   ngOnInit() {
+    this.loadIngredients();
+  }
+
+  loadIngredients() {
     this.ingredientService.getAll().subscribe(ingredients => {
       this.ingredients = ingredients;
     });
   }
 
-  onClickLogin(event: Event): void {
-    event.preventDefault(); // Prevent the default anchor behavior
-    this.loginService.login();
+  addIngredient() {
+    this.ingredientService.add(this.newIngredient).subscribe(ingredient => {
+      this.ingredients.push(ingredient);
+      this.newIngredient = { id: '0', name: '', description: '' };
+    });
   }
 
-  onClickLogout(event: Event): void {
-    event.preventDefault(); // Prevent the default anchor behavior
-    this.loginService.logout();
+  edit(ingredient: Ingredient) {
+    this.editIngredient = { ...ingredient };
   }
 
-  isLogged(): boolean {
-    return this.loginService.isLogged();
+  updateIngredient() {
+    if (this.editIngredient) {
+      this.ingredientService.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;
+  }
 }

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

@@ -122,7 +122,7 @@
 
         <label for="ingredient-name">Ingredient:</label>
         <select id="ingredient-name" formControlName="ingredient" required>
-          <option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
+          <option *ngFor="let ingredient of ingredientsList" [value]="ingredient.name">{{ ingredient.name }}</option>
         </select>
 
         <button type="button" class="remove-button" (click)="removeIngredient(i)">Remove</button>
@@ -132,7 +132,7 @@
     <button type="button" class="add-ingredient-button" (click)="addIngredient()">Add Ingredient</button>
 
     <p>Complete the form to enable the button.</p>
-    <button type="submit"  class="submit-button"  [disabled]="!recipeForm.valid">Submit</button>
+    <button type="submit"  class="submit-button">Submit</button>
   </form>
   </div>
 </body>

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

@@ -83,14 +83,17 @@ export class RecipeFormComponent {
         $ingredients: this.recipeForm.value.ingredients!.map((ingredient: any) => ({
           quantity: ingredient.quantity,
           unit: ingredient.unit,
-          ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient)
+          ingredient: this.ingredientsList.find(ing => ing.name === ingredient.ingredient)
         })),
         $image: this.recipeForm.value.image
       };
       this.formSubmitted.emit(recipe);
       this.recipeForm.reset()
       this.ingredients.clear()
+      this.imageBase64 = null;
       this.addIngredient()
+    }else{
+      alert("Veuillez remplir tous les champs")
     }
   }
 }

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

@@ -90,7 +90,7 @@
 </div>
 <div class="pagination">
   <button class="page-link" (click)="previousPage()" [disabled]="currentPage === 0">Précédent</button>
-<!--  <span class="page-link" *ngFor="let page of totalPages; let i = index" [class.active]="currentPage === i" (click)="changePage(i)">{{ i + 1 }}</span>-->
+  <p>{{ currentPage +1 }}</p>
   <button class="page-link" (click)="nextPage()" [disabled]="currentPage === totalPages - 1">Suivant</button>
 </div>
 </body>

daidokoro/src/app/data/link.stub.ts

@@ -2,5 +2,7 @@ import {Link} from "../model/link.model";
 
 export var LINKS :Link[] = [
   {$name:"Accueil",$link:""},
-  {$name:"Ingredients",$link:"/ingredients"}
-  ]
+  {$name:"Ingredients",$link:"/ingredients"},
+  {$name:"Commande",$link:"/command"}
+
+]

daidokoro/src/app/model/ingredient.model.ts

@@ -1,5 +1,6 @@
 
 export interface Ingredient {
-  $id : number,
-  $name : string
+  id : string,
+  name : string,
+  description : string,
 }

daidokoro/src/app/service/ingredient.service.ts

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