munch-ease-frontend/src/components/shopping/PurchasedShoppingListPage.vue

<template>
  <h3>Purchased {{ shoppingList?.createdDate ? ago(shoppingList.createdDate) : '' }}</h3>

  <div v-if="includedMeals.length > 0">
    <h4>Included Meals</h4>
    <meal-selection-list
      :checked="includedMeals"
      :meals="includedMeals"
      :disabled="true"
    />
  </div>

  <ul class="full-shopping-list">
    <li
      v-for="item in listByProduct"
      :key="groupKey(item)"
    >
      <shopping-list-item-comp :shopping-list-item-group="item" />
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref, computed, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
import { ago } from '@/dateformats'
import { useShopping } from '@/composables/useShopping'
import { parseRouteId } from '@/router/helpers'
import type { Group } from '@/composables/useShopping'
import type { Meal } from '@/domain/types'
import MealSelectionList from './MealSelectionList.vue'
import ShoppingListItemComp from './ShoppingListItem.vue'

const route = useRoute()
const { getShoppingList, groupsFrom, mealsFrom } = useShopping()
const shoppingList = ref<import('@/domain/types').ShoppingListWithRefs | null>(null)

const includedMeals = computed<Meal[]>(() => mealsFrom(shoppingList.value?.items))
const listByProduct = computed(() => groupsFrom(shoppingList.value?.items))

onBeforeMount(async () => {
  const id = parseRouteId(route.params.id)
  if (id !== null) {
    shoppingList.value = await getShoppingList(id)
  }
})

function groupKey(group: Group) {
  if (group.type === 'product') return `p-${group.product.id}`
  if (group.type === 'name') return `n-${group.name}`
  return Math.random().toString(36)
}
</script>

<style scoped>
.full-shopping-list li {
  list-style-type: none;

  border: 1px solid #ccc;
  border-radius: 0.5em;
  margin-bottom: 1em;
}

.full-shopping-list {
  padding: 0;
}
</style>