Moved meal management out of component

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" @change="mealCheckChanged" />
+        <input type="checkbox" :id="meal.id" :checked="this.checked.includes(meal)" @change="mealCheckChanged" />
         <label :for="meal.id" :style="getImageStyling(meal)">
             {{ formatDate(meal.meal_date) }}
         </label>
@@ -74,8 +74,6 @@ label {
 
 <script>
 
-import data from '@/data.js'
-
 const nth = (d) => {
   if (d > 3 && d < 21) return 'th';
   switch (d % 10) {
@@ -116,18 +114,9 @@ const getUrl = (meal) => {
 
 export default {
     name: 'MealSelectionList',
-    data() {
+    props: {
-        const from = new Date();
+        meals: Array,
-        from.setTime(0);
+        checked: Array,
-        
-        const to = new Date();
-        to.setDate(to.getDate() + 7);
-
-        return { from, to, meals: [], }
-    },
-    async beforeMount() {
-        const meals = await data.getMeals(this.from, this.to)
-        this.meals = meals;
     },
     methods: {
         formatDate,
@@ -148,7 +137,7 @@ export default {
             } else {
                 this.$emit('meal-unselected', meal);
             }
-        }
+        },
     }
 }
 

src/components/shopping/ShoppingPage.vue

@@ -1,12 +1,12 @@
 <template>
     <div>
         <h1>Shopping List</h1>
-        <h4>Included Meals</h4>
-        <meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" />
         <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" />
@@ -63,47 +63,74 @@ import EditableIngredientsPanel from '@/components/ingredients/EditableIngredien
 import ShoppingListItem from './ShoppingListItem.vue'
 import MealSelectionList from './MealSelectionList.vue'
 
-import { mealToShoppingListSources, removeMealFromShoppingListSources, groupByProduct } from './shopping.js'
+import { mealToShoppingListSources, groupByProduct } from './shopping.js'
 
 export default {
     name: 'ShoppingPage',
     components: { ShoppingListItem, MealSelectionList, EditableIngredientsPanel },
     data() {
-        return { shoppingList: [], sources: [], mySources: [] }
+        const from = new Date();
+        from.setTime(0);
+        
+        const to = new Date();
+        to.setDate(to.getDate() + 7);
+
+        return { from, to, shoppingList: [], sources: [], mySources: [], includedMeals: [], meals: [], person: null }
     },
     watch: {
-        async sources() {
+        sources() {
             this.shoppingList = groupByProduct(this.sources);
-
+        },
-            const person = await data.currentUser();
+        includedMeals() {
-            this.mySources = this.sources.filter(source => source.person?.id === person?.id).map(source => source.ingredient);
+            this.updateSources();
+        },
+        mySources() {
+            this.updateSources();
         }
     },
+    async beforeMount() {
+        const person = await data.currentUser();
+        if (!person)
+            return this.$router.push({ name: 'login' });
+
+        this.person = person;
+
+        this.meals = await data.getMeals(this.from, this.to);
+        // this.includedMeals = this.meals;
+    },
     methods: {
+        updateSources() {
+            const person = this.person;
+            if (!person) return;
+
+            const mealSources = this.includedMeals.flatMap(mealToShoppingListSources);
+            const personSources = this.mySources.map(ingredient => ({ ingredient, person }));
+
+            this.sources = [...mealSources, ...personSources];
+        },
         mealSelected(meal) {
-            this.sources = this.sources.concat(mealToShoppingListSources(meal));
+            this.includedMeals = [...this.includedMeals, meal];
         },
         mealUnselected(meal) {
-            this.sources = removeMealFromShoppingListSources(this.sources, meal);
+            this.includedMeals = this.includedMeals.filter(m => m !== meal);
         },
-        async addIngredient() {
+        addIngredient() {
-            const person = await data.currentUser();
+            const person = this.person;
             if (!person) return;
 
-            this.sources = [{ ingredient: { id: 0 }, person }, ...this.sources];
+            this.myRequestedItems = [{ id: 0 }, ...this.mySources];
         },
-        async deleteIngredient(ingredient) {
+        deleteIngredient(ingredient) {
-            const person = await data.currentUser();
+            const person = this.person;
             if (!person) return;
 
-            const isMatch = source => source.ingredient === ingredient && source.person?.id === person.id;
+            this.myRequestedItems = this.mySources.filter(source => source !== ingredient);
-            this.sources = this.sources.filter(source => !isMatch(source));
         },
-        async updateIngredient(oldIngredient, newIngredient) {
+        updateIngredient(oldIngredient, newIngredient) {
-            const person = await data.currentUser();
+            const person = this.person;
             if (!person) return;
 
-            this.sources = this.sources.map(source => source.ingredient === oldIngredient ? { ingredient: newIngredient, person } : source);
+            this.myRequestedItems = this.mySources.map(source => source === oldIngredient ? newIngredient : source);
         }
     }
 }