prop as whole recipe

frontend/src/components/Recipe/RecipeViewer/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <v-card-title class="headline">
-      {{ name }}
+      {{ recipe.name }}
     </v-card-title>
     <v-card-text>
-      <vue-markdown :source="description"> </vue-markdown>
+      <vue-markdown :source="recipe.description"> </vue-markdown>
       <v-row dense disabled>
         <v-col>
           <v-btn
-            v-if="yields"
+            v-if="recipe.yields"
             dense
             small
             :hover="false"
@@ -21,59 +21,59 @@
             {{ yields }}
           </v-btn>
         </v-col>
-        <Rating :value="rating" :name="name" :slug="slug" />
+        <Rating :value="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
       </v-row>
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
-          <Ingredients :value="ingredients" :edit="false" />
+          <Ingredients :value="recipe.recipeIngredient" :edit="false" />
           <div v-if="medium">
-            <v-card class="mt-2" v-if="categories.length > 0">
+            <v-card class="mt-2" v-if="recipe.recipeCategory.length > 0">
               <v-card-title class="py-2">
                 {{ $t("recipe.categories") }}
               </v-card-title>
               <v-divider class="mx-2"></v-divider>
               <v-card-text>
-                <RecipeChips :items="categories" />
+                <RecipeChips :items="recipe.recipeCategory" />
               </v-card-text>
             </v-card>
-            <v-card class="mt-2" v-if="tags.length > 0">
+            <v-card class="mt-2" v-if="recipe.tags.length > 0">
               <v-card-title class="py-2">
                 {{ $t("tag.tags") }}
               </v-card-title>
               <v-divider class="mx-2"></v-divider>
               <v-card-text>
-                <RecipeChips :items="tags" :isCategory="false" />
+                <RecipeChips :items="recipe.tags" :isCategory="false" />
               </v-card-text>
             </v-card>
 
-            <Nutrition :value="nutrition" :edit="false" />
+            <Nutrition v-if="recipe.settings.showNutrition" :value="recipe.nutrition" :edit="false" />
-            <Assets :value="assets" :edit="false" :slug="slug" />
+            <Assets v-if="recipe.settings.showAssets" :value="recipe.assets" :edit="false" :slug="recipe.slug" />
           </div>
         </v-col>
         <v-divider v-if="medium" class="my-divider" :vertical="true"></v-divider>
 
         <v-col cols="12" sm="12" md="8" lg="8">
-          <Instructions :value="instructions" :edit="false" />
+          <Instructions :value="recipe.recipeInstructions" :edit="false" />
-          <Notes :value="notes" :edit="false" />
+          <Notes :value="recipe.notes" :edit="false" />
         </v-col>
       </v-row>
       <div v-if="!medium">
-        <RecipeChips :title="$t('recipe.categories')" :items="categories" />
+        <RecipeChips :title="$t('recipe.categories')" :items="recipe.recipeCategory" />
-        <RecipeChips :title="$t('tag.tags')" :items="tags" />
+        <RecipeChips :title="$t('tag.tags')" :items="recipe.tags" />
-        <Nutrition :value="nutrition" :edit="false" />
+        <Nutrition v-if="recipe.settings.showNutrition" :value="recipe.nutrition" :edit="false" />
-        <Assets :value="assets" :edit="false" :slug="slug" />
+        <Assets v-if="recipe.settings.showAssets" :value="recipe.assets" :edit="false" :slug="recipe.slug" />
       </div>
       <v-row class="mt-2 mb-1">
         <v-col></v-col>
         <v-btn
-          v-if="orgURL"
+          v-if="recipe.orgURL"
           dense
           small
           :hover="false"
           type="label"
           :ripple="false"
           elevation="0"
-          :href="orgURL"
+          :href="recipe.orgURL"
           color="secondary darken-1"
           target="_blank"
           class="rounded-sm mr-4"
@@ -107,19 +107,7 @@ export default {
     Rating,
   },
   props: {
-    name: String,
+    recipe: Object,
-    slug: String,
-    description: String,
-    ingredients: Array,
-    instructions: Array,
-    categories: Array,
-    tags: Array,
-    notes: Array,
-    rating: Number,
-    yields: String,
-    orgURL: String,
-    nutrition: Object,
-    assets: Array,
   },
   data() {
     return {

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -25,22 +25,7 @@
         class="sticky"
       />
 
-      <RecipeViewer
+      <RecipeViewer v-if="!form" :recipe="recipeDetails" />
-        v-if="!form"
-        :name="recipeDetails.name"
-        :ingredients="recipeDetails.recipeIngredient"
-        :description="recipeDetails.description"
-        :instructions="recipeDetails.recipeInstructions"
-        :tags="recipeDetails.tags"
-        :categories="recipeDetails.recipeCategory"
-        :notes="recipeDetails.notes"
-        :rating="recipeDetails.rating"
-        :yields="recipeDetails.recipeYield"
-        :orgURL="recipeDetails.orgURL"
-        :nutrition="recipeDetails.nutrition"
-        :assets="recipeDetails.assets"
-        :slug="recipeDetails.slug"
-      />
       <VJsoneditor
         @error="logError()"
         class="mt-10"