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="imageSrc"
      class="product-image"
    >
    <div class="product-details">
      <h3 class="header">
        <strong>
          <a
            v-if="shoppingListItemGroup.type === 'product' && shoppingListItemGroup.product?.link"
            :href="shoppingListItemGroup.product?.link"
          >{{ shoppingListItemGroup.product?.name }}</a>
          <span v-else>{{ shoppingListItemGroup.type === 'name' ? shoppingListItemGroup.name : '' }}</span> </strong>,
        <small>
          <span
            v-for="(total, index) in remainingRequiredTotals"
            :key="index"
          >
            <span v-if="index">, </span>
            <span>{{ formatQuantity(total.quantity) }}&nbsp;{{ total.unit }}</span>
          </span>
          <span
            v-if="purchased.length > 0"
            class="found-marker partial"
          >✓ {{ getFriendlyDate(lastPurchased) }}</span>
        </small>
      </h3>
      <p
        v-if="required.length > 0"
        class="sources"
      >
        <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?.suggestedDate
                ? source.meal.suggestedDate.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?.suggestedDate
                ? source.meal.suggestedDate.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?.suggestedDate
                ? source.meal.suggestedDate.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.suggestedDate
                ? source.meal.suggestedDate.toLocaleDateString('en-AU', {
                  weekday: 'long',
                  month: 'long',
                  day: 'numeric',
                })
                : ''
            }}</router-link>
          </span>
        </span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ago } from '@/dateformats'
import { calculateTotals } from '@/units'
import type { Group } from '@/composables/useShopping'

const props = defineProps<{ shoppingListItemGroup: Group }>()

const fallbackImg = new URL('@/assets/missing-product.svg', import.meta.url).toString()
const imageSrc = computed(() => {
  if (props.shoppingListItemGroup.type === 'product') {
    return props.shoppingListItemGroup.product?.imgSmall ?? fallbackImg
  }
  return fallbackImg
})

const remainingRequiredTotals = computed(() =>
  calculateTotals(
    props.shoppingListItemGroup.shoppingListItems.map((item) => ({
      quantity: item.ingredient.quantity,
      unit: String(item.ingredient.unit || 'items'),
    }))
  )
)

const required = computed(() => props.shoppingListItemGroup.shoppingListItems.filter((item) => !item.listId))

const purchased = computed(() => props.shoppingListItemGroup.shoppingListItems.filter((item) => item.listId))

const lastPurchased = computed(() => {
  const purchasedItems = props.shoppingListItemGroup.shoppingListItems.filter((item) => item.listId)
  if (purchasedItems.length === 0) return null
  return purchasedItems.reduce<Date | null>((latest, item) => {
    const itemDate: Date | null = (item?.meal?.suggestedDate ?? item?.createdDate) || null
    return !latest || (itemDate && itemDate > latest) ? itemDate : latest
  }, null)
})

function getFriendlyDate(date: Date | null) {
  if (!date) return ''
  return ago(date)
}

function formatQuantity(quantity: number) {
  const log10 = Math.log10(quantity)
  if (log10 < 0) return quantity.toPrecision(2)
  if (log10 < 1) return quantity.toFixed(1)
  return quantity.toFixed(0)
}
</script>

<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>