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>

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

@@ -0,0 +1,81 @@
+<template>
+  <div v-if="valueNotNull || edit">
+    <h2 class="my-4">Nutrition</h2>
+    <div v-if="edit">
+      <div v-for="(item, key, index) in value" :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>
+    <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 {
+      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" },
+      },
+    };
+  },
+  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) {
+      this.$emit("input", { ...this.value, [key]: value });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

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)) {