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

Change meal purchasing to show all meals and allow filtering on purchased meals

Browse source
This commit is contained in:
jableader 2024-10-16 18:49:17 +11:00
parent 0470e381d2
commit 287bd47ffa
3 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@
<h4>Included Meals</h4>
<meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" :checked="includedMeals" :meals="availableMeals" />
<ul class="full-shopping-list">
<li v-for="item in productGroupsToPurchase" :key="item.id" class="selectable" :class="{ 'selected': isSelected(item) }" @click="toggleSelect(item)">
<shopping-list-item :productGrouping="item" />
@ -22,8 +22,11 @@
<button v-else @click="showPurchased=true">⏷ Show Purchased ⏷</button>
<div v-if="showPurchased">
<h4>Purchased Meals</h4>
<meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" :checked="includedMeals" :meals="purchasedMeals" />
<h4>
Already Purchased
Purchased Items
</h4>
<ul class="full-shopping-list">
<li v-for="item in purchasedGroups" :key="item.id">
@ -170,7 +173,7 @@ export default {
const to = new Date();
to.setDate(to.getDate() + 7);
return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], productGroupsToPurchase: [], purchasedGroups: [], selected: [], showPurchased: false }
return { from, to, availableMeals: [], purchasedMeals: [], shoppingList: null, includedMeals: [], productGroupsToPurchase: [], purchasedGroups: [], selected: [], showPurchased: false }
},
async beforeMount() {
this.loadData();
@ -183,9 +186,17 @@ export default {
},
methods: {
async loadData() {
const allMeals = await data.getUpcomingMeals(this.from, this.to);
this.availableMeals = allMeals.filter(m => !m.purchase_date);
this.shoppingList = await data.getCurrentShoppingList();
const upcomingMeals = await data.getUpcomingMeals(this.from, this.to);
const requestedMeals = this.shoppingList.requests.map(r => r.meal).filter(m => m);
const meals = {};
requestedMeals.forEach(m => meals[m.id] = m);
upcomingMeals.forEach(m => meals[m.id] = m);
this.purchasedMeals = Object.values(meals).filter(m => m.purchase_date);
this.availableMeals = Object.values(meals).filter(m => !m.purchase_date);
},
async updateLists() {
if (!this.shoppingList)

6
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" :checked="isChecked(meal)" @change="mealCheckChanged" :disabled="!!meal.purchase_date" />
<input type="checkbox" :id="meal.id" :checked="isChecked(meal)" @change="mealCheckChanged" :disabled="disabled" />
<label :for="meal.id" :style="getImageStyling(meal)">
{{ formatDate(meal.suggested_date) }}
</label>
@ -121,6 +121,10 @@ export default {
props: {
meals: Array,
checked: Array,
disabled: {
type: Boolean,
default: false
}
},
methods: {
formatDate,

2
src/components/shopping/PurchasedShoppingListPage.vue
View file

@ -2,7 +2,7 @@
<h3>Purchased {{ shoppingList ? ago(shoppingList.created_date) : '' }}</h3>
<h4>Included Meals</h4>
<meal-selection-list :checked="includedMeals" :meals="includedMeals" />
<meal-selection-list :checked="includedMeals" :meals="includedMeals" :disabled="true" />
<ul class="full-shopping-list">
<li v-for="item in listByProduct" :key="item.id">