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

<template>
    <div>
        <ul class="meals-list" v-if="meals.length">
            <li v-for="meal in meals" :key="meal.id">
                <meal-card :meal="meal"/>
                <button class="toggle-actions" @click="selectedMeal = ((meal == selectedMeal) ? null : meal)">
                    <img :src="meal == selectedMeal ? require('@/assets/chevron-down.svg') : require('@/assets/chevron-up.svg')" />
                </button>
                
                <ul class="actions" v-if="selectedMeal == meal">
                    <li><router-link class="nav-link" :to="`/meals/${selectedMeal.id}`" active-class="active">Edit Meal</router-link></li>
                    <li><a @click="deleteSelectedMeal" class="button">Remove</a></li>
                </ul>
            </li>
        </ul>
        <ul v-if="!meals.length">
            <li>No meals planned</li>
        </ul>
    </div>
</template>

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

.toggle-actions {
    cursor: pointer;
    background-color: #fff;
    border: none;
    border-bottom: solid 1px #ccc;
    padding: 0 2em;
    margin: 0;
}

.toggle-actions img {
    width: 2em;
    height: 2em;
}

.meals-list > li {
    margin-bottom: 1em;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

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

.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%;
    cursor: pointer;
}

</style>

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

export default {
    name: 'MealPlanPage',
    components: {
        MealCard
    },
    data() {
        const from = new Date();
        from.setTime(0);
        
        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: {
        async deleteSelectedMeal() {
            await data.deleteMeal(this.selectedMeal.id);
            this.meals = this.meals.filter(m => m.id !== this.selectedMeal.id);
            this.selectedMeal = null;
        }
    }
}
</script>