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

<template>
    <div>
        <h1>My Shopping List</h1>
        <router-link :to="`/shopping/current`">Full Shopping List</router-link>
        <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 setup>
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { useAuth } from '@/composables/useAuth'
import { useShopping } from '@/composables/useShopping'
import EditableIngredientsPanel from '@/components/ingredients/EditableIngredientsPanel.vue'


const router = useRouter()
const { loadUser } = useAuth()
const { getMyShoppingList, saveMyShoppingList } = useShopping()

const person = ref(null)
const ingredients = ref([])

async function updateShoppingList(save = false) {
    const newIngredients = save ? await saveMyShoppingList(ingredients.value) : await getMyShoppingList()
    ingredients.value = newIngredients
}

function addIngredient() {
    ingredients.value = [{ id: -1 }, ...ingredients.value]
}

function deleteIngredient(ingredient) {
    ingredients.value = ingredients.value.filter((i) => i !== ingredient)
}

function updateIngredient(oldIngredient, newIngredient) {
    ingredients.value = ingredients.value.map((source) => (source === oldIngredient ? newIngredient : source))
}

async function onEditing(isStartingEdit) {
    await updateShoppingList(!isStartingEdit)
    if (isStartingEdit && ingredients.value.length === 0) addIngredient()
}

onBeforeMount(async () => {
    const u = await loadUser()
    if (!u) return router.push({ name: 'login' })
    person.value = u
    await updateShoppingList()
})
</script>