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

<template>
    <div class="meal-card">
        <h3>{{ mealTitle }}</h3>
        <h4>{{ dayOfWeek }} <small>{{ date }}</small></h4>
        
        <p>
            Cooked by 
            <span v-for="(chef, index) in meal.chefs" :key="chef.id">
                {{ chef.name }}{{ englishSeperator(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 }}{{ englishSeperator(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'

function englishSeperator(index, list) {
    switch (index) {
        case list.length - 1:
            return '';
        case list.length - 2:
            return ' and ';
        default:
            return ', ';
    }
}

function englishList(list) {
    switch (list.length) {
        case 0:
            return '';
        case 1:
            return list[0];
        case 2:
            return `${list[0]} and ${list[1]}`;
        default:
            return `${list.slice(0, -1).join(', ')}, and ${list.slice(-1)}`;
    }
}

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' })
        },
        mealTitle() {
            const recipesText = englishList(this.meal.recipes.map(mealRecipe => mealRecipe.recipe.name));
            const ingredientsText = englishList(this.meal.extra_ingredients.map(ingredient => ingredient.name));

            if (recipesText && ingredientsText) {
                return `${recipesText} with ${ingredientsText}`;
            } else if (recipesText || ingredientsText) {
                return recipesText || ingredientsText;
            } else {
                return 'Nothing planned';
            }
        }
    },
    methods: {
        englishSeperator,
        ago
    }
}
</script>