diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 3be7a8a..751863a 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,10 +1,12 @@ -import { ApplicationConfig } from '@angular/core'; -import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; +import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { withComponentInputBinding } from '@angular/router'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes, withComponentInputBinding()), provideAnimationsAsync()], + providers: [ + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes, withComponentInputBinding()), + ], }; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index be6840b..775fbbb 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -7,4 +7,5 @@ export const routes: Routes = [ { path: 'recipes', component: RecipesComponent }, { path: 'recipe/add', component: RecipeAddComponent }, { path: 'recipe/:id', component: RecipeComponent }, + { path: 'recipe/:id/edit', component: RecipeAddComponent }, ]; diff --git a/src/app/recipe-add/recipe-add.component.html b/src/app/recipe-add/recipe-add.component.html index c7e1b36..9123e3d 100644 --- a/src/app/recipe-add/recipe-add.component.html +++ b/src/app/recipe-add/recipe-add.component.html @@ -1 +1,25 @@ -
recipe-add works!
+ diff --git a/src/app/recipe-add/recipe-add.component.ts b/src/app/recipe-add/recipe-add.component.ts index 0ca445c..5e52144 100644 --- a/src/app/recipe-add/recipe-add.component.ts +++ b/src/app/recipe-add/recipe-add.component.ts @@ -1,10 +1,77 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; +import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { Ingredient, IngredientEntry, Recipe } from '../../cookbook/type'; +import { RecipeService } from '../recipe.service'; @Component({ selector: 'app-recipe-add', standalone: true, - imports: [], + imports: [ReactiveFormsModule, FormsModule], templateUrl: './recipe-add.component.html', }) export class RecipeAddComponent { + createForm = this.formBuilder.group({ + name: ['', Validators.maxLength(256)], + description: ['', Validators.maxLength(512)], + selectedIngredient: '', + }); + + ingredientEntries: IngredientEntry[] = []; + ingredients: Ingredient[] = [{ + id: 1, + name: 'Paprika', + }]; + + #recipeId: number = -1; + @Input() + set recipeId(recipeId: string) { + if (recipeId === undefined) return; + this.#recipeId = parseInt(recipeId); + const recipe = this.recipes.get(this.#recipeId); + if (recipe === null) { + this.router.navigateByUrl('404'); + return; + } + this.createForm.patchValue({ + name: recipe.name, + description: recipe.description, + }); + } + + constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {} + + onSubmit(): void { + if (this.createForm.invalid) { + return; + } + const value = this.createForm.value; + const partial: Omit