My shopping list page

src/components/ingredients/EditableIngredientsPanel.vue

@@ -98,9 +98,7 @@ export default {
         },
         toggleEditing() {
             this.editing = !this.editing;
-            if (this.editing && !this.ingredients.length) {
-                this.$emit('on-add');
-            }
+            this.$emit('on-editing', this.editing);
         }
     }
 }

src/components/shopping/MyShoppingPage.vue

@@ -1,9 +1,7 @@
 <template>
     <div>
         <h1>My Shopping List</h1>
-        <editable-ingredients-panel @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" :ingredients="mySources" />
-        
-
+        <editable-ingredients-panel @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" @on-editing="onEditing" :ingredients="ingredients" />
     </div>
 
     <!--
@@ -40,33 +38,12 @@
 import data from '@/data.js'
 
 import EditableIngredientsPanel from '@/components/ingredients/EditableIngredientsPanel.vue'
-import ShoppingListItem from './ShoppingListItem.vue'
-import MealSelectionList from './MealSelectionList.vue'
-
-import { mealToShoppingListSources, groupByProduct } from './shopping.js'
 
 export default {
     name: 'MyShoppingpage',
-    components: { ShoppingListItem, MealSelectionList, EditableIngredientsPanel },
+    components: { EditableIngredientsPanel },
     data() {
-        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: {
-        sources() {
-            this.shoppingList = groupByProduct(this.sources);
-        },
-        includedMeals() {
-            this.updateSources();
-        },
-        mySources() {
-            this.updateSources();
-        }
+        return { ingredients: [], person: null }
     },
     async beforeMount() {
         const person = await data.currentUser();
@@ -74,43 +51,31 @@ export default {
             return this.$router.push({ name: 'login' });
 
         this.person = person;
-
-        this.meals = await data.getMeals(this.from, this.to);
-        // this.includedMeals = this.meals;
+        await this.updateShoppingList();
     },
     methods: {
-        updateSources() {
-            const person = this.person;
-            if (!person) return;
+        async updateShoppingList(save = false) {
+            const requests = save ?
+                await data.saveMyShoppingList(this.ingredients) :
+                await data.getMyShoppingList();
 
-            const mealSources = this.includedMeals.flatMap(mealToShoppingListSources);
-            const personSources = this.mySources.map(ingredient => ({ ingredient, person }));
-
-            this.sources = [...mealSources, ...personSources];
-        },
-        mealSelected(meal) {
-            this.includedMeals = [...this.includedMeals, meal];
-        },
-        mealUnselected(meal) {
-            this.includedMeals = this.includedMeals.filter(m => m !== meal);
+            this.ingredients = requests.map(r => r.ingredient);
         },
         addIngredient() {
-            const person = this.person;
-            if (!person) return;
-
-            this.myRequestedItems = [{ id: 0 }, ...this.mySources];
+            this.ingredients = [{ id: 0 }, ...this.ingredients];
         },
         deleteIngredient(ingredient) {
-            const person = this.person;
-            if (!person) return;
-
-            this.myRequestedItems = this.mySources.filter(source => source !== ingredient);
+            this.ingredients = this.ingredients.filter(i => i !== ingredient);
         },
         updateIngredient(oldIngredient, newIngredient) {
-            const person = this.person;
-            if (!person) return;
+            this.ingredients = this.ingredients.map(source => source === oldIngredient ? newIngredient : source);
+        },
+        async onEditing(isStartingEdit) {
+            await this.updateShoppingList(!isStartingEdit);
 
-            this.myRequestedItems = this.mySources.map(source => source === oldIngredient ? newIngredient : source);
+            if (isStartingEdit && this.ingredients.length === 0) {
+                this.addIngredient();
+            }
         }
     }
 }

src/data.js

@@ -136,4 +136,28 @@ export default {
         const response = await fetch(BASE_URL + "/persons?q=" + encodeURIComponent(name));
         return await response.json();
     },
+    async getMyShoppingList() {
+        const response = await fetch(BASE_URL + "/shopping/current/me", { credentials: "include" });
+        return await response.json();
+    },
+    async saveMyShoppingList(list) {
+        const response = await fetch(BASE_URL + "/shopping/current/me", {
+            method: "POST",
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(list),
+        });
+
+        return await response.json();
+    },
+    async getShoppingList(id) {
+        const response = await fetch(BASE_URL + `/shopping/${encodeURIComponent(id)}`);
+        return await response.json();
+    },
+    async getCurrentShoppingList() {
+        const response = await fetch(BASE_URL + "/shopping/current");
+        return await response.json();
+    }
 }