diff --git a/apps/web/cypress/e2e/planning.feature b/apps/web/cypress/e2e/planning.feature index 53692ee..93796bb 100644 --- a/apps/web/cypress/e2e/planning.feature +++ b/apps/web/cypress/e2e/planning.feature @@ -13,9 +13,18 @@ Feature: Adding a recipe to the planning And the sources reference list has options And the household has enabled TheMealDB And browsing TheMealDB returns some items - And the planning request reflects whatever's been added so far + And the planning request returns nothing - Scenario: Adds a not-yet-imported source item to a planning slot, importing it on the way + Scenario: Selecting a source item only previews it, the footer's Confirmer is what acts on it + Given previewing TheMealDB item "9999" is available + When I visit "/" + And I click the add button for the first empty planning slot + And I click the button "TheMealDB" + And I click the source item "Fish Pie" + Then the recipe detail panel heading should be "Fish Pie" + And the URL should be the home page + + Scenario: Confirming a not-yet-imported source item lands on the embedded review form since an ingredient needs resolving Given previewing TheMealDB item "9999" is available And importing the previewed item will succeed and return id 99 And adding the imported recipe to the planning will succeed @@ -23,7 +32,7 @@ Feature: Adding a recipe to the planning And I click the add button for the first empty planning slot And I click the button "TheMealDB" And I click the source item "Fish Pie" - And I click the link "Importer cette recette" + And I click the button "Confirmer" Then I should see "Cette recette sera automatiquement ajoutée à votre planning une fois importée." When I choose an ingredient for the unresolved line "some mystery paste" @@ -32,5 +41,19 @@ Feature: Adding a recipe to the planning And I fill in the last ingredient's quantity with "1" and unit "unité" And I click the button "Importer" Then the planning add request should have included recipe 99, weekDay "lundi", meal "petit-dejeuner", and portions 4 - And the URL should be the home page + And the recipe picker dialog should be closed And the recipe "Fish Pie" should appear in the first planning slot with 4 portions + + Scenario: Confirming a fully-resolved not-yet-imported item adds it to the planning transparently, with no review screen at all + Given previewing TheMealDB item "7777" is fully resolved as "Ratatouille" + And importing item "7777" will succeed and return id 100 + And adding recipe 100 to the planning will succeed + When I visit "/" + And I click the add button for the first empty planning slot + And I click the button "TheMealDB" + And I click the source item "Ratatouille" + And I click the button "Confirmer" + Then the import request for "7777" should have included the name "Ratatouille" + And the planning add request should have included recipe 100, weekDay "lundi", meal "petit-dejeuner", and portions 4 + And the recipe picker dialog should be closed + And the recipe "Ratatouille" should appear in the first planning slot with 4 portions diff --git a/apps/web/cypress/e2e/planning.ts b/apps/web/cypress/e2e/planning.ts index dd078bb..b9ea1d3 100644 --- a/apps/web/cypress/e2e/planning.ts +++ b/apps/web/cypress/e2e/planning.ts @@ -13,13 +13,6 @@ import { Given, Then, When } from "@badeball/cypress-cucumber-preprocessor"; // its own comment for the full reasoning), so most of what's below mirrors // recipe-sources.ts's fixtures rather than importing them. -// Flips once, from `false` to `true`, as the single scenario in this file -// actually performs the planning-add — module-level `let` rather than -// something reset per-scenario, since there's only ever the one here (see -// household-settings.ts for the same pattern used across several scenarios -// instead). -let fishPiePlanned = false; - Given("the recipe catalog contains nothing", () => { cy.intercept("GET", /\/recipes\?/, { statusCode: 200, body: [] }); }); @@ -49,6 +42,18 @@ Given("browsing TheMealDB returns some items", () => { alreadyImported: false, recipeId: null, }, + // Draft's own preview ("previewing TheMealDB item ... is fully + // resolved") has nothing left for a person to fix — unlike "Fish + // Pie" above, exercises the transparent-import path instead of the + // review screen. + { + externalId: "7777", + title: "Ratatouille", + picture: null, + url: "https://www.themealdb.com/meal/7777", + alreadyImported: false, + recipeId: null, + }, ], nextCursor: null, }, @@ -89,6 +94,76 @@ Given("previewing TheMealDB item {string} is available", (externalId: string) => }); }); +// Unlike "previewing TheMealDB item ... is available" above, every +// ingredient line here already resolved to a real ingredient/unit/quantity +// — `tryBuildCompleteImport` (RecipePickerDialog.tsx) accepts a draft +// shaped exactly like this one as-is, no review screen needed. +Given( + "previewing TheMealDB item {string} is fully resolved as {string}", + (externalId: string, name: string) => { + cy.intercept("GET", `**/sources/theMealDb/preview/${externalId}`, { + statusCode: 200, + body: { + sourceKey: "theMealDb", + externalId, + name, + description: null, + picture: null, + portions: 4, + sourceUrl: `https://www.themealdb.com/meal/${externalId}`, + ingredients: [ + { + rawText: "1 onion", + quantity: 1, + ingredient: { + id: 1, + key: "onion", + icon: "VEGETABLE", + category: "freshProduce", + subcategory: "vegetables", + reproducible: false, + allergens: [], + diets: [], + }, + unit: { id: 1, key: "piece", type: "COUNT", toBaseFactor: 1 }, + }, + ], + steps: [{ description: "Cuire à la poêle.", picture: null, techSteps: [] }], + }, + }); + }, +); + +Given( + "importing item {string} will succeed and return id {int}", + (externalId: string, id: number) => { + cy.intercept("POST", `**/sources/theMealDb/import/${externalId}`, { + statusCode: 201, + body: { id }, + }).as("importItem"); + }, +); + +Given("adding recipe {int} to the planning will succeed", (recipeId: number) => { + cy.intercept("POST", "**/planning/items", { + statusCode: 201, + body: { + id: 2, + weekDay: "lundi", + meal: "petit-dejeuner", + portions: 4, + recipe: { id: recipeId, name: "Ratatouille" }, + }, + }).as("addPlanningItem"); +}); + +Then( + "the import request for {string} should have included the name {string}", + (_externalId: string, name: string) => { + cy.wait("@importItem").its("request.body.name").should("eq", name); + }, +); + // Covers every reference catalog both `RecipePickerDialog` (ingredients/ // diets, for its own filters) and `ImportRecipePage` (ingredients/diets/ // units, for the review form) fetch — same endpoints, one fixture for both. @@ -134,50 +209,26 @@ Given("importing the previewed item will succeed and return id {int}", (id: numb }); Given("adding the imported recipe to the planning will succeed", () => { - cy.intercept("POST", "**/planning/items", (req) => { - fishPiePlanned = true; - req.reply({ - statusCode: 201, - body: { - id: 1, - weekDay: "lundi", - meal: "petit-dejeuner", - portions: 4, - recipe: { id: 99, name: "Fish Pie" }, - }, - }); + cy.intercept("POST", "**/planning/items", { + statusCode: 201, + body: { + id: 1, + weekDay: "lundi", + meal: "petit-dejeuner", + portions: 4, + recipe: { id: 99, name: "Fish Pie" }, + }, }).as("addPlanningItem"); }); -// Stateful — landing back on "/" after the import journey remounts -// `PlanningPage` from scratch (a real cross-route navigation, not a -// same-component state update: see `ImportRecipePage`'s `navigate("/")`), -// so only a fresh `GET /planning?date=` that reflects the just-added item -// makes it show up there — nothing client-side survives that remount to -// patch it in locally the way `PlanningPage`'s own `patchPlanningItems` -// does for an add made without leaving the page. -Given("the planning request reflects whatever's been added so far", () => { - cy.intercept("GET", /\/planning\?/, (req) => { - req.reply({ - statusCode: 200, - body: fishPiePlanned - ? { - id: 1, - startDate: "2026-08-17T00:00:00.000Z", - finishDate: "2026-08-23T00:00:00.000Z", - items: [ - { - id: 1, - weekDay: "lundi", - meal: "petit-dejeuner", - portions: 4, - recipe: { id: 99, name: "Fish Pie" }, - }, - ], - } - : null, - }); - }); +// Every scenario here confirms/imports without ever leaving "/" (the +// footer's "Confirmer" patches the grid locally via `PlanningPage`'s own +// `onAdded` — `RecipePickerDialog`'s doc comment — rather than navigating +// away and back), so unlike a real cross-route remount, this fixture never +// needs to reflect what's been added: the grid picks it up from local +// state, not a fresh fetch. +Then("the recipe picker dialog should be closed", () => { + cy.get(".dialog-panel").should("not.exist"); }); // The very first "+" in DOM order is Lundi's Petit-déjeuner cell (`MEALS`'s diff --git a/apps/web/cypress/e2e/recipe-sources.feature b/apps/web/cypress/e2e/recipe-sources.feature index 85a7379..16dfee8 100644 --- a/apps/web/cypress/e2e/recipe-sources.feature +++ b/apps/web/cypress/e2e/recipe-sources.feature @@ -45,7 +45,7 @@ Feature: Browsing external recipe sources And the recipe detail panel heading should be "Fish Pie" And I should see the highlighted technique "Cuire" - Scenario: Deep-links straight to a not-yet-imported item's own page + Scenario: Deep-links straight to a not-yet-imported item's own page, with no import affordance at all Given the recipe catalog contains nothing And the sources reference list has options And the household has enabled TheMealDB @@ -53,31 +53,5 @@ Feature: Browsing external recipe sources And previewing TheMealDB item "9999" is available When I visit "/recettes/sources/theMealDb/9999" Then the recipe detail panel heading should be "Fish Pie" - And I should see "Importer cette recette" - - Scenario: Reviews an import, resolving an unrecognized ingredient before confirming - Given the recipe catalog contains nothing - And the sources reference list has options - And the household has enabled TheMealDB - And browsing TheMealDB returns some items - And previewing TheMealDB item "9999" is available - And the ingredient and diet catalog is available for import - And importing the previewed item will succeed and return id 99 - When I visit "/recettes" - And I click the button "TheMealDB" - And I click the source item "Fish Pie" - And I click the link "Importer cette recette" - Then the "recipe-name" field should have the value "Fish Pie" - And the recipe should include the ingredient "Oignon" - - When I choose an ingredient for the unresolved line "some mystery paste" - And I select the ingredient "Sel" from the picker - Then the unresolved ingredients section should no longer be shown - And there should be 2 ingredient rows - - When I select unit "unité" for the first ingredient - And I fill in the last ingredient's quantity with "1" and unit "unité" - Then the "Importer" button should not be disabled - When I click the button "Importer" - Then the import request should have included ingredient 2 with quantity 1 and unitId 1 - And the URL should include "/recettes/99" + And I should not see "Importer cette recette" + And I should see a discreet link to the item's original page diff --git a/apps/web/cypress/e2e/recipe-sources.ts b/apps/web/cypress/e2e/recipe-sources.ts index c630282..f183bc2 100644 --- a/apps/web/cypress/e2e/recipe-sources.ts +++ b/apps/web/cypress/e2e/recipe-sources.ts @@ -135,66 +135,9 @@ Then("the source item {string} should be marked as already imported", (title: st cy.contains("tr", title).find(".source-item-table__imported-badge").should("be.visible"); }); -// ImportRecipePage (the review screen) loads its own ingredient/diet/unit -// catalogs the same way RecipeFormPage does — "onion" matches the resolved -// line in "previewing TheMealDB item ... is available" above, "salt" is -// what "some mystery paste" (unresolved in that same fixture) gets -// corrected to in the review-and-import scenario. -Given("the ingredient and diet catalog is available for import", () => { - cy.intercept("GET", "**/reference/ingredients", { - statusCode: 200, - body: [ - { - id: 1, - key: "onion", - icon: "VEGETABLE", - category: "freshProduce", - subcategory: "vegetables", - allergens: [], - diets: [], - }, - { - id: 2, - key: "salt", - icon: "SPICE", - category: "condimentsAndSpices", - subcategory: "spices", - allergens: [], - diets: [], - }, - ], - }); - cy.intercept("GET", "**/reference/diets", { - statusCode: 200, - body: [{ id: 1, key: "omnivore" }], - }); - cy.intercept("GET", "**/reference/units", { - statusCode: 200, - body: [{ id: 1, key: "piece", type: "COUNT", toBaseFactor: 1 }], - }); +// Browsing a source (outside of adding-to-planning, `RecipePickerDialog`'s +// own scenarios in planning.ts) never imports anything — the only action +// this preview offers is a discreet way out to the item's own page. +Then("I should see a discreet link to the item's original page", () => { + cy.get(".recipe-detail-panel__source-link").should("be.visible"); }); - -Given("importing the previewed item will succeed and return id {int}", (id: number) => { - cy.intercept("POST", "**/sources/theMealDb/import/9999", { statusCode: 201, body: { id } }).as( - "importRecipe", - ); -}); - -When("I choose an ingredient for the unresolved line {string}", (rawText: string) => { - cy.contains(".import-recipe__unresolved-row", rawText) - .contains("button", "Choisir un ingrédient") - .click(); -}); - -Then("the unresolved ingredients section should no longer be shown", () => { - cy.get(".import-recipe__unresolved").should("not.exist"); -}); - -Then( - "the import request should have included ingredient {int} with quantity {int} and unitId {int}", - (ingredientId: number, quantity: number, unitId: number) => { - cy.wait("@importRecipe") - .its("request.body.ingredients") - .should("include.deep.members", [{ ingredientId, quantity, unitId }]); - }, -); diff --git a/apps/web/src/components/ui/Dialog.tsx b/apps/web/src/components/ui/Dialog.tsx index fb312d9..c451f41 100644 --- a/apps/web/src/components/ui/Dialog.tsx +++ b/apps/web/src/components/ui/Dialog.tsx @@ -22,11 +22,14 @@ export function Dialog({ title, children, className, + footer, }: { onClose: () => void; title?: string; children: ReactNode; className?: string; + /** Optional action bar pinned below the scrollable body (`.dialog-panel__footer`) — outside `.dialog-panel__body`'s own scroll, same idea as `title`'s header. Omit for a plain dialog with no persistent footer actions. */ + footer?: ReactNode; }) { const dialogRef = useRef(null); @@ -99,6 +102,7 @@ export function Dialog({ )}
{children}
+ {footer &&
{footer}
} ); } diff --git a/apps/web/src/components/ui/dialog.scss b/apps/web/src/components/ui/dialog.scss index 1bb7dac..8e8b04e 100644 --- a/apps/web/src/components/ui/dialog.scss +++ b/apps/web/src/components/ui/dialog.scss @@ -61,3 +61,13 @@ overflow-y: auto; padding: var(--space-lg); } + +.dialog-panel__footer { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--space-sm); + padding: var(--space-md) var(--space-lg); + border-top: 1px solid var(--color-border); +} diff --git a/apps/web/src/features/planning/RecipePickerDialog.tsx b/apps/web/src/features/planning/RecipePickerDialog.tsx index 6958790..1f6cb9f 100644 --- a/apps/web/src/features/planning/RecipePickerDialog.tsx +++ b/apps/web/src/features/planning/RecipePickerDialog.tsx @@ -5,17 +5,21 @@ import { type Meal, type PlanningItemView, type RecipeSummaryView, + type RecipeView, type WeekDay, } from "@batch-cooking/shared"; import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; import { ApiError, apiClient } from "../../api/client"; import { CheckboxOption } from "../../components/ui/Checkbox"; import { Dialog } from "../../components/ui/Dialog"; import { errorMessageService } from "../../services/error-message.service"; import { DietTagSelect } from "../recipes/DietTagSelect"; import { IngredientPicker } from "../recipes/IngredientPicker"; -import { RecipeSourcesPanel } from "../recipes/RecipeSourcesPanel"; +import { RecipeDetailPanel, type RecipeDetailState } from "../recipes/RecipeDetailPanel"; +import { RecipeImportForm } from "../recipes/RecipeImportForm"; +import { RecipeSourcesPanel, type SourceItemSelection } from "../recipes/RecipeSourcesPanel"; import { RecipeTable } from "../recipes/RecipeTable"; import { RecipeTabs, @@ -23,6 +27,7 @@ import { isSourceTab, parseSourceTabValue, } from "../recipes/RecipeTabs"; +import { tryBuildCompleteImport } from "../recipes/recipe-import-draft"; import { useEnabledSources } from "../recipes/useEnabledSources"; import "./recipe-picker-dialog.scss"; @@ -55,26 +60,36 @@ export interface PlanningSlot { * (ingredients / regime / "convient à tout le foyer" toggle, all wired to * `GET /recipes`'s corresponding query params) since browsing here is * about finding something to cook, not just looking something up. Each - * household-enabled source's own tab is included too (unlike an earlier - * version of this dialog — see `ImportRecipePage`'s `planningSlot`, the - * review/import flow that made including them here worthwhile): picking - * an already-imported item behaves exactly like picking a regular recipe, - * and picking one that isn't imported yet hands off to that review - * screen, which adds the freshly-created recipe straight to this slot - * once it's saved. + * household-enabled source's own tab is included too. * * Mounted only while open (see `PlanningPage`, same conditional-mount * convention as its own `CalendarPopover`) — every piece of local state * below resets for free the next time it's reopened, no manual reset * needed. * - * Selecting a row doesn't navigate anywhere (unlike `RecipesPage`'s own - * use of `RecipeTable`) — it switches this same dialog to a small - * "how many portions?" confirmation step, then calls `POST - * /planning/items` on submit. The one exception is picking a not-yet- - * imported source item, which does navigate away entirely (to - * `/recettes/importer/...`) — that flow has its own portions field - * already, on the review screen itself. + * Clicking a row only ever *selects* it — same "preview before you commit" + * shape for every kind of row: a regular tab's own master-detail pair + * (`RecipeTable` + a `RecipeDetailPanel` fetched here, mirroring + * `RecipesPage`'s own layout) fetches and previews a real recipe; a + * source tab's `RecipeSourcesPanel` already previews either kind of row it + * has (already-imported or not) inline, on its own. Nothing about a click + * commits to anything by itself — the pinned footer's "Confirmer" button + * (`handleFooterConfirm`) is what acts on whichever preview is currently + * pending (`previewedRecipe`/`previewedDraft`, mutually exclusive): + * - A real recipe (regular tab, or an already-imported source item) moves + * to the small "how many portions?" step (`selectedRecipe`), same as + * before this dialog grew a footer. + * - A not-yet-imported source item is what actually imports one — nowhere + * else in the app does (see `confirmDraftSelection`) — since a source + * item only ever becomes a real, saved `Recipe` as a side effect of + * someone adding it to their planning. When the draft has everything a + * real recipe needs, it's imported and added to this slot transparently + * — no extra screen. Only when something's actually missing (an + * ingredient the automatic matcher couldn't resolve, say) does this + * switch to a third step instead, embedding the full review form + * (`RecipeImportForm`) right in this same dialog rather than navigating + * away to `ImportRecipePage` and losing the picker's own context (search + * term, filters, which slot this even was). */ export function RecipePickerDialog({ slot, @@ -86,9 +101,18 @@ export function RecipePickerDialog({ onAdded: (item: PlanningItemView) => void; }) { const { t } = useTranslation(); + const navigate = useNavigate(); const [activeTab, setActiveTab] = useState("favoris"); const activeSourceKey = parseSourceTabValue(activeTab); + + /** Switching tabs drops whatever was previewed/pending on the one just left — a stale "Confirmer" target from a different tab would be confusing at best. */ + function handleTabChange(tab: RecipesPageTab) { + setActiveTab(tab); + setPreviewedRecipe(null); + setPreviewedDraft(null); + setRegularPreviewState({ status: "empty" }); + } const enabledSources = useEnabledSources(); const [search, setSearch] = useState(""); const [debouncedSearch, setDebouncedSearch] = useState(""); @@ -101,14 +125,37 @@ export function RecipePickerDialog({ const [ingredientsCatalog, setIngredientsCatalog] = useState([]); const [dietsCatalog, setDietsCatalog] = useState([]); const [listState, setListState] = useState({ status: "loading" }); - // Set when picking an already-imported source item fails to resolve to a - // real recipe (see `handleSelectImportedRecipe`) — a rare race (the - // recipe was deleted between the browse fetch and the click), surfaced - // the same way any other catalog load error is on this dialog. - const [sourceSelectError, setSourceSelectError] = useState(false); + // The regular tabs' own master-detail pair — `RecipeTable` on the left, + // this on the right, fetched on row click (mirrors `RecipesPage`'s + // identical layout). Source tabs don't use this at all: `RecipeSourcesPanel` + // previews its own rows internally. + const [regularPreviewState, setRegularPreviewState] = useState({ + status: "empty", + }); + // Which real recipe is the pending selection — from either the regular + // tabs' own preview above, or a source tab's already-imported row + // (`RecipeSourcesPanel`'s `onSelectImportedRecipe`, which already + // previewed it internally). Mutually exclusive with `previewedDraft` + // below; the footer's "Confirmer" (`handleFooterConfirm`) acts on + // whichever one is set. + const [previewedRecipe, setPreviewedRecipe] = useState(null); + // Which not-yet-imported source item is the pending selection — + // `RecipeSourcesPanel`'s `onDraftSelected`, fired the moment such a row + // is clicked (it previews itself internally; this is just "which one"). + const [previewedDraft, setPreviewedDraft] = useState(null); + // True while `confirmDraftSelection` below is resolving the footer's + // "Confirmer" for a pending draft (fetch it, maybe import it, maybe add + // it to the slot) — disables the footer for that brief window rather + // than allowing a second click mid-flight. + const [isConfirmingDraft, setIsConfirmingDraft] = useState(false); + // Set by `confirmDraftSelection`'s fallback when the pending draft needs + // a person's input before it can be imported — switches this whole + // dialog to its third step (see the top-level `if` below), embedding + // `RecipeImportForm` instead of showing it inline here. + const [reviewDraftItem, setReviewDraftItem] = useState(null); - // The recipe picked in step 1 — `null` while still browsing, set once a - // row is clicked to switch this dialog into its confirmation step. + // The recipe the footer's "Confirmer" moved to this small step for — + // `null` while still browsing. const [selectedRecipe, setSelectedRecipe] = useState(null); const [portions, setPortions] = useState("1"); const [isSubmitting, setIsSubmitting] = useState(false); @@ -168,16 +215,106 @@ export function RecipePickerDialog({ selectedIngredientIds.includes(ingredient.id), ); - /** Picking an already-imported source item (one of the source tabs' `RecipeSourcesPanel`) — resolved to its full recipe, then treated exactly like picking that same recipe from one of the regular tabs, moving straight to the confirm-portions step below. */ - function handleSelectImportedRecipe(recipeId: number) { - setSourceSelectError(false); + /** A regular tab's own row click — fetches the full recipe and previews it in this dialog's own master-detail pair, exactly like `RecipesPage` does. */ + function handleSelectRegularRecipe(id: number) { + setPreviewedDraft(null); + setRegularPreviewState({ status: "loading" }); apiClient - .getRecipe(recipeId) + .getRecipe(id) .then((recipe) => { - setSelectedRecipe(recipe); - setPortions(String(recipe.portions)); + setRegularPreviewState({ status: "loaded", recipe }); + setPreviewedRecipe(recipe); }) - .catch(() => setSourceSelectError(true)); + .catch(() => setRegularPreviewState({ status: "error" })); + } + + /** A source tab's already-imported row — `RecipeSourcesPanel` already fetched and is previewing it itself; this just records it as the pending selection. */ + function handleSelectImportedRecipe(recipe: RecipeView) { + setPreviewedDraft(null); + setPreviewedRecipe(recipe); + } + + /** A source tab's not-yet-imported row — `RecipeSourcesPanel` previews it itself; this just records it as the pending selection. */ + function handleDraftSelected(selection: SourceItemSelection) { + setPreviewedRecipe(null); + setPreviewedDraft(selection); + } + + /** + * The footer's "Confirmer" — acts on whichever preview is currently + * pending. A real recipe moves to the small portions step below; a + * not-yet-imported draft runs {@link confirmDraftSelection}. + */ + function handleFooterConfirm() { + if (previewedRecipe) { + setSelectedRecipe(previewedRecipe); + setPortions(String(previewedRecipe.portions)); + return; + } + if (previewedDraft) { + void confirmDraftSelection(previewedDraft); + } + } + + /** + * Confirming a not-yet-imported source item — the one action in the + * whole app that actually imports one (see this component's own doc + * comment). Fetches its full draft, and when {@link tryBuildCompleteImport} + * finds nothing missing, imports it and adds it to `slot` transparently: + * no extra screen, same end result as picking any other recipe. Anything + * short of that — an unresolved ingredient, a network hiccup on any of + * these three calls — switches to the embedded review-form step instead + * (`setReviewDraftItem`), since only a person can supply what's actually + * missing. + */ + async function confirmDraftSelection(selection: SourceItemSelection) { + const { sourceKey, externalId } = selection; + setIsConfirmingDraft(true); + + function needsReview() { + setIsConfirmingDraft(false); + setReviewDraftItem({ sourceKey, externalId }); + } + + let payload: ReturnType; + try { + payload = tryBuildCompleteImport(await apiClient.previewSourceItem(sourceKey, externalId)); + } catch { + needsReview(); + return; + } + if (!payload) { + needsReview(); + return; + } + + let saved: RecipeView; + try { + saved = await apiClient.importSourceItem(sourceKey, externalId, payload); + } catch { + needsReview(); + return; + } + + try { + const planningItem = await apiClient.addPlanningItem({ + date: slot.date, + weekDay: slot.weekDay, + meal: slot.meal, + recipeId: saved.id, + portions: payload.portions, + }); + onAdded(planningItem); + onClose(); + } catch { + // The recipe itself is already saved at this point — only adding it + // to this slot failed. Land on its own page rather than retrying the + // whole import (same fallback `RecipeImportForm`'s own submit takes + // for the identical failure — see this dialog's `onImported` handler + // below). + setIsConfirmingDraft(false); + navigate(`/recettes/${saved.id}`); + } } async function handleConfirm() { @@ -204,6 +341,34 @@ export function RecipePickerDialog({ } } + if (reviewDraftItem) { + return ( + + { + if (planningItem) { + onAdded(planningItem); + onClose(); + } else { + // The recipe itself is saved at this point — only adding it + // to this slot failed. Same fallback as the transparent- + // import path above: land on its own page instead of + // retrying. + navigate(`/recettes/${recipe.id}`); + } + }} + /> + + ); + } + if (selectedRecipe) { return ( + + + + + } + > {activeSourceKey === null && (
{activeSourceKey !== null ? ( - <> - {sourceSelectError && ( -

- {t("common.loadError")} -

- )} - - + ) : ( <> {listState.status === "loading" && ( @@ -340,18 +519,14 @@ export function RecipePickerDialog({

{t("planning.picker.empty")}

)} {listState.status === "loaded" && listState.recipes.length > 0 && ( - { - const recipe = listState.recipes.find((r) => r.id === id) ?? null; - setSelectedRecipe(recipe); - // Pre-fill from the recipe's own written yield rather than - // always starting at 1 — still freely editable below, this - // is just a better starting point (see `Recipe.portions`). - if (recipe) setPortions(String(recipe.portions)); - }} - /> +
+ + +
)} )} diff --git a/apps/web/src/features/planning/recipe-picker-dialog.scss b/apps/web/src/features/planning/recipe-picker-dialog.scss index 7eb5d19..52b1014 100644 --- a/apps/web/src/features/planning/recipe-picker-dialog.scss +++ b/apps/web/src/features/planning/recipe-picker-dialog.scss @@ -5,7 +5,56 @@ // RecipeTabs import it themselves). .recipe-picker-dialog { - max-width: 56rem; + width: 95vw; + max-width: 85rem; + // Fixed, not just capped — `.dialog-panel`'s own `max-height` (dialog.scss) + // only bounds how tall a shrink-to-fit dialog can grow, which is right + // for every other dialog's small form but leaves this one's browsing + // step at the mercy of how much content happens to be on screen (a short + // personal-recipe tab vs. a ~25-item source browse). Pinning both + // `height`/`max-height` to the same `80vh` keeps the browsing area a + // consistent, generous size regardless of tab/content, on top of the + // `.dialog-panel__body` fix below that makes that area actually use the + // space instead of overflowing it. + height: 80vh; + max-height: 80vh; + + // `.dialog-panel__body` (dialog.scss) is a plain block-flow scroll + // container by default — fine for every other dialog's small form, but + // this one's browsing step embeds the same components `/recettes` uses + // (`RecipeTable`'s `.recipe-table-wrap`, `RecipeSourcesPanel`'s + // `.recipes-page__catalog`), both of which size themselves with + // `flex: 1; min-height: 0` and need a `display: flex` ancestor for that + // to mean anything — on the real page that ancestor is `.recipes-page` + // itself (see its own doc comment for the identical fix that page + // needed once); this dialog never renders that wrapper, so without this + // the catalog/table just grew to its full content height instead of + // being clipped and independently scrollable within the dialog's own + // bounds — harmless for the handful of rows a personal recipe tab + // usually has, but a source tab's ~25-item browse list made it obvious: + // everything past the dialog's fixed height rendered, technically, just + // never inside the visible/scrollable area. Scoped to this dialog only + // — every other `Dialog` caller keeps the plain block layout. + .dialog-panel__body { + display: flex; + flex-direction: column; + } + + .recipe-table-wrap { + flex: 1; + min-height: 0; + } + + // `.recipes-page__catalog`'s own column split (recipes.scss) sizes the + // detail pane with `minmax(35vw, 38vw)` — a fraction of the *viewport*, + // which tracked `/recettes`' own width there (that grid spans nearly the + // whole page) but has nothing to do with this dialog's width, now a + // fixed 92vw/75rem of its own. Overridden here as a fraction of the + // dialog itself instead, so the two panes stay proportionate to each + // other regardless of viewport size. + .recipes-page__catalog { + grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); + } } .recipe-picker__filters { @@ -111,6 +160,8 @@ border: none; border-radius: var(--radius-base); padding: var(--space-sm) var(--space-md); + font-family: var(--font-body); + font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; @@ -123,3 +174,27 @@ cursor: not-allowed; } } + +// The dialog-level footer (`Dialog`'s `footer` prop, used by this dialog's +// main browsing step) — "Confirmer" reuses `.recipe-picker-confirm__confirm` +// above (same primary-button look as the portions step's own "Ajouter au +// planning"), "Fermer" needs its own secondary style since a bare +// `
@@ -121,28 +125,6 @@ export function RecipeDetailPanel({
-
- - {t("recipes.sources.detail.importButton")} - - - {t("recipes.sources.detail.viewSource")} - -
- {draft.description && (

{draft.description}

@@ -175,11 +157,13 @@ export function RecipeDetailPanel({ - onFavoriteToggled?.(recipe.id, isFavorite)} - /> + {showActions && ( + onFavoriteToggled?.(recipe.id, isFavorite)} + /> + )}
@@ -203,12 +187,14 @@ export function RecipeDetailPanel({
-
- - {t("recipes.editButton")} - - onDeleted?.(recipe.id)} /> -
+ {showActions && ( +
+ + {t("recipes.editButton")} + + onDeleted?.(recipe.id)} /> +
+ )} {recipe.description && (
diff --git a/apps/web/src/features/recipes/RecipeImportForm.tsx b/apps/web/src/features/recipes/RecipeImportForm.tsx new file mode 100644 index 0000000..c283436 --- /dev/null +++ b/apps/web/src/features/recipes/RecipeImportForm.tsx @@ -0,0 +1,437 @@ +import { + type CreateRecipeInput, + type DietView, + ErrorCode, + type IngredientView, + type Meal, + type PlanningItemView, + type RecipeView, + type RecipeVisibility, + type UnitView, + type WeekDay, + createRecipeSchema, +} from "@batch-cooking/shared"; +import { type FormEvent, useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { ApiError, apiClient } from "../../api/client"; +import { makeClientKey } from "../../lib/client-key"; +import { errorMessageService } from "../../services/error-message.service"; +import { DietTagSelect } from "./DietTagSelect"; +import { IngredientPicker } from "./IngredientPicker"; +import { IngredientRow } from "./IngredientRow"; +import { type StepDraft, StepListEditor } from "./StepListEditor"; +import "./recipes.scss"; + +/** In display order — mirrors `RecipeVisibility` (schema.prisma/shared types). Same list as `RecipeFormPage`. */ +const VISIBILITY_OPTIONS: RecipeVisibility[] = ["PERSONAL", "HOUSE", "PUBLIC"]; + +/** A resolved ingredient line — identical shape to `RecipeFormPage`'s own `IngredientLine`. */ +interface IngredientLine { + key: string; + ingredient: IngredientView; + quantity: string; + unitId: number | null; +} + +/** One draft line that didn't resolve to a real `Ingredient` on preview (`DraftRecipeIngredientView.ingredient === null`) — still needs a person to pick the right one, or discard it, before this recipe can be saved. */ +interface UnresolvedIngredientLine { + key: string; + rawText: string; + quantity: string; +} + +type LoadState = "loading" | "loaded" | "error"; + +/** + * The review/creation form for finalizing a source item's import — the + * form itself, extracted out of `ImportRecipePage` so `RecipePickerDialog` + * can embed it directly as a step of its own (the normal way this is + * reached now: `handleSelectDraftItem`'s fallback when a draft has + * something `tryBuildCompleteImport` couldn't resolve on its own) instead + * of navigating to a separate page and losing the picker's context. + * `ImportRecipePage` still wraps this as a standalone, directly-linkable + * route — a safety net (a stale bookmark, a reload mid-flow), not the + * primary path any more. + * + * Pre-filled from `GET /sources/:sourceKey/preview/:externalId`, + * structurally the same form as `RecipeFormPage` — same sub-components + * (`IngredientRow`, `IngredientPicker`, `StepListEditor`, `DietTagSelect`), + * same `CreateRecipeInput` submit shape — plus one thing a manual creation + * never has to handle: ingredient lines the automatic matching + * (`ingredient-matcher.ts`) couldn't resolve. Those render as their own "à + * compléter" list, each needing a real ingredient picked (or the line + * discarded) before the form can submit — never silently drops/guesses + * one, per the product decision this stage was built against (no invalid + * recipe is ever persisted). + * + * Submits to `POST /sources/:sourceKey/import/:externalId` + * (`apiClient.importSourceItem`) instead of `POST /recipes` — the only + * other difference from `RecipeFormPage`'s own submit. When `planningSlot` + * is given, a successful import also adds the freshly created recipe + * straight to that slot (`POST /planning/items`, using this form's own + * `portions` field) before calling `onImported` — `planningItem` on that + * result is `null` either when there's no slot to add to, or when the + * recipe saved fine but that add itself failed (the caller decides what to + * do about that rather than this component guessing — see + * `ImportRecipePage`/`RecipePickerDialog`'s own handling). + */ +export function RecipeImportForm({ + sourceKey, + externalId, + planningSlot, + onImported, +}: { + sourceKey: string; + externalId: string; + planningSlot?: { date: string; weekDay: WeekDay; meal: Meal }; + onImported: (result: { recipe: RecipeView; planningItem: PlanningItemView | null }) => void; +}) { + const { t } = useTranslation(); + + const [loadState, setLoadState] = useState("loading"); + const [ingredientsCatalog, setIngredientsCatalog] = useState([]); + const [dietsCatalog, setDietsCatalog] = useState([]); + const [unitsCatalog, setUnitsCatalog] = useState([]); + + const [name, setName] = useState(""); + const [description, setDescription] = useState(""); + const [picture, setPicture] = useState(""); + const [portions, setPortions] = useState("4"); + const [visibility, setVisibility] = useState("PERSONAL"); + const [dietIds, setDietIds] = useState([]); + const [ingredientLines, setIngredientLines] = useState([]); + const [unresolvedIngredients, setUnresolvedIngredients] = useState( + [], + ); + // Which unresolved line's picker is currently open — at most one at a + // time (IngredientPicker is a whole browsable grid, not a compact + // popover; showing one per unresolved line at once would be unwieldy). + const [resolvingKey, setResolvingKey] = useState(null); + const [steps, setSteps] = useState([]); + + const [formError, setFormError] = useState(null); + const [isSubmitting, setIsSubmitting] = useState(false); + + useEffect(() => { + let cancelled = false; + setLoadState("loading"); + + Promise.all([ + apiClient.getIngredients(), + apiClient.getDiets(), + apiClient.getUnits(), + apiClient.previewSourceItem(sourceKey, externalId), + ]) + .then(([ingredients, diets, units, draft]) => { + if (cancelled) return; + setIngredientsCatalog(ingredients); + setDietsCatalog(diets); + setUnitsCatalog(units); + + setName(draft.name); + setDescription(draft.description ?? ""); + setPicture(draft.picture ?? ""); + setPortions(draft.portions !== null ? String(draft.portions) : "4"); + + const resolved: IngredientLine[] = []; + const unresolved: UnresolvedIngredientLine[] = []; + for (const line of draft.ingredients) { + if (line.ingredient !== null) { + resolved.push({ + key: makeClientKey(), + ingredient: line.ingredient, + quantity: line.quantity !== null ? String(line.quantity) : "", + unitId: line.unit?.id ?? null, + }); + } else { + unresolved.push({ + key: makeClientKey(), + rawText: line.rawText, + quantity: line.quantity !== null ? String(line.quantity) : "", + }); + } + } + setIngredientLines(resolved); + setUnresolvedIngredients(unresolved); + + setSteps( + draft.steps.map((step) => ({ + key: makeClientKey(), + description: step.description, + picture: step.picture ?? "", + })), + ); + setLoadState("loaded"); + }) + .catch(() => { + if (!cancelled) setLoadState("error"); + }); + + return () => { + cancelled = true; + }; + }, [sourceKey, externalId]); + + function addIngredient(ingredient: IngredientView) { + setIngredientLines((lines) => [ + ...lines, + { key: makeClientKey(), ingredient, quantity: "", unitId: null }, + ]); + } + + function updateIngredientLine( + key: string, + patch: Partial>, + ) { + setIngredientLines((lines) => + lines.map((line) => (line.key === key ? { ...line, ...patch } : line)), + ); + } + + function removeIngredientLine(key: string) { + setIngredientLines((lines) => lines.filter((line) => line.key !== key)); + } + + /** Promotes an unresolved line into a real ingredient line, carrying its quantity over — its unit still needs picking, same as a freshly-added ingredient. */ + function resolveIngredient(unresolvedKey: string, ingredient: IngredientView) { + setUnresolvedIngredients((lines) => { + const line = lines.find((l) => l.key === unresolvedKey); + if (line) { + setIngredientLines((resolved) => [ + ...resolved, + { key: makeClientKey(), ingredient, quantity: line.quantity, unitId: null }, + ]); + } + return lines.filter((l) => l.key !== unresolvedKey); + }); + setResolvingKey(null); + } + + function discardUnresolvedIngredient(key: string) { + setUnresolvedIngredients((lines) => lines.filter((line) => line.key !== key)); + setResolvingKey((current) => (current === key ? null : current)); + } + + const canSubmit = + name.trim().length > 0 && + Number.isInteger(Number(portions)) && + Number(portions) > 0 && + ingredientLines.length > 0 && + ingredientLines.every((line) => Number(line.quantity) > 0 && line.unitId !== null) && + unresolvedIngredients.length === 0 && + steps.length > 0 && + steps.every((step) => step.description.trim().length > 0); + + async function handleSubmit(e: FormEvent) { + e.preventDefault(); + setFormError(null); + + const payload: CreateRecipeInput = { + name: name.trim(), + description: description.trim() || null, + picture: picture.trim() || null, + portions: Number(portions), + visibility, + dietIds, + ingredients: ingredientLines.map((line) => ({ + ingredientId: line.ingredient.id, + quantity: Number(line.quantity), + // `canSubmit` already requires every line to have a unit picked — + // same "?? 0, the schema rejects it if ever reached" reasoning as + // RecipeFormPage's identical submit. + unitId: line.unitId ?? 0, + })), + steps: steps.map((step) => ({ + description: step.description.trim(), + picture: step.picture.trim() || null, + })), + }; + + const result = createRecipeSchema.safeParse(payload); + if (!result.success) { + setFormError(result.error.issues[0]?.message ?? t("recipes.sources.import.genericError")); + return; + } + + setIsSubmitting(true); + try { + const saved = await apiClient.importSourceItem(sourceKey, externalId, result.data); + if (planningSlot) { + try { + const planningItem = await apiClient.addPlanningItem({ + date: planningSlot.date, + weekDay: planningSlot.weekDay, + meal: planningSlot.meal, + recipeId: saved.id, + portions: Number(portions), + }); + onImported({ recipe: saved, planningItem }); + return; + } catch { + // The recipe itself was already imported successfully — only the + // planning add failed. The caller decides what to do with a + // `null` planningItem (land on the recipe's own page rather than + // stranding the user on a form that already submitted; it can + // still be added to that slot afterwards via the normal + // "déjà importée" picker path). + onImported({ recipe: saved, planningItem: null }); + return; + } + } + onImported({ recipe: saved, planningItem: null }); + } catch (err) { + const code = err instanceof ApiError ? err.code : ErrorCode.INTERNAL_ERROR; + setFormError(errorMessageService.getLabel(code)); + } finally { + setIsSubmitting(false); + } + } + + if (loadState === "loading") { + return ( +
+

{t("recipes.loading")}

+
+ ); + } + + if (loadState === "error") { + return ( +
+

+ {t("recipes.sources.import.loadError")} +

+
+ ); + } + + const selectedIds = ingredientLines.map((line) => line.ingredient.id); + + return ( +
+ {planningSlot && ( +

{t("recipes.sources.import.planningHint")}

+ )} + + + setName(e.target.value)} /> + + +