fix: Make Meal Planner Notes Not Clickable (#3274)

* selectively remove recipe card components when there is no recipe

* copied changes to regular card

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -3,8 +3,9 @@
     <v-hover v-slot="{ hover }" :open-delay="50">
       <v-card
         :class="{ 'on-hover': hover }"
+        :style="{ cursor }"
         :elevation="hover ? 12 : 2"
-        :to="route ? recipeRoute : ''"
+        :to="recipeRoute"
         :min-height="imageHeight + 75"
         @click="$emit('click')"
       >
@@ -33,7 +34,7 @@
         </v-card-title>
 
         <slot name="actions">
-          <v-card-actions class="px-1">
+          <v-card-actions v-if="showRecipeContent" class="px-1">
             <RecipeFavoriteBadge v-if="isOwnGroup" class="absolute" :slug="slug" show-always />
 
             <RecipeRating class="pb-1" :value="rating" :name="name" :slug="slug" :small="true" />
@@ -101,10 +102,6 @@ export default defineComponent({
       required: false,
       default: "abc123",
     },
-    route: {
-      type: Boolean,
-      default: true,
-    },
     tags: {
       type: Array,
       default: () => [],
@@ -123,14 +120,18 @@ export default defineComponent({
     const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
-    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const showRecipeContent = computed(() => props.recipeId && props.slug);
     const recipeRoute = computed<string>(() => {
-      return `/g/${groupSlug.value}/r/${props.slug}`;
+      return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
     });
+    const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
 
     return {
       isOwnGroup,
       recipeRoute,
+      showRecipeContent,
+      cursor,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -3,6 +3,7 @@
     <v-card
       :ripple="false"
       :class="isFlat ? 'mx-auto flat' : 'mx-auto'"
+      :style="{ cursor }"
       hover
       :to="$listeners.selected ? undefined : recipeRoute"
       @click="$emit('selected')"
@@ -37,8 +38,9 @@
           </v-list-item-subtitle>
           <div class="d-flex flex-wrap justify-end align-center">
             <slot name="actions">
-              <RecipeFavoriteBadge v-if="isOwnGroup" :slug="slug" show-always />
+              <RecipeFavoriteBadge v-if="isOwnGroup && showRecipeContent" :slug="slug" show-always />
               <v-rating
+                v-if="showRecipeContent"
                 color="secondary"
                 :class="isOwnGroup ? 'ml-auto' : 'ml-auto pb-2'"
                 background-color="secondary lighten-3"
@@ -52,7 +54,7 @@
               <!-- If we're not logged-in, no items display, so we hide this menu -->
               <!-- We also add padding to the v-rating above to compensate -->
               <RecipeContextMenu
-                v-if="isOwnGroup"
+                v-if="isOwnGroup && showRecipeContent"
                 :slug="slug"
                 :menu-icon="$globals.icons.dotsHorizontal"
                 :name="name"
@@ -113,10 +115,6 @@ export default defineComponent({
       required: false,
       default: "abc123",
     },
-    route: {
-      type: Boolean,
-      default: true,
-    },
     recipeId: {
       type: String,
       required: true,
@@ -135,14 +133,19 @@ export default defineComponent({
     const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
-    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const showRecipeContent = computed(() => props.recipeId && props.slug);
     const recipeRoute = computed<string>(() => {
-      return `/g/${groupSlug.value}/r/${props.slug}`;
+      return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
     });
+    const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
+
 
     return {
       isOwnGroup,
       recipeRoute,
+      showRecipeContent,
+      cursor,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -45,7 +45,6 @@
           :rating="recipe.rating"
           :image="recipe.image"
           :recipe-id="recipe.id"
-          :route="true"
           v-on="$listeners.selected ? { selected: () => handleSelect(recipe) } : {}"
         />
       </v-card>

frontend/pages/group/mealplan/planner/view.vue

@@ -38,7 +38,6 @@
             :key="mealplan.id"
             :recipe-id="mealplan.recipe ? mealplan.recipe.id : ''"
             class="mb-2"
-            :route="mealplan.recipe ? true : false"
             :rating="mealplan.recipe ? mealplan.recipe.rating : 0"
             :slug="mealplan.recipe ? mealplan.recipe.slug : mealplan.title"
             :description="mealplan.recipe ? mealplan.recipe.description : mealplan.text"