Mark meal as complete

src/components/meals/EditMealPage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="fields">
-            <date-picker @date-selected="selectDate" :date="meal.meal_date" />
+            <date-picker @date-selected="selectDate" :date="meal.suggested_date" />
             <div class="persons-list">
                 Cooked by <person-list :people="meal.chefs" @remove-person="(p) => removePerson('chefs', p)" @add-person="(p) => addPerson('chefs', p)" /> 
                 for <person-list :people="meal.consumers" @remove-person="(p) => removePerson('consumers', p)" @add-person="(p) => addPerson('consumers', p)" />,
@@ -56,7 +56,7 @@ export default {
         return {
             meal: {
                 id: -1,
-                meal_date: new Date(),
+                suggested_date: new Date(),
                 recipes: [],
                 extra_ingredients: [],
                 chefs: [],
@@ -87,7 +87,7 @@ export default {
             this.meal.recipes.push(recipe);
         },
         selectDate(date) {
-            this.meal.meal_date = date;
+            this.meal.suggested_date = date;
         },
         removeRecipe(recipe) {
             this.meal.recipes = this.meal.recipes.filter(r => r.id !== recipe.id);

src/components/meals/MealCard.vue

@@ -54,10 +54,10 @@ export default {
     props: ['meal'],
     computed: {
         date() {
-            return this.meal.meal_date.toLocaleDateString('en-au', { month: 'numeric', day: 'numeric' })
+            return this.meal.suggested_date.toLocaleDateString('en-au', { month: 'numeric', day: 'numeric' })
         },
         dayOfWeek() {
-            return this.meal.meal_date.toLocaleDateString('en-au', { weekday: 'long' })
+            return this.meal.suggested_date.toLocaleDateString('en-au', { weekday: 'long' })
         },
     },
     methods: {

src/components/meals/MealPlanPage.vue

@@ -9,6 +9,7 @@
                 
                 <ul class="actions" v-if="selectedMeal == meal">
                     <li><router-link class="nav-link" :to="`/meals/${selectedMeal.id}`" active-class="active">Edit Meal</router-link></li>
+                    <li><a @click="markConsumed">Mark Consumed</a></li>
                     <li><a @click="deleteSelectedMeal" class="button">Remove</a></li>
                 </ul>
             </li>
@@ -98,7 +99,7 @@ export default {
         }
     },
     async beforeMount() {
-        const meals = await data.getMeals(this.from, this.to)
+        const meals = await data.getUpcomingMeals(this.from, this.to)
         this.meals = meals;
     },
     methods: {
@@ -106,6 +107,10 @@ export default {
             await data.deleteMeal(this.selectedMeal.id);
             this.meals = this.meals.filter(m => m.id !== this.selectedMeal.id);
             this.selectedMeal = null;
+        },
+        async markConsumed() {
+            await data.markMealConsumed(this.selectedMeal.id);
+            this.meals = this.meals.filter(m => m.id !== this.selectedMeal.id);
         }
     }
 }

src/components/meals/PersonList.vue

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

src/components/shopping/CurrentShoppingListPage.vue

@@ -57,7 +57,7 @@ export default {
         return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], listByProduct: [], stockTaking: false, productsToShow: []}
     },
     async beforeMount() {
-        const allMeals = await data.getMeals(this.from, this.to);
+        const allMeals = await data.getUpcomingMeals(this.from, this.to);
         this.availableMeals = allMeals.filter(m => !m.purchase_date);
         this.shoppingList = await data.getCurrentShoppingList();
     },

src/components/shopping/MealSelectionList.vue

@@ -6,7 +6,7 @@
         <!-- Emit meal-selected event on checked and meal-unselected on unchecked -->
         <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) }}
+            {{ formatDate(meal.suggested_date) }}
         </label>
     </li>
 </ul>

src/components/shopping/ShoppingListItem.vue

@@ -24,10 +24,10 @@
                 <span v-else-if="source.recipe">
                     {{ formatQuantity(source.ingredient.quantity) }}&nbsp;{{ source.ingredient.unit }} 
                     in <router-link :to="`/recipes/${ source.recipe.id }/`">{{ source.recipe.name }}</router-link>
-                    for <router-link :to="`/meals/${ source.meal.id }/`">{{ source.meal.meal_date.toLocaleDateString("en-AU", { weekday: 'long', month: 'long', day: 'numeric' }) }}</router-link>
+                    for <router-link :to="`/meals/${ source.meal.id }/`">{{ source.meal.suggested_date.toLocaleDateString("en-AU", { weekday: 'long', month: 'long', day: 'numeric' }) }}</router-link>
                 </span>
                 <span v-else-if="source.meal">
-                    {{ source.ingredient.line }} for <router-link :to="`/meals/${ source.meal.id }/`">{{ source.meal.meal_date.toLocaleDateString("en-AU", { weekday: 'long', month: 'long', day: 'numeric' }) }}</router-link>
+                    {{ source.ingredient.line }} for <router-link :to="`/meals/${ source.meal.id }/`">{{ source.meal.suggested_date.toLocaleDateString("en-AU", { weekday: 'long', month: 'long', day: 'numeric' }) }}</router-link>
                 </span>
             </span>
         </p>

src/data.js

@@ -1,7 +1,7 @@
 const BASE_URL = window.location.href.replace(/^(http:\/\/[^/:]+).*/, "$1:8000")    
 
 const datesToFix = {
-    Meal: { fields: [ "meal_date", "purchase_date" ] },
+    Meal: { fields: [ "suggested_date", "purchase_date", "consumed_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 }) },
@@ -43,12 +43,23 @@ const fixDates = (obj, type) => {
 
 let user = null;
 export default {
-    async getMeals(from, to) {
+    async markMealConsumed(meal_id) {
-        const response = await fetch(BASE_URL + "/meals?from=" + from.toISOString() + "&to=" + to.toISOString());
+        const response = await fetch(BASE_URL + `/meals/${encodeURIComponent(meal_id)}/consumed`, {
+            method: "POST",
+            credentials: "include",
+        });
+
+        const meal = await response.json();
+        fixDates(meal, "Meal");
+
+        return meal;
+    },
+    async getUpcomingMeals(from, to) {
+        const response = await fetch(BASE_URL + "/meals/upcoming?from=" + from.toISOString() + "&to=" + to.toISOString());
         const meals = await response.json();
         fixDates(meals, "Meal");
 
-        return meals.sort((a, b) => a.meal_date - b.meal_date);
+        return meals.sort((a, b) => a.suggested_date - b.suggested_date);
     },
     async getMeal(id) {
         var response = await fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`);