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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<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>