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

<template>
    <div>
        <h1>Shopping List</h1>
        <h4>Included Meals</h4>
        <meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" />
        <ul>
            <li v-for="item in shoppingList" :key="item.id">
                <shopping-list-item :product="item.product" :sources="item.sources" />
            </li>
        </ul>
    </div>

    <!--
        # Functions
        * Add a random item to next shop
        * Add meals to next shop
            * Show cards for the next 7 meals
            * Slider / drawer for more meals
            * Check meal to add
            * Update shopping list automatically as meals change
            * Visual indicator for meals that are already in the list
            * Visual indicator for purchased meals
        * Aggregate items from meals and random items into a single list of products
        * For each product, need to have visibility of
            * Name 
            * Link
            * Image
            * Quantity
            * Source meal / person
            * Date added / for
        * Need to be able to mark list as done
            * Keeps history - track purchased meals
            * Clears list

        * History view of purchased lists (seperate page ofc)
    -->
</template>

<style scoped>

li {
    list-style-type: none;

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

ul {
    padding: 0;
}

</style>

<script>
import ShoppingListItem from './ShoppingListItem.vue'
import MealSelectionList from './MealSelectionList.vue'
import { mealToShoppingListSources, removeMealFromShoppingListSources, groupByProduct } from './shopping.js'

export default {
    name: 'ShoppingPage',
    components: {
        ShoppingListItem, MealSelectionList
    },
    data() {
        return { shoppingList: [], sources: [] }
    },
    watch: {
        sources() {
            this.shoppingList = groupByProduct(this.sources);
        }
    },
    methods: {
        mealSelected(meal) {
            this.sources = this.sources.concat(mealToShoppingListSources(meal));
        },
        mealUnselected(meal) {
            this.sources = removeMealFromShoppingListSources(this.sources, meal);
        }
    }
}
</script>