157 lines
No EOL
4.2 KiB
Vue
157 lines
No EOL
4.2 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="fields">
|
|
<date-picker @date-selected="selectDate" :date="meal.meal_date" />
|
|
</div>
|
|
<div class="recipes">
|
|
<h2>Recipes</h2>
|
|
<ul v-if="meal.recipes && meal.recipes.length">
|
|
<li v-for="recipe in meal.recipes" :key="recipe.id" class="saved-recipe">
|
|
<p class="recipe-card">
|
|
<recipe-card :recipe="recipe" />
|
|
</p>
|
|
<button @click="removeRecipe(recipe)">Remove</button>
|
|
</li>
|
|
</ul>
|
|
<div v-else>
|
|
<p>Add some recipes using the search box</p>
|
|
</div>
|
|
<div class="fields">
|
|
<recipe-search-box @select-recipe="selectRecipe" />
|
|
</div>
|
|
</div>
|
|
<div class="ingredients">
|
|
<h2>Additional Ingredients</h2>
|
|
<ul v-if="meal.extra_ingredients && meal.extra_ingredients.length">
|
|
<li v-for="ingredient in meal.extra_ingredients" :key="ingredient" class="saved-ingredient">
|
|
<p>
|
|
<compact-parsed-ingredient :ingredient="ingredient" />
|
|
</p>
|
|
<button @click="deleteIngredient(ingredient)">Delete</button>
|
|
</li>
|
|
</ul>
|
|
<div v-else>
|
|
<p>Add some ingredients using the search box</p>
|
|
</div>
|
|
<ingredient-add-box @add-ingredient="addIngredient" />
|
|
</div>
|
|
<button @click="saveMeal">Save</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import data from '@/data.js'
|
|
import RecipeSearchBox from './RecipeSearchBox.vue';
|
|
import RecipeCard from './RecipeCard.vue';
|
|
import DatePicker from './DatePicker.vue';
|
|
import IngredientAddBox from './IngredientAddBox.vue';
|
|
import CompactParsedIngredient from './CompactParsedIngredient.vue';
|
|
|
|
export default {
|
|
props: ['id'],
|
|
components: { RecipeSearchBox, DatePicker, RecipeCard, IngredientAddBox, CompactParsedIngredient },
|
|
data() {
|
|
return {
|
|
meal: {
|
|
id: 0,
|
|
meal_date: new Date(),
|
|
recipes: [],
|
|
extra_ingredients: [],
|
|
chefs: [],
|
|
consumers: [],
|
|
cleanup: []
|
|
}
|
|
};
|
|
},
|
|
async beforeMount() {
|
|
if (this.id) {
|
|
this.meal = await data.getMeal(this.id);
|
|
}
|
|
},
|
|
methods: {
|
|
async selectRecipe(recipe) {
|
|
// Refetch to get additional details
|
|
recipe = await data.getRecipe(recipe.id);
|
|
|
|
if (recipe.created_by) {
|
|
this.meal.chefs.push(recipe.created_by);
|
|
this.meal.consumers.push(recipe.created_by);
|
|
|
|
if (this.meal.cleanup.length === 0) {
|
|
this.meal.cleanup.push(recipe.created_by);
|
|
}
|
|
}
|
|
|
|
this.meal.recipes.push(recipe);
|
|
},
|
|
selectDate(date) {
|
|
this.meal.meal_date = date;
|
|
},
|
|
removeRecipe(recipe) {
|
|
this.meal.recipes = this.meal.recipes.filter(r => r.id !== recipe.id);
|
|
},
|
|
addIngredient(ingredient) {
|
|
this.meal.extra_ingredients.push(ingredient);
|
|
},
|
|
deleteIngredient(ingredient) {
|
|
this.meal.extra_ingredients = this.meal.extra_ingredients.filter(i => i != ingredient);
|
|
},
|
|
async saveMeal() {
|
|
const meal = await data.saveMeal(this.meal);
|
|
if (meal?.id) {
|
|
this.$router.push(`/meals/${meal.id}`);
|
|
return;
|
|
}
|
|
|
|
alert('Failed to save meal');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.container {
|
|
margin: 1em auto;
|
|
}
|
|
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
padding-bottom: 0.5vh;
|
|
}
|
|
|
|
.saved-ingredient {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 1vh 1em;
|
|
}
|
|
|
|
.saved-recipe {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.saved-ingredient p {
|
|
flex: 1;
|
|
margin: 0;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
|
|
.saved-recipe button:hover {
|
|
background: #eee;
|
|
}
|
|
|
|
.saved-recipe .recipe-card {
|
|
margin: 0;
|
|
}
|
|
|
|
</style> |