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

<template>
  <h3>Purchased {{ shoppingList ? ago(shoppingList.created_date) : '' }}</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="item.id"
    >
      <shopping-list-item :shopping-list-item-group="item" />
    </li>
  </ul>
</template>

<script setup>
import { ref, computed, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
import { ago } from '@/dateformats.js'
import { getShoppingList } from '@/api/shopping'
import { itemsToGroups, uniqueMeals } from './shopping.js'
import MealSelectionList from './MealSelectionList.vue'
import ShoppingListItem from './ShoppingListItem.vue'

const route = useRoute()
const shoppingList = ref(null)

const includedMeals = computed(() =>
  shoppingList.value ? uniqueMeals(shoppingList.value.items) : []
)
const listByProduct = computed(() =>
  shoppingList.value ? itemsToGroups(shoppingList.value.items) : []
)

onBeforeMount(async () => {
  const idParam = route.params.id
  const id = typeof idParam === 'string' ? parseInt(idParam) : idParam
  shoppingList.value = await getShoppingList(id)
})
</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>