jableader
6381c55c52
Reviewed-on: #2 Co-authored-by: jableader <jacobdunk@gmail.com> Co-committed-by: jableader <jacobdunk@gmail.com>
83 lines
No EOL
2.7 KiB
Vue
83 lines
No EOL
2.7 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>
|
|
import data from '@/data.js'
|
|
|
|
import EditableIngredientsPanel from '@/components/ingredients/EditableIngredientsPanel.vue'
|
|
|
|
export default {
|
|
name: 'MyShoppingpage',
|
|
components: { EditableIngredientsPanel },
|
|
data() {
|
|
return { ingredients: [], person: null }
|
|
},
|
|
async beforeMount() {
|
|
const person = await data.currentUser();
|
|
if (!person)
|
|
return this.$router.push({ name: 'login' });
|
|
|
|
this.person = person;
|
|
await this.updateShoppingList();
|
|
},
|
|
methods: {
|
|
async updateShoppingList(save = false) {
|
|
const new_ingredients = save ?
|
|
await data.saveMyShoppingList(this.ingredients) :
|
|
await data.getMyShoppingList();
|
|
|
|
this.ingredients = new_ingredients;
|
|
},
|
|
addIngredient() {
|
|
this.ingredients = [{ id: -1 }, ...this.ingredients];
|
|
},
|
|
deleteIngredient(ingredient) {
|
|
this.ingredients = this.ingredients.filter(i => i !== ingredient);
|
|
},
|
|
updateIngredient(oldIngredient, newIngredient) {
|
|
this.ingredients = this.ingredients.map(source => source === oldIngredient ? newIngredient : source);
|
|
},
|
|
async onEditing(isStartingEdit) {
|
|
await this.updateShoppingList(!isStartingEdit);
|
|
|
|
if (isStartingEdit && this.ingredients.length === 0) {
|
|
this.addIngredient();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |