recipe editor

vue3/src/components/dialogs/VClosableCardTitle.vue

@@ -1,12 +1,12 @@
 <template>
     <v-card-title class="pb-0">
         <v-row align="center" >
-            <v-col cols="11" class="text-truncate">
+            <v-col cols="10" md="11" class="text-truncate">
                 <i :class="props.icon" v-if="props.icon != ''"></i>
                 {{ props.title }}
                 <v-card-subtitle class="pa-0" v-if="props.subTitle != ''">{{ props.subTitle}}</v-card-subtitle>
             </v-col>
-            <v-col cols="1" v-if="!props.hideClose">
+            <v-col cols="2" md="1" v-if="!props.hideClose">
                 <v-btn class="float-right pr-2" icon="$close" variant="plain" @click="model = false; emit('close')"></v-btn>
             </v-col>
         </v-row>

vue3/src/components/inputs/RecipeContextMenu.vue

@@ -1,13 +1,13 @@
 <template>
 
-    <v-menu open-on-hover open-delay="0" :open-on-click="true" location="start">
+    <v-menu location="start">
         <template v-slot:activator="{ props }">
             <v-btn v-bind="props" icon="fas fa-ellipsis-v" variant="plain"></v-btn>
         </template>
 
         <v-list>
-            <v-list-item>
-                <v-list-item-title @click="openRecipe()"><i class="fas fa-edit fa-fw mr-2"></i> Edit</v-list-item-title>
+            <v-list-item :to="{ name: 'ModelEditPage', params: {model: 'recipe', id: recipe.id} }" prepend-icon="fas fa-edit">
+                {{$t('Edit')}}
             </v-list-item>
         </v-list>
     </v-menu>
@@ -24,9 +24,6 @@ const props = defineProps({
     recipe: {type: Object as PropType<Recipe | RecipeFlat | RecipeOverview>, required: true}
 })
 
-function openRecipe() {
-    router.push({name: 'edit_recipe', params: {recipe_id: props.recipe.id}})
-}
 </script>
 
 

vue3/src/components/inputs/StepEditor.vue

@@ -74,8 +74,10 @@
                             </v-col>
                         </v-row>
                     </vue-draggable>
-                    <v-btn color="primary" @click="insertAndFocusIngredient()">{{ $t('Add') }}</v-btn>
-                    <v-btn color="secondary" @click="dialogIngredientParser = true">{{ $t('AddMany') }}</v-btn>
+                    <v-btn-group density="compact">
+                        <v-btn color="success" @click="insertAndFocusIngredient()" prepend-icon="$add">{{ $t('Add') }}</v-btn>
+                        <v-btn color="warning" @click="dialogIngredientParser = true"><v-icon icon="$add"></v-icon> <v-icon icon="$add"></v-icon></v-btn>
+                    </v-btn-group>
                 </v-col>
                 <v-col cols="12">
                     <v-label>{{ $t('Instructions') }}</v-label>
@@ -94,7 +96,7 @@
         :max-width="(mobile) ? '100vw': '75vw'"
         :fullscreen="mobile">
         <v-card>
-            <v-closable-card-title :title="$t('Instructions')"></v-closable-card-title>
+            <v-closable-card-title :title="$t('Instructions')" v-model="dialogMarkdownEdit"></v-closable-card-title>
             <step-markdown-editor class="h-100" v-model="step"></step-markdown-editor>
         </v-card>
     </v-dialog>
@@ -104,7 +106,7 @@
         :max-width="(mobile) ? '100vw': '75vw'"
         :fullscreen="mobile">
         <v-card>
-            <v-closable-card-title :title="$t('Ingredients')"></v-closable-card-title>
+            <v-closable-card-title :title="$t('Ingredients')" v-model="dialogIngredientParser"></v-closable-card-title>
             <v-card-text>
                 <v-textarea v-model="ingredientTextInput"></v-textarea>
             </v-card-text>

vue3/src/components/model_editors/RecipeEditor.vue

@@ -58,6 +58,16 @@
                                 <step-editor v-model="editingObj.steps[i]" :step-index="i"></step-editor>
                             </v-col>
                         </v-row>
+                        <v-row>
+                            <v-col class="text-center">
+                                <v-btn-group density="compact">
+                                    <v-btn color="success" prepend-icon="fa-solid fa-plus">{{ $t('Add_Step') }}</v-btn>
+                                    <v-btn color="warning" @click="dialogStepManager = true">
+                                        <v-icon icon="fa-solid fa-arrow-down-1-9"></v-icon>
+                                    </v-btn>
+                                </v-btn-group>
+                            </v-col>
+                        </v-row>
 
                     </v-form>
                 </v-tabs-window-item>
@@ -77,6 +87,22 @@
         </v-card-text>
     </model-editor-base>
 
+    <v-dialog max-width="600px" v-model="dialogStepManager">
+        <v-card>
+            <v-card-title>{{ $t('Steps') }}</v-card-title>
+            <v-list>
+                <vue-draggable handle=".drag-handle" v-model="editingObj.steps" :on-sort="sortSteps">
+                    <v-list-item v-for="(s,i) in editingObj.steps" :key="s.id">
+                         <v-chip color="primary">{{ i + 1 }}</v-chip> {{s.name}}
+                        <template #append>
+                            <v-icon class="drag-handle" icon="$dragHandle"></v-icon>
+                        </template>
+                    </v-list-item>
+                </vue-draggable>
+            </v-list>
+        </v-card>
+    </v-dialog>
+
 </template>
 
 <script setup lang="ts">
@@ -88,6 +114,7 @@ import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
 import {useI18n} from "vue-i18n";
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
 import StepEditor from "@/components/inputs/StepEditor.vue";
+import {VueDraggable} from "vue-draggable-plus";
 
 const {t} = useI18n()
 
@@ -102,11 +129,21 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
 
 // object specific data (for selects/display)
 const tab = ref("recipe")
+const dialogStepManager = ref(false)
 
 onMounted(() => {
     setupState(props.item, props.itemId)
 })
 
+/**
+ * called by draggable in step manager dialog when steps are sorted
+ */
+function sortSteps(){
+    editingObj.value.steps.forEach((value, index) => {
+        value.order = index
+    })
+}
+
 </script>
 
 <style scoped>