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

* 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>

alembic/versions/2023-08-14-19.30.49_1825b5225403_added_recipe_note_to_shopping_list_.py

@@ -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 ###

frontend/components/Domain/Recipe/RecipeList.vue

@@ -1,22 +1,28 @@
 <template>
-  <v-list>
+  <v-list :class="tile ? 'd-flex flex-wrap background' : 'background'">
-    <v-list-item v-for="recipe in recipes" :key="recipe.id" :to="'/recipe/' + recipe.slug">
+    <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-avatar>
+      <v-list-item :to="'/recipe/' + recipe.slug" :class="attrs.class.listItem">
-        <v-icon class="pa-1 primary" dark> {{ $globals.icons.primary }} </v-icon>
+        <v-list-item-avatar :class="attrs.class.avatar">
-      </v-list-item-avatar>
+          <v-icon :class="attrs.class.icon" dark :small="small"> {{ $globals.icons.primary }} </v-icon>
-      <v-list-item-content>
+        </v-list-item-avatar>
-        <v-list-item-title>
+        <v-list-item-content :class="attrs.class.text">
-          {{ recipe.name }}
+          <v-list-item-title :class="listItem && listItemDescriptions[index] ? '' : 'pr-4'" :style="attrs.style.text.title">
-        </v-list-item-title>
+            {{ recipe.name }}
-        <v-list-item-subtitle>{{ recipe.description }}</v-list-item-subtitle>
+          </v-list-item-title>
-      </v-list-item-content>
+          <v-list-item-subtitle v-if="showDescription">{{ recipe.description }}</v-list-item-subtitle>
-      <slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
+          <v-list-item-subtitle v-if="listItem && listItemDescriptions[index]" :style="attrs.style.text.subTitle" v-html="listItemDescriptions[index]"/>
-    </v-list-item>
+        </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() {
+  setup(props) {
-    return {};
+    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>

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -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,
     };
   },

frontend/lib/api/types/group.ts

@@ -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;
 }

frontend/pages/shopping-lists/_id.vue

@@ -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">
+        <RecipeList :recipes="Array.from(recipeMap.values())" show-description>
-          <template v-for="(recipe, index) in listRecipes" #[`actions-${recipe.id}`]>
+          <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>>(() => {
+    const recipeMap = computed(() => new Map(
-      return shoppingList.value?.recipeReferences?.map((ref) => ref.recipe) ?? [];
+      (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,

mealie/db/models/group/shopping_list.py

@@ -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 (
+from mealie.db.models.recipe.api_extras import ShoppingListExtras, ShoppingListItemExtras, api_extras
-    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:

mealie/schema/group/group_shopping_list.py

@@ -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

mealie/services/group_services/shopping_lists.py

@@ -17,11 +17,7 @@ from mealie.schema.group.group_shopping_list import (
     ShoppingListMultiPurposeLabelCreate,
     ShoppingListSave,
 )
-from mealie.schema.recipe.recipe_ingredient import (
+from mealie.schema.recipe.recipe_ingredient import IngredientFood, IngredientUnit, RecipeIngredient
-    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:
+                if new_item.note and existing_item.note != new_item.note:
-                    existing_item.note = " | ".join([note for note in [existing_item.note, new_item.note] if 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