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="(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, 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 {{ formatDate(meal.purchase_date) }}
        </p>
    </div>
</template>

<style>
</style>

<script>
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 ', ';
            }
        },
        formatDate(datetime) {
            // If its less than a week, use "2 minutes ago" style
            const diff = new Date() - datetime;
            if (diff < 1000 * 60 * 60 * 24 * 7) {
                const minutes = Math.floor(diff / 1000 / 60);
                if (minutes < 60) {
                    return `${minutes} minute${minutes === 1 ? '' : 's'} ago`;
                }
                const hours = Math.floor(minutes / 60);
                if (hours < 24) {
                    return `${hours} hour${hours === 1 ? '' : 's'} ago`;
                }
                const days = Math.floor(hours / 24);
                return `${days} day${days === 1 ? '' : 's'} ago`;
            }

            // Otherwise, use a date format with the day of week prepended
            return `${datetime.toLocaleDateString('en-au', { weekday: 'long' })} ${datetime.toLocaleDateString('en-au', { month: 'numeric', day: 'numeric' })}`;
        }
    }
}
</script>