more recipe editor

vue3/src/components/display/IngredientsTable.vue

@@ -1,8 +1,21 @@
 <template>
     <v-table density="compact" v-if="ingredients.length > 0">
-        <tbody>
-        <IngredientsTableRow v-for="i in ingredients" :ingredient="i" :key="i.id"></IngredientsTableRow>
-        </tbody>
+
+        <template v-if="draggable">
+            <draggable tag="tbody" v-model="mutable_ingredients" handle=".drag-handle" item-key="id">
+                <template #item="{element}">
+                    <IngredientsTableRow :ingredient="element" :key="element.id" :show-notes="showNotes" :draggable="draggable"></IngredientsTableRow>
+                </template>
+            </draggable>
+        </template>
+        <template v-else>
+            <tbody>
+            <!-- TODO make into one condition so there is no duplicate code possibly by disabling dragging when not enabled?! -->
+            <IngredientsTableRow v-for="i in ingredients" :ingredient="i" :key="i.id" :show-notes="showNotes" :draggable="draggable"></IngredientsTableRow>
+            </tbody>
+        </template>
+
+
     </v-table>
 </template>
 
@@ -10,18 +23,31 @@
 import {defineComponent, PropType} from 'vue'
 import {Ingredient, Step} from "@/openapi";
 import IngredientsTableRow from "@/components/display/IngredientsTableRow.vue";
+import draggable from 'vuedraggable'
 
 export default defineComponent({
     name: "IngredientsTable",
-    components: {IngredientsTableRow},
+    components: {IngredientsTableRow, draggable},
     props: {
         ingredients: {
             type: Array as PropType<Array<Ingredient>>,
             default: [],
         },
+        showNotes: {
+            type: Boolean,
+            default: true
+        },
+        draggable: {
+            type: Boolean,
+        },
+    },
+    data() {
+        return {
+            mutable_ingredients: [] as Ingredient[]
+        }
     },
     mounted() {
-
+        this.mutable_ingredients = this.ingredients
     }
 })
 </script>

vue3/src/components/display/IngredientsTableRow.vue

@@ -7,11 +7,14 @@
             <td>{{ ingredient.amount }}</td>
             <td><span v-if="ingredient.unit != null">{{ ingredient.unit.name }}</span></td>
             <td><span v-if="ingredient.food != null">{{ ingredient.food.name }}</span></td>
-            <td>
+            <td v-if="showNotes">
                 <v-icon class="far fa-comment" v-if="ingredient.note != ''" @click="show_tooltip = !show_tooltip">
                     <v-tooltip v-model="show_tooltip" activator="parent" location="start">{{ ingredient.note }}</v-tooltip>
                 </v-icon>
             </td>
+            <td v-if="draggable">
+                <i class="fas fa-grip-lines drag-handle"></i>
+            </td>
         </template>
 
     </tr>
@@ -23,11 +26,19 @@ import {Ingredient} from "@/openapi";
 
 export default defineComponent({
     name: "IngredientsTableRow",
+    components: {},
     props: {
         ingredient: {
             type: {} as PropType<Ingredient>,
             required: true
-        }
+        },
+        showNotes: {
+            type: Boolean,
+            default: true
+        },
+        draggable: {
+            type: Boolean,
+        },
     },
     data() {
         return {