From cfaba1f52c13502d86deb461761d71b8e2f92ad3 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Wed, 17 Jan 2024 17:03:11 +1100
Subject: [PATCH] Extract compact ingredient line

---
 src/components/DatePicker.vue       |  3 +--
 src/components/EditMealPage.vue     |  9 +++++----
 src/components/IngredientAddBox.vue | 16 +++++-----------
 src/components/IngredientLine.vue   | 12 ++++++------
 4 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index d9e949c..341515b 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -12,8 +12,7 @@
           <li
             v-for="(day, index) in nextSevenDays"
             :key="index"
-            @click="selectDate(day)"
-          >
+            @mousedown="selectDate(day)">
             {{ formatDay(day) }}
           </li>
         </ul>
diff --git a/src/components/EditMealPage.vue b/src/components/EditMealPage.vue
index 0ef879f..92cf07f 100644
--- a/src/components/EditMealPage.vue
+++ b/src/components/EditMealPage.vue
@@ -21,11 +21,11 @@
             </div>
         </div>
         <div class="ingredients">
-            <h2>Ingredients</h2>
+            <h2>Additional Ingredients</h2>
             <ul v-if="meal.ingredients && meal.ingredients.length">
                 <li v-for="ingredient in meal.ingredients" :key="ingredient" class="saved-ingredient">
                     <p>
-                        <ingredient-line :ingredient="ingredient" />
+                        <compact-parsed-ingredient :ingredient="ingredient" />
                     </p>
                     <button @click="deleteIngredient(ingredient)">Delete</button>
                 </li>
@@ -44,11 +44,11 @@ import RecipeSearchBox from './RecipeSearchBox.vue';
 import RecipeCard from './RecipeCard.vue';
 import DatePicker from './DatePicker.vue';
 import IngredientAddBox from './IngredientAddBox.vue';
-import IngredientLine from './IngredientLine.vue';
+import CompactParsedIngredient from './CompactParsedIngredient.vue';
 
 export default {
     props: ['id'],
-    components: { RecipeSearchBox, DatePicker, RecipeCard, IngredientAddBox, IngredientLine },
+    components: { RecipeSearchBox, DatePicker, RecipeCard, IngredientAddBox, CompactParsedIngredient },
     data() {
         return {
             meal: {
@@ -70,6 +70,7 @@ export default {
             this.meal.recipes.push(recipe);
         },
         selectDate(date) {
+            console.log("selectDate", date);
             this.meal.date = date;
         },
         removeRecipe(recipe) {
diff --git a/src/components/IngredientAddBox.vue b/src/components/IngredientAddBox.vue
index 09a1fd3..8f613c2 100644
--- a/src/components/IngredientAddBox.vue
+++ b/src/components/IngredientAddBox.vue
@@ -24,6 +24,7 @@ export default {
                 name: '',
                 quantity: '',
                 unit: '',
+                link: ''
             },
         }
     },
@@ -39,20 +40,13 @@ export default {
         },
         updateProduct(ingredient, product_link) {
             data.parseProduct(ingredient, product_link).then(product => {
-                ingredient.product = product
+                this.ingredient.product = product;
+                this.ingredient.product_link = product.link;
             });
         },
         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;
-                }
+            data.parseIngredients([line]).then(newIngredients => {
+                this.ingredient = newIngredients[0];
             });
         },
     }
diff --git a/src/components/IngredientLine.vue b/src/components/IngredientLine.vue
index 1c8a6e8..4604c36 100644
--- a/src/components/IngredientLine.vue
+++ b/src/components/IngredientLine.vue
@@ -1,5 +1,11 @@
 <template>
     <div class="ingredient-item">
+        <div class="full-ingredient">
+            <p>
+                <input v-model="ingredientText" @keyup.enter="updateIngredient" @focusout="updateIngredient" placeholder="Enter an ingredient" />
+                <input v-model="productLink" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @focusout="updateProductLink" />
+            </p>
+        </div>
         <!-- Full ingredient line text bar -->
         <div class="action_items">
             <div class="action-bar">
@@ -15,12 +21,6 @@
             </div>
             <!-- Details section -->
             <div v-if="showDetails" class="expanded-section">
-                <div class="full-ingredient">
-                    <p>
-                        <input v-model="ingredientText" @keyup.enter="updateIngredient" @focusout="updateIngredient" placeholder="Enter an ingredient" />
-                        <input v-model="productLink" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @focusout="updateProductLink" />
-                    </p>
-                </div>
                 <div class="details-section ingredient-details">
                     <div class="parse-result">
                         <p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>