clement.freville2
/
tiramisu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'Enhance details style' (#5) from detail_interface into main

Browse Source 
Reviewed-on: #5
pull/6/head
Bastien OLLIER 1 week ago
parent e87e754f92 45d11a8a0e
commit 941ee5910d
5 changed files with 105 additions and 35 deletions
Show Stats Download Patch File Download Diff File

58
src/app/recipe-add/recipe-add.component.html
Unescape View File

@ -1,21 +1,26 @@
<form [formGroup]="createForm" (ngSubmit)="onSubmit()">
<mat-form-field>
<label for="name">Nom</label>
<input matInput id="name" type="text" formControlName="name" required>
@if (createForm.controls.name.errors?.['minlength']) {
<mat-error>Le nom doit contenir au moins {{ createForm.controls.name.errors!['minlength'].requiredLength }} caractères.</mat-error>
}
@if (createForm.controls.name.errors?.['maxlength']) {
<mat-error>Le nom ne peut dépasser {{ createForm.controls.name.errors!['maxlength'].requiredLength }} caractères.</mat-error>
}
</mat-form-field>
<mat-form-field>
<label for="description">Description</label>
<textarea matInput id="description" type="text" formControlName="description" required></textarea>
@if (createForm.controls.description.errors?.['maxlength']) {
<mat-error>La description ne peut dépasser {{ createForm.controls.description.errors!['maxlength'].requiredLength }} caractères.</mat-error>
}
</mat-form-field>
<div>
<mat-form-field>
<label for="name">Nom</label>
<input matInput id="name" type="text" formControlName="name" required>
@if (createForm.controls.name.errors?.['minlength']) {
<mat-error>Le nom doit contenir au moins {{ createForm.controls.name.errors!['minlength'].requiredLength }} caractères.</mat-error>
}
@if (createForm.controls.name.errors?.['maxlength']) {
<mat-error>Le nom ne peut dépasser {{ createForm.controls.name.errors!['maxlength'].requiredLength }} caractères.</mat-error>
}
</mat-form-field>
</div>
<div>
<mat-form-field>
<label for="description">Description</label>
<textarea matInput id="description" type="text" formControlName="description" required></textarea>
@if (createForm.controls.description.errors?.['maxlength']) {
<mat-error>La description ne peut dépasser {{ createForm.controls.description.errors!['maxlength'].requiredLength }} caractères.</mat-error>
}
</mat-form-field>
</div>
<div>
<label for="image">Image</label>
<button type="button" mat-raised-button (click)="fileInput.click()">Téléverser</button>
@ -26,14 +31,21 @@
<label for="description">Ingrédients</label>
<ul>
@for (ingredient of ingredientEntries; track ingredient.idIngredient) {
<li>#{{ ingredient.idIngredient }} <input [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}"></li>
<li>
{{ getIngredient(ingredient.idIngredient).name }}
<mat-form-field>
<input matInput [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}">
</mat-form-field>
</li>
}
</ul>
<select id="selectedIngredient" formControlName="selectedIngredient">
@for (ingredient of ingredients; track ingredient.id) {
<option [ngValue]="ingredient.id">{{ ingredient.name }}</option>
}
</select>
<mat-form-field>
<mat-select matInput id="selectedIngredient" formControlName="selectedIngredient">
@for (ingredient of ingredients; track ingredient.id) {
<mat-option value="{{ingredient.id}}">{{ ingredient.name }}</mat-option>
}
</mat-select>
</mat-form-field>
<button mat-button type="button" (click)="onAddIngredient()">Add</button>
</div>
<button mat-flat-button class="button" type="submit">{{ recipeId === -1 ? 'Ajouter' : 'Éditer' }}</button>

18
src/app/recipe-add/recipe-add.component.ts
Unescape View File

@ -6,11 +6,13 @@ import { RecipeService } from '../recipe.service';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButton } from '@angular/material/button';
import { MatOption } from '@angular/material/core';
import { MatSelect } from '@angular/material/select';
@Component({
selector: 'app-recipe-add',
standalone: true,
imports: [ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatButton, MatFormFieldModule],
imports: [ReactiveFormsModule, FormsModule, MatFormFieldModule, MatOption, MatSelect, MatInputModule, MatButton, MatFormFieldModule],
templateUrl: './recipe-add.component.html',
})
export class RecipeAddComponent {
@ -22,12 +24,12 @@ export class RecipeAddComponent {
});
ingredientEntries: IngredientEntry[] = [];
ingredients: Ingredient[] = [{
id: 1,
name: 'Paprika',
}];
ingredients: Ingredient[] = [];
selectedFilename: string = '';
getIngredient(n: number): Ingredient {
return this.ingredients.find(v => v.id === n)!
}
#recipeId: number = -1;
@Input()
@ -48,7 +50,9 @@ export class RecipeAddComponent {
return this.#recipeId;
}
constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {}
constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {
this.ingredients = this.recipes.getAllIngredients();
}
onSubmit(): void {
if (this.createForm.invalid) {
@ -71,6 +75,8 @@ export class RecipeAddComponent {
onAddIngredient(): void {
const value = this.createForm.value;
console.log(value);
if (!value.selectedIngredient) {
return;
}

20
src/app/recipe.service.ts
Unescape View File

@ -1,12 +1,15 @@
import { Injectable } from '@angular/core';
import { Recipe } from '../cookbook/type';
import { Ingredient, Recipe } from '../cookbook/type';
@Injectable({
providedIn: 'root',
})
export class RecipeService {
#recipes: Recipe[] = [
{ id: 0, name: 'crepe1', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
{ id: 0, name: 'crepe1', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [
{idIngredient:1,idRecipe:0,quantity:10},
{idIngredient:2,idRecipe:0,quantity:15}
] },
{ id: 1, name: 'crepe2', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
{ id: 2, name: 'crepe3', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
{ id: 3, name: 'crepe4', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
@ -22,14 +25,27 @@ export class RecipeService {
{ id: 13, name: 'crepe14', description: 'La meilleure recette de pâte à crêpes', image: '', ingredients: [] },
];
#ingredients: Ingredient[] = [
{ id:1, name:'Sucre'},
{ id:2, name:'Farine'}
]
getAll(): Recipe[] {
return this.#recipes;
}
getAllIngredients(): Ingredient[] {
return this.#ingredients;
}
get(id: number): Recipe | null {
return this.#recipes.find((recipe) => recipe.id === id) || null;
}
getIngredientById(id: number): Ingredient | null {
return this.#ingredients.find((ingredient) => ingredient.id === id) || null;
}
add(recipe: Omit<Recipe, 'id'>): void {
const id = this.#recipes.length ? Math.max(...this.#recipes.map((recipe) => recipe.id)) + 1 : 1;
this.#recipes.push({

41
src/app/recipe/recipe.component.html
Unescape View File

@ -1,4 +1,39 @@
<p>{{recipe.id}}</p>
<p>{{recipe.name}}</p>
<p>{{recipe.description}}</p>
<style>
.container {
background-color: #fff;
position: relative;
display: grid;
grid-template-columns: 300px 600px;
}
.container img {
width: 300px;
height: 300px;
}
.container_text {
padding: 40px 40px 0;
}
</style>
<div class="container">
<img ng-if="recipe.image" src="https://placehold.co/200x200" alt={{recipe.name}}/>
<div class="container_text">
<h1>{{recipe.name}}</h1>
<p>
{{recipe.description}}
</p>
<h3>Ingredients</h3>
<p>
<li *ngFor="let ingredient of recipe.ingredients">
{{ this.recipes.getIngredientById(ingredient.idIngredient)?.name }}: {{ ingredient.quantity }}g
</li>
</p>
</div>
</div>

3
src/app/recipe/recipe.component.ts
Unescape View File

@ -1,11 +1,12 @@
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Recipe } from '../../cookbook/type';
import { RecipeService } from '../recipe.service';
@Component({
selector: 'app-recipe',
standalone: true,
imports: [],
imports: [CommonModule],
templateUrl: './recipe.component.html',
})
export class RecipeComponent {

Write Preview
Loading…
Cancel
Save