add submit button with mat angular

Reviewed-on: #4

src/app/recipe-add/recipe-add.component.html

@@ -3,31 +3,32 @@
         <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>
+        <input hidden (change)="onFileSelected($event)" #fileInput type="file">
+        <span class="file-name">{{ selectedFilename }}</span>
+    </div>
     <div>
         <label for="description">Ingrédients</label>
-
-        <mat-form-field>
-            <mat-label>Ingrédients</mat-label>
-            <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 type="button" (click)="onAddIngredient()">Add</button>
-
-
-
-
         <ul>
             @for (ingredient of ingredientEntries; track ingredient.idIngredient) {
                 <li>
@@ -38,7 +39,14 @@
                 </li>
             }
         </ul>
+        <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-stroked-button type="submit">SUBMIT</button>
+    <button mat-flat-button class="button" type="submit">{{ recipeId === -1 ? 'Ajouter' : 'Éditer' }}</button>
 </form>

src/app/recipe-add/recipe-add.component.ts

@@ -3,34 +3,37 @@ import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angu
 import { Router } from '@angular/router';
 import { Ingredient, IngredientEntry, Recipe } from '../../cookbook/type';
 import { RecipeService } from '../recipe.service';
-import {MatSelectModule} from '@angular/material/select';
-import {MatInputModule} from '@angular/material/input';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatButtonModule} from '@angular/material/button';
+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, MatSelectModule, MatButtonModule],
+  imports: [ReactiveFormsModule, FormsModule, MatFormFieldModule, MatOption, MatSelect, MatInputModule, MatButton, MatFormFieldModule],
   templateUrl: './recipe-add.component.html',
 })
 export class RecipeAddComponent {
   createForm = this.formBuilder.group({
     name: ['', Validators.maxLength(256)],
     description: ['', Validators.maxLength(512)],
+    image: '',
     selectedIngredient: '',
   });
 
   ingredientEntries: IngredientEntry[] = [];
   ingredients: Ingredient[] = [];
 
+  selectedFilename: string = '';
   getIngredient(n: number): Ingredient {
     return this.ingredients.find(v => v.id === n)!
   }
 
   #recipeId: number = -1;
   @Input()
-  set recipeId(recipeId: string) {
+  set id(recipeId: string) {
     if (recipeId === undefined) return;
     this.#recipeId = parseInt(recipeId);
     const recipe = this.recipes.get(this.#recipeId);
@@ -43,6 +46,9 @@ export class RecipeAddComponent {
       description: recipe.description,
     });
   }
+  get recipeId() {
+    return this.#recipeId;
+  }
 
   constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {
     this.ingredients = this.recipes.getAllIngredients();
@@ -56,7 +62,7 @@ export class RecipeAddComponent {
     const partial: Omit<Recipe, 'id'> = {
       name: value.name!,
       description: value.description!,
-      image: '',
+      image: value.image ?? '',
       ingredients: this.ingredientEntries,
     };
     if (this.#recipeId === -1) {
@@ -76,16 +82,26 @@ export class RecipeAddComponent {
     }
     const id = parseInt(value.selectedIngredient!);
     if (this.ingredientEntries.find((ingredient) => ingredient.idIngredient === id)) {
-      console.log("oh");
       return;
     }
-    console.log("ah");
-    console.log(this.ingredients.find(v => v.id === id)?.name)
-    console.log(this.ingredients);
     this.ingredientEntries.push({
       idIngredient: id,
       idRecipe: -1,
       quantity: 1,
     });
   }
+
+  onFileSelected(event: Event): void {
+    const file = (event.target as HTMLInputElement).files![0];
+    if (file) {
+      this.selectedFilename = file.name;
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        this.createForm.patchValue({
+          image: event.target!.result?.toString()
+        });
+      }
+      reader.readAsDataURL(file);
+    }
+  }
 }

src/app/recipes/recipes.component.html

@@ -26,7 +26,7 @@
       <ng-container matColumnDef="image">
         <th mat-header-cell *matHeaderCellDef> image </th>
         <td mat-cell *matCellDef="let element">
-          <img src="https://placehold.co/200x200">
+          <img [src]="element.image || 'https://placehold.co/200x200'" [alt]="element.image ? element.name : ''" width="200" height="200">
         </td>
       </ng-container>