From 1d049cdafc8b8c377069a13c01a5c60a00e541e4 Mon Sep 17 00:00:00 2001
From: Daniel O'Connor <daniel.oconnor@gmail.com>
Date: Mon, 27 Jan 2025 05:26:21 +0000
Subject: [PATCH 1/3] Display buttons as list

---
 .../_groupSlug/r/_slug/ingredient-parser.vue  | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
index 0c978d9f052..a043103eb99 100644
--- a/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
+++ b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
@@ -72,22 +72,26 @@
                 {{ ing.input }}
                 <v-card-actions>
                   <v-spacer />
-                  <BaseButton
-                    v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
-                    color="warning"
-                    small
-                    @click="createUnit(ing.ingredient.unit, index)"
-                  >
-                    {{ errors[index].unitErrorMessage }}
-                  </BaseButton>
-                  <BaseButton
-                    v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
-                    color="warning"
-                    small
-                    @click="createFood(ing.ingredient.food, index)"
-                  >
-                    {{ errors[index].foodErrorMessage }}
-                  </BaseButton>
+                  <ul style="list-style-type: none;">
+                    <li v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''">
+                      <BaseButton
+                        color="warning"
+                        small
+                        @click="createUnit(ing.ingredient.unit, index)"
+                      >
+                        {{ errors[index].unitErrorMessage }}
+                      </BaseButton>
+                    </li>
+                    <li v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''">
+                      <BaseButton
+                        color="warning"
+                        small
+                        @click="createFood(ing.ingredient.food, index)"
+                      >
+                        {{ errors[index].foodErrorMessage }}
+                      </BaseButton>
+                    </li>
+                  </ul>
                 </v-card-actions>
               </v-expansion-panel-content>
             </v-expansion-panel>

From 6e57be4b70a513f80e957bf1f83a7c171e49808d Mon Sep 17 00:00:00 2001
From: Daniel O'Connor <daniel.oconnor@gmail.com>
Date: Mon, 27 Jan 2025 05:41:01 +0000
Subject: [PATCH 2/3] Improve add buttons

---
 .../_groupSlug/r/_slug/ingredient-parser.vue  | 54 +++++++++++--------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
index a043103eb99..30849b1beb9 100644
--- a/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
+++ b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
@@ -72,26 +72,24 @@
                 {{ ing.input }}
                 <v-card-actions>
                   <v-spacer />
-                  <ul style="list-style-type: none;">
-                    <li v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''">
-                      <BaseButton
-                        color="warning"
-                        small
-                        @click="createUnit(ing.ingredient.unit, index)"
-                      >
-                        {{ errors[index].unitErrorMessage }}
-                      </BaseButton>
-                    </li>
-                    <li v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''">
-                      <BaseButton
-                        color="warning"
-                        small
-                        @click="createFood(ing.ingredient.food, index)"
-                      >
-                        {{ errors[index].foodErrorMessage }}
-                      </BaseButton>
-                    </li>
-                  </ul>
+                  <BaseButton
+                    v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
+                    :title=errors[index].unitErrorMessage
+                    color="warning"
+                    small
+                    @click="createUnit(ing.ingredient.unit, index)"
+                  >
+                    {{ errors[index].unit }}
+                  </BaseButton>
+                  <BaseButton
+                    v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
+                    :title=errors[index].foodErrorMessage
+                    color="warning"
+                    small
+                    @click="createFood(ing.ingredient.food, index)"
+                  >
+                    {{ errors[index].food }}
+                  </BaseButton>
                 </v-card-actions>
               </v-expansion-panel-content>
             </v-expansion-panel>
@@ -101,7 +99,12 @@
     </v-container>
   </v-container>
 </template>
-
+<style lang="css">
+.v-card__actions {
+  flex-wrap: wrap;
+  overflow: truncate;
+}
+</style>
 <script lang="ts">
 import { computed, defineComponent, ref, useContext, useRoute, useRouter, watch } from "@nuxtjs/composition-api";
 import { invoke, until } from "@vueuse/core";
@@ -191,20 +194,23 @@ export default defineComponent({
       const unitError = !checkForUnit(ing.ingredient.unit);
       const foodError = !checkForFood(ing.ingredient.food);
 
+      let unit = "";
+      let food = "";
+
       let unitErrorMessage = "";
       let foodErrorMessage = "";
 
       if (unitError || foodError) {
         if (unitError) {
           if (ing?.ingredient?.unit?.name) {
-            const unit = ing.ingredient.unit.name || i18n.tc("recipe.parser.no-unit");
+            unit = ing.ingredient.unit.name || i18n.tc("recipe.parser.no-unit");
             unitErrorMessage = i18n.t("recipe.parser.missing-unit", { unit }).toString();
           }
         }
 
         if (foodError) {
           if (ing?.ingredient?.food?.name) {
-            const food = ing.ingredient.food.name || i18n.tc("recipe.parser.no-food");
+            food = ing.ingredient.food.name || i18n.tc("recipe.parser.no-food");
             foodErrorMessage = i18n.t("recipe.parser.missing-food", { food }).toString();
           }
         }
@@ -214,8 +220,10 @@ export default defineComponent({
       return {
         ingredientIndex: index,
         unitError,
+        unit,
         unitErrorMessage,
         foodError,
+        food,
         foodErrorMessage,
       } as Error;
     }

From 6225baf2fc229e76ccf98b67152c4cf8f8fb30a9 Mon Sep 17 00:00:00 2001
From: Daniel O'Connor <daniel.oconnor@gmail.com>
Date: Thu, 6 Feb 2025 21:23:33 +1030
Subject: [PATCH 3/3] Update ingredient-parser.vue

---
 .../pages/g/_groupSlug/r/_slug/ingredient-parser.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
index 30849b1beb9..21d63b039ec 100644
--- a/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
+++ b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
@@ -99,12 +99,6 @@
     </v-container>
   </v-container>
 </template>
-<style lang="css">
-.v-card__actions {
-  flex-wrap: wrap;
-  overflow: truncate;
-}
-</style>
 <script lang="ts">
 import { computed, defineComponent, ref, useContext, useRoute, useRouter, watch } from "@nuxtjs/composition-api";
 import { invoke, until } from "@vueuse/core";
@@ -412,3 +406,9 @@ export default defineComponent({
   },
 });
 </script>
+<style lang="css">
+.v-card__actions {
+  flex-wrap: wrap;
+  overflow: truncate;
+}
+</style>