Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-05-24 01:12:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: Display Shopping List Item Recipe Refs (#2501)

Browse Source 
* added recipe ref display to shopping list items

* added backend support for recipe notes

* added recipe note to item recipe ref display

* fixed note merge bug with 3+ notes

* tweak display

* lint

* updated alembic refs

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
This commit is contained in:
Michael Genson 2023-08-21 12:18:37 -05:00 committed by GitHub
parent 50a92c165c
commit d6e4829e6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 247 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
alembic/versions/2023-08-14-19.30.49_1825b5225403_added_recipe_note_to_shopping_list_.py Normal file
View File

@ -0,0 +1,28 @@
"""added recipe note to shopping list recipe ref
Revision ID: 1825b5225403
Revises: 04ac51cbe9a4
Create Date: 2023-08-14 19:30:49.103185
"""
import sqlalchemy as sa
from alembic import op
# revision identifiers, used by Alembic.
revision = "1825b5225403"
down_revision = "04ac51cbe9a4"
branch_labels = None
depends_on = None
def upgrade():
# ### commands auto generated by Alembic - please adjust! ###
op.add_column("shopping_list_item_recipe_reference", sa.Column("recipe_note", sa.String(), nullable=True))
# ### end Alembic commands ###
def downgrade():
# ### commands auto generated by Alembic - please adjust! ###
op.drop_column("shopping_list_item_recipe_reference", "recipe_note")
# ### end Alembic commands ###

147
frontend/components/Domain/Recipe/RecipeList.vue
View File

@ -1,22 +1,28 @@
<template>
<v-list>
<v-list-item v-for="recipe in recipes" :key="recipe.id" :to="'/recipe/' + recipe.slug">
<v-list-item-avatar>
<v-icon class="pa-1 primary" dark> {{ $globals.icons.primary }} </v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>
{{ recipe.name }}
</v-list-item-title>
<v-list-item-subtitle>{{ recipe.description }}</v-list-item-subtitle>
</v-list-item-content>
<slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
</v-list-item>
<v-list :class="tile ? 'd-flex flex-wrap background' : 'background'">
<v-sheet v-for="recipe, index in recipes" :key="recipe.id" :class="attrs.class.sheet" :style="tile ? 'width: fit-content;' : 'width: 100%;'">
<v-list-item :to="'/recipe/' + recipe.slug" :class="attrs.class.listItem">
<v-list-item-avatar :class="attrs.class.avatar">
<v-icon :class="attrs.class.icon" dark :small="small"> {{ $globals.icons.primary }} </v-icon>
</v-list-item-avatar>
<v-list-item-content :class="attrs.class.text">
<v-list-item-title :class="listItem && listItemDescriptions[index] ? '' : 'pr-4'" :style="attrs.style.text.title">
{{ recipe.name }}
</v-list-item-title>
<v-list-item-subtitle v-if="showDescription">{{ recipe.description }}</v-list-item-subtitle>
<v-list-item-subtitle v-if="listItem && listItemDescriptions[index]" :style="attrs.style.text.subTitle" v-html="listItemDescriptions[index]"/>
</v-list-item-content>
<slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
</v-list-item>
</v-sheet>
</v-list>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import { computed, defineComponent } from "@nuxtjs/composition-api";
import DOMPurify from "dompurify";
import { useFraction } from "~/composables/recipes/use-fraction";
import { ShoppingListItemOut } from "~/lib/api/types/group";
import { RecipeSummary } from "~/lib/api/types/recipe";
export default defineComponent({
@ -25,9 +31,118 @@ export default defineComponent({
type: Array as () => RecipeSummary[],
required: true,
},
listItem: {
type: Object as () => ShoppingListItemOut | undefined,
default: undefined,
},
small: {
type: Boolean,
default: false,
},
tile: {
type: Boolean,
default: false,
},
showDescription: {
type: Boolean,
default: false,
},
},
setup() {
return {};
setup(props) {
const { frac } = useFraction();
const attrs = computed(() => {
return props.small ? {
class: {
sheet: props.tile ? "mb-1 me-1 justify-center align-center" : "mb-1 justify-center align-center",
listItem: "px-0",
avatar: "ma-0",
icon: "ma-0 pa-0 primary",
text: "pa-0",
},
style: {
text: {
title: "font-size: small;",
subTitle: "font-size: x-small;",
},
},
} : {
class: {
sheet: props.tile ? "mx-1 justify-center align-center" : "mb-1 justify-center align-center",
listItem: "px-4",
avatar: "",
icon: "pa-1 primary",
text: "",
},
style: {
text: {
title: "",
subTitle: "",
},
},
}
});
function sanitizeHTML(rawHtml: string) {
return DOMPurify.sanitize(rawHtml, {
USE_PROFILES: { html: true },
ALLOWED_TAGS: ["strong", "sup"],
});
}
const listItemDescriptions = computed<string[]>(() => {
if (
props.recipes.length === 1 // we don't need to specify details if there's only one recipe ref
|| !props.listItem?.recipeReferences
|| props.listItem.recipeReferences.length !== props.recipes.length
) {
return props.recipes.map((_) => "")
}
const listItemDescriptions: string[] = [];
for (let i = 0; i < props.recipes.length; i++) {
const itemRef = props.listItem?.recipeReferences[i];
const quantity = (itemRef.recipeQuantity || 1) * (itemRef.recipeScale || 1);
let listItemDescription = ""
if (props.listItem.unit?.fraction) {
const fraction = frac(quantity, 10, true);
if (fraction[0] !== undefined && fraction[0] > 0) {
listItemDescription += fraction[0];
}
if (fraction[1] > 0) {
listItemDescription += ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>`;
}
else {
listItemDescription = (quantity).toString();
}
}
else {
listItemDescription = (Math.round(quantity*100)/100).toString();
}
if (props.listItem.unit) {
const unitDisplay = props.listItem.unit.useAbbreviation && props.listItem.unit.abbreviation
? props.listItem.unit.abbreviation : props.listItem.unit.name;
listItemDescription += ` ${unitDisplay}`
}
if (itemRef.recipeNote) {
listItemDescription += `, ${itemRef.recipeNote}`
}
listItemDescriptions.push(sanitizeHTML(listItemDescription));
}
return listItemDescriptions;
});
return {
attrs,
listItemDescriptions,
};
},
});
</script>

64
frontend/components/Domain/ShoppingList/ShoppingListItem.vue
View File

@ -26,11 +26,37 @@
<div v-if="!listItem.checked" style="min-width: 72px">
<v-menu offset-x left min-width="125px">
<template #activator="{ on, attrs }">
<v-tooltip
v-if="recipeList && recipeList.length"
open-delay="200"
transition="slide-x-reverse-transition"
dense
right
content-class="text-caption"
>
<template #activator="{ on: onBtn, attrs: attrsBtn }">
<v-btn small class="ml-2" icon @click="displayRecipeRefs = !displayRecipeRefs" v-bind="attrsBtn" v-on="onBtn">
<v-icon>
{{ $globals.icons.potSteam }}
</v-icon>
</v-btn>
</template>
<span>Toggle Recipes</span>
</v-tooltip>
<!-- Dummy button so the spacing is consistent when labels are enabled -->
<v-btn v-else small class="ml-2" icon disabled>
</v-btn>
<v-btn small class="ml-2 handle" icon v-bind="attrs" v-on="on">
<v-icon>
{{ $globals.icons.arrowUpDown }}
</v-icon>
</v-btn>
<v-btn small class="ml-2" icon @click="toggleEdit(true)">
<v-icon>
{{ $globals.icons.edit }}
</v-icon>
</v-btn>
</template>
<v-list dense>
<v-list-item v-for="action in contextMenu" :key="action.event" dense @click="contextHandler(action.event)">
@ -38,14 +64,14 @@
</v-list-item>
</v-list>
</v-menu>
<v-btn small class="ml-2" icon @click="toggleEdit(true)">
<v-icon>
{{ $globals.icons.edit }}
</v-icon>
</v-btn>
</div>
</v-col>
</v-row>
<v-row v-if="!listItem.checked && recipeList && recipeList.length && displayRecipeRefs" no-gutters class="mb-2">
<v-col cols="auto" style="width: 100%;">
<RecipeList :recipes="recipeList" :list-item="listItem" small tile />
</v-col>
</v-row>
<v-row v-if="listItem.checked" no-gutters class="mb-2">
<v-col cols="auto">
<div class="text-caption font-weight-light font-italic">
@ -75,7 +101,8 @@ import ShoppingListItemEditor from "./ShoppingListItemEditor.vue";
import MultiPurposeLabel from "./MultiPurposeLabel.vue";
import { ShoppingListItemOut } from "~/lib/api/types/group";
import { MultiPurposeLabelOut, MultiPurposeLabelSummary } from "~/lib/api/types/labels";
import { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
import { IngredientFood, IngredientUnit, RecipeSummary } from "~/lib/api/types/recipe";
import RecipeList from "~/components/Domain/Recipe/RecipeList.vue";
interface actions {
text: string;
@ -105,10 +132,15 @@ export default defineComponent({
type: Array as () => IngredientFood[],
required: true,
},
recipes: {
type: Map<string, RecipeSummary>,
default: undefined,
}
},
setup(props, context) {
const { i18n } = useContext();
const itemLabelCols = ref<string>(props.value.checked ? "auto" : props.showLabel ? "6" : "8");
const displayRecipeRefs = ref(false);
const itemLabelCols = ref<string>(props.value.checked ? "auto" : props.showLabel ? "4" : "6");
const contextMenu: actions[] = [
{
@ -190,16 +222,34 @@ export default defineComponent({
return undefined;
});
const recipeList = computed<RecipeSummary[]>(() => {
const recipeList: RecipeSummary[] = [];
if (!listItem.value.recipeReferences) {
return recipeList;
}
listItem.value.recipeReferences.forEach((ref) => {
const recipe = props.recipes.get(ref.recipeId)
if (recipe) {
recipeList.push(recipe);
}
});
return recipeList;
});
return {
updatedLabels,
save,
contextHandler,
displayRecipeRefs,
edit,
contextMenu,
itemLabelCols,
listItem,
localListItem,
label,
recipeList,
toggleEdit,
};
},

3
frontend/lib/api/types/group.ts
View File

@ -359,6 +359,7 @@ export interface ShoppingListItemRecipeRefCreate {
recipeId: string;
recipeQuantity?: number;
recipeScale?: number;
recipeNote?: string;
}
export interface ShoppingListItemOut {
quantity?: number;
@ -387,6 +388,7 @@ export interface ShoppingListItemRecipeRefOut {
recipeId: string;
recipeQuantity?: number;
recipeScale?: number;
recipeNote?: string;
id: string;
shoppingListItemId: string;
}
@ -394,6 +396,7 @@ export interface ShoppingListItemRecipeRefUpdate {
recipeId: string;
recipeQuantity?: number;
recipeScale?: number;
recipeNote?: string;
id: string;
shoppingListItemId: string;
}

15
frontend/pages/shopping-lists/_id.vue
View File

@ -19,6 +19,7 @@
:labels="allLabels || []"
:units="allUnits || []"
:foods="allFoods || []"
:recipes="recipeMap"
@checked="saveListItem"
@save="saveListItem"
@delete="deleteListItem(item)"
@ -46,6 +47,7 @@
:labels="allLabels || []"
:units="allUnits || []"
:foods="allFoods || []"
:recipes="recipeMap"
@checked="saveListItem"
@save="saveListItem"
@delete="deleteListItem(item)"
@ -175,8 +177,8 @@
{{ $tc('shopping-list.linked-recipes-count', shoppingList.recipeReferences ? shoppingList.recipeReferences.length : 0) }}
</div>
<v-divider class="my-4"></v-divider>
<RecipeList :recipes="listRecipes">
<template v-for="(recipe, index) in listRecipes" #[`actions-${recipe.id}`]>
<RecipeList :recipes="Array.from(recipeMap.values())" show-description>
<template v-for="(recipe, index) in recipeMap.values()" #[`actions-${recipe.id}`]>
<v-list-item-action :key="'item-actions-decrease' + recipe.id">
<v-btn icon @click.prevent="removeRecipeReferenceToList(recipe.id)">
<v-icon color="grey lighten-1">{{ $globals.icons.minus }}</v-icon>
@ -530,9 +532,10 @@ export default defineComponent({
// =====================================
// Add/Remove Recipe References
const listRecipes = computed<Array<any>>(() => {
return shoppingList.value?.recipeReferences?.map((ref) => ref.recipe) ?? [];
});
const recipeMap = computed(() => new Map(
(shoppingList.value?.recipeReferences?.map((ref) => ref.recipe) ?? [])
.map((recipe) => [recipe.id || "", recipe]))
);
async function addRecipeReferenceToList(recipeId: string) {
if (!shoppingList.value || recipeReferenceLoading.value) {
@ -741,10 +744,10 @@ export default defineComponent({
getLabelColor,
itemsByLabel,
listItems,
listRecipes,
loadingCounter,
preferences,
presentLabels,
recipeMap,
removeRecipeReferenceToList,
reorderLabelsDialog,
toggleReorderLabelsDialog,

7
mealie/db/models/group/shopping_list.py
View File

@ -5,11 +5,7 @@ from sqlalchemy.ext.orderinglist import ordering_list
from sqlalchemy.orm import Mapped, mapped_column
from mealie.db.models.labels import MultiPurposeLabel
from mealie.db.models.recipe.api_extras import (
ShoppingListExtras,
ShoppingListItemExtras,
api_extras,
)
from mealie.db.models.recipe.api_extras import ShoppingListExtras, ShoppingListItemExtras, api_extras
from .._model_base import BaseMixins, SqlAlchemyBase
from .._model_utils import GUID, auto_init
@ -30,6 +26,7 @@ class ShoppingListItemRecipeReference(BaseMixins, SqlAlchemyBase):
recipe: Mapped[Optional["RecipeModel"]] = orm.relationship("RecipeModel", back_populates="shopping_list_item_refs")
recipe_quantity: Mapped[float] = mapped_column(Float, nullable=False)
recipe_scale: Mapped[float | None] = mapped_column(Float, default=1)
recipe_note: Mapped[str | None] = mapped_column(String)
@auto_init()
def __init__(self, **_) -> None:

3
mealie/schema/group/group_shopping_list.py
View File

@ -35,6 +35,9 @@ class ShoppingListItemRecipeRefCreate(MealieModel):
recipe_scale: NoneFloat = 1
"""the number of times this recipe has been added"""
recipe_note: str | None = None
"""the original note from the recipe"""
@validator("recipe_quantity", pre=True)
def default_none_to_zero(cls, v):
return 0 if v is None else v

22
mealie/services/group_services/shopping_lists.py
View File

@ -17,11 +17,7 @@ from mealie.schema.group.group_shopping_list import (
ShoppingListMultiPurposeLabelCreate,
ShoppingListSave,
)
from mealie.schema.recipe.recipe_ingredient import (
IngredientFood,
IngredientUnit,
RecipeIngredient,
)
from mealie.schema.recipe.recipe_ingredient import IngredientFood, IngredientUnit, RecipeIngredient
from mealie.schema.response.pagination import OrderDirection, PaginationQuery
from mealie.schema.user.user import GroupInDB, PrivateUser
@ -68,6 +64,11 @@ class ShoppingListService:
if to_item.note != from_item.note:
to_item.note = " | ".join([note for note in [to_item.note, from_item.note] if note])
if from_item.note and to_item.note != from_item.note:
notes: set[str] = set(to_item.note.split(" | ")) if to_item.note else set()
notes.add(from_item.note)
to_item.note = " | ".join([note for note in notes if note])
if to_item.extras and from_item.extras:
to_item.extras.update(from_item.extras)
@ -318,7 +319,10 @@ class ShoppingListService:
unit_id=unit_id,
recipe_references=[
ShoppingListItemRecipeRefCreate(
recipe_id=recipe_id, recipe_quantity=ingredient.quantity, recipe_scale=scale
recipe_id=recipe_id,
recipe_quantity=ingredient.quantity,
recipe_scale=scale,
recipe_note=ingredient.note or None,
)
],
)
@ -336,8 +340,10 @@ class ShoppingListService:
existing_item.recipe_references[0].recipe_quantity += ingredient.quantity # type: ignore
# merge notes
if existing_item.note != new_item.note:
existing_item.note = " | ".join([note for note in [existing_item.note, new_item.note] if note])
if new_item.note and existing_item.note != new_item.note:
notes: set[str] = set(existing_item.note.split(" | ")) if existing_item.note else set()
notes.add(new_item.note)
existing_item.note = " | ".join([note for note in notes if note])
merged = True
break