74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
|
||
|
|
<!-- Show a card of the product with the total, taking up the available space and have an expanding section to view sources -->
|
||
|
|
<div class="shopping-list-item">
|
||
|
|
<img :src="product.img_small" class="product-image" />
|
||
|
|
<div class="product-details">
|
||
|
|
<h3 class="header">
|
||
|
|
<strong><a :href="product.link">{{ product.name }}</a></strong>, <small>{{ quantityRequired }} of {{ product.size }} {{ product.unit }} required.</small>
|
||
|
|
</h3>
|
||
|
|
<p class="sources">
|
||
|
|
<span v-for="(source, index) in sources" :key="source.id">
|
||
|
|
<span v-if="index">, and </span>
|
||
|
|
<span v-if="source.type === 'person'">
|
||
|
|
{{ source.quantity.value }} {{ source.quantity.unit }} for {{ source.person.name }}
|
||
|
|
</span>
|
||
|
|
<span v-else-if="source.type === 'meal_recipe'">
|
||
|
|
{{ source.quantity.value }} {{ source.quantity.unit }}
|
||
|
|
in <router-link :to="`/recipes/${ source.recipe.id }/`">{{ source.recipe.name }}</router-link>
|
||
|
|
for <router-link :to="`/meals/${ source.meal.id }/`">{{ source.meal.meal_date.toLocaleDateString("en-AU", { weekday: 'long', month: 'long', day: 'numeric' }) }}</router-link>
|
||
|
|
</span>
|
||
|
|
<span v-else-if="source.type === 'meal_extra_ingredient'">
|
||
|
|
{{ source.ingredient.line }} for <router-link :to="`/meals/${ source.meal.id }/`">{{ source.meal.meal_date.toLocaleDateString("en-AU", { weekday: 'long', month: 'long', day: 'numeric' }) }}</router-link>
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
/* Show the product image to the left, then the product name and size to the right */
|
||
|
|
|
||
|
|
.shopping-list-item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-image {
|
||
|
|
max-width: 5em;
|
||
|
|
max-height: 4em;
|
||
|
|
margin-right: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-details {
|
||
|
|
flex-grow: 1;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* show sources as subtitles to the product name, with the quantity and source name */
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ShoppingListItem',
|
||
|
|
props: ['product', 'sources'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
expanded: false,
|
||
|
|
quantityRequired: 5,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|