fix: Misc Issues with Ingredient Parser (#6250)

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -59,6 +59,7 @@
           class="mx-1"
           :placeholder="$t('recipe.choose-unit')"
           clearable
+          :menu-props="{ attach: props.menuAttachTarget, maxHeight: '250px' }"
           @keyup.enter="handleUnitEnter"
         >
           <template #prepend>
@@ -115,6 +116,7 @@
           class="mx-1 py-0"
           :placeholder="$t('recipe.choose-food')"
           clearable
+          :menu-props="{ attach: props.menuAttachTarget, maxHeight: '250px' }"
           @keyup.enter="handleFoodEnter"
         >
           <template #prepend>
@@ -198,6 +200,10 @@ import type { RecipeIngredient } from "~/lib/api/types/recipe";
 const model = defineModel<RecipeIngredient>({ required: true });
 
 const props = defineProps({
+  menuAttachTarget: {
+    type: String,
+    default: "body",
+  },
   unitError: {
     type: Boolean,
     default: false,

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageParseDialog.vue

@@ -3,6 +3,7 @@
     :model-value="modelValue"
     :title="$t('recipe.parse-ingredients')"
     :icon="$globals.icons.fileSign"
+    disable-submit-on-enter
     @update:model-value="emit('update:modelValue', $event)"
   >
     <v-container class="pa-2 ma-0" style="background-color: rgb(var(--v-theme-background));">
@@ -76,7 +77,11 @@
                 {{ i18n.t("recipe.parser.missing-unit", { unit: currentMissingUnit }) }}
               </BaseButton>
               <BaseButton
-                v-if="currentMissingUnit && currentIng.ingredient.unit?.id"
+                v-if="
+                  currentMissingUnit
+                  && currentIng.ingredient.unit?.id
+                  && currentMissingUnit.toLowerCase() != currentIng.ingredient.unit?.name.toLowerCase()
+                "
                 color="warning"
                 size="small"
                 @click="addMissingUnitAsAlias"
@@ -92,7 +97,11 @@
                 {{ i18n.t("recipe.parser.missing-food", { food: currentMissingFood }) }}
               </BaseButton>
               <BaseButton
-                v-if="currentMissingFood && currentIng.ingredient.food?.id"
+                v-if="
+                  currentMissingFood
+                  && currentIng.ingredient.food?.id
+                  && currentMissingFood.toLowerCase() != currentIng.ingredient.food?.name.toLowerCase()
+                "
                 color="warning"
                 size="small"
                 @click="addMissingFoodAsAlias"

frontend/components/global/BaseDialog.vue

@@ -10,9 +10,7 @@
       :max-width="maxWidth ?? undefined"
       :content-class="top ? 'top-dialog' : undefined"
       :fullscreen="$vuetify.display.xs"
-      @keydown.enter="() => {
+      @keydown.enter="submitOnEnter"
-        emit('submit'); dialog = false;
-      }"
       @click:outside="emit('cancel')"
       @keydown.esc="emit('cancel')"
     >
@@ -127,6 +125,7 @@ interface DialogProps {
   canDelete?: boolean;
   canConfirm?: boolean;
   canSubmit?: boolean;
+  disableSubmitOnEnter?: boolean;
 }
 
 interface DialogEmits {
@@ -150,6 +149,7 @@ const props = withDefaults(defineProps<DialogProps>(), {
   canDelete: false,
   canConfirm: false,
   canSubmit: false,
+  disableSubmitOnEnter: false,
 });
 const emit = defineEmits<DialogEmits>();
 
@@ -181,6 +181,14 @@ function submitEvent() {
   submitted.value = true;
 }
 
+function submitOnEnter() {
+  if (props.disableSubmitOnEnter) {
+    return;
+  }
+
+  submitEvent();
+}
+
 function deleteEvent() {
   emit("delete");
   submitted.value = true;

frontend/composables/partials/use-actions-factory.ts

@@ -29,10 +29,10 @@ export function useReadOnlyActions<T extends BoundT>(
     params.orderBy ??= "name";
     params.orderDirection ??= "asc";
 
-    loading.value = true;
     const allItems = useAsyncData(useAsyncKey(), async () => {
+      loading.value = true;
+      try {
         const { data } = await api.getAll(page, perPage, params);
-      loading.value = false;
 
         if (data && allRef) {
           allRef.value = data.items;
@@ -44,6 +44,10 @@ export function useReadOnlyActions<T extends BoundT>(
         else {
           return [];
         }
+      }
+      finally {
+        loading.value = false;
+      }
     });
 
     return allItems;
@@ -84,10 +88,10 @@ export function useStoreActions<T extends BoundT>(
     params.orderBy ??= "name";
     params.orderDirection ??= "asc";
 
-    loading.value = true;
     const allItems = useAsyncData(useAsyncKey(), async () => {
+      loading.value = true;
+      try {
         const { data } = await api.getAll(page, perPage, params);
-      loading.value = false;
 
         if (data && allRef) {
           allRef.value = data.items;
@@ -99,6 +103,10 @@ export function useStoreActions<T extends BoundT>(
         else {
           return [];
         }
+      }
+      finally {
+        loading.value = false;
+      }
     });
 
     return allItems;

frontend/composables/partials/use-store-factory.ts

@@ -29,7 +29,7 @@ export const useReadOnlyStore = function <T extends BoundT>(
     },
   };
 
-  if (!loading.value && (!store.value || store.value.length === 0)) {
+  if (!loading.value && !store.value.length) {
     const result = actions.getAll(1, -1, params);
     store.value = result.value || [];
   }
@@ -54,7 +54,7 @@ export const useStore = function <T extends BoundT>(
     },
   };
 
-  if (!loading.value && (!store.value || store.value.length === 0)) {
+  if (!loading.value && !store.value.length) {
     const result = actions.getAll(1, -1, params);
     store.value = result.value || [];
   }