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>