Meal card put the meal first

src/components/meals/MealCard.vue

@@ -1,41 +1,19 @@
 <template>
     <div class="meal-card">
-        <h3>{{ dayOfWeek }} <small>{{ date }}</small></h3>
+        <h3>{{ mealTitle }}</h3>
-        
+        <h4>{{ dayOfWeek }} <small>{{ date }}</small></h4>
-        <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) }}
+                {{ 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 }}{{ seperator(index, meal.consumers) }}
+                {{ consumer.name }}{{ englishSeperator(index, meal.consumers) }}
             </span>
             <span v-if="!meal.consumers.length">somebody?</span>
         </p>
@@ -52,6 +30,30 @@
 
 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'],
@@ -62,18 +64,21 @@ export default {
         dayOfWeek() {
             return this.meal.suggested_date.toLocaleDateString('en-au', { weekday: 'long' })
         },
-    },
+        mealTitle() {
-    methods: {
+            const recipesText = englishList(this.meal.recipes.map(mealRecipe => mealRecipe.recipe.name));
-        seperator(index, list) {
+            const ingredientsText = englishList(this.meal.extra_ingredients.map(ingredient => ingredient.name));
-            switch (index) {
+
-                case list.length - 1:
+            if (recipesText && ingredientsText) {
-                    return '';
+                return `${recipesText} with ${ingredientsText}`;
-                case list.length - 2:
+            } else if (recipesText || ingredientsText) {
-                    return ' and ';
+                return recipesText || ingredientsText;
-                default:
+            } else {
-                    return ', ';
+                return 'Nothing planned';
+            }
         }
     },
+    methods: {
+        englishSeperator,
         ago
     }
 }