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

Refactoring

Browse source
This commit is contained in:
araemer 2025-10-21 09:08:08 +02:00
parent 34bbaa9df4
commit 9b53f6e676
11 changed files with 501 additions and 515 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/App.css
View file

@ -21,15 +21,15 @@
} }
.content-title { .content-title {
@apply text-3xl font-black mb-8 text-blue-900; @apply text-3xl font-black pb-6 text-blue-900;
} }
.section-heading { .section-heading {
@apply text-xl font-bold mb-2; @apply text-xl font-bold pb-2 pt-4;
} }
.subsection-heading { .subsection-heading {
@apply font-semibold mb-2 mt-4; @apply font-semibold pb-2 pt-4;
} }
/* icons */ /* icons */
@ -50,7 +50,7 @@
/* buttons */ /* buttons */
.basic-button { .basic-button {
@apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap; @apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed;
} }
.default-button-bg { .default-button-bg {
@ -105,7 +105,7 @@
} }
.ingredient-group-card { .ingredient-group-card {
@apply py-4 border-b border-gray-400; @apply pb-4 border-b border-gray-400;
} }
.circular-container { .circular-container {

55
frontend/src/components/basics/Button.tsx
View file

@ -1,35 +1,38 @@
import { defaultIconSize } from "./SvgIcon"; import {defaultIconSize} from "./SvgIcon";
import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions"; import {type BasicButtonProps, ButtonType} from "./BasicButtonDefinitions";
type ButtonProps = BasicButtonProps & { type ButtonProps = BasicButtonProps & {
onClick: () => void; onClick: () => void;
disabled?: boolean;
}; };
/** /**
* Button component. Styles are defined in BasicButtonDefinitions.ts * Button component. Styles are defined in BasicButtonDefinitions.ts
*/ */
export default function Button({ export default function Button({
onClick, onClick,
icon: Icon, icon: Icon,
text, text,
buttonType = ButtonType.DefaultButton, buttonType = ButtonType.DefaultButton,
className = "", className = "",
...props disabled = false,
}: ButtonProps) { ...props
return ( }: ButtonProps) {
<button return (
className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`} <button
onClick={onClick} className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
{...props} onClick={onClick}
> disabled={disabled}
<div className="flex items-center gap-2"> {...props}
{Icon && ( >
<Icon <div className="flex items-center gap-2">
size={defaultIconSize} {Icon && (
/> <Icon
)} size={defaultIconSize}
{text} />
</div> )}
</button> {text}
); </div>
</button>
);
} }

8
frontend/src/components/basics/NumberedListItem.tsx
View file

@ -1,6 +1,6 @@
type NumberedListItemProps = { type NumberedListItemProps = {
/** Number to be displayed in front of text */ /** Index of the element. Index + 1 is displayed in circle */
elementNumber: number; index: number;
/** List item text */ /** List item text */
text: string; text: string;
} }
@ -10,11 +10,11 @@ type NumberedListItemProps = {
* @param elementNumber Number to be displayed * @param elementNumber Number to be displayed
* @param text Text to be displayed * @param text Text to be displayed
*/ */
export function NumberedListItem({elementNumber, text}: NumberedListItemProps) { export function NumberedListItem({index, text}: NumberedListItemProps) {
return <li className="flex items-start gap-4"> return <li className="flex items-start gap-4">
{/* Step number circle */} {/* Step number circle */}
<div className="circular-container"> <div className="circular-container">
{elementNumber} {index + 1}
</div> </div>
{/* Step text */} {/* Step text */}

125
frontend/src/components/recipes/IngredientGroupListEditor.tsx
View file

@ -2,85 +2,68 @@
* Editor for ingredient groups * Editor for ingredient groups
*/ */
import type { IngredientModel } from "../../models/IngredientModel" import type {IngredientModel} from "../../models/IngredientModel"
import type { IngredientGroupModel } from "../../models/IngredientGroupModel" import type {IngredientGroupModel} from "../../models/IngredientGroupModel"
import Button from "../basics/Button" import Button from "../basics/Button"
import { IngredientListEditor } from "./IngredientListEditor" import {IngredientListEditor} from "./IngredientListEditor"
import { Plus } from "lucide-react" import {Plus} from "lucide-react"
import { ButtonType } from "../basics/BasicButtonDefinitions" import {ButtonType} from "../basics/BasicButtonDefinitions"
type IngredientGroupListEditorProps = { type IngredientGroupListEditorProps = {
ingredientGroupList: IngredientGroupModel[] ingredientGroupList: IngredientGroupModel[]
onChange: (ingredientGroupList: IngredientGroupModel[]) => void onChange: (ingredientGroupList: IngredientGroupModel[]) => void
} }
export function IngredientGroupListEditor({ ingredientGroupList, onChange }: IngredientGroupListEditorProps) { export function IngredientGroupListEditor({ingredientGroupList, onChange}: IngredientGroupListEditorProps) {
const handleUpdate = (index: number, field: keyof IngredientGroupModel, value: string|IngredientModel[] ) => { const handleUpdate = (index: number, field: keyof IngredientGroupModel, value: string | IngredientModel[]) => {
const updated = ingredientGroupList.map((ingGrp, i) => const updated = ingredientGroupList.map((ingGrp, i) =>
i === index ? { ...ingGrp, [field]: value} : ingGrp i === index ? {...ingGrp, [field]: value} : ingGrp
) )
onChange(updated) onChange(updated)
} }
const updateIngredientList = (index: number, ingredientList: IngredientModel[]) => { const updateIngredientList = (index: number, ingredientList: IngredientModel[]) => {
handleUpdate(index, "ingredientList", ingredientList) handleUpdate(index, "ingredientList", ingredientList)
} }
const handleAdd = () => { const handleAdd = () => {
onChange([...ingredientGroupList, { title: "", ingredientList: [] }]) onChange([...ingredientGroupList, {title: "", ingredientList: []}])
} }
const handleRemove = (index: number) => { const handleRemove = (index: number) => {
onChange(ingredientGroupList.filter((_, i) => i !== index)) onChange(ingredientGroupList.filter((_, i) => i !== index))
} }
return ( return (
<div> <div>
{/* remove bottom margin from this headings the group card has a top padding */} <h2 className="section-heading">Zutaten</h2>
<h3 className="subsection-heading" >Ingredient Groups</h3> <div>
{ingredientGroupList.map((ingGrp, index) => ( {ingredientGroupList.map((ingGrp, index) => (
<div key={index} className="ingredient-group-card mb-4"> <div key={index} className="ingredient-group-card mb-4">
<div className="horizontal-input-group columns-2"> <div className="horizontal-input-group columns-2">
<input <input
className="input-field" className="input-field"
placeholder="Group title (Optional)" placeholder="Titel (Optional)"
value = {ingGrp.title} value={ingGrp.title}
onChange={ e => handleUpdate(index, "title", e.target.value)} onChange={e => handleUpdate(index, "title", e.target.value)}
/> />
<Button
onClick={() => handleRemove(index)}
text={"Gruppe entfernen"}
buttonType={ButtonType.DarkButton}
/>
</div>
<IngredientListEditor
ingredients={ingGrp.ingredientList}
onChange={list => updateIngredientList(index, list)}
/>
</div>
))}
</div>
<Button <Button
onClick={() => handleRemove(index)} onClick={handleAdd}
text={"Remove Group"} icon={Plus}
buttonType={ButtonType.DarkButton} text={"Gruppe hinzufügen"}
buttonType={ButtonType.PrimaryButton}
/> />
</div>
<IngredientListEditor
ingredients={ingGrp.ingredientList}
onChange={list => updateIngredientList(index,list)}
/>
</div> </div>
))} )
<Button
onClick={handleAdd}
icon={Plus}
text={"Add Ingredient Group"}
buttonType={ButtonType.PrimaryButton}
/>
</div>
)
} }
/*
<button
type="button"
className="primary-button mt-4"
onClick={handleAdd}
>
<div
className="flex col-2 gap-2 -ml-1"
>
<SvgIcon
icon={Icon.Plus}
color={"text-gray-600"}
/>
Add Ingredient Group
</div>
</button>*/

111
frontend/src/components/recipes/IngredientListEditor.tsx
View file

@ -1,70 +1,69 @@
import { Plus, X } from "lucide-react" import {Plus, X} from "lucide-react"
import type { IngredientModel } from "../../models/IngredientModel" import type {IngredientModel} from "../../models/IngredientModel"
import Button from "../basics/Button" import Button from "../basics/Button"
import { ButtonType } from "../basics/BasicButtonDefinitions" import {ButtonType} from "../basics/BasicButtonDefinitions"
/** /**
* Editor for handling the ingredient list * Editor for handling the ingredient list
* Ingredients can be edited, added and removed * Ingredients can be edited, added and removed
*/ */
type IngredientListEditorProps = { type IngredientListEditorProps = {
ingredients: IngredientModel[] ingredients: IngredientModel[]
onChange: (ingredients: IngredientModel[]) => void onChange: (ingredients: IngredientModel[]) => void
} }
export function IngredientListEditor({ ingredients, onChange }: IngredientListEditorProps) { export function IngredientListEditor({ingredients, onChange}: IngredientListEditorProps) {
const handleUpdate = (index: number, field: keyof IngredientModel, value: string | number) => { const handleUpdate = (index: number, field: keyof IngredientModel, value: string | number) => {
const updated = ingredients.map((ing, i) => const updated = ingredients.map((ing, i) =>
i === index ? { ...ing, [field]: field === "amount" ? Number(value) : value } : ing i === index ? {...ing, [field]: field === "amount" ? Number(value) : value} : ing
) )
onChange(updated) onChange(updated)
} }
const handleAdd = () => { const handleAdd = () => {
onChange([...ingredients, { name: "", amount: 0, unit: "" }]) onChange([...ingredients, {name: "", amount: 0, unit: ""}])
} }
const handleRemove = (index: number) => { const handleRemove = (index: number) => {
onChange(ingredients.filter((_, i) => i !== index)) onChange(ingredients.filter((_, i) => i !== index))
} }
return ( return (
<div> <div>
<h3 className="subsection-heading">Ingredients</h3> {ingredients.map((ing, index) => (
{ingredients.map((ing, index) => ( <div key={index} className="horizontal-input-group">
<div key={index} className="horizontal-input-group"> <input
<input type="number"
type="number" className="input-field"
className="input-field" placeholder="Menge"
placeholder="Amount" value={ing.amount}
value={ing.amount} onChange={e => handleUpdate(index, "amount", e.target.value)}
onChange={e => handleUpdate(index, "amount", e.target.value)} />
/> <input
<input className="input-field w-20"
className="input-field w-20" placeholder="Einheit"
placeholder="Unit" value={ing.unit ?? ""}
value={ing.unit ?? ""} onChange={e => handleUpdate(index, "unit", e.target.value)}
onChange={e => handleUpdate(index, "unit", e.target.value)} />
/> <input
<input className="input-field"
className="input-field" placeholder="Name"
placeholder="Name" value={ing.name}
value={ing.name} onChange={e => handleUpdate(index, "name", e.target.value)}
onChange={e => handleUpdate(index, "name", e.target.value)} />
/> <Button
<Button onClick={() => handleRemove(index)}
onClick={() => handleRemove(index)} icon={X}
icon={X} buttonType={ButtonType.DarkButton}
buttonType={ButtonType.DarkButton} />
/> </div>
))}
<Button
onClick={handleAdd}
icon={Plus}
text={"Zutat hinzufügen"}
buttonType={ButtonType.PrimaryButton}
/>
</div> </div>
))} )
<Button
onClick={handleAdd}
icon={Plus}
text={"Add Ingredient"}
buttonType={ButtonType.PrimaryButton}
/>
</div>
)
} }

136
frontend/src/components/recipes/InstructionStepListDesktopEditor.tsx
View file

@ -2,86 +2,76 @@
* Desktop editor using drag-and-drop via @dnd-kit * Desktop editor using drag-and-drop via @dnd-kit
*/ */
import { import {closestCenter, DndContext, PointerSensor, useSensor, useSensors,} from "@dnd-kit/core";
DndContext, import {arrayMove, SortableContext, verticalListSortingStrategy,} from "@dnd-kit/sortable";
closestCenter, import type {InstructionStepModel} from "../../models/InstructionStepModel";
PointerSensor, import {InstructionStepDesktopListItem} from "./InstructionStepDesktopListItem";
useSensor,
useSensors,
} from "@dnd-kit/core";
import {
arrayMove,
SortableContext,
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import type { InstructionStepModel } from "../../models/InstructionStepModel";
import { InstructionStepDesktopListItem } from "./InstructionStepDesktopListItem";
import { instructionStepListEditorMethods } from "./InstructionStepListEditor";
import Button from "../basics/Button"; import Button from "../basics/Button";
import { Plus } from "lucide-react"; import {Plus} from "lucide-react";
import { ButtonType } from "../basics/BasicButtonDefinitions"; import {ButtonType} from "../basics/BasicButtonDefinitions";
import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
type InstructionStepListDesktopEditorProps = { type InstructionStepListDesktopEditorProps = {
instructionStepList: InstructionStepModel[]; instructionStepList: InstructionStepModel[];
onChange: (steps: InstructionStepModel[]) => void; onChange: (steps: InstructionStepModel[]) => void;
}; };
export function InstructionStepListDesktopEditor({ export function InstructionStepListDesktopEditor({
instructionStepList, instructionStepList,
onChange, onChange,
}: InstructionStepListDesktopEditorProps) { }: InstructionStepListDesktopEditorProps) {
const { handleUpdate, handleAdd, handleRemove } = instructionStepListEditorMethods( const {handleUpdate, handleAdd, handleRemove} = instructionStepListEditorMethods(
instructionStepList, instructionStepList,
onChange onChange
); );
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } })); const sensors = useSensors(useSensor(PointerSensor, {activationConstraint: {distance: 8}}));
const handleDragEnd = (event: any) => { const handleDragEnd = (event: any) => {
const { active, over } = event; const {active, over} = event;
if (active.id !== over.id) { if (active.id !== over.id) {
/* find element by internal id /* find element by internal id
* Caution! Due to new elements not having a real ID yet, each list item has an internal ID * Caution! Due to new elements not having a real ID yet, each list item has an internal ID
* in order to give it a unique identifier before saving it to the backend. We have to compare * in order to give it a unique identifier before saving it to the backend. We have to compare
* the id of the drag item to the internalId of the list item here! * the id of the drag item to the internalId of the list item here!
*/ */
const oldIndex = instructionStepList.findIndex((i) => i.internalId === active.id); const oldIndex = instructionStepList.findIndex((i) => i.internalId === active.id);
const newIndex = instructionStepList.findIndex((i) => i.internalId === over.id); const newIndex = instructionStepList.findIndex((i) => i.internalId === over.id);
// move element to new position // move element to new position
const newOrder = arrayMove(instructionStepList, oldIndex, newIndex); const newOrder = arrayMove(instructionStepList, oldIndex, newIndex);
onChange(newOrder); onChange(newOrder);
} }
}; };
return ( return (
<div> <div>
<h3 className="subsection-heading mb-3">Zubereitung</h3> <h2 className="section-heading mb-2">Zubereitung</h2>
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}> <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext <SortableContext
items={instructionStepList.map((i) => i.internalId)} items={instructionStepList.map((i) => i.internalId)}
strategy={verticalListSortingStrategy} strategy={verticalListSortingStrategy}
> >
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
{instructionStepList.map((step, index) => ( {instructionStepList.map((step, index) => (
<InstructionStepDesktopListItem <InstructionStepDesktopListItem
key={step.internalId} key={step.internalId}
id={step.internalId} id={step.internalId}
index={index} index={index}
step={step} step={step}
onUpdate={handleUpdate} onUpdate={handleUpdate}
onRemove={handleRemove} onRemove={handleRemove}
/> />
))} ))}
</div> </div>
</SortableContext> </SortableContext>
</DndContext> </DndContext>
<Button <Button
onClick={handleAdd} onClick={handleAdd}
icon={Plus} icon={Plus}
text="Schritt hinzufügen" text="Schritt hinzufügen"
buttonType={ButtonType.PrimaryButton} buttonType={ButtonType.PrimaryButton}
className="mt-4" className="mt-4"
/> />
</div> </div>
); );
} }

87
frontend/src/components/recipes/InstructionStepListEditor.tsx
View file

@ -6,81 +6,42 @@
* - Common functionality for adding, removing, and updating steps is centralized. * - Common functionality for adding, removing, and updating steps is centralized.
*/ */
import { useState, useEffect } from "react"; import {useEffect, useState} from "react";
import type { InstructionStepModel } from "../../models/InstructionStepModel"; import type {InstructionStepModel} from "../../models/InstructionStepModel";
import { InstructionStepListDesktopEditor } from "./InstructionStepListDesktopEditor"; import {InstructionStepListDesktopEditor} from "./InstructionStepListDesktopEditor";
import { InstructionStepListMobileEditor } from "./InstructionStepListMobileEditor"; import {InstructionStepListMobileEditor} from "./InstructionStepListMobileEditor";
/** /**
* Props for the hybrid InstructionStepListEditor * Props for the hybrid InstructionStepListEditor
*/ */
type InstructionStepListEditorProps = { type InstructionStepListEditorProps = {
instructionStepList: InstructionStepModel[]; instructionStepList: InstructionStepModel[];
onChange: (steps: InstructionStepModel[]) => void; onChange: (steps: InstructionStepModel[]) => void;
}; };
/** /**
* Hybrid wrapper that decides between desktop (drag-and-drop) or mobile (buttons) * Hybrid wrapper that decides between desktop (drag-and-drop) or mobile (buttons)
*/ */
export function InstructionStepListEditor({ export function InstructionStepListEditor({
instructionStepList, instructionStepList,
onChange, onChange,
}: InstructionStepListEditorProps) { }: InstructionStepListEditorProps) {
const [isTouch, setIsTouch] = useState(false); const [isTouch, setIsTouch] = useState(false);
useEffect(() => { useEffect(() => {
setIsTouch("ontouchstart" in window || navigator.maxTouchPoints > 0); setIsTouch("ontouchstart" in window || navigator.maxTouchPoints > 0);
}, []); }, []);
return isTouch ? ( return isTouch ? (
<InstructionStepListMobileEditor <InstructionStepListMobileEditor
instructionStepList={instructionStepList} instructionStepList={instructionStepList}
onChange={onChange} onChange={onChange}
/> />
) : ( ) : (
<InstructionStepListDesktopEditor <InstructionStepListDesktopEditor
instructionStepList={instructionStepList} instructionStepList={instructionStepList}
onChange={onChange} onChange={onChange}
/> />
);
}
/**
* ======= Shared hook for common logic =======
*
* Provides add/remove/update functionality used by both mobile and desktop editors.
*/
export function instructionStepListEditorMethods(
instructionStepList: InstructionStepModel[],
onChange: (steps: InstructionStepModel[]) => void
) {
/**
* Update the text of a specific step
*/
const handleUpdate = (index: number, value: string) => {
const updated = instructionStepList.map((step, i) =>
i === index ? { ...step, text: value } : step
); );
onChange(updated);
};
/**
* Add a new step at the end
*/
const handleAdd = () => {
onChange([...instructionStepList,
{
text: "",
internalId: crypto.randomUUID() // add internalId required for drag & drop
}]);
};
/**
* Remove a step by index
*/
const handleRemove = (index: number) => {
onChange(instructionStepList.filter((_, i) => i !== index));
};
return { handleUpdate, handleAdd, handleRemove };
} }

41
frontend/src/components/recipes/InstructionStepListEditorMethods.ts Normal file
View file

@ -0,0 +1,41 @@
import type {InstructionStepModel} from "../../models/InstructionStepModel.ts";
/**
* ======= Shared hook for common logic =======
*
* Provides add/remove/update functionality used by both mobile and desktop editors.
*/
export function instructionStepListEditorMethods(
instructionStepList: InstructionStepModel[],
onChange: (steps: InstructionStepModel[]) => void
) {
/**
* Update the text of a specific step
*/
const handleUpdate = (index: number, value: string) => {
const updated = instructionStepList.map((step, i) =>
i === index ? {...step, text: value} : step
);
onChange(updated);
};
/**
* Add a new step at the end
*/
const handleAdd = () => {
onChange([...instructionStepList,
{
text: "",
internalId: crypto.randomUUID() // add internalId required for drag & drop
}]);
};
/**
* Remove a step by index
*/
const handleRemove = (index: number) => {
onChange(instructionStepList.filter((_, i) => i !== index));
};
return {handleUpdate, handleAdd, handleRemove};
}

149
frontend/src/components/recipes/InstructionStepListMobileEditor.tsx
View file

@ -2,86 +2,91 @@
* Mobile editor using Up/Down buttons for reordering * Mobile editor using Up/Down buttons for reordering
*/ */
import { ArrowDown, ArrowUp, Plus, X } from "lucide-react"; import {ArrowDown, ArrowUp, Plus, X} from "lucide-react";
import type { InstructionStepModel } from "../../models/InstructionStepModel"; import type {InstructionStepModel} from "../../models/InstructionStepModel";
import Button from "../basics/Button"; import Button from "../basics/Button";
import { instructionStepListEditorMethods } from "./InstructionStepListEditor"; import {ButtonType} from "../basics/BasicButtonDefinitions";
import { ButtonType } from "../basics/BasicButtonDefinitions"; import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
type InstructionStepListEditorMobileProps = { type InstructionStepListEditorMobileProps = {
instructionStepList: InstructionStepModel[]; instructionStepList: InstructionStepModel[];
onChange: (steps: InstructionStepModel[]) => void; onChange: (steps: InstructionStepModel[]) => void;
}; };
export function InstructionStepListMobileEditor({ export function InstructionStepListMobileEditor({
instructionStepList, instructionStepList,
onChange, onChange,
}: InstructionStepListEditorMobileProps) { }: InstructionStepListEditorMobileProps) {
const { handleUpdate, handleAdd, handleRemove } = instructionStepListEditorMethods( const {handleUpdate, handleAdd, handleRemove} = instructionStepListEditorMethods(
instructionStepList, instructionStepList,
onChange onChange
); );
const moveStep = (index: number, direction: "up" | "down") => { const moveStep = (index: number, direction: "up" | "down") => {
const newIndex = direction === "up" ? index - 1 : index + 1; const newIndex = direction === "up" ? index - 1 : index + 1;
if (newIndex < 0 || newIndex >= instructionStepList.length) return; if (newIndex < 0 || newIndex >= instructionStepList.length) return;
const newList = [...instructionStepList]; const newList = [...instructionStepList];
const [moved] = newList.splice(index, 1); const [moved] = newList.splice(index, 1);
newList.splice(newIndex, 0, moved); newList.splice(newIndex, 0, moved);
onChange(newList); onChange(newList);
}; };
return ( return (
<div className="flex flex-col gap-3"> <div>
{instructionStepList.map((step, index) => ( <h2 className="section-heading mb-2">Zubereitung</h2>
<div <div className="flex flex-col gap-3">
key={step.id} {instructionStepList.map((step, index) => (
className="flex items-start gap-3 bg-gray-50 rounded-xl p-3 shadow-sm" <div
> key={step.id}
<div className="flex flex-col items-center pt-1"> className="flex items-start gap-3 bg-gray-50 rounded-xl p-3 shadow-sm"
<div className="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-sm font-semibold text-gray-800"> >
{index + 1} <div className="flex flex-col items-center pt-1">
<div className="circular-container">
{index + 1}
</div>
<div className="flex flex-col mt-2">
<Button
icon={ArrowUp}
onClick={() => moveStep(index, "up")}
buttonType={ButtonType.TransparentButton}
disabled={index === 0} // disable if first item
/>
<Button
icon={ArrowDown}
onClick={() => moveStep(index, "down")}
buttonType={ButtonType.TransparentButton}
disabled={index === instructionStepList.length - 1} // disable if last item
/>
</div>
</div>
<textarea
className="input-field w-full min-h-[120px] resize-none overflow-hidden"
placeholder={`Schritt ${index + 1}`}
value={step.text}
onChange={(e) => handleUpdate(index, e.target.value)}
onInput={(e) => {
const el = e.target as HTMLTextAreaElement;
el.style.height = "auto";
el.style.height = `${el.scrollHeight}px`;
}}
/>
<Button
onClick={() => handleRemove(index)}
icon={X}
buttonType={ButtonType.DarkButton}
/>
</div>
))}
<Button
onClick={handleAdd}
icon={Plus}
text="Schritt hinzufügen"
buttonType={ButtonType.PrimaryButton}
className="mt-4"
/>
</div> </div>
<div className="flex flex-col mt-2">
<Button
icon={ArrowUp}
onClick={() => moveStep(index, "up")}
buttonType={ButtonType.TransparentButton}
/>
<Button
icon={ArrowDown}
onClick={() => moveStep(index, "down")}
buttonType={ButtonType.TransparentButton}
/>
</div>
</div>
<textarea
className="input-field w-full min-h-[60px] resize-none overflow-hidden"
placeholder={`Schritt ${index + 1}`}
value={step.text}
onChange={(e) => handleUpdate(index, e.target.value)}
onInput={(e) => {
const el = e.target as HTMLTextAreaElement;
el.style.height = "auto";
el.style.height = `${el.scrollHeight}px`;
}}
/>
<Button
onClick={() => handleRemove(index)}
icon={X}
buttonType={ButtonType.DarkButton}
/>
</div> </div>
))} );
<Button
onClick={handleAdd}
icon={Plus}
text="Schritt hinzufügen"
buttonType={ButtonType.PrimaryButton}
className="mt-4"
/>
</div>
);
} }

4
frontend/src/components/recipes/RecipeDetailPage.tsx
View file

@ -80,7 +80,7 @@ export default function RecipeDetailPage() {
<div className="content-container"> <div className="content-container">
{/* Header - remains in position when scrolling */} {/* Header - remains in position when scrolling */}
<div className="sticky-header"> <div className="sticky-header">
<h1 className="content-title mb-0">{recipeWorkingCopy.title}</h1> <h1 className="content-title mb-0 pb-0">{recipeWorkingCopy.title}</h1>
</div> </div>
{/* Content */} {/* Content */}
@ -132,7 +132,7 @@ export default function RecipeDetailPage() {
{/* Instructions - @todo add reasonable list delegate component*/} {/* Instructions - @todo add reasonable list delegate component*/}
<ol className="space-y-4"> <ol className="space-y-4">
{recipe.instructionStepList.map((step, j) => ( {recipe.instructionStepList.map((step, j) => (
<NumberedListItem key={j} elementNumber={j + 1} text={step.text}/> <NumberedListItem key={j} index={j} text={step.text}/>
))} ))}
</ol> </ol>

272
frontend/src/components/recipes/RecipeEditor.tsx
View file

@ -1,16 +1,16 @@
import { useState } from "react" import {useState} from "react"
import type { RecipeModel } from "../../models/RecipeModel" import type {RecipeModel} from "../../models/RecipeModel"
import type { IngredientGroupModel } from "../../models/IngredientGroupModel" import type {IngredientGroupModel} from "../../models/IngredientGroupModel"
import { IngredientGroupListEditor } from "./IngredientGroupListEditor" import {IngredientGroupListEditor} from "./IngredientGroupListEditor"
import Button from "../basics/Button" import Button from "../basics/Button"
import { InstructionStepListEditor } from "./InstructionStepListEditor" import {InstructionStepListEditor} from "./InstructionStepListEditor"
import type { InstructionStepModel } from "../../models/InstructionStepModel" import type {InstructionStepModel} from "../../models/InstructionStepModel"
import { ButtonType } from "../basics/BasicButtonDefinitions" import {ButtonType} from "../basics/BasicButtonDefinitions"
type RecipeEditorProps = { type RecipeEditorProps = {
recipe: RecipeModel recipe: RecipeModel
onSave: (recipe: RecipeModel) => void onSave: (recipe: RecipeModel) => void
onCancel: () => void onCancel: () => void
} }
/** /**
@ -18,138 +18,142 @@ type RecipeEditorProps = {
* ingredients (with amount, unit, name), instructions, and image URL. * ingredients (with amount, unit, name), instructions, and image URL.
* @todo adapt to ingredientGroups! * @todo adapt to ingredientGroups!
*/ */
export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorProps) { export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorProps) {
/** draft of the new recipe */ /** draft of the new recipe */
const [draft, setDraft] = useState<RecipeModel>(recipe) const [draft, setDraft] = useState<RecipeModel>(recipe)
/** Error list */ /** Error list */
const [errors, setErrors] = useState<{ title?: boolean; ingredients?: boolean }>({}) const [errors, setErrors] = useState<{ title?: boolean; ingredients?: boolean }>({})
/** /**
* Update ingredients * Update ingredients
* @param ingredientGroupList updated ingredient groups and ingredients * @param ingredientGroupList updated ingredient groups and ingredients
*/
const updateIngredientGroupList = (ingredientGroupList: IngredientGroupModel[]) => {
setDraft({ ...draft, ingredientGroupList })
}
/**
* Update instruction steps
* @param instructionStepList updated instructions
*/
const updateInstructionList = (instructionStepList: InstructionStepModel[]) => {
setDraft({ ...draft, instructionStepList })
}
/**
* Validate recipe
* @returns Information on the errors the validation encountered
*/
const validate = () => {
const newErrors: { title?: boolean; ingredients?: boolean } = {}
// each recipe requires a title
if (!draft.title.trim()) {
newErrors.title = true
}
/* there must be at least one ingredient group
* no group may contain an empty ingredient list
* @todo check whether all ingredients are valid
* @todo enhance visualization of ingredient errors
*/ */
if (!draft.ingredientGroupList || draft.ingredientGroupList.length === 0) { const updateIngredientGroupList = (ingredientGroupList: IngredientGroupModel[]) => {
newErrors.ingredients = true setDraft({...draft, ingredientGroupList})
} else { }
let isAnyIngredientListEmpty = draft.ingredientGroupList.some(
ingGrp => { /**
return !ingGrp.ingredientList || ingGrp.ingredientList.length === 0 * Update instruction steps
* @param instructionStepList updated instructions
*/
const updateInstructionList = (instructionStepList: InstructionStepModel[]) => {
setDraft({...draft, instructionStepList})
}
/**
* Validate recipe
* @returns Information on the errors the validation encountered
*/
const validate = () => {
const newErrors: { title?: boolean; ingredients?: boolean } = {}
// each recipe requires a title
if (!draft.title.trim()) {
newErrors.title = true
} }
)
if(isAnyIngredientListEmpty){ /* there must be at least one ingredient group
newErrors.ingredients = true * no group may contain an empty ingredient list
} * @todo check whether all ingredients are valid
* @todo enhance visualization of ingredient errors
*/
if (!draft.ingredientGroupList || draft.ingredientGroupList.length === 0) {
newErrors.ingredients = true
} else {
const isAnyIngredientListEmpty = draft.ingredientGroupList.some(
ingGrp => {
return !ingGrp.ingredientList || ingGrp.ingredientList.length === 0
}
)
if (isAnyIngredientListEmpty) {
newErrors.ingredients = true
}
}
setErrors(newErrors)
return Object.keys(newErrors).length === 0
} }
/** Handles saving and ensures that the draft is only saved if valid */
setErrors(newErrors) const handleSave = (draft: RecipeModel) => {
if (validate()) {
return Object.keys(newErrors).length === 0 onSave(draft)
} }
/** Handles saving and ensures that the draft is only saved if valid */
const handleSave = (draft: RecipeModel) => {
if (validate()) {
onSave(draft)
} }
} // ensure that there is a recipe and show error otherwise
// ensure that there is a recipe and show error otherwise if (!recipe) return <div>Oops, there's no recipe in RecipeEditor...</div>
if (!recipe) return <div>Oops, there's no recipe in RecipeEditor...</div> // @todo add handling of images
// @todo add handling of images return (
return ( /*Container spanning entire screen used to center content horizontally */
<div className="p-4 gap-10"> <div className="app-bg">
<h2 className="content-title"> {/* Container defining the maximum width of the content */}
{recipe.id ? "Edit Recipe" : "New Recipe"} <div className="content-container">
</h2> <h1 className="content-title border-b-2 border-gray-300">
{recipe.id ? "Rezept bearbeiten" : "Neues Rezept"}
</h1>
{/* Title */} {/* Title */}
<h3 className="subsection-heading">Title</h3> <h2 className="section-heading">Titel</h2>
<input <input
className={`input-field ${errors.title ? "error-text" : ""}`} className={`input-field ${errors.title ? "error-text" : ""}`}
placeholder="Title" placeholder="Titel"
value={draft.title} value={draft.title}
onChange={e => setDraft({ ...draft, title: e.target.value })} onChange={e => setDraft({...draft, title: e.target.value})}
/> />
{/* Servings */} {/* Servings */}
<h3 className="subsection-heading">Servings</h3> <h2 className="section-heading">Portionen</h2>
<div className="columns-3 gap-2 flex items-center"> <div className="columns-3 gap-2 flex items-center">
<label>For</label> <label>Für</label>
<input <input
type="number" type="number"
className="input-field w-20" className="input-field w-20"
placeholder="1" placeholder="1"
value={draft.servings.amount} value={draft.servings.amount}
onChange={e => { onChange={e => {
const tempServings = draft.servings const tempServings = draft.servings
tempServings.amount = Number(e.target.value) tempServings.amount = Number(e.target.value)
setDraft({...draft, servings: tempServings}) setDraft({...draft, servings: tempServings})
}} }}
/> />
<input <input
className="input-field" className="input-field"
placeholder="Persons" placeholder="Personen"
value={draft.servings.unit} value={draft.servings.unit}
onChange={e => { onChange={e => {
const tempServings = draft.servings const tempServings = draft.servings
tempServings.unit = e.target.value tempServings.unit = e.target.value
setDraft({...draft, servings: tempServings}) setDraft({...draft, servings: tempServings})
}} }}
/> />
</div> </div>
{/* Ingredient List - @todo better visualization of errors! */} {/* Ingredient List - @todo better visualization of errors! */}
<div className={errors.ingredients ? "border error-text rounded p-2" : ""}> <div className={errors.ingredients ? "border error-text rounded p-2" : ""}>
<IngredientGroupListEditor <IngredientGroupListEditor
ingredientGroupList={draft.ingredientGroupList} ingredientGroupList={draft.ingredientGroupList}
onChange={updateIngredientGroupList} onChange={updateIngredientGroupList}
/> />
</div> </div>
{/* Instruction List*/ } {/* Instruction List*/}
<InstructionStepListEditor <InstructionStepListEditor
instructionStepList={draft.instructionStepList} instructionStepList={draft.instructionStepList}
onChange={updateInstructionList} onChange={updateInstructionList}
/> />
<div className="button-group"> <div className="button-group">
{/* Save Button */} {/* Save Button */}
<Button <Button
onClick={() => handleSave(draft)} onClick={() => handleSave(draft)}
text={"Save"} text={"Speichern"}
buttonType={ButtonType.PrimaryButton} buttonType={ButtonType.PrimaryButton}
/> />
<Button <Button
onClick={() => onCancel()} onClick={() => onCancel()}
text={"Cancel"} text={"Abbrechen"}
/> />
</div> </div>
</div> </div>
</div>
) )
} }