mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-02 12:49:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

editor improvements

Browse Source
This commit is contained in:
vabene1111
2024-03-06 21:44:55 +01:00
parent cf20b22404
commit 95583dbe2c
8 changed files with 150 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
vue3/src/apps/tandoor/Tandoor.vue
View File

@@ -1,21 +1,18 @@
<template>
<v-app>
<v-app >
<v-app-bar color="tandoor" flat density="comfortable">
<router-link :to="{name: 'view_search', params: {}}">
<v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2"></v-img>
<v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2"></v-img>
</router-link>
<global-search-dialog></global-search-dialog>
<v-spacer></v-spacer>
<!-- <v-btn density="compact" icon="fas fa-ellipsis-v"></v-btn>-->
<!-- <v-btn density="compact" icon="fas fa-ellipsis-v"></v-btn>-->
</v-app-bar>
<v-main>
<router-view></router-view>
</v-main>
<v-bottom-navigation grow>
@@ -58,6 +55,7 @@ export default defineComponent({
return {
drawer: true,
rail: true,
overlay: false
}
},
mounted() {

17
vue3/src/components/display/IngredientsTable.vue
View File

@@ -1,20 +1,9 @@
<template>
<v-table density="compact" v-if="ingredients.length > 0">
<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>
<tbody>
<IngredientsTableRow v-for="i in ingredients" :ingredient="i" :key="i.id" :show-notes="showNotes" :draggable="draggable"></IngredientsTableRow>
</tbody>
</v-table>
</template>

75
vue3/src/components/inputs/StepEditor.vue
View File

@@ -19,29 +19,63 @@
<v-chip><i class="fas fa-plus-circle"></i> Time</v-chip>
</v-chip-group>
<ingredients-table :ingredients="step.ingredients" :show-notes="false" draggable>
<v-table density="compact">
</ingredients-table>
<draggable tag="tbody" v-model="step.ingredients" handle=".drag-handle" item-key="id" @sort="sortIngredients">
<template #item="{element}">
<v-dialog>
<template v-slot:activator="{ props: activatorProps }">
<IngredientsTableRow v-bind="activatorProps" :ingredient="element" :key="element.id" :show-notes="false" :draggable="true"></IngredientsTableRow>
</template>
<template v-slot:default="{ isActive }">
<v-card >
<v-card-title>Ingredient</v-card-title>
<v-card-text>
<v-form>
<v-text-field
label="Amount"
v-model="element.amount"
></v-text-field>
</v-form>
<v-alert @click="dialog_markdown_edit = true">
</v-card-text>
</v-card>
</template>
</v-dialog>
</template>
</draggable>
</v-table>
<v-alert @click="dialog_markdown_edit = true" class="mt-2">
{{ step.instruction }}
</v-alert>
</v-card-text>
</v-card>
<v-dialog
v-model="dialog_markdown_edit"
transition="dialog-bottom-transition">
<v-card>
<v-card-title>Ingredient</v-card-title>
<v-form>
<v-text-field></v-text-field>
</v-form>
</v-card>
</v-dialog>
<v-dialog
v-model="dialog_markdown_edit"
transition="dialog-bottom-transition"
fullscreen
@close="$emit('change', {step: step})">
fullscreen>
<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>
<step-markdown-editor class="h-100" :step="step" @change="step = $event.step;"></step-markdown-editor>
</v-card>
</v-dialog>
</template>
@@ -51,17 +85,15 @@ import {defineComponent, PropType} from 'vue'
import {Step} from "@/openapi";
import StepMarkdownEditor from "@/components/inputs/StepMarkdownEditor.vue";
import IngredientsTable from "@/components/display/IngredientsTable.vue";
import IngredientsTableRow from "@/components/display/IngredientsTableRow.vue";
import draggable from "vuedraggable";
export default defineComponent({
name: "StepEditor",
components: {IngredientsTable, StepMarkdownEditor},
emits: {
change(payload: { step: Step }) {
return payload
}
},
components: {draggable, IngredientsTableRow, IngredientsTable, StepMarkdownEditor},
emits: ['update:modelValue'],
props: {
step: {
modelValue: {
type: Object as PropType<Step>,
required: true,
},
@@ -70,10 +102,27 @@ export default defineComponent({
required: false,
},
},
computed: {
step: {
get() {
return this.modelValue
},
set(value: Step) {
this.$emit('update:modelValue', value)
}
}
},
data() {
return {
dialog_markdown_edit: false,
}
},
methods: {
sortIngredients() {
this.step.ingredients.forEach((value, index) => {
value.order = index
})
}
}
})
</script>

129
vue3/src/pages/RecipeEditPage.vue
View File

@@ -1,70 +1,83 @@
<template>
<v-container>
<v-row>
<v-col>
<v-card>
<v-card-title>{{ recipe.name }}</v-card-title>
<v-form>
<v-text-field
label="Name"
v-model="recipe.name"
></v-text-field>
<v-card-text>
<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-form>
<v-text-field
label="Name"
v-model="recipe.name"
></v-text-field>
<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-textarea
label="Description"
v-model="recipe.description"
clearable
></v-textarea>
<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-combobox
label="Keywords"
v-model="recipe.keywords"
:items="keywords"
item-title="name"
multiple
clearable
chips
></v-combobox>
<v-row v-for="(step, index) in recipe.steps">
<v-col>
<step-editor :step="step" :step-index="index"></step-editor>
</v-col>
</v-row>
<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-form>
<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-btn @click="updateRecipe()">Save</v-btn>
<v-btn :to="{name: 'view_recipe', params: {id: recipe_id}}">View</v-btn>
</v-form>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row v-for="(step, index) in recipe.steps" class="mt-1">
<v-col>
<step-editor v-model="recipe.steps[index]" :step-index="index"></step-editor>
</v-col>
</v-row>
</v-container>
<v-btn @click="updateRecipe()">Save</v-btn>
<v-btn :to="{name: 'view_recipe', params: {id: recipe_id}}">View</v-btn>
</template>
@@ -96,13 +109,13 @@ export default defineComponent({
this.refreshRecipe()
const api = new ApiApi()
api.apiKeywordList().then(r => {
api.apiKeywordList({page: 1, pageSize: 100}).then(r => {
this.keywords = r.results
})
},
methods: {
refreshRecipe() {
if (this.recipe.id != this.recipe_id) {
if (this.recipe.id != Number(this.recipe_id)) {
const api = new ApiApi()
api.apiRecipeRetrieve({id: Number(this.recipe_id)}).then(r => {
this.recipe = r
@@ -111,7 +124,7 @@ export default defineComponent({
},
updateRecipe() {
const api = new ApiApi()
api.apiRecipeUpdate({id: this.recipe_id, recipe: this.recipe}).then(r => {
api.apiRecipeUpdate({id: Number(this.recipe_id), recipe: this.recipe}).then(r => {
this.recipe = r
})
}

2
vue3/src/pages/RecipeSearchPage.vue
View File

@@ -3,7 +3,7 @@
<!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
<horizontal-recipe-scroller title="New Recipes" :recipes="new_recipes"></horizontal-recipe-scroller>
<horizontal-recipe-scroller title="Top Rated" :recipes="high_rated_recipes"></horizontal-recipe-scroller>
<horizontal-recipe-scroller title="Top Rated" :recipes="high_rated_recipes" ></horizontal-recipe-scroller>
</v-container>