jableader
211489ca55
Some checks failed
CI / build-test (push) Has been cancelled
Reviewed-on: #3 Co-authored-by: jableader <jacobdunk@gmail.com> Co-committed-by: jableader <jacobdunk@gmail.com>
88 lines
2.8 KiB
Vue
88 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<h1>My Shopping List</h1>
|
|
<router-link :to="`/shopping/current`">
|
|
Full Shopping List
|
|
</router-link>
|
|
<editable-ingredients-panel
|
|
:ingredients="ingredients"
|
|
@on-add="addIngredient"
|
|
@on-delete="deleteIngredient"
|
|
@on-update-ingredient="updateIngredient"
|
|
@on-editing="onEditing"
|
|
/>
|
|
</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>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onBeforeMount } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
import { useShopping } from '@/composables/useShopping'
|
|
import type { Ingredient } from '@/domain/types'
|
|
import EditableIngredientsPanel from '@/components/ingredients/EditableIngredientsPanel.vue'
|
|
|
|
const router = useRouter()
|
|
const { loadUser } = useAuth()
|
|
const { getMyShoppingList, saveMyShoppingList } = useShopping()
|
|
|
|
const ingredients = ref<Ingredient[]>([])
|
|
|
|
async function updateShoppingList(save = false) {
|
|
const newIngredients = save ? await saveMyShoppingList(ingredients.value) : await getMyShoppingList()
|
|
ingredients.value = newIngredients.map((i) => ({ ...i }))
|
|
}
|
|
|
|
function addIngredient() {
|
|
ingredients.value = [
|
|
{ id: -1, name: '', line: '', quantity: 1, unit: 'Items', preparation: '', product: null },
|
|
...ingredients.value,
|
|
]
|
|
}
|
|
|
|
function deleteIngredient(ingredient: Ingredient) {
|
|
ingredients.value = ingredients.value.filter((i) => i !== ingredient)
|
|
}
|
|
|
|
function updateIngredient(oldIngredient: Ingredient, newIngredient: Ingredient) {
|
|
ingredients.value = ingredients.value.map((source) => (source === oldIngredient ? newIngredient : source))
|
|
}
|
|
|
|
async function onEditing(isStartingEdit: boolean) {
|
|
await updateShoppingList(!isStartingEdit)
|
|
if (isStartingEdit && ingredients.value.length === 0) addIngredient()
|
|
}
|
|
|
|
onBeforeMount(async () => {
|
|
const u = await loadUser()
|
|
if (!u) return router.push({ name: 'login' })
|
|
await updateShoppingList()
|
|
})
|
|
</script>
|
|
|
|
<style scoped></style>
|