araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

added ingredient group editor

Browse source
This commit is contained in:
Anika Raemer 2025-09-07 20:44:26 +02:00
parent 37057f19f1
commit d4e8a4d09a
7 changed files with 154 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/components/RecipeEditor.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react"
import type { Recipe } from "../types/recipe"
import type { Ingredient } from "../types/ingredient"
import {IngredientListEditor} from "./IngredientListEditor"
import type { IngredientGroup } from "../types/ingredientGroup"
import { IngredientGroupListEditor } from "./IngredientGroupListEditor"
type RecipeEditorProps = {
recipe: Recipe
@ -12,6 +12,7 @@ type RecipeEditorProps = {
/**
* Editor component for managing a recipe, including title,
* ingredients (with amount, unit, name), instructions, and image URL.
* @todo adapt to ingredientGroups!
*/
export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorProps) {
/** draft of the new recipe */
@ -23,8 +24,8 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
* Update ingredients
* @param ingredients new ingredients
*/
const updateIngredients = (ingredients: Ingredient[]) => {
setDraft({ ...draft, ingredients })
const updateIngredientGroupList = (ingredientGroupList: IngredientGroup[]) => {
setDraft({ ...draft, ingredientGroupList })
}
/**
* Validate recipe
@ -40,7 +41,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
// the incredient list must not be empty
// @todo enhance validation and visualization of ingredient errors
if (!draft.ingredients || draft.ingredients.length === 0) {
if (!draft.ingredientGroupList || draft.ingredientGroupList.length === 0) {
newErrors.ingredients = true
}
@ -99,9 +100,9 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
</div>
{/* Ingredient List - @todo better visualization of errors! */}
<div className={errors.ingredients ? "border border-red-500 rounded p-2" : ""}>
<IngredientListEditor
ingredients={draft.ingredients}
onChange={updateIngredients}
<IngredientGroupListEditor
ingredientGroupList={draft.ingredientGroupList}
onChange={updateIngredientGroupList}
/>
</div>