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

<template>
    <div class="container">
        <div class="fields">
            <date-picker @date-selected="selectDate" :date="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,
                date: new Date(),
                recipes: [],
                extra_ingredients: [],
                chefs: [],
                consumers: [],
            }
        };
    },
    async beforeMount() {
        if (this.id) {
            this.meal = await data.getMeal(this.id);
        }
    },
    methods: {
        selectRecipe(recipe) {
            this.meal.recipes.push(recipe);
        },
        selectDate(date) {
            this.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;
    max-width: 1200px;
}

.fields {
    width: 80%;
    margin: 0 auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.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;
    margin: 1vh 1em;
}

.saved-ingredient p {
    flex: 1;
    margin: 0;
    margin-right: 1em;
}


.saved-recipe button:hover {
    background: #eee;
}

.saved-recipe .recipe-card {
    flex: 1;
    margin: 0 1em;
}

</style>