munch-ease-frontend/src/components/shopping/ShoppingListItem.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 }} 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.person">
                    {{ source.ingredient.quantity }} {{ source.ingredient.unit }} for {{ source.person.name }}
                </span>
                <span v-else-if="source.recipe">
                    {{ source.ingredient.quantity }} {{ source.ingredient.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.meal">
                    {{ 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>