fix: Jen s chybějícímí údaji -> k doplnění

feat: zobrazení aktuálního počtu jídel
feat: chuť a typ receptu

client/src/components/MealTemplateForm.tsx

@@ -1,8 +1,10 @@
-import { useState } from "react";
-import { Alert, Button, Form } from "react-bootstrap";
-import { MealTemplate, saveMealTemplate } from "../../../types";
+import { useId, useState } from "react";
+import { Alert, Button, Form, ToggleButton, ToggleButtonGroup } from "react-bootstrap";
+import { MealTemplate, RecipeFlavor, saveMealTemplate } from "../../../types";
+import { RECIPE_FLAVOR_NAMES } from "../enums";
 import { deriveRecipe, formatCalories, formatPrice, formatWeight, parseIntInput } from "../Utils";
 import SourceInput from "./SourceInput";
+import RecipeCategoryInput from "./RecipeCategoryInput";
 import RecipeIngredientsEditor, {
     DraftIngredient, emptyIngredient, toDraftIngredient, toIngredient,
 } from "./RecipeIngredientsEditor";
@@ -23,6 +25,8 @@ type Props = {
 const createForm = (template?: MealTemplate, meal?: Props['meal']) => ({
     name: meal?.name ?? template?.name ?? '',
     source: meal?.source ?? template?.source ?? '',
+    category: template?.category ?? '',
+    flavor: template?.flavor ?? RecipeFlavor.SLANE,
     note: template?.note ?? '',
     servings: template?.servings != null ? String(template.servings) : '',
     cookedWeight: template?.cookedWeight != null ? String(template.cookedWeight) : '',
@@ -38,6 +42,7 @@ const MealTemplateForm = ({ template, meal, onSaved, onCancel }: Readonly<Props>
         template?.ingredients?.length ? template.ingredients.map(toDraftIngredient) : [emptyIngredient()]);
     const [error, setError] = useState<string | undefined>();
     const [busy, setBusy] = useState(false);
+    const flavorId = useId();
 
     const update = (changes: Partial<ReturnType<typeof createForm>>) =>
         setForm(current => ({ ...current, ...changes }));
@@ -57,6 +62,8 @@ const MealTemplateForm = ({ template, meal, onSaved, onCancel }: Readonly<Props>
             ...(template ? { id: template.id } : {}),
             name: form.name.trim(),
             ...(form.source.trim() ? { source: form.source.trim() } : {}),
+            ...(form.category.trim() ? { category: form.category.trim() } : {}),
+            flavor: form.flavor,
             ...(form.note.trim() ? { note: form.note.trim() } : {}),
             ingredients: filledIngredients,
             servings: parseIntInput(form.servings),
@@ -98,6 +105,33 @@ const MealTemplateForm = ({ template, meal, onSaved, onCancel }: Readonly<Props>
                 </div>
             )}
 
+            <div className="row g-3 mb-3">
+                <div className="col-sm-7">
+                    <Form.Label>Typ</Form.Label>
+                    <RecipeCategoryInput value={form.category} onChange={category => update({ category })} />
+                </div>
+                <div className="col-sm-5">
+                    <Form.Label className="d-block">Chuť</Form.Label>
+                    <ToggleButtonGroup
+                        type="radio"
+                        name={flavorId}
+                        value={form.flavor}
+                        onChange={(flavor: RecipeFlavor) => update({ flavor })}
+                    >
+                        {Object.values(RecipeFlavor).map(flavor => (
+                            <ToggleButton
+                                key={flavor}
+                                id={`${flavorId}-${flavor}`}
+                                value={flavor}
+                                variant="outline-secondary"
+                            >
+                                {RECIPE_FLAVOR_NAMES[flavor]}
+                            </ToggleButton>
+                        ))}
+                    </ToggleButtonGroup>
+                </div>
+            </div>
+
             <fieldset className="meal-fieldset mb-3">
                 <legend>Suroviny</legend>
                 <RecipeIngredientsEditor ingredients={ingredients} onChange={setIngredients} />