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

<template>
    <div>
        <h1>Shopping List</h1>
        <h4>My Requests</h4>
        <editable-ingredients-panel @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" :ingredients="mySources" />
        
        <h3>Full shopping list</h3>
        <h4>Included Meals</h4>
        <meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" :checked="includedMeals" :meals="meals" />
        <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, groupByProduct } from './shopping.js'

export default {
    name: 'ShoppingPage',
    components: { ShoppingListItem, MealSelectionList, EditableIngredientsPanel },
    data() {
        const from = new Date();
        from.setTime(0);
        
        const to = new Date();
        to.setDate(to.getDate() + 7);

        return { from, to, shoppingList: [], sources: [], mySources: [], includedMeals: [], meals: [], person: null }
    },
    watch: {
        sources() {
            this.shoppingList = groupByProduct(this.sources);
        },
        includedMeals() {
            this.updateSources();
        },
        mySources() {
            this.updateSources();
        }
    },
    async beforeMount() {
        const person = await data.currentUser();
        if (!person)
            return this.$router.push({ name: 'login' });

        this.person = person;

        this.meals = await data.getMeals(this.from, this.to);
        // this.includedMeals = this.meals;
    },
    methods: {
        updateSources() {
            const person = this.person;
            if (!person) return;

            const mealSources = this.includedMeals.flatMap(mealToShoppingListSources);
            const personSources = this.mySources.map(ingredient => ({ ingredient, person }));

            this.sources = [...mealSources, ...personSources];
        },
        mealSelected(meal) {
            this.includedMeals = [...this.includedMeals, meal];
        },
        mealUnselected(meal) {
            this.includedMeals = this.includedMeals.filter(m => m !== meal);
        },
        addIngredient() {
            const person = this.person;
            if (!person) return;

            this.myRequestedItems = [{ id: 0 }, ...this.mySources];
        },
        deleteIngredient(ingredient) {
            const person = this.person;
            if (!person) return;

            this.myRequestedItems = this.mySources.filter(source => source !== ingredient);
        },
        updateIngredient(oldIngredient, newIngredient) {
            const person = this.person;
            if (!person) return;

            this.myRequestedItems = this.mySources.map(source => source === oldIngredient ? newIngredient : source);
        }
    }
}
</script>