src/components/shopping/CurrentShoppingListPage.vue

@@ -43,7 +43,7 @@
     <!-- Display 'Stocked', 'Purchased' and 'Cancel' buttons in a vertical stack fixed to the bottom of the screen when any elements are selected -->
     <div class="footer-buttons" v-if="selected.length">
         <p v-if="selected.length === 1">
-            Mark '{{ selected[0].product.name }}' as
+            Mark '{{ selected[0].product?.name ?? selected[0].name }}' as
         </p>
         <p v-else>
             Mark {{ selected.length }} items as
@@ -150,7 +150,13 @@ async function saveShoppingList(outstandingItemGroups) {
         return;
     }
 
-    return await data.purchaseItems(items);
+    return await data.purchaseShoppingList(items);
+}
+
+const groupsMatch = (a, b) => {
+    if (a.product != b.product) return false;
+    if (a.name && a.name === b.name) return true;
+    return a.product.id === b.product.id;
 }
 
 export default {
@@ -169,7 +175,7 @@ export default {
         const to = new Date();
         to.setDate(to.getDate() + 7);
 
-        return { from, to, shoppingList: null, includedMeals: [], selected: [], showPurchased: false }
+        return { from, to, shoppingList: null, selected: [], showPurchased: false }
     },
     async beforeMount() {
         this.loadData();
@@ -193,6 +199,9 @@ export default {
             });
 
             return Object.values(meals).filter(m => !m.purchase_date).sort((a, b) => a.suggested_date - b.suggested_date);
+        },
+        includedMeals() {
+            return this.shoppingList?.requested_meals.map(m => m.meal) ?? [];
         }
     },
     methods: {
@@ -226,14 +235,14 @@ export default {
             this.$router.push(`/shopping/${shoppingList.id}`);
         },
         toggleSelect(item) {
-            const index = this.selected.findIndex(i => i === item);
+            const index = this.selected.findIndex(i => groupsMatch(i, item));
             if (index === -1)
                 this.selected.push(item);
             else
                 this.selected.splice(index, 1);
         },
         isSelected(item) {
-            return this.selected.some(i => i === item);
+            return this.selected.some(i => groupsMatch(i, item));
         }
     }
 }

src/data.js

@@ -267,14 +267,14 @@ export default {
         
         return lst;
     },
-    async purchaseItems(completed_requests) {
+    async purchaseShoppingList(completed_requests) {
         const response = await fetch(BASE_URL + "/shopping/", {
             method: "POST",
             credentials: "include",
             headers: {
                 "Content-Type": "application/json"
             },
-            body: JSON.stringify({ completed_requests }),
+            body: JSON.stringify({ items: completed_requests }),
         });
 
         const lst = await response.json();