Basic nutrition editor

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

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <h2 class="my-4">Nutrition</h2>
+    <div v-for="(item, key, index) in nutrition" :key="index">
+      <v-text-field
+        dense
+        :value="value[key]"
+        :label="labels[key].label"
+        :suffix="labels[key].suffix"
+        type="number"
+        autocomplete="off"
+        @input="updateValue(key, $event)"
+      ></v-text-field>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {},
+  },
+  data() {
+    return {
+      nutrition: {
+        calories: null,
+        fatContent: null,
+        fiberContent: null,
+        proteinContent: null,
+        sodiumContent: null,
+        sugarContent: null,
+      },
+      labels: {
+        calories: {
+          label: "Calories",
+          suffix: "calories",
+        },
+        fatContent: { label: "Fat Content", suffix: "grams" },
+        fiberContent: { label: "Fiber Content", suffix: "grams" },
+        proteinContent: { label: "Protein Content", suffix: "grams" },
+        sodiumContent: { label: "Sodium Content", suffix: "milligrams" },
+        sugarContent: { label: "Sugar Content", suffix: "grams" },
+      },
+    };
+  },
+
+  methods: {
+    updateValue(key, value) {
+      this.$emit("input", { ...this.value, [key]: value });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -165,6 +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" />
           <ExtrasEditor :extras="value.extras" @save="saveExtras" />
         </v-col>
 
@@ -227,12 +228,14 @@ import utils from "@/utils";
 import BulkAdd from "./BulkAdd";
 import ExtrasEditor from "./ExtrasEditor";
 import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
+import NutritionEditor from "./NutritionEditor";
 export default {
   components: {
     BulkAdd,
     ExtrasEditor,
     draggable,
     CategoryTagSelector,
+    NutritionEditor,
   },
   props: {
     value: Object,