munch-ease-frontend/src/components/meals/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="(meal_recipe, index) in meal.recipes" :key="meal_recipe.recipe.id">
                {{ meal_recipe.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="(meal_recipe, index) in meal.recipes" :key="meal_recipe.recipe.id">
                {{ meal_recipe.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, index) 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, index) in meal.consumers" :key="consumer.id">
                {{ consumer.name }}{{ seperator(index, meal.consumers) }}
            </span>
            <span v-if="!meal.consumers.length">somebody?</span>
        </p>
        <p v-if="meal.purchase_date">
            Purchased {{ ago(meal.purchase_date) }}
        </p>
    </div>
</template>

<style>
</style>

<script>

import { ago } from '@/dateformats.js'

export default {
    name: 'MealCard',
    props: ['meal'],
    computed: {
        date() {
            return this.meal.suggested_date.toLocaleDateString('en-au', { month: 'numeric', day: 'numeric' })
        },
        dayOfWeek() {
            return this.meal.suggested_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 ', ';
            }
        },
        ago
    }
}
</script>