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

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

@ -2,86 +2,76 @@
* Desktop editor using drag-and-drop via @dnd-kit
*/
import {
DndContext,
closestCenter,
PointerSensor,
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 {closestCenter, DndContext, PointerSensor, 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 Button from "../basics/Button";
import { Plus } from "lucide-react";
import { ButtonType } from "../basics/BasicButtonDefinitions";
import {Plus} from "lucide-react";
import {ButtonType} from "../basics/BasicButtonDefinitions";
import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
type InstructionStepListDesktopEditorProps = {
instructionStepList: InstructionStepModel[];
onChange: (steps: InstructionStepModel[]) => void;
instructionStepList: InstructionStepModel[];
onChange: (steps: InstructionStepModel[]) => void;
};
export function InstructionStepListDesktopEditor({
instructionStepList,
onChange,
}: InstructionStepListDesktopEditorProps) {
const { handleUpdate, handleAdd, handleRemove } = instructionStepListEditorMethods(
instructionStepList,
onChange
);
instructionStepList,
onChange,
}: InstructionStepListDesktopEditorProps) {
const {handleUpdate, handleAdd, handleRemove} = instructionStepListEditorMethods(
instructionStepList,
onChange
);
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }));
const sensors = useSensors(useSensor(PointerSensor, {activationConstraint: {distance: 8}}));
const handleDragEnd = (event: any) => {
const { active, over } = event;
if (active.id !== over.id) {
/* find element by 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
* the id of the drag item to the internalId of the list item here!
*/
const oldIndex = instructionStepList.findIndex((i) => i.internalId === active.id);
const newIndex = instructionStepList.findIndex((i) => i.internalId === over.id);
// move element to new position
const newOrder = arrayMove(instructionStepList, oldIndex, newIndex);
onChange(newOrder);
}
};
const handleDragEnd = (event: any) => {
const {active, over} = event;
if (active.id !== over.id) {
/* find element by 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
* the id of the drag item to the internalId of the list item here!
*/
const oldIndex = instructionStepList.findIndex((i) => i.internalId === active.id);
const newIndex = instructionStepList.findIndex((i) => i.internalId === over.id);
// move element to new position
const newOrder = arrayMove(instructionStepList, oldIndex, newIndex);
onChange(newOrder);
}
};
return (
<div>
<h3 className="subsection-heading mb-3">Zubereitung</h3>
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext
items={instructionStepList.map((i) => i.internalId)}
strategy={verticalListSortingStrategy}
>
<div className="flex flex-col gap-3">
{instructionStepList.map((step, index) => (
<InstructionStepDesktopListItem
key={step.internalId}
id={step.internalId}
index={index}
step={step}
onUpdate={handleUpdate}
onRemove={handleRemove}
/>
))}
</div>
</SortableContext>
</DndContext>
<Button
onClick={handleAdd}
icon={Plus}
text="Schritt hinzufügen"
buttonType={ButtonType.PrimaryButton}
className="mt-4"
/>
</div>
);
return (
<div>
<h2 className="section-heading mb-2">Zubereitung</h2>
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext
items={instructionStepList.map((i) => i.internalId)}
strategy={verticalListSortingStrategy}
>
<div className="flex flex-col gap-3">
{instructionStepList.map((step, index) => (
<InstructionStepDesktopListItem
key={step.internalId}
id={step.internalId}
index={index}
step={step}
onUpdate={handleUpdate}
onRemove={handleRemove}
/>
))}
</div>
</SortableContext>
</DndContext>
<Button
onClick={handleAdd}
icon={Plus}
text="Schritt hinzufügen"
buttonType={ButtonType.PrimaryButton}
className="mt-4"
/>
</div>
);
}