feat(frontend): ✨ Add Meal Tags + UI Improvements (#807)

* feat: ✨

* fix colors

* add additional support for settings meal tag

* add defaults to recipe

* use group reciep settings

* fix login infinite loading

* disable owner on initial load

* add skeleton loader

* add v-model support

* formatting

* fix overwriting existing values

* feat(frontend): ✨ add markdown preview for steps

* update black plus formatting

* update help text

* fix overwrite error

* remove print

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -5,10 +5,10 @@
         :class="{ 'on-hover': hover }"
         :elevation="hover ? 12 : 2"
         :to="route ? `/recipe/${slug}` : ''"
-        min-height="275"
+        :min-height="imageHeight + 75"
         @click="$emit('click')"
       >
-        <RecipeCardImage icon-size="200" :slug="slug" small :image-version="image">
+        <RecipeCardImage :icon-size="imageHeight" :height="imageHeight" :slug="slug" small :image-version="image">
           <v-expand-transition v-if="description">
             <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal" style="height: 100%">
               <v-card-text class="v-card--text-show white--text">
@@ -23,26 +23,28 @@
           </div>
         </v-card-title>
 
-        <v-card-actions>
-          <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
-          <RecipeRating :value="rating" :name="name" :slug="slug" :small="true" />
-          <v-spacer></v-spacer>
-          <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :is-category="false" />
-          <RecipeContextMenu
-            :slug="slug"
-            :name="name"
-            :recipe-id="recipeId"
-            :use-items="{
-              delete: true,
-              edit: true,
-              download: true,
-              mealplanner: true,
-              print: false,
-              share: true,
-            }"
-            @delete="$emit('delete', slug)"
-          />
-        </v-card-actions>
+        <slot name="actions">
+          <v-card-actions>
+            <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
+            <RecipeRating :value="rating" :name="name" :slug="slug" :small="true" />
+            <v-spacer></v-spacer>
+            <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :is-category="false" />
+            <RecipeContextMenu
+              :slug="slug"
+              :name="name"
+              :recipe-id="recipeId"
+              :use-items="{
+                delete: true,
+                edit: true,
+                download: true,
+                mealplanner: true,
+                print: false,
+                share: true,
+              }"
+              @delete="$emit('delete', slug)"
+            />
+          </v-card-actions>
+        </slot>
         <slot></slot>
       </v-card>
     </v-hover>
@@ -92,6 +94,10 @@ export default {
       required: true,
       type: Number,
     },
+    imageHeight: {
+      type: Number,
+      default: 200,
+    },
   },
   data() {
     return {

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -41,6 +41,7 @@
           </template>
           <v-date-picker v-model="newMealdate" no-title @input="pickerMenu = false"></v-date-picker>
         </v-menu>
+        <v-select v-model="newMealType" :return-object="false" :items="planTypeOptions" label="Entry Type"></v-select>
       </v-card-text>
     </BaseDialog>
     <v-menu
@@ -77,6 +78,7 @@ import { defineComponent, reactive, ref, toRefs, useContext, useRouter } from "@
 import { useClipboard, useShare } from "@vueuse/core";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
+import { MealType, planTypeOptions } from "~/composables/use-group-mealplan";
 
 export interface ContextMenuIncludes {
   delete: boolean;
@@ -153,6 +155,7 @@ export default defineComponent({
       loading: false,
       menuItems: [] as ContextMenuItem[],
       newMealdate: "",
+      newMealType: "dinner" as MealType,
       pickerMenu: false,
     });
 
@@ -265,7 +268,7 @@ export default defineComponent({
     async function addRecipeToPlan() {
       const { response } = await api.mealplans.createOne({
         date: state.newMealdate,
-        entryType: "dinner",
+        entryType: state.newMealType,
         title: "",
         text: "",
         recipeId: props.recipeId,
@@ -310,6 +313,7 @@ export default defineComponent({
       domConfirmDelete,
       domMealplanDialog,
       icon,
+      planTypeOptions,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -31,7 +31,7 @@
           <div class="mr-auto">
             {{ $t("search.results") }}
           </div>
-          <router-link to="/search"> {{ $t("search.advanced-search") }} </router-link>
+          <router-link to="/search?advanced=true"> {{ $t("search.advanced-search") }} </router-link>
         </v-card-actions>
 
         <RecipeCardMobile

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -2,7 +2,7 @@
   <div v-if="value && value.length > 0">
     <div class="d-flex justify-start">
       <h2 class="mb-4 mt-1">{{ $t("recipe.ingredients") }}</h2>
-    <AppButtonCopy btn-class="ml-auto" :copy-text="ingredientCopyText" />
+      <AppButtonCopy btn-class="ml-auto" :copy-text="ingredientCopyText" />
     </div>
     <div>
       <div v-for="(ingredient, index) in value" :key="'ingredient' + index">

frontend/components/Domain/Recipe/RecipeInstructions.vue

@@ -2,7 +2,7 @@
   <section @keyup.ctrl.90="undoMerge">
     <!-- Ingredient Link Editor -->
     <v-dialog v-model="dialog" width="600">
-      <v-card>
+      <v-card :ripple="false">
         <v-app-bar dark color="primary" class="mt-n1 mb-3">
           <v-icon large left>
             {{ $globals.icons.link }}
@@ -127,8 +127,7 @@
               </v-fade-transition>
             </v-card-title>
             <v-card-text v-if="edit">
-              <v-textarea :key="'instructions' + index" v-model="value[index]['text']" auto-grow dense rows="4">
-              </v-textarea>
+              <MarkdownEditor v-model="value[index]['text']" />
               <div
                 v-for="ing in step.ingredientReferences"
                 :key="ing.referenceId"
@@ -417,4 +416,9 @@ export default defineComponent({
 });
 </script>
 
+<style scoped>
+.v-card--link:before {
+  background: none;
+}
+</style>