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" />
        <h4>My Requests</h4>
        <editable-ingredients-panel @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" :ingredients="mySources" />

        <h4>Full shopping list</h4>
        <ul class="full-shopping-list">
            <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>

.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 EditableIngredientsPanel from '@/components/ingredients/EditableIngredientsPanel.vue'
import ShoppingListItem from './ShoppingListItem.vue'
import MealSelectionList from './MealSelectionList.vue'

import { mealToShoppingListSources, removeMealFromShoppingListSources, groupByProduct } from './shopping.js'

export default {
    name: 'ShoppingPage',
    components: { ShoppingListItem, MealSelectionList, EditableIngredientsPanel },
    data() {
        return { shoppingList: [], sources: [], mySources: [] }
    },
    watch: {
        async sources() {
            this.shoppingList = groupByProduct(this.sources);

            const person = await data.currentUser();
            this.mySources = this.sources.filter(source => source.person?.id === person?.id).map(source => source.ingredient);
        }
    },
    methods: {
        mealSelected(meal) {
            this.sources = this.sources.concat(mealToShoppingListSources(meal));
        },
        mealUnselected(meal) {
            this.sources = removeMealFromShoppingListSources(this.sources, meal);
        },
        async addIngredient() {
            const person = await data.currentUser();
            if (!person) return;

            this.sources = this.sources.concat([{ ingredient: { id: 0 }, person }]);
        },
        async deleteIngredient(ingredient) {
            const person = await data.currentUser();
            if (!person) return;

            const isMatch = source => source.ingredient === ingredient && source.person?.id === person.id;
            this.sources = this.sources.filter(source => !isMatch(source));
        },
        async updateIngredient(oldIngredient, newIngredient) {
            const person = await data.currentUser();
            if (!person) return;

            this.sources = this.sources.map(source => source.ingredient === oldIngredient ? { ingredient: newIngredient, person } : source);
        }
    }
}
</script>