very basic editor

vue3/src/components/display/RecipeView.vue

@@ -1,7 +1,7 @@
 <template>
 
     <v-card>
-        <v-card-title>{{ recipe.name }}</v-card-title>
+        <v-card-title>{{ recipe.name }} <recipe-context-menu :recipe="recipe"></recipe-context-menu></v-card-title>
 
         <v-img max-height="25vh" cover lazy :src="recipe.image">
             <!-- TODO placement in image -->
@@ -63,10 +63,11 @@ import IngredientsTable from "@/components/display/IngredientsTable.vue";
 import StepsOverview from "@/components/display/StepsOverview.vue";
 import Step from "@/components/display/Step.vue";
 import RecipeActivity from "@/components/display/RecipeActivity.vue";
+import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
 
 export default defineComponent({
     name: "RecipeView",
-    components: {RecipeActivity, Step, StepsOverview, IngredientsTable, NumberScalerDialog, KeywordsBar},
+    components: {RecipeContextMenu, RecipeActivity, Step, StepsOverview, IngredientsTable, NumberScalerDialog, KeywordsBar},
     computed: {},
     data() {
         return {}

vue3/src/components/inputs/RecipeContextMenu.vue

@@ -0,0 +1,37 @@
+<template>
+
+    <v-menu open-on-hover open-delay="0" :open-on-click="true">
+        <template v-slot:activator="{ props }">
+            <v-btn color="primary" 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>
+        </v-list>
+    </v-menu>
+
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue'
+import {Recipe, RecipeFlat, RecipeOverview} from "@/openapi";
+
+export default defineComponent({
+    name: "RecipeContextMenu",
+    props: {
+        recipe: {type: Object as PropType<Recipe | RecipeFlat | RecipeOverview>, required: true}
+    },
+    methods: {
+        openRecipe: function () {
+            this.$router.push({name: 'edit_recipe', params: {recipe_id: this.recipe.id}})
+        }
+    }
+})
+</script>
+
+
+<style scoped>
+
+</style>