drag and drop ingredients

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

@@ -67,27 +67,43 @@
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
           <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
-          <div
-            v-for="(ingredient, index) in value.recipeIngredient"
-            :key="generateKey('ingredient', index)"
+          <draggable
+            v-model="value.recipeIngredient"
+            @start="drag = true"
+            @end="drag = false"
           >
-            <v-row align="center">
-              <v-btn
-                fab
-                x-small
-                color="white"
-                class="mr-2"
-                elevation="0"
-                @click="removeIngredient(index)"
+            <transition-group
+              type="transition"
+              :name="!drag ? 'flip-list' : null"
+            >
+              <div
+                v-for="(ingredient, index) in value.recipeIngredient"
+                :key="generateKey('ingredient', index)"
               >
-                <v-icon color="error">mdi-delete</v-icon>
-              </v-btn>
-              <v-text-field
-                :label="$t('recipe.ingredient')"
-                v-model="value.recipeIngredient[index]"
-              ></v-text-field>
-            </v-row>
-          </div>
+                <v-row align="center">
+                  <v-text-field
+                    class="mr-2"
+                    :label="$t('recipe.ingredient')"
+                    v-model="value.recipeIngredient[index]"
+                    append-outer-icon="mdi-menu"
+                    mdi-move-resize
+                    solo
+                    dense
+                  >
+                    <v-icon
+                    class="mr-n1"
+                      slot="prepend"
+                      color="error"
+                      @click="removeIngredient(index)"
+                    >
+                      mdi-delete
+                    </v-icon>
+                  </v-text-field>
+                </v-row>
+              </div>
+            </transition-group>
+          </draggable>
+
           <v-btn color="secondary" fab dark small @click="addIngredient">
             <v-icon>mdi-plus</v-icon>
           </v-btn>
@@ -103,6 +119,7 @@
             v-model="value.categories"
             hide-selected
             :items="categories"
+            text="name"
             :search-input.sync="categoriesSearchInput"
             @change="categoriesSearchInput = ''"
           >
@@ -232,6 +249,7 @@
 </template>
 
 <script>
+import draggable from "vuedraggable";
 import api from "../../../api";
 import utils from "../../../utils";
 import BulkAdd from "./BulkAdd";
@@ -240,17 +258,21 @@ export default {
   components: {
     BulkAdd,
     ExtrasEditor,
+    draggable,
   },
   props: {
     value: Object,
   },
   data() {
     return {
+      drag: false,
       fileObject: null,
       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"),
+        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"),
       },
       categoriesSearchInput: "",
       tagsSearchInput: "",
@@ -264,7 +286,7 @@ export default {
   methods: {
     async getCategories() {
       let response = await api.categories.get_all();
-      this.categories = response.data.map((cat) => cat.name);
+      this.categories = response.map((cat) => cat.name);
     },
     uploadImage() {
       this.$emit("upload", this.fileObject);

frontend/src/components/UI/ButtonRow.vue

@@ -43,12 +43,12 @@ export default {
   props: {
     open: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
 
   components: {
-    Confirmation
+    Confirmation,
   },
 
   methods: {
@@ -66,8 +66,8 @@ export default {
     },
     json() {
       this.$emit("json");
-    }
-  }
+    },
+  },
 };
 </script>
 

frontend/src/pages/RecipePage.vue

@@ -22,6 +22,7 @@
       "
       @save="saveRecipe"
       @delete="deleteRecipe"
+      class="sticky"
     />
 
     <RecipeViewer
@@ -106,7 +107,7 @@ export default {
   },
 
   watch: {
-    $route: function() {
+    $route: function () {
       this.getRecipeDetails();
     },
   },
@@ -144,7 +145,7 @@ export default {
     },
     async saveRecipe() {
       if (this.$refs.recipeEditor.validateRecipe()) {
-        console.log("Thank you")
+        console.log("Thank you");
       }
       let slug = await api.recipes.update(this.recipeDetails);
 
@@ -177,4 +178,9 @@ export default {
   width: 100%;
   bottom: 0;
 }
+.sticky {
+  position: sticky !important;
+  top: 0;
+  z-index: 2;
+}
 </style>