jacob/munch-ease-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Moved meal management out of component

Browse source
This commit is contained in:
jableader 2024-05-13 13:45:46 +10:00
parent d42462a54e
commit fcfc5b7b4c
2 changed files with 53 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/shopping/MealSelectionList.vue
View file

@ -4,7 +4,7 @@
<li v-for="meal in meals" :key="meal.id">
<!-- Have a checkbox and card for each meal, show the image and name -->
<!-- Emit meal-selected event on checked and meal-unselected on unchecked -->
<input type="checkbox" :id="meal.id" @change="mealCheckChanged" />
<input type="checkbox" :id="meal.id" :checked="this.checked.includes(meal)" @change="mealCheckChanged" />
<label :for="meal.id" :style="getImageStyling(meal)">
{{ formatDate(meal.meal_date) }}
</label>
@ -74,8 +74,6 @@ label {
<script>
import data from '@/data.js'
const nth = (d) => {
if (d > 3 && d < 21) return 'th';
switch (d % 10) {
@ -116,18 +114,9 @@ const getUrl = (meal) => {
export default {
name: 'MealSelectionList',
data() {
const from = new Date();
from.setTime(0);
const to = new Date();
to.setDate(to.getDate() + 7);
return { from, to, meals: [], }
},
async beforeMount() {
const meals = await data.getMeals(this.from, this.to)
this.meals = meals;
props: {
meals: Array,
checked: Array,
},
methods: {
formatDate,
@ -148,7 +137,7 @@ export default {
} else {
this.$emit('meal-unselected', meal);
}
}
},
}
}

67
src/components/shopping/ShoppingPage.vue
View file

@ -1,12 +1,12 @@
<template>
<div>
<h1>Shopping List</h1>
<h4>Included Meals</h4>
<meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" />
<h4>My Requests</h4>
<editable-ingredients-panel @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" :ingredients="mySources" />
<h3>Full shopping list</h3>
<h4>Included Meals</h4>
<meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" :checked="includedMeals" :meals="meals" />
<ul class="full-shopping-list">
<li v-for="item in shoppingList" :key="item.id">
<shopping-list-item :product="item.product" :sources="item.sources" />
@ -63,47 +63,74 @@ import EditableIngredientsPanel from '@/components/ingredients/EditableIngredien
import ShoppingListItem from './ShoppingListItem.vue'
import MealSelectionList from './MealSelectionList.vue'
import { mealToShoppingListSources, removeMealFromShoppingListSources, groupByProduct } from './shopping.js'
import { mealToShoppingListSources, groupByProduct } from './shopping.js'
export default {
name: 'ShoppingPage',
components: { ShoppingListItem, MealSelectionList, EditableIngredientsPanel },
data() {
return { shoppingList: [], sources: [], mySources: [] }
const from = new Date();
from.setTime(0);
const to = new Date();
to.setDate(to.getDate() + 7);
return { from, to, shoppingList: [], sources: [], mySources: [], includedMeals: [], meals: [], person: null }
},
watch: {
async sources() {
sources() {
this.shoppingList = groupByProduct(this.sources);
const person = await data.currentUser();
this.mySources = this.sources.filter(source => source.person?.id === person?.id).map(source => source.ingredient);
},
includedMeals() {
this.updateSources();
},
mySources() {
this.updateSources();
}
},
async beforeMount() {
const person = await data.currentUser();
if (!person)
return this.$router.push({ name: 'login' });
this.person = person;
this.meals = await data.getMeals(this.from, this.to);
// this.includedMeals = this.meals;
},
methods: {
updateSources() {
const person = this.person;
if (!person) return;
const mealSources = this.includedMeals.flatMap(mealToShoppingListSources);
const personSources = this.mySources.map(ingredient => ({ ingredient, person }));
this.sources = [...mealSources, ...personSources];
},
mealSelected(meal) {
this.sources = this.sources.concat(mealToShoppingListSources(meal));
this.includedMeals = [...this.includedMeals, meal];
},
mealUnselected(meal) {
this.sources = removeMealFromShoppingListSources(this.sources, meal);
this.includedMeals = this.includedMeals.filter(m => m !== meal);
},
async addIngredient() {
const person = await data.currentUser();
addIngredient() {
const person = this.person;
if (!person) return;
this.sources = [{ ingredient: { id: 0 }, person }, ...this.sources];
this.myRequestedItems = [{ id: 0 }, ...this.mySources];
},
async deleteIngredient(ingredient) {
const person = await data.currentUser();
deleteIngredient(ingredient) {
const person = this.person;
if (!person) return;
const isMatch = source => source.ingredient === ingredient && source.person?.id === person.id;
this.sources = this.sources.filter(source => !isMatch(source));
this.myRequestedItems = this.mySources.filter(source => source !== ingredient);
},
async updateIngredient(oldIngredient, newIngredient) {
const person = await data.currentUser();
updateIngredient(oldIngredient, newIngredient) {
const person = this.person;
if (!person) return;
this.sources = this.sources.map(source => source.ingredient === oldIngredient ? { ingredient: newIngredient, person } : source);
this.myRequestedItems = this.mySources.map(source => source === oldIngredient ? newIngredient : source);
}
}
}