Zero is a valid id

src/components/LoginPage.vue

@@ -33,7 +33,7 @@ export default {
     methods: {
         async login() {
             const person = await data.login(this.username);
-            if (person?.id) {
+            if (person?.id >= 0) {
                 this.$router.push(this.redirect);
                 return;
             }

src/components/meals/EditMealPage.vue

@@ -55,7 +55,7 @@ export default {
     data() {
         return {
             meal: {
-                id: 0,
+                id: -1,
                 meal_date: new Date(),
                 recipes: [],
                 extra_ingredients: [],
@@ -66,7 +66,7 @@ export default {
         };
     },
     async beforeMount() {
-        if (this.id) {
+        if (this.id >= 0) {
             this.meal = await data.getMeal(this.id);
         }
     },
@@ -109,7 +109,7 @@ export default {
         },
         async saveMeal() {
             const meal = await data.saveMeal(this.meal);
-            if (meal?.id) {
+            if (meal?.id >= 0) {
                 this.$router.push(`/meals/${meal.id}`);
                 return;
             }

src/components/meals/PersonList.vue

@@ -148,12 +148,12 @@ export default {
             this.searchResults = results.filter(p => !idSet.has(p.id));
         },
         addPerson(person) {
-            if (!person?.id && this.searchResults.length > 0)
+            if (!person?.id >= 0 && this.searchResults.length > 0)
             {
                 person = this.searchResults[0];
             }
 
-            if (person?.id && !this.people.find(p => p.id === person.id))
+            if (person?.id >= 0 && !this.people.find(p => p.id === person.id))
             {
                 this.$emit('add-person', person);
             }

src/components/recipes/EditRecipePage.vue

@@ -99,7 +99,7 @@ export default {
             this.refreshRecipe();
         },
         async refreshRecipe() {
-            if (this.id) {
+            if (this.id >= 0) {
                 this.recipe = await data.getRecipe(this.id);
                 this.link = this.recipe.link;
                 return;
@@ -120,7 +120,7 @@ export default {
         },
         async saveRecipe() {
             const recipe = await data.saveRecipe(this.recipe);
-            if (recipe?.id) {
+            if (recipe?.id >= 0) {
                 this.$router.push(`/recipes/${recipe.id}`);
                 return;
             }
@@ -129,8 +129,9 @@ export default {
         },
         async createFromScratch() {
             this.recipe = {
-                id: 0,
+                id: -1,
                 name: 'My new recipe',
+                created_by_id: -1,
                 link: '',
                 ingredients: [],
                 image_urls: []

src/components/shopping/CurrentShoppingListPage.vue

@@ -16,6 +16,8 @@
             </span>
         </li>
     </ul>
+
+    <button @click="markPurchased">Purchased, archive this list!</button>
 </template>
 
 <style scoped>
@@ -45,9 +47,6 @@ import ShoppingListItem from './ShoppingListItem.vue'
 export default {
     name: 'FullShoppingListPage',
     components: { MealSelectionList, ShoppingListItem },
-    props: {
-        id: [String, Number]
-    },
     data() {
         const from = new Date();
         from.setTime(0);
@@ -58,7 +57,8 @@ export default {
         return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], listByProduct: [], stockTaking: false, productsToShow: []}
     },
     async beforeMount() {
-        this.availableMeals = await data.getMeals(this.from, this.to);
+        const allMeals = await data.getMeals(this.from, this.to);
+        this.availableMeals = allMeals.filter(m => !m.purchase_date);
         this.shoppingList = await data.getCurrentShoppingList();
     },
     watch: {
@@ -95,6 +95,10 @@ export default {
         async markNotFound(item) {
             const deletedRequests = await data.markNotFound(item.product.id);
             this.shoppingList.results = this.shoppingList.results.filter(r => !deletedRequests.some(deleted => deleted.id === r.id));
+        },
+        async markPurchased() {
+            const result = await data.markCurrentShoppingListPurchased();
+            this.$router.push({ name: 'PurchasedShoppingListPage', params: { id: result.id } });
         }
     }
 }

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="isChecked(meal)" @change="mealCheckChanged" />
+        <input type="checkbox" :id="meal.id" :checked="isChecked(meal)" @change="mealCheckChanged" :disabled="!!meal.purchase_date" />
         <label :for="meal.id" :style="getImageStyling(meal)">
             {{ formatDate(meal.meal_date) }}
         </label>
@@ -45,15 +45,20 @@ label {
     margin: 0;
     font-weight: normal;
     cursor: pointer;
-    color: #777;
+    color: #3d5447;
 }
 
 input[type="checkbox"]:checked + label {
     border: 3px solid #3d5447;
-    color: #3d5447;
     text-shadow: #ccc 0 0 0.1em;
 }
 
+input[type="checkbox"]:disabled + label {
+    background-color: rgba(255, 255, 255, 0.5);
+    color: #ccc;
+    cursor: not-allowed;
+}
+
 /* Show the image as the background image of the card */
 .meal-image {
     width: 100%;

src/components/shopping/MyShoppingPage.vue

@@ -63,7 +63,7 @@ export default {
             this.ingredients = requests.map(r => r.ingredient);
         },
         addIngredient() {
-            this.ingredients = [{ id: 0 }, ...this.ingredients];
+            this.ingredients = [{ id: -1 }, ...this.ingredients];
         },
         deleteIngredient(ingredient) {
             this.ingredients = this.ingredients.filter(i => i !== ingredient);

src/components/shopping/PurchasedShoppingListPage.vue

@@ -0,0 +1,59 @@
+<template>
+    <h3>Purchased {{ shoppingList?.purchased_date?.toLocaleDateString({ year: 'numeric', month: '2-digit', day: '2-digit' }) || 'Loading...' }}</h3>
+    
+    <h4>Included Meals</h4>
+    <meal-selection-list :checked="includedMeals" :meals="includedMeals" />
+
+    <ul class="full-shopping-list">
+        <li v-for="item in productsToShow" :key="item.id">
+            <shopping-list-item :product="item.product" :sources="item.sources" :totals="item.totals" :fully-found="item.fullyFound" :found-date="item.foundDate" />
+        </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 { toProductsModel } 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() {
+        return { 
+            shoppingList: null, 
+            includedMeals: [], 
+            listByProduct: [], 
+        }
+    },
+    async beforeMount() {
+        this.shoppingList = await data.getShoppingList(this.id);
+        this.includedMeals = this.shoppingList.requests.map(r => r.meal).filter(m => m);
+        this.listByProduct = toProductsModel(this.shoppingList);
+        this.productsToShow = this.stockTaking ? this.listByProduct : this.listByProduct.filter(p => !p.fullyFound);
+    },
+}
+
+</script>

src/components/shopping/shopping.js

@@ -46,7 +46,7 @@ export function groupingToIngredients(grouping) {
     const product = grouping.product;
     const totals = [];
     for (const total of grouping.totals) {
-        totals.push({ id: 0, line: `${total.quantity} ${total.unit} of ${product.name}`, preparation: '', name: product.name, product, ...total });
+        totals.push({ id: -1, line: `${total.quantity} ${total.unit} of ${product.name}`, preparation: '', name: product.name, product, ...total });
     }
     return totals;
 }

src/data.js

@@ -1,46 +1,89 @@
 const BASE_URL = window.location.href.replace(/^(http:\/\/[^/:]+).*/, "$1:8000")    
 
-function fixDates(obj, ...fields) {
+const datesToFix = {
-    for (const field of fields) {
+    Meal: { fields: [ "meal_date" ] },
+    ShoppingList: { fields: [ "created_date", "purchased_date" ], dependants: l => ({ ShoppingListResult: l.results, ShoppingListRequest: l.requests }) },
+    ShoppingListResult: { fields: [ "found_date", "created_date" ], },
+    ShoppingListRequest: { fields: [ "created_date" ], dependants: r => ({ Meal: r.meal }) },
+    Recipe: { fields: [ "date_created", "date_hidden" ], },
+};
+
+const fixDates = (obj, type) => {
+    if (!obj) return;
+    
+    if (Array.isArray(obj)) {
+        for (const item of obj) {
+            fixDates(item, type);
+        }
+    }
+
+    const toFix = datesToFix[type];
+    if (!toFix) return;
+
+    for (const field of toFix.fields) {
         if (obj[field]) {
             obj[field] = new Date(obj[field]);
         }
     }
+
+    if (toFix.dependants) {
+        for (const [key, value] of Object.entries(toFix.dependants(obj))) {
+            if (Array.isArray(value)) {
+                for (const item of value) {
+                    fixDates(item, key);
+                }
+            }
+            else {
+                fixDates(value, key);
+            }
+        }
+    }
 }
 
-const fixMealDates = meals => meals.forEach(meal => fixDates(meal, "meal_date"));
-const fixResultDates = results => results.forEach(result => fixDates(result, "found_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();
-        fixMealDates(meals);
+        fixDates(meals, "Meal");
 
         return meals.sort((a, b) => a.meal_date - b.meal_date);
     },
     async getMeal(id) {
         var response = await fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`);
-        return await response.json();
+        const meal = await response.json();
+        fixDates(meal, "Meal");
+
+        return meal;
     },
     async deleteMeal(id) {
         var response = await fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`, {
             method: "DELETE",
         });
+
         return await response.json();
     },
     async searchRecipes(query) {
         const response = await fetch(BASE_URL + "/recipes?q=" + encodeURIComponent(query));
-        return await response.json();
+        const recipes = await response.json();
+        fixDates(recipes, "Recipe");
+
+        return recipes;
     },
     async parseRecipe(url) {
         const response = await fetch(BASE_URL + `/recipes/parse?url=${encodeURIComponent(url)}`, { credentials: "include" });
-        return await response.json();
+        const recipe = await response.json();
+        fixDates(recipe, "Recipe");
+
+        return recipe;        
     },
     async getRecipe(id) {
         const response = await fetch(BASE_URL + `/recipes/${encodeURIComponent(id)}`);
-        return await response.json();
+        const recipe = await response.json();
+        fixDates(recipe, "Recipe");
+
+        return recipe;
     },
     async parseProduct(ingredient, url) {
         const body = {
@@ -73,11 +116,15 @@ export default {
             body: JSON.stringify(recipe),
         });
 
-        return await response.json();
+        const saved = await response.json();
+        fixDates(saved, "Recipe");
+
+        return saved;
     },
     async saveMeal(meal) {
-        if (meal.id) {
+        let response = null;
-            const response = await fetch(BASE_URL + `/meals/${encodeURIComponent(meal.id)}`, {
+        if (meal.id >= 0) {
+            response = await fetch(BASE_URL + `/meals/${encodeURIComponent(meal.id)}`, {
                 method: "PUT",
                 credentials: "include",
                 headers: {
@@ -85,19 +132,21 @@ export default {
                 },
                 body: JSON.stringify(meal),
             });
-            return await response.json();
+        } else {
+            response = await fetch(BASE_URL + "/meals", {
+                method: "POST",
+                credentials: "include",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(meal),
+            });
         }
         
-        const response = await fetch(BASE_URL + "/meals", {
+        const saved = await response.json();
-            method: "POST",
+        fixDates(saved, "Meal");
-            credentials: "include",
+
-            headers: {
+        return saved;
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify(meal),
-        });
-        
-        return await response.json();
     },
     async currentUser() {
         if (user) {
@@ -139,7 +188,10 @@ export default {
             method: "DELETE",
             credentials: "include",
         });
-        return await response.json();
+
+        const recipe = await response.json();
+        fixDates(recipe, "Recipe");
+        return recipe;
     },
     async searchPerson(name) {
         const response = await fetch(BASE_URL + "/persons?q=" + encodeURIComponent(name));
@@ -147,7 +199,10 @@ export default {
     },
     async getMyShoppingList() {
         const response = await fetch(BASE_URL + "/shopping/current/me/ingredients", { credentials: "include" });
-        return await response.json();
+        const requests = await response.json();
+        fixDates(requests, "ShoppingListRequest");
+
+        return requests;
     },
     async saveMyShoppingList(list) {
         const response = await fetch(BASE_URL + "/shopping/current/me/ingredients", {
@@ -159,18 +214,22 @@ export default {
             body: JSON.stringify(list),
         });
 
-        return await response.json();
+        const requests = await response.json();
+        fixDates(requests, "ShoppingListRequest");
+
+        return requests;
     },
     async getShoppingList(id) {
         const response = await fetch(BASE_URL + `/shopping/${encodeURIComponent(id)}`);
-        return await response.json();
+        
+        const lst = await response.json();
+        fixDates(lst, "ShoppingList");
+        return lst;
     },
     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));
+        fixDates(lst, "ShoppingList");
-        fixResultDates(lst.results);
-        fixDates(lst, "created_date");
 
         return lst;
     },
@@ -184,9 +243,10 @@ export default {
             body: JSON.stringify({ meal_id }),
         });
 
-        const result = await response.json();
+        const requests = await response.json();
-        fixMealDates([result.meal]);
+        fixDates(requests, "ShoppingListRequest");
-        return result;
+
+        return requests;
     },
     async unrequestMeal(meal_id) {
         const response = await fetch(BASE_URL + `/shopping/current/meals/${encodeURIComponent(meal_id)}`, {
@@ -194,7 +254,8 @@ export default {
             credentials: "include",
         });
 
-        return await response.json();
+        const requests = await response.json();
+        fixDates(requests, "ShoppingListRequest");
     },
     async markFound(ingredients) {
         const response = await fetch(BASE_URL + "/shopping/current/found", {
@@ -207,8 +268,9 @@ export default {
         });
 
         const results = await response.json();
-        fixResultDates(results.created);
+        fixDates(results.created, "ShoppingListResult");
-        fixResultDates(results.removed);
+        fixDates(results.removed, "ShoppingListResult");
+
         return results;
     },
     async markNotFound(product_id) {
@@ -217,8 +279,20 @@ export default {
             credentials: "include",
         });
 
-        const results = await response.json();
+        const removedResults = await response.json();
-        fixResultDates(results);
+        fixDates(removedResults, "ShoppingListResult");
-        return results;
+
+        return removedResults;
+    },
+    async markCurrentShoppingListPurchased() {
+        const response = await fetch(BASE_URL + "/shopping/current/purchased", {
+            method: "POST",
+            credentials: "include",
+        });
+
+        const lst = await response.json();
+        fixDates(lst, "ShoppingList");
+
+        return lst;
     }
 }

src/main.js

@@ -7,7 +7,8 @@ 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 PurchasedShoppingListPage from './components/shopping/PurchasedShoppingListPage.vue'
+import CurrentShoppingListPage from './components/shopping/CurrentShoppingListPage.vue'
 import EditMealPage from './components/meals/EditMealPage.vue'
 import EditRecipePage from './components/recipes/EditRecipePage.vue'
 
@@ -19,7 +20,8 @@ const routes = [
     { path: '/mealplan', component: MealPlanPage },
     { path: '/login', component: LoginPage },
     { path: '/shopping', component: MyShoppingPage },
-    { path: '/shopping/:id', component: FullShoppingListPage, props : true },
+    { path: '/shopping/current', component: CurrentShoppingListPage },
+    { path: '/shopping/:id', component: PurchasedShoppingListPage, props : true },
     { path: '/recipes', component: RecipesPage },
     { path: '/recipes/add', component: EditRecipePage },
     { path: '/recipes/:id', component: EditRecipePage, props: true },