From 9f3e86b395b65f4a9d207e44bd0d6fb5c5d89ec1 Mon Sep 17 00:00:00 2001 From: Corentin R Date: Mon, 17 Jun 2024 15:21:20 +0200 Subject: [PATCH 1/2] Adding form component --- daidokoro/src/app/app.component.html | 337 +----------------- daidokoro/src/app/app.component.ts | 3 +- .../recipe-form/recipe-form.component.css | 0 .../recipe-form/recipe-form.component.html | 14 + .../recipe-form/recipe-form.component.spec.ts | 23 ++ .../recipe-form/recipe-form.component.ts | 37 ++ .../app/model/quantified-ingredient.model.ts | 4 +- 7 files changed, 79 insertions(+), 339 deletions(-) create mode 100644 daidokoro/src/app/component/recipe-form/recipe-form.component.css create mode 100644 daidokoro/src/app/component/recipe-form/recipe-form.component.html create mode 100644 daidokoro/src/app/component/recipe-form/recipe-form.component.spec.ts create mode 100644 daidokoro/src/app/component/recipe-form/recipe-form.component.ts diff --git a/daidokoro/src/app/app.component.html b/daidokoro/src/app/app.component.html index 36093e1..318deed 100644 --- a/daidokoro/src/app/app.component.html +++ b/daidokoro/src/app/app.component.html @@ -1,336 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + diff --git a/daidokoro/src/app/app.component.ts b/daidokoro/src/app/app.component.ts index 2e2d8f8..253d1ea 100644 --- a/daidokoro/src/app/app.component.ts +++ b/daidokoro/src/app/app.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import {RecipeFormComponent} from "./component/recipe-form/recipe-form.component"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet, RecipeFormComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.css b/daidokoro/src/app/component/recipe-form/recipe-form.component.css new file mode 100644 index 0000000..e69de29 diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.html b/daidokoro/src/app/component/recipe-form/recipe-form.component.html new file mode 100644 index 0000000..265e9fe --- /dev/null +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html @@ -0,0 +1,14 @@ +
+ + + + + + + + + + +

Complete the form to enable the button.

+ +
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.spec.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.spec.ts new file mode 100644 index 0000000..eefd96c --- /dev/null +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecipeFormComponent } from './recipe-form.component'; + +describe('RecipeFormComponent', () => { + let component: RecipeFormComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RecipeFormComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RecipeFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts new file mode 100644 index 0000000..e67befd --- /dev/null +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts @@ -0,0 +1,37 @@ +import {Component, EventEmitter, Output} from '@angular/core'; +import {Recipe} from "../../model/recipe.model"; +import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; + +@Component({ + selector: 'app-recipe-form', + standalone: true, + imports: [ReactiveFormsModule], + templateUrl: './recipe-form.component.html', + styleUrl: './recipe-form.component.css' +}) +export class RecipeFormComponent { + @Output() formSubmitted = new EventEmitter(); + + recipeForm = new FormGroup({ + id: new FormControl('', { nonNullable: true }), + name: new FormControl('', { nonNullable: true }), + description: new FormControl('', { nonNullable: true }), + + }); + + + onSubmit() { + if(this.recipeForm.valid){ + const recipe: Recipe = { + $id: parseInt(this.recipeForm.value.id!), + $name: this.recipeForm.value.name!, + $description: this.recipeForm.value.description!, + $createdAt: new Date(), + $ingredients: [] + }; + this.formSubmitted.emit(recipe); + this.recipeForm.reset() + } + + } +} diff --git a/daidokoro/src/app/model/quantified-ingredient.model.ts b/daidokoro/src/app/model/quantified-ingredient.model.ts index 63157a9..edcea30 100644 --- a/daidokoro/src/app/model/quantified-ingredient.model.ts +++ b/daidokoro/src/app/model/quantified-ingredient.model.ts @@ -1,8 +1,8 @@ -import {Unite} from "./unity"; +import {Unity} from "./unity"; import {Ingredient} from "./ingredient.model"; export interface QuantifiedIngredient { $quantity : number, - $unit : Unite, + $unit : Unity, $ingredient : Ingredient } From 766627c169963f07b922ff0934962635cc189850 Mon Sep 17 00:00:00 2001 From: Corentin R Date: Mon, 24 Jun 2024 11:17:02 +0200 Subject: [PATCH 2/2] Adding form to front --- .../Component/accueil/accueil.component.ts | 14 -- .../recipe-list/recipe-list.component.html | 123 ------------------ daidokoro/src/app/Model/recipe.model.ts | 6 - daidokoro/src/app/Service/recipe.service.ts | 18 --- daidokoro/src/app/app.component.html | 2 +- daidokoro/src/app/app.component.ts | 2 +- .../accueil/accueil.component.html | 6 +- .../component/accueil/accueil.component.ts | 22 ++++ .../recipe-list/recipe-list.component.html | 77 +++++++++++ .../recipe-list/recipe-list.component.ts | 8 +- daidokoro/src/app/service/recipe.service.ts | 13 +- 11 files changed, 119 insertions(+), 172 deletions(-) delete mode 100644 daidokoro/src/app/Component/accueil/accueil.component.ts delete mode 100644 daidokoro/src/app/Component/recipe-list/recipe-list.component.html delete mode 100644 daidokoro/src/app/Model/recipe.model.ts delete mode 100644 daidokoro/src/app/Service/recipe.service.ts rename daidokoro/src/app/{Component => component}/accueil/accueil.component.html (89%) create mode 100644 daidokoro/src/app/component/accueil/accueil.component.ts create mode 100644 daidokoro/src/app/component/recipe-list/recipe-list.component.html rename daidokoro/src/app/{Component => component}/recipe-list/recipe-list.component.ts (70%) diff --git a/daidokoro/src/app/Component/accueil/accueil.component.ts b/daidokoro/src/app/Component/accueil/accueil.component.ts deleted file mode 100644 index 03a28cb..0000000 --- a/daidokoro/src/app/Component/accueil/accueil.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; -import {RecipeListComponent} from "../recipe-list/recipe-list.component"; - -@Component({ - selector: 'app-accueil', - standalone: true, - imports: [ - RecipeListComponent - ], - templateUrl: './accueil.component.html' -}) -export class AccueilComponent { - -} diff --git a/daidokoro/src/app/Component/recipe-list/recipe-list.component.html b/daidokoro/src/app/Component/recipe-list/recipe-list.component.html deleted file mode 100644 index c923d26..0000000 --- a/daidokoro/src/app/Component/recipe-list/recipe-list.component.html +++ /dev/null @@ -1,123 +0,0 @@ - - - - -
- Recette 1 -
-

Recette 1

-

Description courte de la recette 1.

- -
-
- -
- Recette 2 -
-

Recette 2

-

Description courte de la recette 2.

- - -
-
- -
- Recette 3 -
-

Recette 3

-

Description courte de la recette 3.

- -
-
- -
- Recette 4 -
-

Recette 4

-

Description courte de la recette 4.

- -
-
- -
- Recette 5 -
-

Recette 5

-

Description courte de la recette 5.

- -
-
- -
- Recette 6 -
-

Recette 6

-

Description courte de la recette 6.

- -
-
- - diff --git a/daidokoro/src/app/Model/recipe.model.ts b/daidokoro/src/app/Model/recipe.model.ts deleted file mode 100644 index 601b384..0000000 --- a/daidokoro/src/app/Model/recipe.model.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface Recipe { - name: string; - date: string; - image: string; - ingredients: { name: string; quantity: string }[]; -} diff --git a/daidokoro/src/app/Service/recipe.service.ts b/daidokoro/src/app/Service/recipe.service.ts deleted file mode 100644 index e61209a..0000000 --- a/daidokoro/src/app/Service/recipe.service.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Recipe } from '../Model/recipe.model'; - -@Injectable({ - providedIn: 'root' -}) -export class RecipeService { - private recipes: Recipe[] = JSON.parse(localStorage.getItem('recipes') || '[]'); - - getRecipes(): Recipe[] { - return this.recipes; - } - - addRecipe(recipe: Recipe): void { - this.recipes.push(recipe); - localStorage.setItem('recipes', JSON.stringify(this.recipes)); - } -} diff --git a/daidokoro/src/app/app.component.html b/daidokoro/src/app/app.component.html index 08872ad..82a24de 100644 --- a/daidokoro/src/app/app.component.html +++ b/daidokoro/src/app/app.component.html @@ -1,2 +1,2 @@ - + diff --git a/daidokoro/src/app/app.component.ts b/daidokoro/src/app/app.component.ts index c42e030..9def068 100644 --- a/daidokoro/src/app/app.component.ts +++ b/daidokoro/src/app/app.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import {RecipeFormComponent} from "./component/recipe-form/recipe-form.component"; -import {AccueilComponent} from "./Component/accueil/accueil.component"; +import {AccueilComponent} from "./component/accueil/accueil.component"; @Component({ selector: 'app-root', diff --git a/daidokoro/src/app/Component/accueil/accueil.component.html b/daidokoro/src/app/component/accueil/accueil.component.html similarity index 89% rename from daidokoro/src/app/Component/accueil/accueil.component.html rename to daidokoro/src/app/component/accueil/accueil.component.html index 45c1d10..86d5105 100644 --- a/daidokoro/src/app/Component/accueil/accueil.component.html +++ b/daidokoro/src/app/component/accueil/accueil.component.html @@ -28,13 +28,14 @@ } .content { padding: 20px; + display: flex; + gap: 20px; } .recipe-container { background-color: #bab6b6; color: black; padding: 20px; margin-top: 0; - margin-right: 50%; } .recipe-container h2 { font-size: 3em; @@ -56,6 +57,9 @@

Liste Recettes

+
+ +
diff --git a/daidokoro/src/app/component/accueil/accueil.component.ts b/daidokoro/src/app/component/accueil/accueil.component.ts new file mode 100644 index 0000000..4d1f7d3 --- /dev/null +++ b/daidokoro/src/app/component/accueil/accueil.component.ts @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; +import {RecipeListComponent} from "../recipe-list/recipe-list.component"; +import {RecipeFormComponent} from "../recipe-form/recipe-form.component"; +import {Recipe} from "../../model/recipe.model"; +import {RecipeService} from "../../service/recipe.service"; +@Component({ + selector: 'app-accueil', + standalone: true, + imports: [ + RecipeListComponent, + RecipeFormComponent + ], + templateUrl: './accueil.component.html' +}) +export class AccueilComponent { + + constructor(private recipeService: RecipeService){} + + onRecipeSubmitted(recipe : Recipe){ + this.recipeService.addRecipe(recipe); + } +} diff --git a/daidokoro/src/app/component/recipe-list/recipe-list.component.html b/daidokoro/src/app/component/recipe-list/recipe-list.component.html new file mode 100644 index 0000000..c1cf7cb --- /dev/null +++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.html @@ -0,0 +1,77 @@ + + + + +
+ Recette 1 +
+

{{recipe.$name}}

+

{{recipe.$description}}

é + +
+
+ + diff --git a/daidokoro/src/app/Component/recipe-list/recipe-list.component.ts b/daidokoro/src/app/component/recipe-list/recipe-list.component.ts similarity index 70% rename from daidokoro/src/app/Component/recipe-list/recipe-list.component.ts rename to daidokoro/src/app/component/recipe-list/recipe-list.component.ts index 2e08b25..b0e1d60 100644 --- a/daidokoro/src/app/Component/recipe-list/recipe-list.component.ts +++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.ts @@ -1,13 +1,15 @@ import { Component, OnInit } from '@angular/core'; -import { RecipeService } from '../../Service/recipe.service'; -import { Recipe } from '../../Model/recipe.model'; +import { RecipeService } from '../../service/recipe.service'; +import { Recipe } from '../../model/recipe.model'; import {NgOptimizedImage} from "@angular/common"; +import {NgFor} from "@angular/common"; @Component({ selector: 'app-recipe-list', templateUrl: './recipe-list.component.html', imports: [ - NgOptimizedImage + NgOptimizedImage, + NgFor ], standalone: true }) diff --git a/daidokoro/src/app/service/recipe.service.ts b/daidokoro/src/app/service/recipe.service.ts index e081757..7e9abff 100644 --- a/daidokoro/src/app/service/recipe.service.ts +++ b/daidokoro/src/app/service/recipe.service.ts @@ -1,15 +1,18 @@ import { Injectable } from '@angular/core'; -import {Recipe} from "../model/recipe.model"; -import {$RECEPIES} from "../data/recipe.stub"; +import { Recipe } from '../model/recipe.model'; @Injectable({ providedIn: 'root' }) export class RecipeService { + private recipes: Recipe[] = JSON.parse(localStorage.getItem('recipes') || '[]'); - constructor() { } + getRecipes(): Recipe[] { + return this.recipes; + } - getAll() : Recipe[]{ - return $RECEPIES; + addRecipe(recipe: Recipe): void { + this.recipes.push(recipe); + localStorage.setItem('recipes', JSON.stringify(this.recipes)); } }