munch-ease-frontend/src/components/meals/EditMealPage.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>