Minor meals adjustments

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

@@ -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>