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

<template>
    <div class="container">
        <div class="fields">
            <date-picker @date-selected="selectDate" :date="meal.date" />
            <recipe-search-box @select-recipe="selectRecipe" />
        </div>
        <h2>Foods</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</p>
        </div>
    </div>
</template>

<script>
import data from '@/data.js'
import RecipeSearchBox from './RecipeSearchBox.vue';
import RecipeCard from './RecipeCard.vue';
import DatePicker from './DatePicker.vue';

export default {
    props: ['id'],
    components: { RecipeSearchBox, DatePicker, RecipeCard },
    data() {
        return {
            meal: {
                date: new Date(),
                recipes: [{ name: 'Sar Tay' }],
                chefs: [{ name: 'Ryan' }],
                consumers: [{ name: 'Ryan' }, { name: 'Jacob' }],
            }
        };
    },
    beforeMount() {
        if (this.id) {
            this.meal = 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);
        }
    }
}
</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-recipe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1vh 1em;
}

.saved-recipe button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5em;
    cursor: pointer;
    margin: 1em
}

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

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

</style>