Add stocktake to query params

src/components/ingredients/EditableIngredientsPanel.vue

@@ -74,6 +74,7 @@ li > div {
 </style>
 
 <script>
+
 import data from '@/data.js'
 import IngredientLine from './IngredientLine.vue'
 import CompactParsedIngredient from './CompactParsedIngredient.vue'

src/components/meals/EditMealPage.vue

@@ -29,7 +29,7 @@
         </div>
         <div class="ingredients">
             <h2>Sides & Additional Ingredients</h2>
-            <editable-ingredients-panel :ingredients="meal.extra_ingredients" @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" />
+            <editable-ingredients-panel :ingredients="meal.extra_ingredients" @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" @on-editing="onEditAdditionalIngredients" />
         </div>
         <button @click="saveMeal" v-if="!meal.purchase_date">Save</button>
     </div>
@@ -69,6 +69,10 @@ export default {
         if (this.id >= 0) {
             this.meal = await data.getMeal(this.id);
         }
+        else {
+            const self = await data.currentUser();
+            this.meal = {...this.meal, chefs: [self], consumers: [self], cleanup: [self], };
+        }
     },
     methods: {
         async selectRecipe(recipe) {
@@ -115,6 +119,14 @@ export default {
             }
 
             alert('Failed to save meal');
+        },
+        onEditAdditionalIngredients(editing) {
+            if (editing && this.meal.extra_ingredients.length === 0) {
+                this.addIngredient();
+            }
+            else {
+                this.meal.extra_ingredients = this.meal.extra_ingredients.filter(i => i.line);
+            }
         }
     }
 }

src/components/meals/MealPlanPage.vue

@@ -14,9 +14,9 @@
                 </ul>
             </li>
         </ul>
-        <ul v-if="!meals.length">
+        <div v-if="!meals.length">
-            <li>No meals planned</li>
+            <em>No meals planned</em>
-        </ul>
+        </div>
         <action-item title="Plan Meal" :image="require('@/assets/plan-meal.svg')" @click="() => this.$router.push('/meals/add')" />
     </div>
 </template>
@@ -60,7 +60,6 @@ ul.actions {
 .actions li {
     display: block;
     border: 1px solid #ccc;
-    padding: 2ex;
 }
 
 .actions li:hover {
@@ -73,6 +72,8 @@ ul.actions {
     color: #000;
     width: 100%;
     cursor: pointer;
+    padding-top: 2ex;
+    padding-bottom: 2ex;
 }
 
 </style>

src/components/shopping/CurrentShoppingListPage.vue

@@ -1,7 +1,7 @@
 <template>
     <h3>Full shopping list</h3>
     
-    <input type="checkbox" id="show-found" v-model="stockTaking" />
+    <input type="checkbox" id="show-found" @change="onCheckboxChange" :checked="stockTaking" />
     <label for="show-found">Show Stocktaking</label>
     
     <h4>Included Meals</h4>
@@ -47,6 +47,12 @@ import ShoppingListItem from './ShoppingListItem.vue'
 export default {
     name: 'FullShoppingListPage',
     components: { MealSelectionList, ShoppingListItem },
+    props: {
+        stockTaking: {
+            type: Boolean,
+            default: false
+        },
+    },
     data() {
         const from = new Date();
         from.setTime(0);
@@ -54,7 +60,7 @@ export default {
         const to = new Date();
         to.setDate(to.getDate() + 7);
 
-        return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], listByProduct: [], stockTaking: false, productsToShow: []}
+        return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], listByProduct: [], productsToShow: []}
     },
     async beforeMount() {
         const allMeals = await data.getUpcomingMeals(this.from, this.to);
@@ -99,6 +105,9 @@ export default {
         async markPurchased() {
             const result = await data.markCurrentShoppingListPurchased();
             this.$router.push({ name: 'PurchasedShoppingListPage', params: { id: result.id } });
+        },
+        onCheckboxChange(event) {
+            this.$router.push({ query: { stockTaking: event.target.checked ? 'true' : undefined } });
         }
     }
 }

src/main.js

@@ -22,7 +22,7 @@ const routes = [
     { path: '/mealplan', component: MealPlanPage },
     { path: '/login', component: LoginPage },
     { path: '/shopping', component: MyShoppingPage },
-    { path: '/shopping/current', component: CurrentShoppingListPage },
+    { path: '/shopping/current', component: CurrentShoppingListPage, props: route => ({ stockTaking: !!route.query.stockTaking }) },
     { path: '/shopping/:id', component: PurchasedShoppingListPage, props : true },
     { path: '/recipes', component: RecipesPage },
     { path: '/recipes/add', component: EditRecipePage },