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>
+        <template v-if="draggable">
-        </tbody>
+            <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 {

vue3/src/components/inputs/StepEditor.vue

@@ -0,0 +1,84 @@
+<template>
+
+    <!--TODO  name, time, recipe, file(s), ingredients, quick add ingredients -->
+    <v-card>
+        <template #title>
+            <v-card-title v-if="step.name">{{ step.name }}</v-card-title>
+            <v-card-title v-else-if="stepIndex !== undefined">Step {{ stepIndex + 1 }}</v-card-title>
+        </template>
+        <template v-slot:append>
+            <v-btn size="small" variant="plain" icon="fas fa-sliders-h"></v-btn> <!--TODO implement -->
+        </template>
+
+        <v-card-text>
+            <v-text-field
+                v-model="step.name"
+                label="Step Name"
+            ></v-text-field>
+            <v-chip-group>
+                <v-chip><i class="fas fa-plus-circle"></i> Time</v-chip>
+            </v-chip-group>
+
+            <ingredients-table :ingredients="step.ingredients" :show-notes="false" draggable>
+
+            </ingredients-table>
+
+            <v-alert @click="dialog_markdown_edit = true">
+                {{ step.instruction }}
+            </v-alert>
+
+        </v-card-text>
+    </v-card>
+
+
+    <v-dialog
+        v-model="dialog_markdown_edit"
+        transition="dialog-bottom-transition"
+        fullscreen
+        @close="$emit('change', {step: step})">
+        <v-card>
+            <v-toolbar>
+                <v-toolbar-title>Edit Instructions</v-toolbar-title>
+                <v-btn icon="fas fa-close" @click="dialog_markdown_edit = false"></v-btn>
+            </v-toolbar>
+            <step-markdown-editor class="h-100" :step="step" @change="step = $event.step; $emit('change', {step: step})"></step-markdown-editor>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue'
+import {Step} from "@/openapi";
+import StepMarkdownEditor from "@/components/inputs/StepMarkdownEditor.vue";
+import IngredientsTable from "@/components/display/IngredientsTable.vue";
+
+export default defineComponent({
+    name: "StepEditor",
+    components: {IngredientsTable, StepMarkdownEditor},
+    emits: {
+        change(payload: { step: Step }) {
+            return payload
+        }
+    },
+    props: {
+        step: {
+            type: Object as PropType<Step>,
+            required: true,
+        },
+        stepIndex: {
+            type: Number,
+            required: false,
+        },
+    },
+    data() {
+        return {
+            dialog_markdown_edit: false,
+        }
+    }
+})
+</script>
+
+
+<style scoped>
+
+</style>

vue3/src/components/inputs/StepMarkdownEditor.vue

@@ -8,7 +8,7 @@
             <button
                 type="button"
                 @click="mutable_step.instruction+= ' {{ scale(100) }}'"
-                class="op-icon fas fa-times"
+                class="op-icon fas fa-calculator"
                 aria-hidden="true"
                 title="Scalable Number"
             ></button>
@@ -24,6 +24,16 @@ import 'mavon-editor/dist/css/index.css'
 
 export default defineComponent({
     name: "StepMarkdownEditor",
+    emits: {
+        change(payload: { step: Step }) {
+            return payload
+        }
+    },
+    watch: {
+        mutable_step: function (){
+            this.$emit('change', {step: this.mutable_step})
+        }
+    },
     props: {
         step: {type: Object as PropType<Step>, required: true}
     },
@@ -38,22 +48,22 @@ export default defineComponent({
                 underline: true,
                 strikethrough: true,
                 mark: false,
-                superscript: true,
+                superscript: false,
-                subscript: true,
+                subscript: false,
                 quote: true,
                 ol: true,
                 ul: true,
                 link: true,
                 imagelink: false,
-                code: true,
+                code: false,
                 table: false,
                 fullscreen: false,
                 readmodel: false,
                 htmlcode: false,
-                help: true,
+                help: false,
                 undo: true,
                 redo: true,
-                navigation: true,
+                navigation: false,
                 alignleft: false,
                 aligncenter: false,
                 alignright: false,

vue3/src/pages/RecipeEditPage.vue

@@ -53,10 +53,9 @@
                 </v-col>
             </v-row>
 
-            <v-row v-for="step in recipe.steps">
+            <v-row v-for="(step, index) in recipe.steps">
-                <!--TODO  name, time, recipe, file(s), ingredients, quick add ingredients -->
                 <v-col>
-                    <step-markdown-editor :step="step"></step-markdown-editor>
+                    <step-editor :step="step" :step-index="index"></step-editor>
                 </v-col>
             </v-row>
 
@@ -73,11 +72,12 @@
 import {defineComponent, PropType} from 'vue'
 import {ApiApi, Keyword, Recipe} from "@/openapi";
 import StepMarkdownEditor from "@/components/inputs/StepMarkdownEditor.vue";
+import StepEditor from "@/components/inputs/StepEditor.vue";
 
 
 export default defineComponent({
     name: "RecipeEditPage",
-    components: {StepMarkdownEditor},
+    components: {StepEditor, StepMarkdownEditor},
     props: {
         recipe_id: {type: String, required: false},
     },