dorian.hodin
/
Daidokoro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

formFront #6

Merged
dorian.hodin merged 4 commits from formFront into master 10 months ago
Conversation 0 Commits 4 Files Changed 4
4 changed files with 146 additions and 56 deletions
Show Stats Download Patch File Download Diff File

10
.idea/workspace.xml
Unescape View File

@ -6,11 +6,7 @@
<component name="ChangeListManager"> <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 Front">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/daidokoro/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/.gitignore" 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/accueil/accueil.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.component.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.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/component/recipe-list/recipe-list.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.ts" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -27,7 +23,7 @@
<component name="Git.Settings"> <component name="Git.Settings">
<option name="RECENT_BRANCH_BY_REPOSITORY"> <option name="RECENT_BRANCH_BY_REPOSITORY">
<map> <map>
<entry key="$PROJECT_DIR$" value="front" /> <entry key="$PROJECT_DIR$" value="master" />
</map> </map>
</option> </option>
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@ -47,7 +43,7 @@
&quot;keyToString&quot;: { &quot;keyToString&quot;: {
&quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;, &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;, &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;git-widget-placeholder&quot;: &quot;master&quot;, &quot;git-widget-placeholder&quot;: &quot;formFront&quot;,
&quot;last_opened_file_path&quot;: &quot;/home/dorian/Documents/but3/Angular/Daidokoro&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.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;, &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,

0
daidokoro/src/app/component/recipe-form/recipe-form.component.css
Unescape View File

157
daidokoro/src/app/component/recipe-form/recipe-form.component.html
Unescape View File

@ -1,41 +1,138 @@
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()"> <style>
<label for="id">ID: </label> body {
<input id="id" type="number" formControlName="id" required> font-family: Arial, sans-serif;
background-color: #bab6b6;
margin: 0;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.form-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 100%;
}
.form-container h2 {
margin-top: 0;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input,
.form-group select,
.form-group button {
width: 97%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group button {
background-color: black;
color: white;
border: none;
cursor: pointer;
}
.form-group button:hover {
background-color: #525259;
}
.form-group .remove-button {
background-color: red;
}
.form-group .remove-button:hover {
background-color: darkred;
}
.add-ingredient-button {
background-color: #4CAF50;
color: white;
}
.add-ingredient-button:hover {
background-color: #45a049;
}
.submit-button {
background-color: black;
color: white;
}
.submit-button:hover {
background-color: #525259;
}
.error-message {
color: red;
font-size: 0.9em;
margin-top: 5px;
}
.form-group.invalid input,
.form-group.invalid select {
border-color: red;
}
<label for="name">Name: </label> </style>
<input id="name" type="text" formControlName="name" required> <body>
<div class="form-container">
<h2>Ajouter une Recette</h2>
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
<div class="form-group" [class.invalid]="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched">
<label for="id">ID: </label>
<input id="id" type="number" formControlName="id" required>
<div class="error-message" *ngIf="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched">
L'ID est requis.
</div>
</div>
<label for="description">Description: </label> <div class="form-group" [class.invalid]="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
<input id="description" type="text" formControlName="description" required> <label for="name">Name: </label>
<input id="name" type="text" formControlName="name" required>
<div class="error-message" *ngIf="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
Le nom est requis.
</div>
</div>
<label for="image">Image: </label> <div class="form-group" [class.invalid]="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
<input id="image" type="file" (change)="onFileChange($event)"> <label for="description">Description: </label>
<input id="description" type="text" formControlName="description" required>
<div class="error-message" *ngIf="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
La description est requise.
</div>
</div>
<label for="image">Image: </label>
<input id="image" type="file" (change)="onFileChange($event)">
<div *ngIf="imageBase64"> <br>
<img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;"> <div *ngIf="imageBase64">
</div> <img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;">
</div>
<br>
<div formArrayName="ingredients"> <div formArrayName="ingredients">
<div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i"> <div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i" class="form-group">
<label for="ingredient-quantity">Quantity:</label> <label for="ingredient-quantity">Quantity:</label>
<input id="ingredient-quantity" type="number" formControlName="quantity" required> <input id="ingredient-quantity" type="number" formControlName="quantity" required>
<label for="ingredient-unit">Unit:</label> <label for="ingredient-unit">Unit:</label>
<select id="ingredient-unit" formControlName="unit" required> <select id="ingredient-unit" formControlName="unit" required>
<option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option> <option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
</select> </select>
<label for="ingredient-name">Ingredient:</label> <label for="ingredient-name">Ingredient:</label>
<select id="ingredient-name" formControlName="ingredient" required> <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> </select>
<button type="button" (click)="removeIngredient(i)">Remove</button> <button type="button" class="remove-button" (click)="removeIngredient(i)">Remove</button>
</div>
</div> </div>
</div>
<button type="button" (click)="addIngredient()">Add Ingredient</button> <button type="button" class="add-ingredient-button" (click)="addIngredient()">Add Ingredient</button>
<p>Complete the form to enable the button.</p> <p>Complete the form to enable the button.</p>
<button type="submit" [disabled]="!recipeForm.valid">Submit</button> <button type="submit" class="submit-button" [disabled]="!recipeForm.valid">Submit</button>
</form> </form>
</div>
</body>

35
daidokoro/src/app/component/recipe-form/recipe-form.component.ts
Unescape View File

@ -1,6 +1,6 @@
import {Component, EventEmitter, Output} from '@angular/core'; import { Component, EventEmitter, Output } from '@angular/core';
import {Recipe} from "../../model/recipe.model"; import { Recipe } from "../../model/recipe.model";
import {FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder} from "@angular/forms"; import { FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder, Validators } from "@angular/forms";
import { Ingredient } from '../../model/ingredient.model'; import { Ingredient } from '../../model/ingredient.model';
import { Unity } from '../../model/unity'; import { Unity } from '../../model/unity';
import { IngredientService } from '../../service/ingredient.service'; import { IngredientService } from '../../service/ingredient.service';
@ -10,8 +10,7 @@ import {NgFor, NgIf} from "@angular/common";
selector: 'app-recipe-form', selector: 'app-recipe-form',
standalone: true, standalone: true,
imports: [ReactiveFormsModule, NgFor, NgIf], imports: [ReactiveFormsModule, NgFor, NgIf],
templateUrl: './recipe-form.component.html', templateUrl: './recipe-form.component.html'
styleUrl: './recipe-form.component.css'
}) })
export class RecipeFormComponent { export class RecipeFormComponent {
@Output() formSubmitted = new EventEmitter<Recipe>(); @Output() formSubmitted = new EventEmitter<Recipe>();
@ -19,7 +18,7 @@ export class RecipeFormComponent {
unity = Object.values(Unity); unity = Object.values(Unity);
imageBase64: string | null = null; imageBase64: string | null = null;
constructor(private formBuilder: FormBuilder, private ingredientService : IngredientService){} constructor(private formBuilder: FormBuilder, private ingredientService: IngredientService) { }
ngOnInit(): void { ngOnInit(): void {
this.ingredientService.getAll().subscribe(ingredients => { this.ingredientService.getAll().subscribe(ingredients => {
@ -29,28 +28,29 @@ export class RecipeFormComponent {
} }
recipeForm: FormGroup = this.formBuilder.group({ recipeForm: FormGroup = this.formBuilder.group({
id: new FormControl('', { nonNullable: true }), id: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
name: new FormControl('', { nonNullable: true }), name: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
description: new FormControl('', { nonNullable: true }), description: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
ingredients: this.formBuilder.array([this.newIngredient()]), ingredients: this.formBuilder.array([this.newIngredient()]),
image: new FormControl('', {nonNullable: false}) image: new FormControl('', {nonNullable: false})
}); });
get ingredients():FormArray{ get ingredients(): FormArray {
return this.recipeForm.get('ingredients') as FormArray; return this.recipeForm.get('ingredients') as FormArray;
} }
newIngredient(): FormGroup{ newIngredient(): FormGroup {
return this.formBuilder.group({ return this.formBuilder.group({
quantity: new FormControl(0, { nonNullable: true }), quantity: new FormControl(0, { nonNullable: true, validators: [Validators.required] }),
unit: new FormControl('', { nonNullable: true }), unit: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
ingredient: new FormControl('', { nonNullable: true }) ingredient: new FormControl('', { nonNullable: true, validators: [Validators.required] })
}); });
} }
addIngredient() { addIngredient() {
this.ingredients.push(this.newIngredient()); this.ingredients.push(this.newIngredient());
} }
removeIngredient(index: number) { removeIngredient(index: number) {
if (this.ingredients.length > 1) { if (this.ingredients.length > 1) {
@ -74,13 +74,13 @@ export class RecipeFormComponent {
} }
onSubmit() { onSubmit() {
if(this.recipeForm.valid){ if (this.recipeForm.valid) {
const recipe: Recipe = { const recipe: Recipe = {
$id: parseInt(this.recipeForm.value.id!), $id: parseInt(this.recipeForm.value.id!),
$name: this.recipeForm.value.name!, $name: this.recipeForm.value.name!,
$description: this.recipeForm.value.description!, $description: this.recipeForm.value.description!,
$createdAt: new Date(), $createdAt: new Date(),
$ingredients: this.recipeForm.value.ingredients!.map((ingredient : any) => ({ $ingredients: this.recipeForm.value.ingredients!.map((ingredient: any) => ({
quantity: ingredient.quantity, quantity: ingredient.quantity,
unit: ingredient.unit, unit: ingredient.unit,
ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient) ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient)
@ -92,8 +92,5 @@ export class RecipeFormComponent {
this.ingredients.clear() this.ingredients.clear()
this.addIngredient() this.addIngredient()
} }
} }
} }

Write Preview
Loading…
Cancel
Save