very basic editor

vue3/src/apps/tandoor/main.ts

@@ -11,6 +11,7 @@ import ShoppingListPage from "@/pages/ShoppingListPage.vue";
 import RecipeSearchPage from "@/pages/RecipeSearchPage.vue";
 import RecipeViewPage from "@/pages/RecipeViewPage.vue";
 import luxonPlugin from "@/plugins/luxonPlugin";
+import RecipeEditPage from "@/pages/RecipeEditPage.vue";
 
 const routes = [
     {path: '/', redirect: '/search', name: 'index'},
@@ -19,7 +20,7 @@ const routes = [
     {path: '/mealplan', component: ShoppingListPage, name: 'view_mealplan'},
     {path: '/books', component: ShoppingListPage, name: 'view_books'},
     {path: '/recipe/:id', component: RecipeViewPage, name: 'view_recipe', props: true},
-    {path: '/recipe/edit/:id', component: RecipeViewPage, name: 'edit_recipe', props: true},
+    {path: '/recipe/edit/:recipe_id', component: RecipeEditPage, name: 'edit_recipe', props: true},
 ]
 
 const router = createRouter({

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>

vue3/src/pages/RecipeEditPage.vue

@@ -0,0 +1,111 @@
+<template>
+
+    <v-form>
+        <v-text-field
+            label="Name"
+            v-model="recipe.name"
+        ></v-text-field>
+
+        <v-textarea
+            label="Description"
+            v-model="recipe.description"
+            clearable
+        ></v-textarea>
+
+        <v-combobox
+            label="Keywords"
+            v-model="recipe.keywords"
+            :items="keywords"
+            item-title="name"
+            multiple
+            clearable
+            chips
+        ></v-combobox>
+
+        <v-row>
+            <v-col>
+                <v-text-field
+                    v-model.number="recipe.waitingTime"
+                    label="Waiting Time (min)"
+                ></v-text-field>
+            </v-col>
+            <v-col>
+                <v-text-field
+                    v-model.number="recipe.workingTime"
+                    label="Working Time (min)"
+                ></v-text-field>
+            </v-col>
+        </v-row>
+
+        <v-row>
+            <v-col>
+                <v-text-field
+                    v-model.number="recipe.servings"
+                    label="Servings"
+                ></v-text-field>
+            </v-col>
+            <v-col>
+                <v-text-field
+                    v-model="recipe.servingsText"
+                    label="Servings Text"
+                ></v-text-field>
+            </v-col>
+        </v-row>
+
+    </v-form>
+
+    <v-btn @click="updateRecipe()">Save</v-btn>
+    <v-btn :to="{name: 'view_recipe', params: {id: recipe_id}}">View</v-btn>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue'
+import {ApiApi, Keyword, Recipe} from "@/openapi";
+
+export default defineComponent({
+    name: "RecipeEditPage",
+    props: {
+        recipe_id: {type: String, required: false},
+    },
+    watch: {
+        recipe_id: function () {
+            this.refreshRecipe()
+        }
+    },
+    data() {
+        return {
+            recipe: {} as Recipe,
+            keywords: [] as Keyword[],
+        }
+    },
+    mounted() {
+        this.refreshRecipe()
+
+        const api = new ApiApi()
+        api.apiKeywordList().then(r => {
+            this.keywords = r.results
+        })
+    },
+    methods: {
+        refreshRecipe() {
+            if (this.recipe.id != this.recipe_id) {
+                const api = new ApiApi()
+                api.apiRecipeRetrieve({id: Number(this.recipe_id)}).then(r => {
+                    this.recipe = r
+                })
+            }
+        },
+        updateRecipe() {
+            const api = new ApiApi()
+            api.apiRecipeUpdate({id: this.recipe_id, recipe: this.recipe}).then(r => {
+                this.recipe = r
+            })
+        }
+    }
+})
+</script>
+
+
+<style scoped>
+
+</style>