302 lines
No EOL
9.2 KiB
Vue
302 lines
No EOL
9.2 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="fields">
|
|
<date-picker @date-selected="selectDate" :date="meal.suggested_date" />
|
|
<div class="persons-list">
|
|
Cooked by <person-list :people="meal.chefs" @remove-person="(p) => removePerson('chefs', p)" @add-person="(p) => addPerson('chefs', p)" />
|
|
for <person-list :people="meal.consumers" @remove-person="(p) => removePerson('consumers', p)" @add-person="(p) => addPerson('consumers', p)" />,
|
|
with <person-list :people="meal.cleanup" @remove-person="(p) => removePerson('cleanup', p)" @add-person="(p) => addPerson('cleanup', p)" /> on cleanup.
|
|
</div>
|
|
</div>
|
|
<div class="recipes">
|
|
<h2>Recipes</h2>
|
|
<ul v-if="meal.recipes && meal.recipes.length">
|
|
<li v-for="mealRecipe in meal.recipes" :key="mealRecipe.recipe.id">
|
|
<div class="saved-recipe">
|
|
<p class="recipe-card">
|
|
<recipe-card :recipe="mealRecipe.recipe" />
|
|
</p>
|
|
|
|
<p class="servings">
|
|
<input type="number" v-model="mealRecipe.servings" min="1" />
|
|
<small><em>servings</em></small>
|
|
</p>
|
|
|
|
<input type="checkbox" class="show-ingredient-checkbox" :checked="showIngredient(mealRecipe)" />
|
|
<label for="show-ingredients" @click="showIngredient(mealRecipe, !showIngredient(mealRecipe))">
|
|
<img class="icon" :src="require('@/assets/show-ingredients.svg')" />
|
|
</label>
|
|
<button class="icon-button" @click="removeRecipe(mealRecipe)">
|
|
<img class="icon" :src="require('@/assets/trash.svg')" />
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="showIngredient(mealRecipe)">
|
|
<ul>
|
|
<li v-for="ingredient in scaleIngredients(mealRecipe)" :key="ingredient.id" class="saved-ingredient">
|
|
<CompactParsedIngredient :ingredient="ingredient" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</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>Sides & Additional Ingredients</h2>
|
|
<editable-ingredients-panel :ingredients="meal.extra_ingredients" @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" @on-editing="onEditAdditionalIngredients" />
|
|
</div>
|
|
|
|
<button @click="saveMeal">Save</button>
|
|
<p v-if="meal.purchase_date"><em>Purchased {{ ago(meal.purchase_date) }}</em></p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { getMeal, saveMeal } from '@/api/meals';
|
|
import { getRecipe } from '@/api/recipes';
|
|
import { currentUser } from '@/api/auth';
|
|
import alert from '@/alert.js';
|
|
|
|
import { ago } from '@/dateformats.js';
|
|
|
|
import RecipeSearchBox from '@/components/recipes/RecipeSearchBox.vue';
|
|
import RecipeCard from '@/components/recipes/RecipeCard.vue';
|
|
import DatePicker from './DatePicker.vue';
|
|
import EditableIngredientsPanel from '../ingredients/EditableIngredientsPanel.vue';
|
|
import PersonList from './PersonList.vue';
|
|
import CompactParsedIngredient from '../ingredients/CompactParsedIngredient.vue';
|
|
|
|
function addPersonIfNotExists(list, person) {
|
|
if (!list.find(p => p.id === person.id)) {
|
|
list.push(person);
|
|
}
|
|
}
|
|
|
|
export default {
|
|
props: ['id'],
|
|
components: { RecipeSearchBox, DatePicker, RecipeCard, EditableIngredientsPanel, PersonList, CompactParsedIngredient },
|
|
data() {
|
|
return {
|
|
showIngredients: {},
|
|
meal: {
|
|
id: -1,
|
|
suggested_date: new Date(),
|
|
recipes: [],
|
|
extra_ingredients: [],
|
|
chefs: [],
|
|
consumers: [],
|
|
cleanup: []
|
|
}
|
|
};
|
|
},
|
|
async beforeMount() {
|
|
if (this.id >= 0) {
|
|
this.meal = await getMeal(this.id);
|
|
}
|
|
else {
|
|
const self = await currentUser();
|
|
this.meal = {...this.meal, chefs: [self], consumers: [self], cleanup: [self], };
|
|
}
|
|
},
|
|
methods: {
|
|
ago,
|
|
async selectRecipe(recipe) {
|
|
// Refetch to get additional details
|
|
recipe = await getRecipe(recipe.id);
|
|
|
|
if (recipe.created_by) {
|
|
addPersonIfNotExists(this.meal.chefs, recipe.created_by);
|
|
addPersonIfNotExists(this.meal.consumers, recipe.created_by);
|
|
|
|
if (this.meal.cleanup.length === 0) {
|
|
addPersonIfNotExists(this.meal.cleanup, recipe.created_by);
|
|
}
|
|
}
|
|
|
|
this.meal.recipes.push({ recipe, recipe_id: recipe.id, meal_id: this.meal.id, servings: recipe.serves });
|
|
},
|
|
selectDate(date) {
|
|
this.meal.suggested_date = date;
|
|
},
|
|
removeRecipe(mealRecipe) {
|
|
if (confirm(`Are you sure you want to remove ${mealRecipe.servings} servings of ${mealRecipe.recipe.name} from this meal?`)) {
|
|
this.meal.recipes = this.meal.recipes.filter(r => r != mealRecipe);
|
|
}
|
|
},
|
|
addIngredient() {
|
|
this.meal.extra_ingredients = [{ line: '', product: null }, ...this.meal.extra_ingredients];
|
|
},
|
|
deleteIngredient(ingredient) {
|
|
this.meal.extra_ingredients = this.meal.extra_ingredients.filter(i => i != ingredient);
|
|
},
|
|
updateIngredient(ingredient, newIngredient) {
|
|
this.meal.extra_ingredients = this.meal.extra_ingredients.map(i => i == ingredient ? newIngredient : i);
|
|
},
|
|
removePerson(list, person) {
|
|
this.meal[list] = this.meal[list].filter(p => p.id !== person.id);
|
|
},
|
|
addPerson(list, person) {
|
|
addPersonIfNotExists(this.meal[list], person);
|
|
},
|
|
async saveMeal() {
|
|
const meal = await saveMeal(this.meal);
|
|
if (meal?.id >= 0) {
|
|
this.meal = meal;
|
|
|
|
this.$router.push(`/meals/${meal.id}`);
|
|
alert.show({ heading: 'Meal saved', message: 'Meal saved successfully', type: 'success' });
|
|
return;
|
|
}
|
|
|
|
alert.show({ heading: 'Error saving meal', message: 'An error occurred while saving the meal', type: 'error' });
|
|
},
|
|
onEditAdditionalIngredients(editing) {
|
|
if (editing && this.meal.extra_ingredients.length === 0) {
|
|
this.addIngredient();
|
|
}
|
|
else {
|
|
this.meal.extra_ingredients = this.meal.extra_ingredients.filter(i => i.line);
|
|
}
|
|
},
|
|
showIngredient(mealRecipe, value) {
|
|
const index = this.meal.recipes.indexOf(mealRecipe);
|
|
const key = `${mealRecipe.recipe.id}-${index}`;
|
|
if (value === undefined) {
|
|
return this.showIngredients[key];
|
|
}
|
|
|
|
return this.showIngredients[key] = value;
|
|
},
|
|
scaleIngredients(mealRecipe) {
|
|
return mealRecipe.recipe.ingredients.map(i => {
|
|
return {
|
|
...i,
|
|
quantity: i.quantity * mealRecipe.servings / mealRecipe.recipe.serves
|
|
};
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
img.icon {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
.persons-list {
|
|
text-align: left;
|
|
padding: 1ex 2em;
|
|
}
|
|
|
|
.persons-list p {
|
|
margin: 0;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
.person-list li {
|
|
display: inline-block;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.recipe-card {
|
|
flex: 1;
|
|
}
|
|
|
|
.servings {
|
|
display: inline-block;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.servings input {
|
|
width: 3em;
|
|
border: none;
|
|
border-bottom: 1px solid #000;
|
|
text-align: center;
|
|
font-size: large;
|
|
font-style: italic;
|
|
}
|
|
|
|
.icon-button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: 1em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.icon-button:hover {
|
|
/* Invert the colors of the trash icon */
|
|
filter: invert(1);
|
|
}
|
|
|
|
.show-ingredient-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
.show-ingredient-checkbox + label {
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
padding: 0.5em;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
.show-ingredient-checkbox + label:hover {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.show-ingredient-checkbox:checked + label {
|
|
filter: invert(1);
|
|
}
|
|
|
|
</style> |