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="`${ shoppingListItemGroup.product?.img_small ?? require('@/assets/missing-product.svg') }`" class="product-image" />
    <div class="product-details">
        <h3 class="header">
            <strong>
                <a v-if="shoppingListItemGroup.product?.link" :href="shoppingListItemGroup.product?.link">{{ shoppingListItemGroup.product.name }}</a>
                <span v-else>{{ shoppingListItemGroup.name }}</span>
            </strong>, 
            <small>
                <span v-for="(total, index) in remainingRequiredTotals" :key="total.id">
                    <span v-if="index">, </span>
                    <span>{{ formatQuantity(total.quantity) }}&nbsp;{{ total.unit }}</span>
                </span> 
                <span class="found-marker partial" v-if="purchased.length > 0">✓ {{ getFriendlyDate(lastPurchased) }}</span>
            </small>
        </h3>
        <p class="sources" v-if="required.length > 0">
            <strong>Need: </strong>
            <span v-for="(source, index) in required" :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="purchased.length > 0">
            <strong>Already found or purchased: </strong>
            <span v-for="(source, index) in 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: ['shoppingListItemGroup' ], // { product: { ... }, OR name: 'string', shoppingListItems: { person, ingredient, list_id?, meal? }} where list_id is null if not yet purchased
    data() {
        return {
            expanded: false,
        }
    },
    computed: {
        remainingRequiredTotals() {
            return calculateTotals(this.shoppingListItemGroup.shoppingListItems.map(item => item.ingredient));
        },
        expectedExistingTotals() {
            const purchasedNotEaten = this.shoppingListItemGroup.shoppingListItems.filter(item => item.list_id && !(item?.meal?.consumed_date));

            return calculateTotals(purchasedNotEaten.map(item => item.ingredient));
        },
        required() {
            return this.shoppingListItemGroup.shoppingListItems.filter(item => !item.list_id);
        },
        purchased() {
            return this.shoppingListItemGroup.shoppingListItems.filter(item => item.list_id);
        },
        lastPurchased() {
            const purchasedItems = this.shoppingListItemGroup.shoppingListItems.filter(item => item.list_id);
            if (purchasedItems.length === 0) {
                return null;
            }
            // Find the most recently purchased item
            return purchasedItems.reduce((latest, item) => {
                const itemDate = item?.meal?.suggested_date || item?.created_at;
                return (!latest || (itemDate && itemDate > latest)) ? itemDate : latest;
            }, null);
        }
    },
    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>