From 6e680c972a366e5f0621de3c47211ecf7f977b56 Mon Sep 17 00:00:00 2001
From: Marcus Noble <AverageMarcus@users.noreply.github.com>
Date: Wed, 10 Jul 2024 10:43:33 +0100
Subject: [PATCH] feat: Show recipe tags on mobile view and meal plan (#3864)

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
---
 frontend/components/Domain/Recipe/RecipeCardMobile.vue | 9 +++++++++
 frontend/pages/group/mealplan/planner/view.vue         | 1 +
 2 files changed, 10 insertions(+)

diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index a5d4cce4803a..3d13ce7da395 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -36,6 +36,9 @@
           <v-list-item-subtitle>
             <SafeMarkdown :source="description" />
           </v-list-item-subtitle>
+          <div class="d-flex flex-wrap justify-start">
+            <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" />
+          </div>
           <div class="d-flex flex-wrap justify-end align-center">
             <slot name="actions">
               <RecipeFavoriteBadge v-if="isOwnGroup && showRecipeContent" :recipe-id="recipeId" show-always />
@@ -83,6 +86,7 @@ import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
 import RecipeRating from "./RecipeRating.vue";
+import RecipeChips from "./RecipeChips.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
@@ -91,6 +95,7 @@ export default defineComponent({
     RecipeContextMenu,
     RecipeRating,
     RecipeCardImage,
+    RecipeChips,
   },
   props: {
     name: {
@@ -114,6 +119,10 @@ export default defineComponent({
       required: false,
       default: "abc123",
     },
+    tags: {
+      type: Array,
+      default: () => [],
+    },
     recipeId: {
       type: String,
       required: true,
diff --git a/frontend/pages/group/mealplan/planner/view.vue b/frontend/pages/group/mealplan/planner/view.vue
index baa916e29a65..434009870a4b 100644
--- a/frontend/pages/group/mealplan/planner/view.vue
+++ b/frontend/pages/group/mealplan/planner/view.vue
@@ -42,6 +42,7 @@
             :slug="mealplan.recipe ? mealplan.recipe.slug : mealplan.title"
             :description="mealplan.recipe ? mealplan.recipe.description : mealplan.text"
             :name="mealplan.recipe ? mealplan.recipe.name : mealplan.title"
+            :tags="mealplan.recipe ? mealplan.recipe.tags : []"
           />
         </div>
       </v-col>