Skip to content

Add ingredient editor rows to recipe form - #1203

Draft
dgee2 wants to merge 1 commit into
issue-1119-recipe-form-metadatafrom
issue-1120-recipe-ingredient-editor
Draft

Add ingredient editor rows to recipe form#1203
dgee2 wants to merge 1 commit into
issue-1119-recipe-form-metadatafrom
issue-1120-recipe-ingredient-editor

Conversation

@dgee2

@dgee2 dgee2 commented Aug 2, 2026

Copy link
Copy Markdown
Owner

Summary

Adds a reusable IngredientRowEditor molecule (measure, ingredient, preparation, section, optional toggle, plus reorder/remove controls) and wires it into new-recipe-form.vue as a dynamic list, replacing the hardcoded empty ingredients: [] from #1119.

  • Add/remove/reorder ingredient rows via the new component.
  • ingredientText/measureText are required per row.
  • sortOrder is recomputed from array index at submit time.
  • Added greedy to the form's <q-form>: Quasar's QForm.validate() defaults to sequential validation that stops at the first invalid field (confirmed by reading the Quasar source), so without it, submitting a form with multiple invalid fields (e.g. an empty title and an empty ingredient row) would only ever show the first error, silently leaving the rest unmarked.

Test plan

  • pnpm build (type-check + production build)
  • pnpm lint
  • pnpm test:storybook — 21 files / 52 tests passing, including new stories for the row editor (render, edit, move-up/down disabled at boundaries, remove/reorder events) and form-level add/edit/remove/reorder/required-validation coverage
  • Manually verified in the Storybook dev server: adding a row, leaving it empty, and submitting shows both "Ingredient is required" and "Measure is required" simultaneously (confirming the greedy fix)

Part of #1100.

Closes #1120.

@dgee2 dgee2 changed the title Add ingredient editor rows to recipe form (#1120) Add ingredient editor rows to recipe form Aug 2, 2026
@dgee2
dgee2 force-pushed the issue-1120-recipe-ingredient-editor branch from 47f8cb9 to 158d615 Compare August 3, 2026 08:19
@dgee2
dgee2 force-pushed the issue-1120-recipe-ingredient-editor branch from 158d615 to 58cfda4 Compare August 3, 2026 20:11
@dgee2
dgee2 force-pushed the issue-1120-recipe-ingredient-editor branch from 58cfda4 to 2b9be76 Compare August 4, 2026 07:05
Adds a reusable IngredientRowEditor molecule (measure, ingredient,
preparation, section, optional toggle) and wires it into
new-recipe-form.vue as a dynamic list with add/remove/reorder
controls, replacing the hardcoded empty ingredients array from the
previous PR. Ingredient/measure text are required per row.

Also adds `greedy` to the form's <q-form>: Quasar's QForm.validate()
defaults to sequential validation that stops at the first invalid
field, so without it only the first invalid row would ever show its
error on submit, silently leaving other invalid rows unmarked.

Part of #1100. Closes #1120.
@dgee2
dgee2 force-pushed the issue-1120-recipe-ingredient-editor branch from 2b9be76 to 4c55d70 Compare August 4, 2026 07:59
@sonarqubecloud

sonarqubecloud Bot commented Aug 4, 2026

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add ingredient editor rows to recipe form

1 participant