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>

import { ago } from '@/dateformats.js'

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

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

export default {
    name: 'FullShoppingListPage',
    components: { MealSelectionList, ShoppingListItem },
    props: {
        id: [String, Number]
    },
    computed: {
        includedMeals() {
            if (!this.shoppingList) return [];

            const seenMeals = new Set();
            return this.shoppingList.items
                .map(item => item.meal)
                .filter(meal => {
                    if (!meal) return false;
                    if (seenMeals.has(meal.id)) return false;
                    seenMeals.add(meal.id);
                    return true;
                });
        },
        listByProduct() {
            return this.shoppingList ? itemsToGroups(this.shoppingList.items) : [];
        }
    },
    data() {
        return { 
            shoppingList: null, 
        }
    },
    async beforeMount() {
        this.shoppingList = await data.getShoppingList(this.id);
    },
    methods: {
        ago
    }
}

</script>