consolidate view/edit components

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

@@ -1,104 +0,0 @@
-<template>
-  <div class="text-center">
-    <v-dialog v-model="dialog" width="700">
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn color="accent" dark v-bind="attrs" v-on="on"> {{ $t("recipe.api-extras") }} </v-btn>
-      </template>
-
-      <v-card>
-        <v-card-title> {{ $t("recipe.api-extras") }} </v-card-title>
-
-        <v-card-text :key="formKey">
-          <v-row
-            align="center"
-            v-for="(value, key, index) in extras"
-            :key="index"
-          >
-            <v-col cols="12" sm="1">
-              <v-btn
-                fab
-                text
-                x-small
-                color="white"
-                elevation="0"
-                @click="removeExtra(key)"
-              >
-                <v-icon color="error">mdi-delete</v-icon>
-              </v-btn>
-            </v-col>
-            <v-col cols="12" md="3" sm="6">
-              <v-text-field
-                :label="$t('recipe.object-key')"
-                :value="key"
-                @input="updateKey(index)"
-              >
-              </v-text-field>
-            </v-col>
-            <v-col cols="12" md="8" sm="6">
-              <v-text-field :label="$t('recipe.object-value')" v-model="extras[key]">
-              </v-text-field>
-            </v-col>
-          </v-row>
-        </v-card-text>
-
-        <v-divider></v-divider>
-
-        <v-card-actions>
-          <v-form ref="addKey">
-            <v-text-field
-              :label="$t('recipe.new-key-name')"
-              v-model="newKeyName"
-              class="pr-4"
-              :rules="[rules.required, rules.whiteSpace]"
-            ></v-text-field>
-          </v-form>
-          <v-btn color="info" text @click="append"> {{ $t("recipe.add-key") }} </v-btn>
-
-          <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 {
-  props: {
-    extras: Object,
-  },
-  data() {
-    return {
-      newKeyName: null,
-      dialog: false,
-      formKey: 1,
-      rules: {
-        required: (v) => !!v || this.$i18n.t("recipe.key-name-required"),
-        whiteSpace: (v) =>
-          !v || v.split(" ").length <= 1 || this.$i18n.t("recipe.no-white-space-allowed"),
-      },
-    };
-  },
-
-  methods: {
-    save() {
-      this.$emit("save", this.extras);
-      this.dialog = false;
-    },
-    append() {
-      if (this.$refs.addKey.validate()) {
-        this.extras[this.newKeyName] = "value";
-        this.formKey += 1;
-      }
-    },
-    removeExtra(key) {
-      delete this.extras[key];
-      this.formKey += 1;
-    },
-  },
-};
-</script>
-
-<style>
-</style>

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

@@ -64,55 +64,7 @@
       </v-row>
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
-          <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
-          <draggable
-            v-model="value.recipeIngredient"
-            @start="drag = true"
-            @end="drag = false"
-            handle=".handle"
-          >
-            <transition-group
-              type="transition"
-              :name="!drag ? 'flip-list' : null"
-            >
-              <div
-                v-for="(ingredient, index) in value.recipeIngredient"
-                :key="generateKey('ingredient', index)"
-              >
-                <v-row align="center">
-                  <v-textarea
-                    class="mr-2"
-                    :label="$t('recipe.ingredient')"
-                    v-model="value.recipeIngredient[index]"
-                    mdi-move-resize
-                    auto-grow
-                    solo
-                    dense
-                    rows="1"
-                  >
-                    <template slot="append-outer">
-                      <v-icon class="handle">mdi-arrow-up-down</v-icon>
-                    </template>
-                    <v-icon
-                      class="mr-n1"
-                      slot="prepend"
-                      color="error"
-                      @click="removeByIndex(value.recipeIngredient, index)"
-                    >
-                      mdi-delete
-                    </v-icon>
-                  </v-textarea>
-                </v-row>
-              </div>
-            </transition-group>
-          </draggable>
-
-          <div class="d-flex row justify-end">
-            <BulkAdd @bulk-data="addIngredient" class="mr-2" />
-            <v-btn color="secondary" dark @click="addIngredient" class="mr-4">
-              <v-icon>mdi-plus</v-icon>
-            </v-btn>
-          </div>
+          <Ingredients :edit="true" v-model="value.recipeIngredient" />
 
           <h2 class="mt-6">{{ $t("recipe.categories") }}</h2>
           <CategoryTagSelector
@@ -130,46 +82,8 @@
             :tag-selector="true"
             :show-label="false"
           />
-
-          <h2 class="my-4">{{ $t("recipe.notes") }}</h2>
-          <v-card
-            class="mt-1"
-            v-for="(note, index) in value.notes"
-            :key="generateKey('note', index)"
-          >
-            <v-card-text>
-              <v-row align="center">
-                <v-btn
-                  fab
-                  x-small
-                  color="white"
-                  class="mr-2"
-                  elevation="0"
-                  @click="removeByIndex(value.notes, index)"
-                >
-                  <v-icon color="error">mdi-delete</v-icon>
-                </v-btn>
-                <v-text-field
-                  :label="$t('recipe.title')"
-                  v-model="value.notes[index]['title']"
-                ></v-text-field>
-              </v-row>
-
-              <v-textarea
-                auto-grow
-                :label="$t('recipe.note')"
-                v-model="value.notes[index]['text']"
-              >
-              </v-textarea>
-            </v-card-text>
-          </v-card>
-          <div class="d-flex justify-end">
-            <v-btn class="mt-1" color="secondary" dark @click="addNote">
-              <v-icon>mdi-plus</v-icon>
-            </v-btn>
-          </div>
           <Nutrition v-model="value.nutrition" :edit="true" />
-          <Assets v-model="value.assets" :edit="true" />
+          <Assets v-model="value.assets" :edit="true" :slug="value.slug" />
           <ExtrasEditor :extras="value.extras" @save="saveExtras" />
         </v-col>
 
@@ -183,6 +97,7 @@
               <v-icon>mdi-plus</v-icon>
             </v-btn>
           </div>
+          <Notes :edit="true" v-model="value.notes" />
 
           <v-text-field
             v-model="value.orgURL"
@@ -197,26 +112,27 @@
 
 <script>
 const UPLOAD_EVENT = "upload";
-import draggable from "vuedraggable";
-import utils from "@/utils";
 import BulkAdd from "@/components/Recipe/Parts/Helpers/BulkAdd";
-import ExtrasEditor from "./ExtrasEditor";
+import ExtrasEditor from "@/components/Recipe/Parts/Helpers/ExtrasEditor";
 import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
 import ImageUploadBtn from "@/components/Recipe/Parts/Helpers/ImageUploadBtn";
 import { validators } from "@/mixins/validators";
 import Nutrition from "@/components/Recipe/Parts/Nutrition";
 import Instructions from "@/components/Recipe/Parts/Instructions";
+import Ingredients from "@/components/Recipe/Parts/Ingredients";
 import Assets from "@/components/Recipe/Parts/Assets.vue";
+import Notes from "@/components/Recipe/Parts/Notes.vue";
 export default {
   components: {
     BulkAdd,
     ExtrasEditor,
-    draggable,
     CategoryTagSelector,
     Nutrition,
     ImageUploadBtn,
     Instructions,
+    Ingredients,
     Assets,
+    Notes,
   },
   props: {
     value: Object,
@@ -224,42 +140,13 @@ export default {
   mixins: [validators],
   data() {
     return {
-      drag: false,
       fileObject: null,
-      lastTitleIndex: 0,
     };
   },
   methods: {
-    validateTitle(title) {
-      return !(title === null || title === "");
-    },
     uploadImage(fileObject) {
       this.$emit(UPLOAD_EVENT, fileObject);
     },
-    toggleDisabled(stepIndex) {
-      if (this.disabledSteps.includes(stepIndex)) {
-        const index = this.disabledSteps.indexOf(stepIndex);
-        if (index !== -1) {
-          this.disabledSteps.splice(index, 1);
-        }
-      } else {
-        this.disabledSteps.push(stepIndex);
-      }
-    },
-    isDisabled(stepIndex) {
-      return this.disabledSteps.includes(stepIndex) ? "disabled-card" : null;
-    },
-    generateKey(item, index) {
-      return utils.generateUniqueKey(item, index);
-    },
-    addIngredient(ingredients = null) {
-      if (ingredients.length) {
-        this.value.recipeIngredient.push(...ingredients);
-      } else {
-        this.value.recipeIngredient.push("");
-      }
-    },
-
     appendSteps(steps) {
       this.value.recipeInstructions.push(
         ...steps.map(x => ({
@@ -270,15 +157,9 @@ export default {
     addStep() {
       this.value.recipeInstructions.push({ text: "" });
     },
-    addNote() {
-      this.value.notes.push({ text: "" });
-    },
     saveExtras(extras) {
       this.value.extras = extras;
     },
-    removeByIndex(list, index) {
-      list.splice(index, 1);
-    },
     validateRecipe() {
       return this.$refs.form.validate();
     },

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

@@ -1,62 +0,0 @@
-<template>
-  <div>
-    <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
-    <v-list-item
-      dense
-      v-for="(ingredient, index) in ingredients"
-      :key="generateKey('ingredient', index)"
-      @click="toggleChecked(index)"
-    >
-      <v-checkbox
-        hide-details
-        :value="checked[index]"
-        class="pt-0 my-auto py-auto"
-        color="secondary"
-      >
-      </v-checkbox>
-
-      <v-list-item-content>
-        <vue-markdown
-          class="ma-0 pa-0 text-subtitle-1 dense-markdown"
-          :source="ingredient"
-        >
-        </vue-markdown>
-      </v-list-item-content>
-    </v-list-item>
-  </div>
-</template>
-
-<script>
-import VueMarkdown from "@adapttive/vue-markdown";
-import utils from "@/utils";
-export default {
-  components: {
-    VueMarkdown,
-  },
-  props: {
-    ingredients: Array,
-  },
-  data() {
-    return {
-      checked: [],
-    };
-  },
-  mounted() {
-    this.checked = this.ingredients.map(() => false);
-  },
-  methods: {
-    generateKey(item, index) {
-      return utils.generateUniqueKey(item, index);
-    },
-    toggleChecked(index) {
-      this.$set(this.checked, index, !this.checked[index]);
-    },
-  },
-};
-</script>
-
-<style >
-.dense-markdown p {
-  margin: auto !important;
-}
-</style>

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

@@ -1,36 +0,0 @@
-<template>
-  <div>
-    <h2 v-if="notes[0]" class="my-4">{{ $t("recipe.notes") }}</h2>
-    <v-card
-      class="mt-1"
-      v-for="(note, index) in notes"
-      :key="generateKey('note', index)"
-    >
-      <v-card-title> {{ note.title }}</v-card-title>
-      <v-card-text>
-        <vue-markdown :source="note.text"> </vue-markdown>
-      </v-card-text>
-    </v-card>
-  </div>
-</template>
-
-<script>
-import VueMarkdown from "@adapttive/vue-markdown";
-import utils from "@/utils";
-export default {
-  props: {
-    notes: Array,
-  },
-  components: {
-    VueMarkdown,
-  },
-  methods: {
-    generateKey(item, index) {
-      return utils.generateUniqueKey(item, index);
-    },
-  },
-};
-</script>
-
-<style>
-</style>

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

@@ -31,17 +31,29 @@
       </v-row>
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
-          <Ingredients :ingredients="ingredients" />
+          <Ingredients :value="ingredients" :edit="false" />
           <div v-if="medium">
-            <RecipeChips :title="$t('recipe.categories')" :items="categories" />
-            <RecipeChips
-              :title="$t('recipe.tags')"
-              :items="tags"
-              :isCategory="false"
-            />
-            <Notes :notes="notes" />
+            <v-card class="mt-2">
+              <v-card-title class="py-2">
+                {{ $t("recipe.categories") }}
+              </v-card-title>
+              <v-divider class="mx-2"></v-divider>
+              <v-card-text>
+                <RecipeChips :items="categories" />
+              </v-card-text>
+            </v-card>
+            <v-card class="mt-2">
+              <v-card-title class="py-2">
+                {{ $t("recipe.tags") }}
+              </v-card-title>
+              <v-divider class="mx-2"></v-divider>
+              <v-card-text>
+                <RecipeChips :items="tags" :isCategory="false" />
+              </v-card-text>
+            </v-card>
+
             <Nutrition :value="nutrition" :edit="false" />
-            <Assets :value="assets" :edit="false" />
+            <Assets :value="assets" :edit="false" :slug="slug" />
           </div>
         </v-col>
         <v-divider
@@ -52,14 +64,14 @@
 
         <v-col cols="12" sm="12" md="8" lg="8">
           <Instructions :value="instructions" :edit="false" />
+          <Notes :value="notes" :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" />
         <Nutrition :value="nutrition" :edit="false" />
-        <Assets :value="assets" :edit="false" />
+        <Assets :value="assets" :edit="false" :slug="slug" />
       </div>
       <v-row class="mt-2 mb-1">
         <v-col></v-col>
@@ -88,8 +100,8 @@ 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 Notes from "@/components/Recipe/Parts/Notes";
+import Ingredients from "@/components/Recipe/Parts/Ingredients";
 import Instructions from "@/components/Recipe/Parts/Instructions.vue";
 import Assets from "../Parts/Assets.vue";
 export default {
@@ -104,6 +116,7 @@ export default {
   },
   props: {
     name: String,
+    slug: String,
     description: String,
     ingredients: Array,
     instructions: Array,