jableader
211489ca55
Some checks failed
CI / build-test (push) Has been cancelled
Reviewed-on: #3 Co-authored-by: jableader <jacobdunk@gmail.com> Co-committed-by: jableader <jacobdunk@gmail.com>
90 lines
2.3 KiB
Vue
90 lines
2.3 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.purchaseDate">
|
|
Purchased {{ ago(meal.purchaseDate) }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { ago } from '@/dateformats'
|
|
import type { Meal } from '@/domain/types'
|
|
|
|
const props = defineProps<{ meal: Meal }>()
|
|
|
|
function englishSeperator(index: number, list: Array<unknown>) {
|
|
switch (index) {
|
|
case list.length - 1:
|
|
return ''
|
|
case list.length - 2:
|
|
return ' and '
|
|
default:
|
|
return ', '
|
|
}
|
|
}
|
|
|
|
function englishList(list: string[]) {
|
|
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.suggestedDate
|
|
? props.meal.suggestedDate.toLocaleDateString('en-au', { month: 'numeric', day: 'numeric' })
|
|
: ''
|
|
)
|
|
|
|
const dayOfWeek = computed(() =>
|
|
props.meal.suggestedDate ? props.meal.suggestedDate.toLocaleDateString('en-au', { weekday: 'long' }) : ''
|
|
)
|
|
|
|
const mealTitle = computed(() => {
|
|
const recipes = props.meal.recipes ?? []
|
|
const extras = props.meal.extraIngredients ?? []
|
|
const recipeNames = recipes
|
|
.map((mr) => mr.recipe?.name)
|
|
.filter((n): n is string => typeof n === 'string' && n.length > 0)
|
|
const recipesText = englishList(recipeNames)
|
|
const ingredientsText = englishList(extras.map((i) => i.name))
|
|
|
|
if (recipesText && ingredientsText) return `${recipesText} with ${ingredientsText}`
|
|
if (recipesText || ingredientsText) return recipesText || ingredientsText
|
|
return 'Nothing planned'
|
|
})
|
|
</script>
|
|
|
|
<style></style>
|