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">
<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$/daidokoro/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/.gitignore" 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" />
<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" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -27,7 +23,7 @@
<component name="Git.Settings">
<option name="RECENT_BRANCH_BY_REPOSITORY">
<map>
<entry key="$PROJECT_DIR$" value="front" />
<entry key="$PROJECT_DIR$" value="master" />
</map>
</option>
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@ -47,7 +43,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;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;node.js.detected.package.eslint&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

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

@ -1,22 +1,117 @@
<style>
body {
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;
}
</style>
<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>
<div class="form-group" [class.invalid]="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
<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>
<div class="form-group" [class.invalid]="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
<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)">
<br>
<div *ngIf="imageBase64">
<img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;">
</div>
<br>
<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>
<input id="ingredient-quantity" type="number" formControlName="quantity" required>
@ -30,12 +125,14 @@
<option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
</select>
<button type="button" (click)="removeIngredient(i)">Remove</button>
<button type="button" class="remove-button" (click)="removeIngredient(i)">Remove</button>
</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>
<button type="submit" [disabled]="!recipeForm.valid">Submit</button>
<button type="submit" class="submit-button" [disabled]="!recipeForm.valid">Submit</button>
</form>
</div>
</body>

21
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 { 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 { Unity } from '../../model/unity';
import { IngredientService } from '../../service/ingredient.service';
@ -10,8 +10,7 @@ import {NgFor, NgIf} from "@angular/common";
selector: 'app-recipe-form',
standalone: true,
imports: [ReactiveFormsModule, NgFor, NgIf],
templateUrl: './recipe-form.component.html',
styleUrl: './recipe-form.component.css'
templateUrl: './recipe-form.component.html'
})
export class RecipeFormComponent {
@Output() formSubmitted = new EventEmitter<Recipe>();
@ -29,9 +28,9 @@ export class RecipeFormComponent {
}
recipeForm: FormGroup = this.formBuilder.group({
id: new FormControl('', { nonNullable: true }),
name: new FormControl('', { nonNullable: true }),
description: new FormControl('', { nonNullable: true }),
id: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
name: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
description: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
ingredients: this.formBuilder.array([this.newIngredient()]),
image: new FormControl('', {nonNullable: false})
});
@ -42,15 +41,16 @@ export class RecipeFormComponent {
newIngredient(): FormGroup {
return this.formBuilder.group({
quantity: new FormControl(0, { nonNullable: true }),
unit: new FormControl('', { nonNullable: true }),
ingredient: new FormControl('', { nonNullable: true })
quantity: new FormControl(0, { nonNullable: true, validators: [Validators.required] }),
unit: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
ingredient: new FormControl('', { nonNullable: true, validators: [Validators.required] })
});
}
addIngredient() {
this.ingredients.push(this.newIngredient());
}
removeIngredient(index: number) {
if (this.ingredients.length > 1) {
@ -92,8 +92,5 @@ export class RecipeFormComponent {
this.ingredients.clear()
this.addIngredient()
}
}
}

Write Preview
Loading…
Cancel
Save