81 lines
No EOL
2.6 KiB
Vue
81 lines
No EOL
2.6 KiB
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> |