fixes #485 (#494)

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

frontend/src/components/Recipe/ContextMenu.vue

@@ -18,7 +18,7 @@
       allow-overflow
     >
       <template v-slot:activator="{ on, attrs }">
-        <v-btn :fab="fab" small="fab" :color="color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
+        <v-btn :fab="fab" :small="fab" :color="color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
           <v-icon>{{ menuIcon }}</v-icon>
         </v-btn>
       </template>

frontend/src/components/Recipe/RecipePageActionMenu.vue

@@ -17,17 +17,8 @@
       v-on:confirm="emitDelete()"
     />
     <v-spacer></v-spacer>
-    <div v-if="!edit" class="custom-btn-group ma-1">
+    <div v-if="!value" class="custom-btn-group ma-1">
-      <v-btn
+      <v-btn fab small class="mx-1" color="info" @click="$emit('input', true)">
-        fab
-        small
-        class="mx-1"
-        color="info"
-        @click="
-          edit = true;
-          $emit('edit');
-        "
-      >
         <v-icon> {{ $globals.icons.edit }} </v-icon>
       </v-btn>
       <ContextMenu
@@ -40,7 +31,7 @@
         :card-menu="false"
       />
     </div>
-    <div v-if="edit" class="custom-btn-group mb-">
+    <div v-if="value" class="custom-btn-group mb-">
       <v-btn
         v-for="(btn, index) in editorButtons"
         :key="index"
@@ -74,6 +65,10 @@ export default {
     name: {
       type: String,
     },
+    value: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -95,7 +90,7 @@ export default {
           text: "Close",
           icon: "mdi-close",
           event: CLOSE_EVENT,
-          color: undefined,
+          color: "",
         },
         {
           text: "Save",
@@ -111,11 +106,11 @@ export default {
       switch (event) {
         case CLOSE_EVENT:
           this.$emit(CLOSE_EVENT);
-          this.edit = false;
+          this.$emit("input", false);
           break;
         case SAVE_EVENT:
           this.$emit(SAVE_EVENT);
-          this.edit = false;
+          this.$emit("input", false);
           break;
         case JSON_EVENT:
           this.$emit(JSON_EVENT);
@@ -129,7 +124,7 @@ export default {
     },
     emitDelete() {
       this.$emit(DELETE_EVENT);
-      this.edit = false;
+      this.$emit("input", false);
     },
   },
 };

frontend/src/pages/Recipe/NewRecipe.vue

@@ -10,7 +10,7 @@
       </v-img>
       <br v-else />
 
-      <RecipePageActionMenu @json="jsonEditor = true" @edit="jsonEditor = false" @save="createRecipe" />
+      <RecipePageActionMenu :value="true" @json="jsonEditor = true" @edit="jsonEditor = false" @save="createRecipe" />
 
       <div v-if="jsonEditor">
         <!-- Probably not the best way, but it works! -->
@@ -61,7 +61,8 @@ export default {
         categories: [],
         // dateAdded: "",
         notes: [],
-        extras: [],
+        extras: {},
+        assets: [],
       },
     };
   },

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -23,6 +23,7 @@
       <RecipePageActionMenu
         :slug="recipeDetails.slug"
         :name="recipeDetails.name"
+        v-model="form"
         v-if="loggedIn"
         :open="showIcons"
         @close="form = false"
@@ -48,7 +49,7 @@
       <RecipeEditor
         v-else
         v-model="recipeDetails"
-        :class="$vuetify.breakpoint.xs ? 'mt-5' : undefiend"
+        :class="$vuetify.breakpoint.xs ? 'mt-5' : ''"
         ref="recipeEditor"
         @upload="getImageFile"
       />