156 lines
3.9 KiB
Vue
156 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<h1 class="title">{{ action }} {{ recipe.name || "[Unamed Recipe]" }}</h1>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="field">
|
|
<label class="label is-small-mobile">Name</label>
|
|
<div class="control">
|
|
<input class="input is-small-mobile" type="text" placeholder="name" v-model="recipe.name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="field">
|
|
<label class="label is-small-mobile">Source</label>
|
|
<div class="control">
|
|
<input class="input is-small-mobile" type="text" placeholder="source" v-model="recipe.source">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label is-small-mobile">Description</label>
|
|
<div class="control">
|
|
<textarea class="textarea is-small-mobile" placeholder="description" v-model="recipe.description"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label is-small-mobile">Tags</label>
|
|
<div class="control">
|
|
<input class="input is-small-mobile" type="text" placeholder="tags">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="field">
|
|
<label class="label is-small-mobile">Yields</label>
|
|
<div class="control">
|
|
<input class="input is-small-mobile" type="text" placeholder="servings" v-model="recipe.yields">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="field">
|
|
<label class="label is-small-mobile">Total Time</label>
|
|
<div class="control">
|
|
<input class="input is-small-mobile" type="number" placeholder="minutes" v-model="recipe.total_time">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="field">
|
|
<label class="label is-small-mobile">Active Time</label>
|
|
<div class="control">
|
|
<input class="input is-small-mobile" type="number" placeholder="minutes" v-model="recipe.active_time">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="title is-4">Ingredients</h3>
|
|
|
|
<recipe-edit-ingredient-editor :ingredients="recipe.ingredients"></recipe-edit-ingredient-editor>
|
|
|
|
|
|
<div class="field">
|
|
<label class="label title is-4">Directions</label>
|
|
<div class="control columns">
|
|
<div class="column">
|
|
<textarea ref="step_text_area" class="textarea" v-model="recipe.step_text"></textarea>
|
|
</div>
|
|
<div class="column">
|
|
<div class="box content" v-html="stepPreview">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import autosize from "autosize";
|
|
import debounce from "lodash/debounce";
|
|
import api from "../lib/Api";
|
|
|
|
import RecipeEditIngredientEditor from "./RecipeEditIngredientEditor";
|
|
|
|
export default {
|
|
props: {
|
|
recipe: {
|
|
required: true,
|
|
type: Object
|
|
},
|
|
action: {
|
|
required: false,
|
|
type: String,
|
|
default: "Editing"
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
stepPreviewCache: null
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
stepPreview() {
|
|
if (this.stepPreviewCache === null) {
|
|
return this.recipe.rendered_steps;
|
|
} else {
|
|
return this.stepPreviewCache;
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
|
|
updatePreview: debounce(function() {
|
|
api.postPreviewSteps(this.recipe.step_text)
|
|
.then(data => this.stepPreviewCache = data.rendered_steps)
|
|
.catch(err => this.stepPreviewCache = "?? Error ??");
|
|
}, 750)
|
|
},
|
|
|
|
watch: {
|
|
'recipe.step_text': function() {
|
|
this.updatePreview();
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
autosize(this.$refs.step_text_area);
|
|
},
|
|
|
|
components: {
|
|
RecipeEditIngredientEditor
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bulk-input {
|
|
height: 100%;
|
|
}
|
|
</style> |