refactor component location

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

@@ -1,64 +0,0 @@
-<template>
-  <div class="text-center">
-    <v-dialog v-model="dialog" width="600">
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn
-        
-          color="secondary lighten-2"
-          dark
-          v-bind="attrs"
-          v-on="on"
-          @click="inputText = ''"
-        >
-          {{$t('new-recipe.bulk-add')}}
-        </v-btn>
-      </template>
-
-      <v-card>
-        <v-card-title class="headline"> {{$t('new-recipe.bulk-add')}} </v-card-title>
-
-        <v-card-text>
-          <p>
-            {{$t('new-recipe.paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list')}}
-          </p>
-          <v-textarea v-model="inputText"> </v-textarea>
-        </v-card-text>
-
-        <v-divider></v-divider>
-
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="success" text @click="save"> {{$t('general.save')}} </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      dialog: false,
-      inputText: "",
-    };
-  },
-  methods: {
-    splitText() {
-      let split = this.inputText.split("\n");
-
-      split.forEach((element, index) => {
-        if ((element === "\n") | (element == false)) {
-          split.splice(index, 1);
-        }
-      });
-
-      return split;
-    },
-    save() {
-      this.$emit("bulk-data", this.splitText());
-      this.dialog = false;
-    },
-  },
-};
-</script>

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

@@ -1,75 +0,0 @@
-<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">
-          {{$t('recipe.image')}}
-        </v-btn>
-      </template>
-      <v-card width="400">
-        <v-card-title class="headline flex mb-0">
-          <div>
-           {{$t('recipe.recipe-image')}}
-          </div>
-          <TheUploadBtn
-            class="ml-auto"
-            url="none"
-            file-name="image"
-            :text-btn="false"
-            @uploaded="uploadImage"
-            :post="false"
-          />
-        </v-card-title>
-        <v-card-text class="mt-n5">
-          <div>
-            <v-text-field :label="$t('general.url')" class="pt-5" clearable v-model="url">
-              <template v-slot:append-outer>
-                <v-btn
-                  class="ml-2"
-                  color="primary"
-                  @click="getImageFromURL"
-                  :loading="loading"
-                >
-                  {{$t('general.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 TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
-import { api } from "@/api";
-export default {
-  components: {
-    TheUploadBtn,
-  },
-  props: {
-    slug: String,
-  },
-  data: () => ({
-    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/InstructionsEditor.vue

@@ -1,149 +0,0 @@
-<template>
-  <div>
-    <h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
-    <div>
-      <div v-for="(step, index) in value" :key="index">
-        <v-app-bar v-if="showTitleEditor[index]" class="primary" dark dense>
-          <v-toolbar-title class="headline" v-if="!edit">
-            <v-app-bar-title v-text="step.title"> </v-app-bar-title>
-          </v-toolbar-title>
-          <v-text-field
-            v-if="edit"
-            class="headline pa-0 mt-5"
-            v-model="step.title"
-            dense
-            solo
-            flat
-            placeholder="Section Title"
-            background-color="primary"
-          >
-          </v-text-field>
-        </v-app-bar>
-        <v-hover v-slot="{ hover }">
-          <v-card
-            class="ma-1"
-            :class="[{ 'on-hover': hover }, isDisabled(index)]"
-            :elevation="hover ? 12 : 2"
-            :ripple="!edit"
-            @click="toggleDisabled(index)"
-          >
-            <v-card-title>
-              <v-btn
-                v-if="edit"
-                fab
-                x-small
-                color="white"
-                class="mr-2"
-                elevation="0"
-                @click="removeByIndex(value, index)"
-              >
-                <v-icon size="24" color="error">mdi-delete</v-icon>
-              </v-btn>
-              {{ $t("recipe.step-index", { step: index + 1 }) }}
-              <v-btn
-                v-if="edit"
-                text
-                color="primary"
-                class="ml-auto"
-                @click="toggleShowTitle(index)"
-              >
-                {{
-                  !showTitleEditor[index] ? "Insert Section" : "Remove Section"
-                }}
-              </v-btn>
-            </v-card-title>
-            <v-card-text v-if="edit">
-              <v-textarea
-                auto-grow
-                dense
-                v-model="value[index]['text']"
-                :key="generateKey('instructions', index)"
-                rows="4"
-              >
-              </v-textarea>
-            </v-card-text>
-            <v-card-text v-else>
-              <vue-markdown :source="step.text"> </vue-markdown>
-            </v-card-text>
-          </v-card>
-        </v-hover>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import VueMarkdown from "@adapttive/vue-markdown";
-import utils from "@/utils";
-export default {
-  components: {
-    VueMarkdown,
-  },
-  props: {
-    value: {
-      type: Array,
-    },
-
-    edit: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      disabledSteps: [],
-      showTitleEditor: [],
-    };
-  },
-  watch: {
-    showTitleEditor(val) {
-      console.log(val);
-    },
-  },
-
-  mounted() {
-    this.showTitleEditor = this.value.map(x => this.validateTitle(x.title));
-  },
-  methods: {
-    generateKey(item, index) {
-      return utils.generateUniqueKey(item, index);
-    },
-    removeByIndex(list, index) {
-      list.splice(index, 1);
-    },
-    validateTitle(title) {
-      return !(title === null || title === "");
-    },
-    toggleDisabled(stepIndex) {
-      if (this.edit) return;
-      if (this.disabledSteps.includes(stepIndex)) {
-        let index = this.disabledSteps.indexOf(stepIndex);
-        if (index !== -1) {
-          this.disabledSteps.splice(index, 1);
-        }
-      } else {
-        this.disabledSteps.push(stepIndex);
-      }
-    },
-    isDisabled(stepIndex) {
-      if (this.disabledSteps.includes(stepIndex) && !this.edit) {
-        return "disabled-card";
-      } else {
-        return;
-      }
-    },
-    toggleShowTitle(index) {
-      console.log(index);
-      const newVal = !this.showTitleEditor[index];
-      console.log(newVal);
-      if (!newVal) {
-        this.value[index].title = "";
-      }
-      this.$set(this.showTitleEditor, index, newVal);
-    },
-  },
-};
-</script>
-
-<style scoped>
-</style>

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

@@ -1,81 +0,0 @@
-<template>
-  <div v-if="valueNotNull || edit">
-    <h2 class="my-4">{{$t('recipe.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: this.$t('recipe.calories'),
-          suffix:this.$t('recipe.calories-suffix'),
-        },
-        fatContent: { label: this.$t('recipe.fat-content'), suffix: this.$t('recipe.grams') },
-        fiberContent: { label: this.$t('recipe.fiber-content'), suffix: this.$t('recipe.grams') },
-        proteinContent: { label: this.$t('recipe.protein-content'), suffix: this.$t('recipe.grams') },
-        sodiumContent: { label: this.$t('recipe.sodium-content'), suffix: this.$t('recipe.milligrams') },
-        sugarContent: { label: this.$t('recipe.sugar-content'), suffix: this.$t('recipe.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

@@ -91,7 +91,7 @@
                     rows="1"
                   >
                     <template slot="append-outer">
-                      <v-icon class="handle">mdi-menu</v-icon>
+                      <v-icon class="handle">mdi-arrow-up-down</v-icon>
                     </template>
                     <v-icon
                       class="mr-n1"
@@ -168,14 +168,15 @@
               <v-icon>mdi-plus</v-icon>
             </v-btn>
           </div>
-          <NutritionEditor v-model="value.nutrition" :edit="true" />
+          <Nutrition v-model="value.nutrition" :edit="true" />
+          <Assets v-model="value.assets" :edit="true" />
           <ExtrasEditor :extras="value.extras" @save="saveExtras" />
         </v-col>
 
         <v-divider class="my-divider" :vertical="true"></v-divider>
 
         <v-col cols="12" sm="12" md="8" lg="8">
-          <InstructionsEditor v-model="value.recipeInstructions" :edit="true" />
+          <Instructions v-model="value.recipeInstructions" :edit="true" />
           <div class="d-flex row justify-end mt-2">
             <BulkAdd @bulk-data="appendSteps" class="mr-2" />
             <v-btn color="secondary" dark @click="addStep" class="mr-4">
@@ -198,22 +199,24 @@
 const UPLOAD_EVENT = "upload";
 import draggable from "vuedraggable";
 import utils from "@/utils";
-import BulkAdd from "./BulkAdd";
+import BulkAdd from "@/components/Recipe/Parts/Helpers/BulkAdd";
 import ExtrasEditor from "./ExtrasEditor";
 import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
-import NutritionEditor from "./NutritionEditor";
+import ImageUploadBtn from "@/components/Recipe/Parts/Helpers/ImageUploadBtn";
-import ImageUploadBtn from "./ImageUploadBtn.vue";
 import { validators } from "@/mixins/validators";
-import InstructionsEditor from "./InstructionsEditor.vue";
+import Nutrition from "@/components/Recipe/Parts/Nutrition";
+import Instructions from "@/components/Recipe/Parts/Instructions";
+import Assets from "@/components/Recipe/Parts/Assets.vue";
 export default {
   components: {
     BulkAdd,
     ExtrasEditor,
     draggable,
     CategoryTagSelector,
-    NutritionEditor,
+    Nutrition,
     ImageUploadBtn,
-    InstructionsEditor,
+    Instructions,
+    Assets,
   },
   props: {
     value: Object,

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

@@ -40,7 +40,8 @@
               :isCategory="false"
             />
             <Notes :notes="notes" />
-            <NutritionEditor :value="nutrition" :edit="false" />
+            <Nutrition :value="nutrition" :edit="false" />
+            <Assets :value="assets" :edit="false" />
           </div>
         </v-col>
         <v-divider
@@ -50,14 +51,15 @@
         ></v-divider>
 
         <v-col cols="12" sm="12" md="8" lg="8">
-          <InstructionsEditor :value="instructions" :edit="false" />
+          <Instructions :value="instructions" :edit="false" />
         </v-col>
       </v-row>
       <div v-if="!medium">
         <RecipeChips :title="$t('recipe.categories')" :items="categories" />
         <RecipeChips :title="$t('recipe.tags')" :items="tags" />
         <Notes :notes="notes" />
-        <NutritionEditor :value="nutrition" :edit="false" />
+        <Nutrition :value="nutrition" :edit="false" />
+        <Assets :value="assets" :edit="false" />
       </div>
       <v-row class="mt-2 mb-1">
         <v-col></v-col>
@@ -82,21 +84,23 @@
 </template>
 
 <script>
-import NutritionEditor from "@/components/Recipe/RecipeEditor/NutritionEditor";
+import Nutrition from "@/components/Recipe/Parts/Nutrition";
 import VueMarkdown from "@adapttive/vue-markdown";
 import utils from "@/utils";
 import RecipeChips from "./RecipeChips";
 import Notes from "./Notes";
 import Ingredients from "./Ingredients";
-import InstructionsEditor from "../RecipeEditor/InstructionsEditor.vue";
+import Instructions from "@/components/Recipe/Parts/Instructions.vue";
+import Assets from "../Parts/Assets.vue";
 export default {
   components: {
     VueMarkdown,
     RecipeChips,
     Notes,
     Ingredients,
-    NutritionEditor,
+    Nutrition,
-    InstructionsEditor,
+    Instructions,
+    Assets,
   },
   props: {
     name: String,
@@ -110,6 +114,7 @@ export default {
     yields: String,
     orgURL: String,
     nutrition: Object,
+    assets: Array,
   },
   data() {
     return {

frontend/src/components/UI/Dialogs/BaseDialog.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <slot name="open" v-bind="{ open }"> </slot>
     <v-dialog
       v-model="dialog"
       :width="modalWidth + 'px'"

frontend/src/locales/messages/en-US.json

@@ -105,6 +105,7 @@
     "recent": "Recent"
   },
   "recipe": {
+    "assets": "Assets",
     "add-key": "Add Key",
     "api-extras": "API Extras",
     "calories": "Calories",
@@ -115,6 +116,7 @@
     "description": "Description",
     "fat-content": "Fat Content",
     "fiber-content": "Fiber Content",
+    "carbohydrate-content": "Carbohydrate Content",
     "grams": "grams",
     "image": "Image",
     "ingredient": "Ingredient",

frontend/src/pages/Recipe/ViewRecipe.vue

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