Shopping connected to data

src/components/shopping/FullShoppingListPage.vue

@@ -0,0 +1,82 @@
+<template>
+    <h3>Full shopping list</h3>
+    <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 listByProduct" :key="item.id">
+            <shopping-list-item :product="item.product" :sources="item.sources" />
+        </li>
+    </ul>
+</template>
+
+<style scoped>
+
+.full-shopping-list li {
+    list-style-type: none;
+
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
+    margin-bottom: 1em;
+}
+
+.full-shopping-list {
+    padding: 0;
+}
+
+</style>
+
+<script>
+
+import data from '@/data.js'
+import { requestsToSources, groupByProduct } from './shopping.js'
+
+import MealSelectionList from './MealSelectionList.vue'
+import ShoppingListItem from './ShoppingListItem.vue'
+
+export default {
+    name: 'FullShoppingListPage',
+    components: { MealSelectionList, ShoppingListItem },
+    props: {
+        id: [String, Number]
+    },
+    data() {
+        const from = new Date();
+        from.setTime(0);
+        
+        const to = new Date();
+        to.setDate(to.getDate() + 7);
+
+        return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], listByProduct: []}
+    },
+    async beforeMount() {
+        this.availableMeals = await data.getMeals(this.from, this.to);
+        this.shoppingList = await data.getCurrentShoppingList();
+    },
+    watch: {
+        shoppingList: {
+            handler: 'updateLists',
+            deep: true
+        }
+    },
+    methods: {
+        async updateLists() {
+            if (!this.shoppingList)
+                return;
+
+            this.includedMeals = this.shoppingList.requests.map(r => r.meal).filter(m => m);
+            const sources = requestsToSources(this.shoppingList.requests);
+            this.listByProduct = groupByProduct(sources);
+        },
+        async mealSelected(meal) {
+            const request = await data.requestMeal(meal.id);
+            this.shoppingList.requests.push(request);
+        },
+        async mealUnselected(meal) {
+            await data.unrequestMeal(meal.id);
+            this.shoppingList.requests = this.shoppingList.requests.filter(r => r.meal?.id !== meal.id);
+        }
+    }
+}
+
+</script>

src/components/shopping/FullShoppingPage.vue

@@ -1,64 +0,0 @@
-<template>
-    <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" />
-        </li>
-    </ul>
-</template>
-
-<style scoped>
-
-.full-shopping-list li {
-    list-style-type: none;
-
-    border: 1px solid #ccc;
-    border-radius: 0.5em;
-    margin-bottom: 1em;
-}
-
-.full-shopping-list {
-    padding: 0;
-}
-
-</style>
-
-<script>
-
-export default {
-    name: 'FullShoppingPage',
-    data() {
-        const from = new Date();
-        from.setTime(0);
-        
-        const to = new Date();
-        to.setDate(to.getDate() + 7);
-
-        return { from, to, shoppingList: [], requests: [], sources: [], includedMeals: [], meals: [], }
-    },
-    async beforeMount() {
-        this.meals = await data.getMeals(this.from, this.to);
-        this.includedMeals = this.meals;
-    },
-    watch: {
-        includedMeals() {
-            this.updateSources();
-        }
-    },
-    methods: {
-        updateSources() {
-            const mealSources = this.includedMeals.flatMap(mealToShoppingListSources);
-            this.sources = mealSources;
-        },
-        mealSelected(meal) {
-            this.includedMeals = [...this.includedMeals, meal];
-        },
-        mealUnselected(meal) {
-            this.includedMeals = this.includedMeals.filter(m => m !== meal);
-        }
-    }
-}
-
-</script>

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="this.checked.includes(meal)" @change="mealCheckChanged" />
+        <input type="checkbox" :id="meal.id" :checked="isChecked(meal)" @change="mealCheckChanged" />
         <label :for="meal.id" :style="getImageStyling(meal)">
             {{ formatDate(meal.meal_date) }}
         </label>
@@ -138,6 +138,14 @@ export default {
                 this.$emit('meal-unselected', meal);
             }
         },
+        isChecked(meal) {
+            for (const checkedMeal of this.checked) {
+                if (checkedMeal.id === meal.id) {
+                    return true;
+                }
+            }
+            return false;
+        }
     }
 }
 

src/components/shopping/MyShoppingPage.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
         <h1>My Shopping List</h1>
+        <router-link :to="`/shopping/current`">Full Shopping List</router-link>
         <editable-ingredients-panel @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" @on-editing="onEditing" :ingredients="ingredients" />
     </div>
 

src/components/shopping/shopping.js

@@ -13,6 +13,20 @@ export function mealToShoppingListSources(meal) {
     return sources;
 }
 
+export function requestsToSources(requests) {
+    const sources = [];
+    for (const request of requests) {
+        if (request.ingredient) {
+            sources.push(request);
+        }
+        else if (request.meal) {
+            sources.push(...mealToShoppingListSources(request.meal));
+        }
+    }
+
+    return sources;
+}
+
 export function removeMealFromShoppingListSources(sources, meal) {
     return sources.filter(source => source.meal?.id !== meal.id);
 }

src/data.js

@@ -1,13 +1,17 @@
 const BASE_URL = window.location.href.replace(/^(http:\/\/[^/:]+).*/, "$1:8000")    
 
+function fixMealDates(meals) {
+    for (const meal of meals) {
+        meal.meal_date = new Date(meal.meal_date);
+    }
+}
+
 let user = null;
 export default {
     async getMeals(from, to) {
         const response = await fetch(BASE_URL + "/meals?from=" + from.toISOString() + "&to=" + to.toISOString());
         const meals = await response.json();
-        for (const meal of meals) {
-            meal.meal_date = new Date(meal.meal_date);
-        }
+        fixMealDates(meals);
 
         return meals.sort((a, b) => a.meal_date - b.meal_date);
     },
@@ -137,11 +141,11 @@ export default {
         return await response.json();
     },
     async getMyShoppingList() {
-        const response = await fetch(BASE_URL + "/shopping/current/me", { credentials: "include" });
+        const response = await fetch(BASE_URL + "/shopping/current/me/ingredients", { credentials: "include" });
         return await response.json();
     },
     async saveMyShoppingList(list) {
-        const response = await fetch(BASE_URL + "/shopping/current/me", {
+        const response = await fetch(BASE_URL + "/shopping/current/me/ingredients", {
             method: "POST",
             credentials: "include",
             headers: {
@@ -158,6 +162,30 @@ export default {
     },
     async getCurrentShoppingList() {
         const response = await fetch(BASE_URL + "/shopping/current");
+        const lst = await response.json();
+        fixMealDates(lst.requests.map(request => request.meal).filter(meal => meal));
+        return lst;
+    },
+    async requestMeal(meal_id) {
+        const response = await fetch(BASE_URL + `/shopping/current/meals/me`, {
+            method: "POST",
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ meal_id }),
+        });
+
+        const result = await response.json();
+        fixMealDates([result.meal]);
+        return result;
+    },
+    async unrequestMeal(meal_id) {
+        const response = await fetch(BASE_URL + `/shopping/current/meals/${encodeURIComponent(meal_id)}`, {
+            method: "DELETE",
+            credentials: "include",
+        });
+
         return await response.json();
     }
 }

src/main.js

@@ -7,6 +7,7 @@ import LoginPage from './components/LoginPage.vue'
 import RecipesPage from './components/recipes/RecipesPage.vue'
 import MealPlanPage from './components/meals/MealPlanPage.vue'
 import MyShoppingPage from './components/shopping/MyShoppingPage.vue'
+import FullShoppingListPage from './components/shopping/FullShoppingListPage.vue'
 import EditMealPage from './components/meals/EditMealPage.vue'
 import EditRecipePage from './components/recipes/EditRecipePage.vue'
 
@@ -18,6 +19,7 @@ const routes = [
     { path: '/mealplan', component: MealPlanPage },
     { path: '/login', component: LoginPage },
     { path: '/shopping', component: MyShoppingPage },
+    { path: '/shopping/:id', component: FullShoppingListPage, props : true },
     { path: '/recipes', component: RecipesPage },
     { path: '/recipes/add', component: EditRecipePage },
     { path: '/recipes/:id', component: EditRecipePage, props: true },