Renaming to distinguish editor and display list items and adding component for IngredientGroupDisplayListItem.tsx

2025-11-02 07:20:01 +01:00 · 2025-11-02 07:20:01 +01:00 · 09150ba3bb
commit 09150ba3bb
parent 3e0a4ec38b
8 changed files with 58 additions and 44 deletions
--- a/frontend/src/components/recipes/InstructionStepEditorMobileListItem.tsx
+++ b/frontend/src/components/recipes/InstructionStepEditorMobileListItem.tsx
@ -0,0 +1,97 @@
+import Button from "../basics/Button.tsx";
+import {X} from "lucide-react";
+import {ButtonType} from "../basics/BasicButtonDefinitions.ts";
+import type {InstructionStepModel} from "../../models/InstructionStepModel.ts";
+import {MoveButtonControl} from "../basics/MoveButtonControl.tsx";
+import {NumberCircle} from "../basics/NumberCircle.tsx";
+
+type InstructionStepEditorMobileListItemProps = {
+    /** Index of the instruction step */
+    index: number;
+    /** Model holding the instruction step data, e.g., instruction text */
+    stepModel: InstructionStepModel;
+    /**
+     * Method to call on moving the instruction step.
+     * @param index Current index of the step to move
+     * @param direction Direction to move the step in (either "up" or "down")
+     */
+    onMove(index: number, direction: "up" | "down"): void;
+    /**
+     * Method to call on updating the instruction step.
+     * @param index Index of the step to be updated.
+     * @param instructionText new instruction text
+     */
+    onUpdate: (index: number, instructionText: string) => void;
+    /**
+     * Method to call on removing the instruction step.
+     * @param index Index of the instruction step to be removed.
+     */
+    onRemove: (index: number) => void;
+    /** Indicates whether this is the first instruction step. Used to restrict movement. */
+    isFirst: boolean;
+    /** Indicates whether this is the last instruction step. Used to restrict movement. */
+    isLast: boolean;
+};
+
+/**
+ * Numbered list item for instructions step list editor for mobile devices.
+ *
+ * Describes a single instruction step of a recipe. As drag & drop usually is a bit clumsy on
+ * mobile devices, the steps can be reordered with small up and down buttons below the step number.
+ * @param index Index of this instruction step
+ * @param stepModel Model containing the data for the current instruction step, e.g., instruction text.
+ * @param onMove Method to call on moving the instruction step.
+ * @param onUpdate Method to call on updating the instruction step.
+ * @param onRemove Method to call on removing the instruction step.
+ * @param isFirst Indicates whether this is the first instruction step. In this case, the step cannot be moved up.
+ * @param isLast Indicates whether this is the last instruction step. In this case, the step cannot be moved down.
+ */
+export function InstructionStepEditorMobileListItem({
+                                                        index,
+                                                        stepModel,
+                                                        onMove,
+                                                        onUpdate,
+                                                        onRemove,
+                                                        isFirst,
+                                                        isLast
+                                                    }: InstructionStepEditorMobileListItemProps) {
+    return (
+        <div
+            key={stepModel.id}
+            className="flex items-start gap-3 bg-gray-50 rounded-xl p-3 shadow-sm"
+        >
+            {/* Left column: Number of the instruction step and move controls */}
+            <div className="flex flex-col items-center pt-1">
+                <NumberCircle
+                    number={index + 1}
+                />
+                <MoveButtonControl
+                    isUpDisabled={isFirst}
+                    isDownDisabled={isLast}
+                    onMoveUp={() => onMove(index, "up")}
+                    onMoveDown={() => onMove(index, "down")}
+                />
+            </div>
+
+            {/* Center column: Instruction step */}
+            <textarea
+                className="w-full min-h-[120px] resize-none overflow-hidden"
+                placeholder={`Schritt ${index + 1}`}
+                value={stepModel.text}
+                onChange={(e) => onUpdate(index, e.target.value)}
+                onInput={(e) => {
+                    const el = e.target as HTMLTextAreaElement;
+                    el.style.height = "auto";
+                    el.style.height = `${el.scrollHeight}px`;
+                }}
+            />
+
+            {/* Right column: Remove step button */}
+            <Button
+                onClick={() => onRemove(index)}
+                icon={X}
+                buttonType={ButtonType.DarkButton}
+            />
+        </div>
+    );
+}