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

src/components/shopping/CurrentShoppingListPage.vue

@@ -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)

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,

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">