87 lines
2 KiB
Vue
87 lines
2 KiB
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>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { ago } from '@/dateformats.js'
|
|
|
|
const props = defineProps({
|
|
meal: { type: Object, required: true },
|
|
})
|
|
|
|
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)}`
|
|
}
|
|
}
|
|
|
|
const date = computed(() =>
|
|
props.meal.suggested_date.toLocaleDateString('en-au', {
|
|
month: 'numeric',
|
|
day: 'numeric',
|
|
})
|
|
)
|
|
|
|
const dayOfWeek = computed(() =>
|
|
props.meal.suggested_date.toLocaleDateString('en-au', { weekday: 'long' })
|
|
)
|
|
|
|
const mealTitle = computed(() => {
|
|
const recipesText = englishList(props.meal.recipes.map((mr) => mr.recipe.name))
|
|
const ingredientsText = englishList(props.meal.extra_ingredients.map((i) => i.name))
|
|
|
|
if (recipesText && ingredientsText) return `${recipesText} with ${ingredientsText}`
|
|
if (recipesText || ingredientsText) return recipesText || ingredientsText
|
|
return 'Nothing planned'
|
|
})
|
|
</script>
|
|
|
|
<style></style>
|