From 4f43477810362b027e175c2bddbe6cbf84e9b643 Mon Sep 17 00:00:00 2001
From: dorian <dorian.hodin@etu.uca.fr>
Date: Wed, 26 Jun 2024 13:58:01 +0200
Subject: [PATCH] Adding Form Front, and verification of empty field or not

---
 .idea/workspace.xml                           |  40 +++--
 .../recipe-form/recipe-form.component.css     |   0
 .../recipe-form/recipe-form.component.html    | 156 ++++++++++++++----
 .../recipe-form/recipe-form.component.ts      |  44 +++--
 4 files changed, 168 insertions(+), 72 deletions(-)
 delete mode 100644 daidokoro/src/app/component/recipe-form/recipe-form.component.css

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index c7beb9b..75e152f 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,11 +6,9 @@
   <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.css" beforeDir="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" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -27,7 +25,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$" />
@@ -43,22 +41,22 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &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;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;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.lookFeel&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;/home/dorian/Documents/but3/Angular/Daidokoro/daidokoro/node_modules/typescript/lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ASKED_ADD_EXTERNAL_FILES": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "git-widget-placeholder": "formFront",
+    "last_opened_file_path": "/home/dorian/Documents/but3/Angular/Daidokoro",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "settings.editor.selected.configurable": "preferences.lookFeel",
+    "ts.external.directory.path": "/home/dorian/Documents/but3/Angular/Daidokoro/daidokoro/node_modules/typescript/lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/daidokoro/public" />
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.css b/daidokoro/src/app/component/recipe-form/recipe-form.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.html b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
index 83cc959..fe8dcaf 100644
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.html
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
@@ -1,34 +1,134 @@
-<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
-  <label for="id">ID: </label>
-  <input id="id" type="number" formControlName="id">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Recipe Form</title>
+  <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;
+    }
 
-  <label for="name">Name: </label>
-  <input id="name" type="text" formControlName="name">
+  </style>
+</head>
+<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>
+      <div formArrayName="ingredients">
+        <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>
 
-  <label for="description">Description: </label>
-  <input id="description" type="text" formControlName="description">
+          <label for="ingredient-unit">Unit:</label>
+          <select id="ingredient-unit" formControlName="unit" required>
+            <option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
+          </select>
 
-  <div formArrayName="ingredients">
-    <div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i">
-      <label for="ingredient-quantity">Quantity:</label>
-      <input id="ingredient-quantity" type="number" formControlName="quantity">
+          <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>
+          </select>
 
-      <label for="ingredient-unit">Unit:</label>
-      <select id="ingredient-unit" formControlName="unit">
-        <option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
-      </select>
+          <button type="button" class="remove-button" (click)="removeIngredient(i)">Remove</button>
+        </div>
+      </div>
+      <button type="button" class="add-ingredient-button" (click)="addIngredient()">Add Ingredient</button>
 
-      <label for="ingredient-name">Ingredient:</label>
-      <select id="ingredient-name" formControlName="ingredient">
-        <option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
-      </select>
-
-      <button type="button" (click)="removeIngredient(i)">Remove</button>
-    </div>
+      <p>Completez le formulaire en entier pour pouvoir créer la recette.</p>
+      <button type="submit" class="submit-button" [disabled]="!recipeForm.valid">Submit</button>
+    </form>
   </div>
-
-  <button type="button" (click)="addIngredient()">Add Ingredient</button>
-
-  <p>Complete the form to enable the button.</p>
-  <button type="submit" [disabled]="!recipeForm.valid">Submit</button>
-</form>
+</body>
+</html>
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
index 0ba7fc2..ac87cc7 100644
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts
@@ -1,23 +1,23 @@
-import {Component, EventEmitter, Output} from '@angular/core';
-import {Recipe} from "../../model/recipe.model";
-import {FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder} from "@angular/forms";
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Recipe } from "../../model/recipe.model";
+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';
-import {NgFor} from "@angular/common";
+import {NgFor, NgIf} from "@angular/common";
+
 @Component({
   selector: 'app-recipe-form',
   standalone: true,
-  imports: [ReactiveFormsModule,NgFor],
-  templateUrl: './recipe-form.component.html',
-  styleUrl: './recipe-form.component.css'
+  imports: [ReactiveFormsModule, NgFor, NgIf],
+  templateUrl: './recipe-form.component.html'
 })
 export class RecipeFormComponent {
   @Output() formSubmitted = new EventEmitter<Recipe>();
   ingredientsList: Ingredient[] = [];
   unity = Object.values(Unity);
 
-  constructor(private formBuilder: FormBuilder, private ingredientService : IngredientService){}
+  constructor(private formBuilder: FormBuilder, private ingredientService: IngredientService) { }
 
   ngOnInit(): void {
     this.ingredientService.getAll().subscribe(ingredients => {
@@ -26,50 +26,48 @@ 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([])
   });
 
-  get ingredients():FormArray{
+  get ingredients(): FormArray {
     return this.recipeForm.get('ingredients') as FormArray;
   }
 
-  newIngredient(): FormGroup{
+  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) {
     this.ingredients.removeAt(index);
   }
 
   onSubmit() {
-    if(this.recipeForm.valid){
+    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.recipeForm.value.ingredients!.map((ingredient : any) => ({
+        $ingredients: this.recipeForm.value.ingredients!.map((ingredient: any) => ({
           quantity: ingredient.quantity,
           unit: ingredient.unit,
           ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient)
         }))
       };
       this.formSubmitted.emit(recipe);
-      this.recipeForm.reset()
-      this.ingredients.clear()
+      this.recipeForm.reset();
+      this.ingredients.clear();
     }
-
   }
-
-
 }