munch-ease-frontend/src/components/meals/EditMealPage.vue

<template>
    <div class="container">
        <div class="fields">
            <date-picker @date-selected="selectDate" :date="meal.meal_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="recipe in meal.recipes" :key="recipe.id" class="saved-recipe">
                    <p class="recipe-card">
                        <recipe-card :recipe="recipe" />
                    </p>
                    <button @click="removeRecipe(recipe)">
                        <img class="icon" :src="require('@/assets/trash.svg')" />
                    </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>Sides & Additional Ingredients</h2>
            <editable-ingredients-panel :ingredients="meal.extra_ingredients" @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" />
        </div>
        <button @click="saveMeal">Save</button>
    </div>
</template>

<script>
import data from '@/data.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';

export default {
    props: ['id'],
    components: { RecipeSearchBox, DatePicker, RecipeCard, EditableIngredientsPanel, PersonList },
    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() {
            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) {
            this.meal[list].push(person);
        },
        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>

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;
}

</style>