Basic nutrition editor (#288)

* Basic nutrition editor

* fix no image on scrape

* nutrition display

* add recipe images

* update by url

* new upload options

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

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

@@ -2,16 +2,12 @@
   <v-form ref="form">
     <v-card-text>
       <v-row dense>
-        <v-col cols="3"></v-col>
-        <v-col>
-          <v-file-input
-            v-model="fileObject"
-            :label="$t('general.image-file')"
-            truncate-length="30"
-            @change="uploadImage"
-          ></v-file-input>
-        </v-col>
-        <v-col cols="3"></v-col>
+        <ImageUploadBtn
+          class="mt-2"
+          @upload="uploadImage"
+          :slug="value.slug"
+          @refresh="$emit('upload')"
+        />
       </v-row>
       <v-row dense>
         <v-col>
@@ -92,7 +88,7 @@
                     auto-grow
                     solo
                     dense
-                    rows="2"
+                    rows="1"
                   >
                     <v-icon
                       class="mr-n1"
@@ -165,6 +161,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" :edit="true" />
           <ExtrasEditor :extras="value.extras" @save="saveExtras" />
         </v-col>
 
@@ -222,17 +219,20 @@
 
 <script>
 import draggable from "vuedraggable";
-import { api } from "@/api";
 import utils from "@/utils";
 import BulkAdd from "./BulkAdd";
 import ExtrasEditor from "./ExtrasEditor";
 import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
+import NutritionEditor from "./NutritionEditor";
+import ImageUploadBtn from "./ImageUploadBtn.vue";
 export default {
   components: {
     BulkAdd,
     ExtrasEditor,
     draggable,
     CategoryTagSelector,
+    NutritionEditor,
+    ImageUploadBtn,
   },
   props: {
     value: Object,
@@ -251,12 +251,8 @@ export default {
     };
   },
   methods: {
-    uploadImage() {
-      this.$emit("upload", this.fileObject);
-    },
-    async updateImage() {
-      const slug = this.value.slug;
-      api.recipes.updateImage(slug, this.fileObject);
+    uploadImage(fileObject) {
+      this.$emit("upload", fileObject);
     },
     toggleDisabled(stepIndex) {
       if (this.disabledSteps.includes(stepIndex)) {