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

<template>
    <div class="meal-card">
        <h3>{{ dayOfWeek }} <small>{{ date }}</small></h3>
        
        <p v-if="meal.recipes.length && meal.extra_ingredients.length">
            <span v-for="(recipe, index) in meal.recipes" :key="recipe.id">
                {{ recipe.name }}{{ seperator(index, meal.recipes) }}
            </span>
            with
            <span v-for="(ingredient, index) in meal.extra_ingredients" :key="ingredient.id">
                {{ ingredient.name }}{{ seperator(index, meal.extra_ingredients) }}
            </span>
        </p>
        <p v-else-if="meal.recipes.length">
            <span v-for="(recipe, index) in meal.recipes" :key="recipe.id">
                {{ recipe.name }}{{ seperator(index, meal.recipes) }}
            </span>
        </p>
        <p v-else-if="meal.extra_ingredients.length">
            <span v-for="(ingredient, index) in meal.extra_ingredients" :key="ingredient.id">
                {{ ingredient.name }}{{ seperator(index, meal.extra_ingredients) }}
            </span>
        </p>
        <p v-else>
            Nothing planned
        </p>

        <p>
            Cooked by 
            <span v-for="chef in meal.chefs" :key="chef.id">
                {{ chef.name }}{{ seperator(index, meal.chefs) }}
            </span>
            <span v-if="!meal.chefs.length">somebody?</span>
        </p>
        <p> 
            For 
            <span v-for="consumer in meal.consumers" :key="consumer.id">
                {{ consumer.name }}{{ seperator(index, meal.consumers) }}
            </span>
            <span v-if="!meal.consumers.length">somebody?</span>
        </p>
        <a @click="$emit('edit-meal', meal)">Edit</a>
    </div>
</template>

<style>
.meal-card {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}
</style>

<script>
export default {
    name: 'MealCard',
    props: ['meal'],
    computed: {
        date() {
            return this.meal.meal_date.toLocaleDateString('en-au', { month: 'numeric', day: 'numeric' })
        },
        dayOfWeek() {
            return this.meal.meal_date.toLocaleDateString('en-au', { weekday: 'long' })
        },
    },
    methods: {
        seperator(index, list) {
            switch (index) {
                case list.length - 1:
                    return '';
                case list.length - 2:
                    return ' and ';
                default:
                    return ', ';
            }
        }
    }
}
</script>