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>