Add Database Layer for Recipe Scaling (#506)

* move badge

* fix add individual ingredient

* fix redirect issue

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

frontend/src/components/Recipe/ContextMenu.vue

@@ -16,25 +16,13 @@
       :top="menuTop"
       :nudge-top="menuTop ? '5' : '0'"
       allow-overflow
+      close-delay="125"
+      open-on-hover
     >
-      <template v-slot:activator="{ on: onMenu, attrs: attrsMenu }">
-        <v-tooltip bottom dark :color="color">
-          <template v-slot:activator="{ on: onTooltip, attrs: attrsTooltip }">
-            <v-btn
-              :fab="fab"
-              :small="fab"
-              :color="color"
-              :icon="!fab"
-              dark
-              v-bind="{ ...attrsMenu, ...attrsTooltip }"
-              v-on="{ ...onMenu, ...onTooltip }"
-              @click.prevent
-            >
-              <v-icon>{{ menuIcon }}</v-icon>
-            </v-btn>
-          </template>
-          <span>{{ $t("general.more") }}</span>
-        </v-tooltip>
+      <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-icon>{{ menuIcon }}</v-icon>
+        </v-btn>
       </template>
       <v-list dense>
         <v-list-item

frontend/src/components/Recipe/FavoriteBadge.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-tooltip right :color="buttonStyle ? 'primary' : 'secondary'">
+  <v-tooltip bottom nudge-right="50" :color="buttonStyle ? 'primary' : 'secondary'">
     <template v-slot:activator="{ on, attrs }">
       <v-btn
         small

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="value && value.length > 0">
     <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
     <div v-if="edit">
       <draggable :value="value" @input="updateIndex" @start="drag = true" @end="drag = false" handle=".handle">
@@ -9,7 +9,7 @@
               <v-textarea
                 class="mr-2"
                 :label="$t('recipe.ingredient')"
-                v-model="value[index]"
+                v-model="value[index].note"
                 mdi-move-resize
                 auto-grow
                 solo
@@ -45,7 +45,7 @@
         <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>
+          <vue-markdown class="ma-0 pa-0 text-subtitle-1 dense-markdown" :source="ingredient.note"> </vue-markdown>
         </v-list-item-content>
       </v-list-item>
     </div>
@@ -85,9 +85,26 @@ export default {
   methods: {
     addIngredient(ingredients = null) {
       if (ingredients.length) {
-        this.value.push(...ingredients);
+        const newIngredients = ingredients.map(x => {
+          return {
+            title: null,
+            note: x,
+            unit: null,
+            food: null,
+            disableAmount: true,
+            quantity: 1,
+          };
+        });
+        this.value.push(...newIngredients);
       } else {
-        this.value.push("");
+        this.value.push({
+          title: null,
+          note: "",
+          unit: null,
+          food: null,
+          disableAmount: true,
+          quantity: 1,
+        });
       }
     },
     generateKey(item, index) {