From 287bd47ffac8a5790bf160acd534c3364e20bb06 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Wed, 16 Oct 2024 18:49:17 +1100
Subject: [PATCH] Change meal purchasing to show all meals and allow filtering
 on purchased meals

---
 .../shopping/CurrentShoppingListPage.vue      | 21 ++++++++++++++-----
 src/components/shopping/MealSelectionList.vue |  6 +++++-
 .../shopping/PurchasedShoppingListPage.vue    |  2 +-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/shopping/CurrentShoppingListPage.vue b/src/components/shopping/CurrentShoppingListPage.vue
index c41f06f..7d9d55a 100644
--- a/src/components/shopping/CurrentShoppingListPage.vue
+++ b/src/components/shopping/CurrentShoppingListPage.vue
@@ -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)
diff --git a/src/components/shopping/MealSelectionList.vue b/src/components/shopping/MealSelectionList.vue
index 729c76e..a7649f8 100644
--- a/src/components/shopping/MealSelectionList.vue
+++ b/src/components/shopping/MealSelectionList.vue
@@ -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,
diff --git a/src/components/shopping/PurchasedShoppingListPage.vue b/src/components/shopping/PurchasedShoppingListPage.vue
index 125b2e0..789d9f0 100644
--- a/src/components/shopping/PurchasedShoppingListPage.vue
+++ b/src/components/shopping/PurchasedShoppingListPage.vue
@@ -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">