nutrition display

frontend/src/components/Recipe/RecipeEditor/NutritionEditor.vue

@@ -1,7 +1,8 @@
 <template>
-  <div>
+  <div v-if="valueNotNull || edit">
     <h2 class="my-4">Nutrition</h2>
-    <div v-for="(item, key, index) in nutrition" :key="index">
+    <div v-if="edit">
+      <div v-for="(item, key, index) in value" :key="index">
         <v-text-field
           dense
           :value="value[key]"
@@ -13,23 +14,35 @@
         ></v-text-field>
       </div>
     </div>
+    <div v-if="showViewer">
+      <v-list dense>
+        <v-list-item-group color="primary">
+          <v-list-item v-for="(item, key, index) in labels" :key="index">
+            <v-list-item-content>
+              <v-list-item-title class="pl-4 text-subtitle-1 flex row ">
+                <div>{{ item.label }}</div>
+                <div class="ml-auto mr-1">{{ value[key] }}</div>
+                <div>{{ item.suffix }}</div>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   props: {
     value: {},
+    edit: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
-      nutrition: {
-        calories: null,
-        fatContent: null,
-        fiberContent: null,
-        proteinContent: null,
-        sodiumContent: null,
-        sugarContent: null,
-      },
       labels: {
         calories: {
           label: "Calories",
@@ -43,6 +56,18 @@ export default {
       },
     };
   },
+  computed: {
+    showViewer() {
+      return !this.edit && this.valueNotNull;
+    },
+    valueNotNull() {
+      for (const property in this.value) {
+        const valueProperty = this.value[property];
+        if (valueProperty && valueProperty !== "") return true;
+      }
+      return false;
+    },
+  },
 
   methods: {
     updateValue(key, value) {

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

@@ -92,7 +92,7 @@
                     auto-grow
                     solo
                     dense
-                    rows="2"
+                    rows="1"
                   >
                     <v-icon
                       class="mr-n1"
@@ -165,7 +165,7 @@
           <v-btn class="mt-1" color="secondary" fab dark small @click="addNote">
             <v-icon>mdi-plus</v-icon>
           </v-btn>
-          <NutritionEditor v-model="value.nutrition" />
+          <NutritionEditor v-model="value.nutrition" :edit="true" />
           <ExtrasEditor :extras="value.extras" @save="saveExtras" />
         </v-col>
 

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

@@ -40,6 +40,7 @@
               :isCategory="false"
             />
             <Notes :notes="notes" />
+            <NutritionEditor :value="nutrition" :edit="false" />
           </div>
         </v-col>
         <v-divider
@@ -56,6 +57,7 @@
         <RecipeChips :title="$t('recipe.categories')" :items="categories" />
         <RecipeChips :title="$t('recipe.tags')" :items="tags" />
         <Notes :notes="notes" />
+        <NutritionEditor :value="nutrition" :edit="false" />
       </div>
       <v-row class="mt-2 mb-1">
         <v-col></v-col>
@@ -80,6 +82,7 @@
 </template>
 
 <script>
+import NutritionEditor from "@/components/Recipe/RecipeEditor/NutritionEditor";
 import VueMarkdown from "@adapttive/vue-markdown";
 import utils from "@/utils";
 import RecipeChips from "./RecipeChips";
@@ -93,6 +96,7 @@ export default {
     Steps,
     Notes,
     Ingredients,
+    NutritionEditor,
   },
   props: {
     name: String,
@@ -105,6 +109,7 @@ export default {
     rating: Number,
     yields: String,
     orgURL: String,
+    nutrition: Object,
   },
   data() {
     return {

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -50,6 +50,7 @@
         :rating="recipeDetails.rating"
         :yields="recipeDetails.recipeYield"
         :orgURL="recipeDetails.orgURL"
+        :nutrition="recipeDetails.nutrition"
       />
       <VJsoneditor
         @error="logError()"