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

<template>
    <div>
        <ul v-if="meals.length">
            <li v-for="meal in meals" :key="meal.id">
                <meal-card :meal="meal" @edit-meal="editmeal"/>
            </li>
        </ul>
        <ul v-if="!meals.length">
            <li>No meals planned</li>
        </ul>

        <ul class="actions" v-if="selectedMeal">
            <li><router-link class="nav-link" :to="`/meals/${selectedMeal.id}`" active-class="active">Edit Meal</router-link></li>
            <li><router-link class="nav-link" :to="`/meals/${selectedMeal.id}/swap`" active-class="active">Swap Day</router-link></li>
            <li><a @click="deleteSelectedMeal" class="button">Remove</a></li>
            <li><a @click="selectedMeal = null">Cancel</a></li>
        </ul>
    </div>
</template>

<style scoped>
li {
    list-style-type: none;
}

.actions ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.actions li {
    display: block;
    border: 1px solid #ccc;
    padding: 2ex;
}

.actions li:hover {
    background-color: #ccc;
}

.actions li a {
    display: block;
    text-decoration: none;
    color: #000;
    width: 100%;
}

</style>

<script>
import MealCard from './MealCard.vue'
import data from '@/data.js'

export default {
    name: 'MealPlanPage',
    components: {
        MealCard
    },
    data() {
        const from = new Date();
        const to = new Date();
        to.setDate(to.getDate() + 7);

        return {
            from, to,
            meals: [],
            selectedMeal: null
        }
    },
    async beforeMount() {
        const meals = await data.getMeals(this.from, this.to)
        this.meals = meals;
    },
    methods: {
        editmeal(meal) {
            console.log('editmeal', meal)
            this.selectedMeal = meal;
        },
        deleteSelectedMeal() {
            console.log('deleteSelectedMeal', this.selectedMeal)
            this.selectedMeal = null;
        }
    }
}
</script>