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

<template>
    <div>
        <h1>My Shopping List</h1>
        <editable-ingredients-panel @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" @on-editing="onEditing" :ingredients="ingredients" />
    </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>

</style>

<script>
import data from '@/data.js'

import EditableIngredientsPanel from '@/components/ingredients/EditableIngredientsPanel.vue'

export default {
    name: 'MyShoppingpage',
    components: { EditableIngredientsPanel },
    data() {
        return { ingredients: [], person: null }
    },
    async beforeMount() {
        const person = await data.currentUser();
        if (!person)
            return this.$router.push({ name: 'login' });

        this.person = person;
        await this.updateShoppingList();
    },
    methods: {
        async updateShoppingList(save = false) {
            const requests = save ?
                await data.saveMyShoppingList(this.ingredients) :
                await data.getMyShoppingList();

            this.ingredients = requests.map(r => r.ingredient);
        },
        addIngredient() {
            this.ingredients = [{ id: 0 }, ...this.ingredients];
        },
        deleteIngredient(ingredient) {
            this.ingredients = this.ingredients.filter(i => i !== ingredient);
        },
        updateIngredient(oldIngredient, newIngredient) {
            this.ingredients = this.ingredients.map(source => source === oldIngredient ? newIngredient : source);
        },
        async onEditing(isStartingEdit) {
            await this.updateShoppingList(!isStartingEdit);

            if (isStartingEdit && this.ingredients.length === 0) {
                this.addIngredient();
            }
        }
    }
}
</script>