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/ImageUploadBtn.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="text-center">
+    <v-menu offset-y top nudge-top="6" :close-on-content-click="false">
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn color="accent" dark v-bind="attrs" v-on="on">
+          Image
+        </v-btn>
+      </template>
+      <v-card width="400">
+        <v-card-title class="headline flex mb-0">
+          <div>
+            Recipe Image
+          </div>
+          <UploadBtn
+            class="ml-auto"
+            url="none"
+            file-name="image"
+            :text-btn="false"
+            @uploaded="uploadImage"
+          />
+        </v-card-title>
+        <v-card-text class="mt-n5">
+          <div>
+            <v-text-field label="URL" class="pt-5" clearable v-model="url">
+              <template v-slot:append-outer>
+                <v-btn
+                  class="ml-2"
+                  color="primary"
+                  @click="getImageFromURL"
+                  :loading="loading"
+                >
+                  Get
+                </v-btn>
+              </template>
+            </v-text-field>
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
+<script>
+const REFRESH_EVENT = "refresh";
+const UPLOAD_EVENT = "upload";
+import UploadBtn from "@/components/UI/UploadBtn";
+import { api } from "@/api";
+// import axios from "axios";
+export default {
+  components: {
+    UploadBtn,
+  },
+  props: {
+    slug: String,
+  },
+  data: () => ({
+    items: [{ title: "Upload Image" }, { title: "From URL" }],
+    url: "",
+    loading: false,
+  }),
+  methods: {
+    uploadImage(fileObject) {
+      this.$emit(UPLOAD_EVENT, fileObject);
+    },
+    async getImageFromURL() {
+      this.loading = true;
+      const response = await api.recipes.updateImagebyURL(this.slug, this.url);
+      if (response) this.$emit(REFRESH_EVENT);
+      this.loading = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>