Moved delete out of ingredient editor

src/components/EditMealPage.vue

@@ -3,6 +3,7 @@
         <div class="fields">
             <date-picker @date-selected="selectDate" :date="meal.date" />
             <recipe-search-box @select-recipe="selectRecipe" />
+            <ingredient-add-box />
         </div>
         <h2>Foods</h2>
         <ul v-if="meal.recipes && meal.recipes.length">
@@ -24,10 +25,11 @@ import data from '@/data.js'
 import RecipeSearchBox from './RecipeSearchBox.vue';
 import RecipeCard from './RecipeCard.vue';
 import DatePicker from './DatePicker.vue';
+import IngredientAddBox from './IngredientAddBox.vue';
 
 export default {
     props: ['id'],
-    components: { RecipeSearchBox, DatePicker, RecipeCard },
+    components: { RecipeSearchBox, DatePicker, RecipeCard, IngredientAddBox },
     data() {
         return {
             meal: {
@@ -45,7 +47,7 @@ export default {
     },
     methods: {
         selectRecipe(recipe) {
-            this.meal.recipes.push(recipe);
+            this.meal.recipes.unshift(recipe);
         },
         selectDate(date) {
             this.meal.date = date;

src/components/EditRecipePage.vue

@@ -16,11 +16,14 @@
         <h2>Ingredients</h2>
         <ul>
             <li v-for="ingredient in recipe.ingredients" :key="ingredient.line">
+                <p class="ingredient-line">
                     <ingredient-line 
                         :ingredient="ingredient"
                         @update-ingredient="updateIngredient"
                         @update-product-link="updateProduct"
                         @delete-item="deleteIngredient" />
+                </p>
+                <button @click="deleteIngredient(ingredient)">Delete</button>
             </li>
         </ul>
         <button class="submit-btn" @click="saveRecipe">Save</button>
@@ -64,6 +67,19 @@ ul {
 
 li {
     list-style: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 1vh;
+}
+
+.ingredient-line {
+    flex: 1;
+    margin: 0;
+    margin-right: 1em;
 }
 
 </style>

src/components/IngredientAddBox.vue

@@ -0,0 +1,59 @@
+<template>
+<div>
+    <ingredient-line :ingredient="ingredient"
+        @update-ingredient="updateIngredient"
+        @update-product-link="updateProduct"
+        @delete-item="deleteIngredient" />
+</div>
+</template>
+
+<script>
+import IngredientLine from './IngredientLine.vue';
+import data from '@/data.js'
+
+export default {
+    name: 'IngredientAddBox',
+    components: { IngredientLine },
+    data() {
+        return {
+            ingredient: {
+                name: '',
+                quantity: '',
+                unit: '',
+            },
+        }
+    },
+    methods: {
+        addIngredient() {
+            this.$emit('add-ingredient', this.ingredient);
+            this.ingredient = {
+                name: '',
+                quantity: '',
+                unit: '',
+            };
+        },
+        updateProduct(ingredient, product_link) {
+            data.parseProduct(ingredient, product_link).then(product => {
+                ingredient.product = product
+            });
+        },
+        updateIngredient(ingredient, line) {
+            data.parseIngredients([line]).then(function(newIngredients) {
+                const newIngredient = newIngredients[0];
+                ingredient.line = line;
+                ingredient.name = newIngredient.name;
+                ingredient.quantity = newIngredient.quantity;
+                ingredient.unit = newIngredient.unit;
+                ingredient.preparation = newIngredient.preparation;
+                if (newIngredient.product) {
+                    ingredient.product = newIngredient.product;
+                }
+            });
+        },
+    }
+}
+
+</script>
+
+<style scoped>
+</style>

src/components/IngredientLine.vue

@@ -27,9 +27,6 @@
                     </span>
                 </div>
 
-                <!-- Delete button -->
-                <button class="delete-button" @click="deleteItem">Delete</button>
-
                 <!-- Expand details button with animated chevron -->
                 <button class="expand-button" @click="showDetails = !showDetails">
                 <span :class="{'rotate-chevron': showDetails}">&#9662;</span>
@@ -55,7 +52,6 @@
             </div>
         </div>
 
-        <!-- Parse Results card -->
     </div>
 </template>
 
@@ -81,10 +77,7 @@ export default {
         updateProductLink() {
             if (this.productLink && this.productLink != this.ingredient.product?.link)
                 this.$emit('update-product-link', this.ingredient, this.productLink);
-        },
+        }
-        deleteItem() {
-            this.$emit('delete-item', this.ingredient);
-        },
     }
 };
 </script>
@@ -92,7 +85,6 @@ export default {
 <style scoped>
 
 .ingredient-item {
-    border: 1px solid #ccc;
     border-radius: 5px;
     padding: 10px;
     margin-bottom: 10px;