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>

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

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