jacob/munch-ease-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Meal card put the meal first

Browse source
This commit is contained in:
jableader 2024-10-16 18:30:45 +11:00
parent 7f9155558a
commit 0470e381d2
1 changed files with 41 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/components/meals/MealCard.vue
View file

@ -1,41 +1,19 @@
<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>
<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 }}{{ 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() {
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: {
seperator(index, list) {
switch (index) {
case list.length - 1:
return '';
case list.length - 2:
return ' and ';
default:
return ', ';
}
},
englishSeperator,
ago
}
}