Moved shopping list to own page

src/components/shopping/FullShoppingPage.vue

@@ -0,0 +1,64 @@
+<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/MyShoppingPage.vue

@@ -1,17 +1,9 @@
 <template>
     <div>
-        <h1>Shopping List</h1>
+        <h1>My Shopping List</h1>
-        <h4>My Requests</h4>
         <editable-ingredients-panel @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" :ingredients="mySources" />
         
-        <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>
     </div>
 
     <!--
@@ -42,18 +34,6 @@
 
 <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>
@@ -66,7 +46,7 @@ import MealSelectionList from './MealSelectionList.vue'
 import { mealToShoppingListSources, groupByProduct } from './shopping.js'
 
 export default {
-    name: 'ShoppingPage',
+    name: 'MyShoppingpage',
     components: { ShoppingListItem, MealSelectionList, EditableIngredientsPanel },
     data() {
         const from = new Date();

src/main.js

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