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="productGrouping.product.img_small" class="product-image" />
    <div class="product-details">
        <h3 class="header">
            <strong><a :href="productGrouping.product.link">{{ productGrouping.product.name }}</a></strong>, 
            <small>
                <span v-for="(total, index) in remainingRequired" :key="total.id">
                    <span v-if="index">, </span>
                    <span>{{ formatQuantity(total.quantity) }}&nbsp;{{ total.unit }}</span>
                </span> 
                <span class="found-marker partial" v-if="productGrouping.purchased.length > 0">✓ {{ getFriendlyDate(lastPurchased) }}</span>
            </small>
        </h3>
        <p class="sources" v-if="productGrouping.requested.length > 0">
            <strong>Need: </strong>
            <span v-for="(source, index) in productGrouping.requested" :key="source.id">
                <span v-if="index">, and </span>
                <span v-if="source.person">
                    {{ formatQuantity(source.ingredient.quantity) }}&nbsp;{{ source.ingredient.unit }} for {{ source.person.name }}
                </span>
                <span v-else-if="source.recipe">
                    {{ formatQuantity(source.ingredient.quantity) }}&nbsp;{{ 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.suggested_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.suggested_date.toLocaleDateString("en-AU", { weekday: 'long', month: 'long', day: 'numeric' }) }}</router-link>
                </span>
            </span>
        </p>
        <p v-if="productGrouping.purchased.length > 0">
            <strong>Already found or purchased: </strong>
            <span v-for="(source, index) in productGrouping.purchased" :key="source.id">
                <span v-if="index">, and </span>
                <span v-if="source.person">
                    {{ formatQuantity(source.ingredient.quantity) }}&nbsp;{{ source.ingredient.unit }} for {{ source.person.name }}
                </span>
                <span v-else-if="source.recipe">
                    {{ formatQuantity(source.ingredient.quantity) }}&nbsp;{{ 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.suggested_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.suggested_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 {
    position: relative;
    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;
}

.found-marker {
    margin: 1ex;
    padding-top: 0.6ex;
    padding-bottom: 0.5ex;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 25px;

    text-align: center;
    white-space: nowrap;
    font-size: smaller;
    color: white;
    font-weight: bold;
    z-index: 1000;
}

.found-marker.found {
    background-color: green;
}

.found-marker.partial {
    background-color: darkgoldenrod;
}

</style>

<script>

import { ago } from '@/dateformats.js';
import { calculateTotals } from '@/units.js';

export default {
    name: 'ShoppingListItem',
    props: ['productGrouping' ],
    data() {
        return {
            expanded: false,
        }
    },
    computed: {
        remainingRequired() {
            return calculateTotals(this.productGrouping.requested.map(r => r.ingredient));
        },
        expectedExisting() {
            return calculateTotals(this.productGrouping.purchased.map(r => r.ingredient));
        },
        lastPurchased() {
            return this.productGrouping.purchased.reduce((latest, source) => {
                return (source.shop.created_date && latest > source.shop.created_date) ? latest : source.shop.created_date;
            }, new Date(0));
        }
    },
    methods: {
        getFriendlyDate(date) {
            if (!date)
                return '';

            return ago(date);
        },
        formatQuantity(quantity) {
            const log10 = Math.log10(quantity);
            if (log10 < 0) {
                return quantity.toPrecision(2);
            }
            else if (log10 < 1) {
                return quantity.toFixed(1);
            }
            else {
                return quantity.toFixed(0);
            }
        }
    }
}

</script>