feat: Improvements To Adding A Recipe To A Shopping List (#3036)

* tweaked dialogs to make grammatical sense

* refactor ingredient rendering on recipe shopping list dialog
This commit is contained in:
Michael Genson 2024-01-26 09:27:36 -06:00 committed by GitHub
parent 8db5f7cce3
commit c6fbf8bce8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 94 additions and 40 deletions

View File

@ -26,40 +26,53 @@
>
<div style="max-height: 70vh; overflow-y: auto">
<v-card
v-for="(section, sectionIndex) in recipeIngredientSections" :key="section.recipeId + sectionIndex"
v-for="(recipeSection, recipeSectionIndex) in recipeIngredientSections" :key="recipeSection.recipeId + recipeSectionIndex"
elevation="0"
height="fit-content"
width="100%"
>
<v-divider v-if="sectionIndex > 0" class="mt-3" />
<v-divider v-if="recipeSectionIndex > 0" class="mt-3" />
<v-card-title
v-if="recipeIngredientSections.length > 1"
class="justify-center"
class="justify-center text-h5"
width="100%"
>
<v-container style="width: 100%;">
<v-row no-gutters class="ma-0 pa-0">
<v-col cols="12" align-self="center" class="text-center">
{{ section.recipeName }}
{{ recipeSection.recipeName }}
</v-col>
</v-row>
<v-row v-if="section.recipeScale > 1" no-gutters class="ma-0 pa-0">
<v-row v-if="recipeSection.recipeScale > 1" no-gutters class="ma-0 pa-0">
<!-- TODO: make this editable in the dialog and visible on single-recipe lists -->
<v-col cols="12" align-self="center" class="text-center">
({{ $tc("recipe.quantity") }}: {{ section.recipeScale }})
({{ $tc("recipe.quantity") }}: {{ recipeSection.recipeScale }})
</v-col>
</v-row>
</v-container>
</v-card-title>
<div>
<div
v-for="(ingredientSection, ingredientSectionIndex) in recipeSection.ingredientSections"
:key="recipeSection.recipeId + recipeSectionIndex + ingredientSectionIndex"
>
<v-card-title v-if="ingredientSection.sectionName" class="ingredient-title mt-2 pb-0 text-h6">
{{ ingredientSection.sectionName }}
</v-card-title>
<div
:class="$vuetify.breakpoint.smAndDown ? '' : 'ingredient-grid'"
:style="$vuetify.breakpoint.smAndDown ? '' : { gridTemplateRows: `repeat(${Math.ceil(section.ingredients.length / 2)}, min-content)` }"
:style="$vuetify.breakpoint.smAndDown ? '' : { gridTemplateRows: `repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, min-content)` }"
>
<v-list-item
v-for="(ingredientData, i) in section.ingredients"
:key="'ingredient' + i"
v-for="(ingredientData, i) in ingredientSection.ingredients"
:key="recipeSection.recipeId + recipeSectionIndex + ingredientSectionIndex + i"
dense
@click="recipeIngredientSections[sectionIndex].ingredients[i].checked = !recipeIngredientSections[sectionIndex].ingredients[i].checked"
@click="recipeIngredientSections[recipeSectionIndex]
.ingredientSections[ingredientSectionIndex]
.ingredients[i].checked = !recipeIngredientSections[recipeSectionIndex]
.ingredientSections[ingredientSectionIndex]
.ingredients[i]
.checked"
>
<v-checkbox
hide-details
@ -71,10 +84,12 @@
<RecipeIngredientListItem
:ingredient="ingredientData.ingredient"
:disable-amount="ingredientData.disableAmount"
:scale="section.recipeScale" />
:scale="recipeSection.recipeScale" />
</v-list-item-content>
</v-list-item>
</div>
</div>
</div>
</v-card>
</div>
<div class="d-flex justify-end mb-4 mt-2">
@ -112,17 +127,22 @@ export interface RecipeWithScale extends Recipe {
scale: number;
}
export interface ShoppingListRecipeIngredient {
export interface ShoppingListIngredient {
checked: boolean;
ingredient: RecipeIngredient;
disableAmount: boolean;
}
export interface ShoppingListIngredientSection {
sectionName: string;
ingredients: ShoppingListIngredient[];
}
export interface ShoppingListRecipeIngredientSection {
recipeId: string;
recipeName: string;
recipeScale: number;
ingredients: ShoppingListRecipeIngredient[];
ingredientSections: ShoppingListIngredientSection[];
}
export default defineComponent({
@ -191,7 +211,7 @@ export default defineComponent({
continue;
}
const shoppingListIngredients: ShoppingListRecipeIngredient[] = recipe.recipeIngredient.map((ing) => {
const shoppingListIngredients: ShoppingListIngredient[] = recipe.recipeIngredient.map((ing) => {
return {
checked: true,
ingredient: ing,
@ -199,11 +219,35 @@ export default defineComponent({
}
});
const shoppingListIngredientSections = shoppingListIngredients.reduce((sections, ing) => {
// if title append new section to the end of the array
if (ing.ingredient.title) {
sections.push({
sectionName: ing.ingredient.title,
ingredients: [ing],
});
return sections;
}
// append new section if first
if (sections.length === 0) {
sections.push({
sectionName: "",
ingredients: [ing],
});
return sections;
}
// otherwise add ingredient to last section in the array
sections[sections.length - 1].ingredients.push(ing);
return sections;
}, [] as ShoppingListIngredientSection[]);
recipeSectionMap.set(recipe.slug, {
recipeId: recipe.id,
recipeName: recipe.name,
recipeScale: recipe.scale,
ingredients: shoppingListIngredients,
ingredientSections: shoppingListIngredientSections,
})
}
@ -231,11 +275,13 @@ export default defineComponent({
}
function bulkCheckIngredients(value = true) {
recipeIngredientSections.value.forEach((section) => {
section.ingredients.forEach((ing) => {
recipeIngredientSections.value.forEach((recipeSection) => {
recipeSection.ingredientSections.forEach((ingSection) => {
ingSection.ingredients.forEach((ing) => {
ing.checked = value;
});
});
});
}
async function addRecipesToList() {
@ -246,11 +292,13 @@ export default defineComponent({
}
const ingredients: RecipeIngredient[] = [];
section.ingredients.forEach((ing) => {
section.ingredientSections.forEach((ingSection) => {
ingSection.ingredients.forEach((ing) => {
if (ing.checked) {
ingredients.push(ing.ingredient);
}
});
});
if (!ingredients.length) {
return;
@ -272,7 +320,11 @@ export default defineComponent({
}
})
success ? alert.success(i18n.t("recipe.recipes-added-to-list") as string)
const successMessage = promises.length === 1
? i18n.t("recipe.successfully-added-to-list") as string
: i18n.t("recipe.failed-to-add-to-list") as string;
success ? alert.success(successMessage)
: alert.error(i18n.t("failed-to-add-recipes-to-list") as string)
state.shoppingListDialog = false;

View File

@ -473,9 +473,11 @@
"add-to-timeline": "Add to Timeline",
"recipe-added-to-list": "Recipe added to list",
"recipes-added-to-list": "Recipes added to list",
"successfully-added-to-list": "Successfully added to list",
"recipe-added-to-mealplan": "Recipe added to mealplan",
"failed-to-add-recipes-to-list": "Failed to add recipe to list",
"failed-to-add-recipe-to-mealplan": "Failed to add recipe to mealplan",
"failed-to-add-to-list": "Failed to add to list",
"yield": "Yield",
"quantity": "Quantity",
"choose-unit": "Choose Unit",