mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-11-27 22:24:43 -05:00
feat: Add recipe as ingredient (#4800)
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
This commit is contained in:
gpotter@gmail.com
committed by
GitHub
GitHub
parent
ff42964537
commit
60d9294861
@@ -139,7 +139,7 @@
|
||||
color="secondary"
|
||||
density="compact"
|
||||
/>
|
||||
<div :key="`${ingredientData.ingredient.quantity || 'no-qty'}-${i}`" class="pa-auto my-auto">
|
||||
<div :key="`${ingredientData.ingredient?.quantity || 'no-qty'}-${i}`" class="pa-auto my-auto">
|
||||
<RecipeIngredientListItem
|
||||
:ingredient="ingredientData.ingredient"
|
||||
:scale="recipeSection.recipeScale"
|
||||
@@ -287,12 +287,35 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const shoppingListIngredients: ShoppingListIngredient[] = recipe.recipeIngredient.map((ing) => {
|
||||
const householdsWithFood = (ing.food?.householdsWithIngredientFood || []);
|
||||
return {
|
||||
checked: !householdsWithFood.includes(userHousehold.value),
|
||||
ingredient: ing,
|
||||
};
|
||||
const shoppingListIngredients: ShoppingListIngredient[] = [];
|
||||
function flattenRecipeIngredients(ing: RecipeIngredient, parentTitle = ""): ShoppingListIngredient[] {
|
||||
const householdsWithFood = ing.food?.householdsWithIngredientFood || [];
|
||||
if (ing.referencedRecipe) {
|
||||
// Recursively flatten all ingredients in the referenced recipe
|
||||
return (ing.referencedRecipe.recipeIngredient ?? []).flatMap((subIng) => {
|
||||
const calculatedQty = (ing.quantity || 1) * (subIng.quantity || 1);
|
||||
// Pass the referenced recipe name as the section title
|
||||
return flattenRecipeIngredients(
|
||||
{ ...subIng, quantity: calculatedQty },
|
||||
"",
|
||||
);
|
||||
});
|
||||
}
|
||||
else {
|
||||
// Regular ingredient
|
||||
return [{
|
||||
checked: !householdsWithFood.includes(userHousehold.value),
|
||||
ingredient: {
|
||||
...ing,
|
||||
title: ing.title || parentTitle,
|
||||
},
|
||||
}];
|
||||
}
|
||||
}
|
||||
|
||||
recipe.recipeIngredient.forEach((ing) => {
|
||||
const flattened = flattenRecipeIngredients(ing, "");
|
||||
shoppingListIngredients.push(...flattened);
|
||||
});
|
||||
|
||||
let currentTitle = "";
|
||||
@@ -301,6 +324,9 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
|
||||
if (ing.ingredient.title) {
|
||||
currentTitle = ing.ingredient.title;
|
||||
}
|
||||
else if (ing.ingredient.referencedRecipe?.name) {
|
||||
currentTitle = ing.ingredient.referencedRecipe.name;
|
||||
}
|
||||
|
||||
// If this is the first item in the section, create a new section
|
||||
if (sections.length === 0 || currentTitle !== sections[sections.length - 1].sectionName) {
|
||||
@@ -316,7 +342,7 @@ async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
|
||||
}
|
||||
|
||||
// Store the on-hand ingredients for later
|
||||
const householdsWithFood = (ing.ingredient.food?.householdsWithIngredientFood || []);
|
||||
const householdsWithFood = (ing.ingredient?.food?.householdsWithIngredientFood || []);
|
||||
if (householdsWithFood.includes(userHousehold.value)) {
|
||||
onHandIngs.push(ing);
|
||||
return sections;
|
||||
|
||||
@@ -141,6 +141,13 @@ function save() {
|
||||
dialog.value = false;
|
||||
}
|
||||
|
||||
function open() {
|
||||
dialog.value = true;
|
||||
}
|
||||
function close() {
|
||||
dialog.value = false;
|
||||
}
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
const utilities = [
|
||||
@@ -160,4 +167,10 @@ const utilities = [
|
||||
action: splitByNumberedLine,
|
||||
},
|
||||
];
|
||||
|
||||
// Expose functions to parent components
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -69,7 +69,14 @@
|
||||
:label="$t('recipe.nutrition')"
|
||||
/>
|
||||
</v-row>
|
||||
<v-row no-gutters />
|
||||
<v-row no-gutters>
|
||||
<v-switch
|
||||
v-model="preferences.expandChildRecipes"
|
||||
hide-details
|
||||
color="primary"
|
||||
:label="$t('recipe.include-linked-recipe-ingredients')"
|
||||
/>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
@@ -41,6 +41,7 @@
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col
|
||||
v-if="!state.isRecipe"
|
||||
sm="12"
|
||||
md="3"
|
||||
cols="12"
|
||||
@@ -97,6 +98,7 @@
|
||||
|
||||
<!-- Foods Input -->
|
||||
<v-col
|
||||
v-if="!state.isRecipe"
|
||||
m="12"
|
||||
md="3"
|
||||
cols="12"
|
||||
@@ -151,6 +153,33 @@
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
</v-col>
|
||||
<!-- Recipe Input -->
|
||||
<v-col
|
||||
v-if="state.isRecipe"
|
||||
m="12"
|
||||
md="6"
|
||||
cols="12"
|
||||
class=""
|
||||
>
|
||||
<v-autocomplete
|
||||
ref="search.query"
|
||||
v-model="model.referencedRecipe"
|
||||
v-model:search="search.query.value"
|
||||
auto-select-first
|
||||
hide-details
|
||||
density="compact"
|
||||
variant="solo"
|
||||
return-object
|
||||
:items="search.data.value || []"
|
||||
item-title="name"
|
||||
class="mx-1 py-0"
|
||||
placeholder="Choose Recipe"
|
||||
clearable
|
||||
label="Recipe"
|
||||
>
|
||||
<template #prepend />
|
||||
</v-autocomplete>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="12"
|
||||
md=""
|
||||
@@ -173,6 +202,7 @@
|
||||
class="my-auto d-flex"
|
||||
:buttons="btns"
|
||||
@toggle-section="toggleTitle"
|
||||
@toggle-subrecipe="toggleIsRecipe"
|
||||
@insert-above="$emit('insert-above')"
|
||||
@insert-below="$emit('insert-below')"
|
||||
@delete="$emit('delete')"
|
||||
@@ -195,6 +225,8 @@ import { useI18n } from "vue-i18n";
|
||||
import { useFoodStore, useFoodData, useUnitStore, useUnitData } from "~/composables/store";
|
||||
import { useNuxtApp } from "#app";
|
||||
import type { RecipeIngredient } from "~/lib/api/types/recipe";
|
||||
import { usePublicExploreApi, useUserApi } from "~/composables/api";
|
||||
import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
|
||||
|
||||
// defineModel replaces modelValue prop
|
||||
const model = defineModel<RecipeIngredient>({ required: true });
|
||||
@@ -204,6 +236,10 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: "body",
|
||||
},
|
||||
isRecipe: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
unitError: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -247,6 +283,7 @@ const { $globals } = useNuxtApp();
|
||||
|
||||
const state = reactive({
|
||||
showTitle: false,
|
||||
isRecipe: props.isRecipe,
|
||||
});
|
||||
|
||||
const contextMenuOptions = computed(() => {
|
||||
@@ -255,6 +292,10 @@ const contextMenuOptions = computed(() => {
|
||||
text: i18n.t("recipe.toggle-section"),
|
||||
event: "toggle-section",
|
||||
},
|
||||
{
|
||||
text: i18n.t("recipe.toggle-recipe"),
|
||||
event: "toggle-subrecipe",
|
||||
},
|
||||
{
|
||||
text: i18n.t("recipe.insert-above"),
|
||||
event: "insert-above",
|
||||
@@ -303,6 +344,25 @@ async function createAssignFood() {
|
||||
foodAutocomplete.value?.blur();
|
||||
}
|
||||
|
||||
// Recipes
|
||||
const route = useRoute();
|
||||
const $auth = useMealieAuth();
|
||||
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
|
||||
|
||||
const { isOwnGroup } = useLoggedInState();
|
||||
const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore;
|
||||
const search = useRecipeSearch(api);
|
||||
const loading = ref(false);
|
||||
const selectedIndex = ref(-1);
|
||||
// Reset or Grab Recipes on Change
|
||||
watch(loading, (val) => {
|
||||
if (!val) {
|
||||
search.query.value = "";
|
||||
selectedIndex.value = -1;
|
||||
search.data.value = [];
|
||||
}
|
||||
});
|
||||
|
||||
// Units
|
||||
const unitStore = useUnitStore();
|
||||
const unitsData = useUnitData();
|
||||
@@ -323,6 +383,17 @@ function toggleTitle() {
|
||||
state.showTitle = !state.showTitle;
|
||||
}
|
||||
|
||||
function toggleIsRecipe() {
|
||||
if (state.isRecipe) {
|
||||
model.value.referencedRecipe = undefined;
|
||||
}
|
||||
else {
|
||||
model.value.unit = undefined;
|
||||
model.value.food = undefined;
|
||||
}
|
||||
state.isRecipe = !state.isRecipe;
|
||||
}
|
||||
|
||||
function handleUnitEnter() {
|
||||
if (
|
||||
model.value.unit === undefined
|
||||
|
||||
@@ -13,6 +13,10 @@
|
||||
class="text-bold d-inline"
|
||||
:source="parsedIng.note"
|
||||
/>
|
||||
<template v-else-if="parsedIng.recipeLink">
|
||||
<SafeMarkdown v-if="parsedIng.recipeLink" class="text-bold d-inline" :source="parsedIng.recipeLink" />
|
||||
<SafeMarkdown v-if="parsedIng.note" class="note" :source="parsedIng.note" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<SafeMarkdown
|
||||
v-if="parsedIng.name"
|
||||
@@ -39,9 +43,12 @@ interface Props {
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
scale: 1,
|
||||
});
|
||||
const route = useRoute();
|
||||
const $auth = useMealieAuth();
|
||||
const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
|
||||
|
||||
const parsedIng = computed(() => {
|
||||
return useParsedIngredientText(props.ingredient, props.scale);
|
||||
return useParsedIngredientText(props.ingredient, props.scale, true, groupSlug.value.toString());
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -20,6 +20,29 @@
|
||||
persistent-hint
|
||||
rows="4"
|
||||
/>
|
||||
<div v-if="childRecipes?.length">
|
||||
<v-card-text class="pt-6 pb-0">
|
||||
{{ $t('recipe.include-linked-recipes') }}
|
||||
</v-card-text>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="(childRecipe, i) in childRecipes"
|
||||
:key="childRecipe.recipeId + i"
|
||||
density="compact"
|
||||
class="my-0 py-0"
|
||||
@click="childRecipe.checked = !childRecipe.checked"
|
||||
>
|
||||
<v-checkbox
|
||||
hide-details
|
||||
density="compact"
|
||||
:input-value="childRecipe.checked"
|
||||
:label="childRecipe.name"
|
||||
class="my-0 py-0"
|
||||
color="secondary"
|
||||
/>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
@@ -166,6 +189,21 @@ onMounted(async () => {
|
||||
lastMadeReady.value = true;
|
||||
});
|
||||
|
||||
const childRecipes = computed(() => {
|
||||
return props.recipe.recipeIngredient?.map((ingredient) => {
|
||||
if (ingredient.referencedRecipe) {
|
||||
return {
|
||||
checked: false, // Default value for checked
|
||||
recipeId: ingredient.referencedRecipe.id || "", // Non-nullable recipeId
|
||||
...ingredient.referencedRecipe, // Spread the rest of the referencedRecipe properties
|
||||
};
|
||||
}
|
||||
else {
|
||||
return undefined;
|
||||
}
|
||||
}).filter(recipe => recipe !== undefined); // Filter out undefined values
|
||||
});
|
||||
|
||||
whenever(
|
||||
() => madeThisDialog.value,
|
||||
() => {
|
||||
@@ -250,6 +288,37 @@ async function createTimelineEvent() {
|
||||
}
|
||||
}
|
||||
|
||||
for (const childRecipe of childRecipes.value || []) {
|
||||
if (!childRecipe.checked) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const childTimelineEvent = {
|
||||
...newTimelineEvent.value,
|
||||
recipeId: childRecipe.recipeId,
|
||||
eventMessage: i18n.t("recipe.made-for-recipe", { recipe: childRecipe.name }),
|
||||
image: undefined,
|
||||
};
|
||||
try {
|
||||
await userApi.recipes.createTimelineEvent(childTimelineEvent);
|
||||
}
|
||||
catch (error) {
|
||||
console.error(`Failed to create timeline event for child recipe ${childRecipe.slug}:`, error);
|
||||
}
|
||||
|
||||
if (
|
||||
newTimelineEvent.value.timestamp
|
||||
&& (!childRecipe.lastMade || newTimelineEvent.value.timestamp > childRecipe.lastMade)
|
||||
) {
|
||||
try {
|
||||
await userApi.recipes.updateLastMade(childRecipe.slug || "", newTimelineEvent.value.timestamp);
|
||||
}
|
||||
catch (error) {
|
||||
console.error(`Failed to update last made date for child recipe ${childRecipe.slug}:`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update the image, if provided
|
||||
let imageError = false;
|
||||
if (newTimelineEventImage.value) {
|
||||
@@ -268,7 +337,6 @@ async function createTimelineEvent() {
|
||||
console.error("Failed to upload image for timeline event:", error);
|
||||
}
|
||||
}
|
||||
|
||||
if (imageError) {
|
||||
alert.error(i18n.t("recipe.added-to-timeline-but-failed-to-add-image"));
|
||||
}
|
||||
|
||||
@@ -290,10 +290,13 @@ watch(isParsing, () => {
|
||||
*/
|
||||
|
||||
async function saveRecipe() {
|
||||
const { data } = await api.recipes.updateOne(recipe.value.slug, recipe.value);
|
||||
setMode(PageMode.VIEW);
|
||||
const { data, error } = await api.recipes.updateOne(recipe.value.slug, recipe.value);
|
||||
if (!error) {
|
||||
setMode(PageMode.VIEW);
|
||||
}
|
||||
if (data?.slug) {
|
||||
router.push(`/g/${groupSlug.value}/r/` + data.slug);
|
||||
recipe.value = data as NoUndefinedField<Recipe>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
v-for="(ingredient, index) in recipe.recipeIngredient"
|
||||
:key="ingredient.referenceId"
|
||||
v-model="recipe.recipeIngredient[index]"
|
||||
:is-recipe="ingredientIsRecipe(ingredient)"
|
||||
enable-drag-handle
|
||||
enable-context-menu
|
||||
class="list-group-item"
|
||||
@@ -69,15 +70,59 @@
|
||||
<span>{{ parserToolTip }}</span>
|
||||
</v-tooltip>
|
||||
<RecipeDialogBulkAdd
|
||||
ref="domBulkAddDialog"
|
||||
class="mx-1 mb-1"
|
||||
style="display: none"
|
||||
@bulk-data="addIngredient"
|
||||
/>
|
||||
<BaseButton
|
||||
class="mb-1"
|
||||
@click="addIngredient"
|
||||
>
|
||||
{{ $t("general.add") }}
|
||||
</BaseButton>
|
||||
<div class="d-inline-flex split-button">
|
||||
<!-- Main button: Add Food -->
|
||||
<v-btn
|
||||
color="success"
|
||||
class="split-main ml-2"
|
||||
@click="addIngredient"
|
||||
>
|
||||
<v-icon start>
|
||||
{{ $globals.icons.createAlt }}
|
||||
</v-icon>
|
||||
{{ $t('general.add') || 'Add Food' }}
|
||||
</v-btn>
|
||||
<!-- Dropdown button -->
|
||||
<v-menu>
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
color="success"
|
||||
class="split-dropdown"
|
||||
v-bind="props"
|
||||
>
|
||||
<v-icon>{{ $globals.icons.chevronDown }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
slim
|
||||
density="comfortable"
|
||||
:prepend-icon="$globals.icons.foods"
|
||||
:title="$t('new-recipe.add-food')"
|
||||
@click="addIngredient"
|
||||
/>
|
||||
<v-list-item
|
||||
slim
|
||||
density="comfortable"
|
||||
:prepend-icon="$globals.icons.silverwareForkKnife"
|
||||
:title="$t('new-recipe.add-recipe')"
|
||||
@click="addRecipe"
|
||||
/>
|
||||
<v-list-item
|
||||
slim
|
||||
density="comfortable"
|
||||
:prepend-icon="$globals.icons.create"
|
||||
:title="$t('new-recipe.bulk-add')"
|
||||
@click="showBulkAdd"
|
||||
/>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -85,16 +130,18 @@
|
||||
<script setup lang="ts">
|
||||
import { VueDraggable } from "vue-draggable-plus";
|
||||
import type { NoUndefinedField } from "~/lib/api/types/non-generated";
|
||||
import type { Recipe } from "~/lib/api/types/recipe";
|
||||
import type { Recipe, RecipeIngredient } from "~/lib/api/types/recipe";
|
||||
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
|
||||
import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
|
||||
import { usePageState } from "~/composables/recipe-page/shared-state";
|
||||
import { uuid4 } from "~/composables/use-utils";
|
||||
|
||||
const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
|
||||
const ingredientsWithRecipe = new Map<string, boolean>();
|
||||
const i18n = useI18n();
|
||||
|
||||
const drag = ref(false);
|
||||
const domBulkAddDialog = ref<InstanceType<typeof RecipeDialogBulkAdd> | null>(null);
|
||||
const { toggleIsParsing } = usePageState(recipe.value.slug);
|
||||
|
||||
const hasFoodOrUnit = computed(() => {
|
||||
@@ -118,6 +165,22 @@ const parserToolTip = computed(() => {
|
||||
return i18n.t("recipe.parse-ingredients");
|
||||
});
|
||||
|
||||
function showBulkAdd() {
|
||||
domBulkAddDialog.value?.open();
|
||||
}
|
||||
|
||||
function ingredientIsRecipe(ingredient: RecipeIngredient): boolean {
|
||||
if (ingredient.referencedRecipe) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (ingredient.referenceId) {
|
||||
return !!ingredientsWithRecipe.get(ingredient.referenceId);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function addIngredient(ingredients: Array<string> | null = null) {
|
||||
if (ingredients?.length) {
|
||||
const newIngredients = ingredients.map((x) => {
|
||||
@@ -150,6 +213,41 @@ function addIngredient(ingredients: Array<string> | null = null) {
|
||||
}
|
||||
}
|
||||
|
||||
function addRecipe(recipes: Array<string> | null = null) {
|
||||
const refId = uuid4();
|
||||
ingredientsWithRecipe.set(refId, true);
|
||||
|
||||
if (recipes?.length) {
|
||||
const newRecipes = recipes.map((x) => {
|
||||
return {
|
||||
referenceId: refId,
|
||||
title: "",
|
||||
note: x,
|
||||
unit: undefined,
|
||||
referencedRecipe: undefined,
|
||||
quantity: 1,
|
||||
};
|
||||
});
|
||||
|
||||
if (newRecipes) {
|
||||
// @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
|
||||
recipe.value.recipeIngredient.push(...newRecipes);
|
||||
}
|
||||
}
|
||||
else {
|
||||
recipe.value.recipeIngredient.push({
|
||||
referenceId: refId,
|
||||
title: "",
|
||||
note: "",
|
||||
// @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
|
||||
unit: undefined,
|
||||
// @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
|
||||
referencedRecipe: undefined,
|
||||
quantity: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function insertNewIngredient(dest: number) {
|
||||
recipe.value.recipeIngredient.splice(dest, 0, {
|
||||
referenceId: uuid4(),
|
||||
@@ -163,3 +261,22 @@ function insertNewIngredient(dest: number) {
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.split-button {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.split-main {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
.split-dropdown {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
min-width: 30px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -268,6 +268,11 @@ const state = reactive({
|
||||
function shouldReview(ing: ParsedIngredient): boolean {
|
||||
console.debug(`Checking if ingredient needs review (input="${ing.input})":`, ing);
|
||||
|
||||
if (ing.ingredient.referencedRecipe) {
|
||||
console.debug("No review needed for sub-recipe ingredient");
|
||||
return false;
|
||||
}
|
||||
|
||||
if ((ing.confidence?.average || 0) < confidenceThreshold) {
|
||||
console.debug("Needs review due to low confidence:", ing.confidence?.average);
|
||||
return true;
|
||||
@@ -364,12 +369,21 @@ async function parseIngredients() {
|
||||
}
|
||||
state.loading.parser = true;
|
||||
try {
|
||||
const ingsAsString = props.ingredients.map(ing => parseIngredientText(ing, 1, false) ?? "");
|
||||
const ingsAsString = props.ingredients
|
||||
.filter(ing => !ing.referencedRecipe)
|
||||
.map(ing => parseIngredientText(ing, 1, false) ?? "");
|
||||
const { data, error } = await api.recipes.parseIngredients(parser.value, ingsAsString);
|
||||
if (error || !data) {
|
||||
throw new Error("Failed to parse ingredients");
|
||||
}
|
||||
parsedIngs.value = data;
|
||||
const parsed = data ?? [];
|
||||
const recipeRefs = props.ingredients.filter(ing => ing.referencedRecipe).map(ing => ({
|
||||
input: ing.note || "",
|
||||
confidence: {},
|
||||
ingredient: ing,
|
||||
}));
|
||||
parsedIngs.value = [...parsed, ...recipeRefs];
|
||||
state.currentParsedIndex = -1;
|
||||
state.allReviewed = false;
|
||||
createdUnits.clear();
|
||||
|
||||
@@ -262,32 +262,55 @@ const ingredientSections = computed<IngredientSection[]>(() => {
|
||||
if (!props.recipe.recipeIngredient) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return props.recipe.recipeIngredient.reduce((sections, ingredient) => {
|
||||
// if title append new section to the end of the array
|
||||
if (ingredient.title) {
|
||||
sections.push({
|
||||
sectionName: ingredient.title,
|
||||
ingredients: [ingredient],
|
||||
});
|
||||
|
||||
return sections;
|
||||
const addIngredientsToSections = (ingredients: RecipeIngredient[], sections: IngredientSection[], title: string | null) => {
|
||||
// If title is set, ensure the section exists before adding ingredients
|
||||
let section: IngredientSection | undefined;
|
||||
if (title) {
|
||||
section = sections.find(sec => sec.sectionName === title);
|
||||
if (!section) {
|
||||
section = { sectionName: title, ingredients: [] };
|
||||
sections.push(section);
|
||||
}
|
||||
}
|
||||
|
||||
// append new section if first
|
||||
if (sections.length === 0) {
|
||||
sections.push({
|
||||
sectionName: "",
|
||||
ingredients: [ingredient],
|
||||
});
|
||||
ingredients.forEach((ingredient) => {
|
||||
if (preferences.value.expandChildRecipes && ingredient.referencedRecipe?.recipeIngredient?.length) {
|
||||
// Recursively add to the section for this referenced recipe
|
||||
addIngredientsToSections(
|
||||
ingredient.referencedRecipe.recipeIngredient,
|
||||
sections,
|
||||
"",
|
||||
);
|
||||
}
|
||||
else {
|
||||
const sectionName = title || ingredient.title || "";
|
||||
if (sectionName) {
|
||||
let sec = sections.find(sec => sec.sectionName === sectionName);
|
||||
if (!sec) {
|
||||
sec = { sectionName, ingredients: [] };
|
||||
sections.push(sec);
|
||||
}
|
||||
ingredient.title = sectionName;
|
||||
sec.ingredients.push(ingredient);
|
||||
}
|
||||
else {
|
||||
if (sections.length === 0) {
|
||||
sections.push({
|
||||
sectionName: "",
|
||||
ingredients: [ingredient],
|
||||
});
|
||||
}
|
||||
else {
|
||||
sections[sections.length - 1].ingredients.push(ingredient);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return sections;
|
||||
}
|
||||
|
||||
// otherwise add ingredient to last section in the array
|
||||
sections[sections.length - 1].ingredients.push(ingredient);
|
||||
return sections;
|
||||
}, [] as IngredientSection[]);
|
||||
const sections: IngredientSection[] = [];
|
||||
addIngredientsToSections(props.recipe.recipeIngredient, sections, null);
|
||||
return sections;
|
||||
});
|
||||
|
||||
// Group instructions by section so we can style them independently
|
||||
|
||||
Reference in New Issue
Block a user