munch-ease-frontend/src/components/meals/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="markConsumed">Mark Consumed</a></li>
                    <li><a @click="deleteSelectedMeal" class="button">Remove</a></li>
                </ul>
            </li>
        </ul>
        <div v-if="!meals.length">
            <em>No meals planned</em>
        </div>
        <action-item title="Plan Meal" :image="require('@/assets/plan-meal.svg')" @click="() => this.$router.push('/meals/add')" />
    </div>
</template>

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

ul.meals-list {
    padding: 0;
}

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

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

.actions li a {
    display: block;
    text-decoration: none;
    color: #000;
    width: 100%;
    cursor: pointer;
    padding-top: 2ex;
    padding-bottom: 2ex;
}

</style>

<script>
import ActionItem from '@/components/ActionItem.vue'
import MealCard from '@/components/meals/MealCard.vue'
import { getUpcomingMeals, markMealConsumed, deleteMeal } from '@/api/meals'

export default {
    name: 'MealPlanPage',
    components: { MealCard, ActionItem },
    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 getUpcomingMeals(this.from, this.to)
        this.meals = meals
    },
    methods: {
        async deleteSelectedMeal() {
            await deleteMeal(this.selectedMeal.id)
            this.meals = this.meals.filter(m => m.id !== this.selectedMeal.id)
            this.selectedMeal = null
        },
        async markConsumed() {
            await markMealConsumed(this.selectedMeal.id)
            this.meals = this.meals.filter(m => m.id !== this.selectedMeal.id)
        }
    }
}
</script>