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

<template>
    <h3>Purchased {{ shoppingList?.purchased_date?.toLocaleDateString({ year: 'numeric', month: '2-digit', day: '2-digit' }) || '' }}</h3>
    
    <h4>Included Meals</h4>
    <meal-selection-list :checked="includedMeals" :meals="includedMeals" />

    <ul class="full-shopping-list">
        <li v-for="item in listByProduct" :key="item.id">
            <shopping-list-item :productGrouping="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>

import data from '@/data.js'
import { purchasedToProductModel } from './shopping.js'

import MealSelectionList from './MealSelectionList.vue'
import ShoppingListItem from './ShoppingListItem.vue'

export default {
    name: 'FullShoppingListPage',
    components: { MealSelectionList, ShoppingListItem },
    props: {
        id: [String, Number]
    },
    data() {
        return { 
            shoppingList: null, 
            includedMeals: [], 
            listByProduct: [], 
        }
    },
    async beforeMount() {
        this.shoppingList = await data.getShoppingList(this.id);
        this.includedMeals = this.shoppingList.requests.map(r => r.meal).filter(m => m);
        this.listByProduct = purchasedToProductModel(this.shoppingList);
    },
}

</script>