From 377e0ef7005e2fa1957c0c74f68d779229e44606 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Sat, 4 May 2024 11:52:31 +1000
Subject: [PATCH] Rearrange ingredients

---
 src/components/CompactParsedIngredient.vue | 41 +++++++++++++---------
 src/components/EditRecipePage.vue          | 14 ++++++--
 src/components/MealPlanPage.vue            |  4 +++
 3 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/components/CompactParsedIngredient.vue b/src/components/CompactParsedIngredient.vue
index eea2fb4..107a355 100644
--- a/src/components/CompactParsedIngredient.vue
+++ b/src/components/CompactParsedIngredient.vue
@@ -1,23 +1,25 @@
 <template>
 <div class="compact-parse-results">
-    <span class="parse-element teaser-image" v-if="ingredient.product && ingredient.product.img_small">
+    <p class="parse-element teaser-image" v-if="ingredient.product && ingredient.product.img_small">
         <img :src="ingredient.product.img_small" />
-    </span>
-    <span class="parse-element quantity" :class="{ missing: !(ingredient?.quantity)}">{{ ingredient?.quantity || 'qty' }}</span>
-    <span class="parse-element unit" :class="{ missing: !(ingredient?.unit)}">{{ ingredient?.unit || 'unit' }}</span>
-    <span class="parse-element helper" >of</span>
-    <span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span>
-    <span class="parse-element product-name" :class="{missing: !(ingredient?.product)}">
-        <a :href="ingredient?.product?.link" v-if="ingredient?.product?.link" target=”_blank”>
-        ( {{ ingredient?.product?.name }} <img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" /> )
-        </a>
-        <a v-else-if="ingredient?.name" :href="searchlink" target="_blank">
-            (search?)
-        </a>
-        <a v-else>
-            (product)
-        </a>
-    </span>
+    </p>
+    <p class="ingredient-details">
+        <span class="parse-element quantity" :class="{ missing: !(ingredient?.quantity)}">{{ ingredient?.quantity || 'qty' }}</span>
+        <span class="parse-element unit" :class="{ missing: !(ingredient?.unit)}">{{ ingredient?.unit || 'unit' }}</span>
+        <span class="parse-element helper" >of</span>
+        <span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span>:&nbsp;
+        <span class="parse-element product-name" :class="{missing: !(ingredient?.product)}">
+            <a :href="ingredient?.product?.link" v-if="ingredient?.product?.link" target=”_blank”>
+            ( {{ ingredient?.product?.name }} <img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" /> )
+            </a>
+            <a v-else-if="ingredient?.name" :href="searchlink" target="_blank">
+                (search?)
+            </a>
+            <a v-else>
+                (product)
+            </a>
+        </span>
+    </p>
 </div>
 </template>
 
@@ -38,6 +40,7 @@ export default {
 <style scoped>
 
 .compact-parse-results {
+    flex: left;
     display: flex;
     justify-content: left;
     text-align: left;
@@ -67,6 +70,10 @@ export default {
     height: 2em;
 }
 
+.ingredient-details {
+    flex: 1;
+}
+
 .quantity {
   color: blue;
 }
diff --git a/src/components/EditRecipePage.vue b/src/components/EditRecipePage.vue
index a48cd3e..805c369 100644
--- a/src/components/EditRecipePage.vue
+++ b/src/components/EditRecipePage.vue
@@ -1,8 +1,9 @@
 <template>
 <div>
     <div v-if="!id && !recipe">
-        <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" />
+        <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" /> <br />
         <button @click="parseLink">Parse</button>
+        <button @click="createFromScratch">Create from Scratch</button>
     </div>
 
     <div v-if="parse_failed">
@@ -136,7 +137,7 @@ export default {
         },
         async updateProduct(ingredient, product_link) {
             const product = await data.parseProduct(ingredient, product_link);
-            this.recipe.ingredients = this.recipe.ingredients.map(i => i.name == ingredient.name ? { ...i, product } : i);
+            this.recipe.ingredients = this.recipe.ingredients.map(i => i.name == ingredient.name ? { ...i, product, product_id: product.id } : i);
         },
         async updateIngredient(ingredient, line) {
             const newIngredients = await data.parseIngredients([line]);
@@ -158,6 +159,15 @@ export default {
             }
 
             alert('Failed to save recipe');
+        },
+        async createFromScratch() {
+            this.recipe = {
+                id: 0,
+                name: 'My new recipe',
+                link: '',
+                ingredients: [],
+                image_urls: []
+            }
         }
     },
 }
diff --git a/src/components/MealPlanPage.vue b/src/components/MealPlanPage.vue
index 3078426..4d64629 100644
--- a/src/components/MealPlanPage.vue
+++ b/src/components/MealPlanPage.vue
@@ -24,6 +24,10 @@ li {
     list-style-type: none;
 }
 
+ul.meals-list {
+    padding: 0;
+}
+
 .toggle-actions {
     cursor: pointer;
     background-color: #fff;