feat: Further improve recipe filter search and shopping list and recipe ingredient editor (#7063)

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -58,8 +58,8 @@
           density="compact"
           variant="solo"
           return-object
-          :items="units || []"
-          :custom-filter="normalizeFilter"
+          :items="filteredUnits"
+          :custom-filter="() => true"
           item-title="name"
           class="mx-1"
           :placeholder="$t('recipe.choose-unit')"
@@ -117,8 +117,8 @@
           density="compact"
           variant="solo"
           return-object
-          :items="foods || []"
-          :custom-filter="normalizeFilter"
+          :items="filteredFoods"
+          :custom-filter="() => true"
           item-title="name"
           class="mx-1 py-0"
           :placeholder="$t('recipe.choose-food')"
@@ -176,7 +176,6 @@
           variant="solo"
           return-object
           :items="search.data.value || []"
-          :custom-filter="normalizeFilter"
           item-title="name"
           class="mx-1 py-0"
           :placeholder="$t('search.type-to-search')"
@@ -227,11 +226,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, reactive, toRefs } from "vue";
+import { ref, computed, reactive, toRefs, watch } from "vue";
 import { useDisplay } from "vuetify";
 import { useI18n } from "vue-i18n";
 import { useFoodStore, useFoodData, useUnitStore, useUnitData } from "~/composables/store";
-import { normalizeFilter } from "~/composables/use-utils";
+import { useSearch } from "~/composables/use-search";
 import { useNuxtApp } from "#app";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
 import { usePublicExploreApi, useUserApi } from "~/composables/api";
@@ -343,8 +342,8 @@ const btns = computed(() => {
 // Foods
 const foodStore = useFoodStore();
 const foodData = useFoodData();
-const foodSearch = ref("");
 const foodAutocomplete = ref<HTMLInputElement>();
+const { search: foodSearch, filtered: filteredFoods } = useSearch(foodStore.store);
 
 async function createAssignFood() {
   foodData.data.name = foodSearch.value;
@@ -375,8 +374,8 @@ watch(loading, (val) => {
 // Units
 const unitStore = useUnitStore();
 const unitsData = useUnitData();
-const unitSearch = ref("");
 const unitAutocomplete = ref<HTMLInputElement>();
+const { search: unitSearch, filtered: filteredUnits } = useSearch(unitStore.store);
 
 async function createAssignUnit() {
   unitsData.data.name = unitSearch.value;
@@ -430,9 +429,6 @@ function quantityFilter(e: KeyboardEvent) {
 }
 
 const { showTitle } = toRefs(state);
-
-const foods = foodStore.store;
-const units = unitStore.store;
 </script>
 
 <style>

frontend/components/Domain/Recipe/RecipeIngredientHtml.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
-import { useParsedIngredientText } from "~/composables/recipes";
+import { useIngredientTextParser } from "~/composables/recipes";
 
 interface Props {
   ingredient?: RecipeIngredient;
@@ -20,6 +20,7 @@ interface Props {
 }
 
 const { ingredient, scale = 1 } = defineProps<Props>();
+const { useParsedIngredientText } = useIngredientTextParser();
 
 const baseText = computed(() => {
   if (!ingredient) return "";

frontend/components/Domain/Recipe/RecipeIngredientListItem.vue

@@ -34,7 +34,7 @@
 
 <script setup lang="ts">
 import type { RecipeIngredient } from "~/lib/api/types/household";
-import { useParsedIngredientText } from "~/composables/recipes";
+import { useIngredientTextParser } from "~/composables/recipes";
 
 interface Props {
   ingredient: RecipeIngredient;
@@ -46,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
 const route = useRoute();
 const $auth = useMealieAuth();
 const groupSlug = computed(() => route.params.groupSlug || $auth.user?.value?.groupSlug || "");
+const { useParsedIngredientText } = useIngredientTextParser();
 
 const parsedIng = computed(() => {
   return useParsedIngredientText(props.ingredient, props.scale, true, groupSlug.value.toString());

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -52,7 +52,7 @@
 
 <script setup lang="ts">
 import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
-import { parseIngredientText } from "~/composables/recipes";
+import { useIngredientTextParser } from "~/composables/recipes";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
 
 interface Props {
@@ -66,6 +66,8 @@ const props = withDefaults(defineProps<Props>(), {
   isCookMode: false,
 });
 
+const { parseIngredientText } = useIngredientTextParser();
+
 function validateTitle(title?: string | null) {
   return !(title === undefined || title === "" || title === null);
 }

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

@@ -431,6 +431,7 @@ const props = defineProps({
 const emit = defineEmits(["click-instruction-field", "update:assets"]);
 
 const { isCookMode, toggleCookMode, isEditForm } = usePageState(props.recipe.slug);
+const { extractIngredientReferences } = useExtractIngredientReferences();
 
 const dialog = ref(false);
 const disabledSteps = ref<number[]>([]);
@@ -581,7 +582,7 @@ function setUsedIngredients() {
 watch(activeRefs, () => setUsedIngredients());
 
 function autoSetReferences() {
-  useExtractIngredientReferences(
+  extractIngredientReferences(
     props.recipe.recipeIngredient,
     activeRefs.value,
     activeText.value,

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

@@ -197,7 +197,7 @@ import type { IngredientFood, IngredientUnit, ParsedIngredient, RecipeIngredient
 import type { Parser } from "~/lib/api/user/recipes/recipe";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { useUserApi } from "~/composables/api";
-import { parseIngredientText } from "~/composables/recipes";
+import { useIngredientTextParser } from "~/composables/recipes";
 import { useFoodData, useFoodStore, useUnitData, useUnitStore } from "~/composables/store";
 import { useGlobalI18n } from "~/composables/use-global-i18n";
 import { alert } from "~/composables/use-toast";
@@ -208,6 +208,8 @@ const props = defineProps<{
   ingredients: NoUndefinedField<RecipeIngredient[]>;
 }>();
 
+const { parseIngredientText } = useIngredientTextParser();
+
 const emit = defineEmits<{
   (e: "update:modelValue", value: boolean): void;
   (e: "save", value: NoUndefinedField<RecipeIngredient[]>): void;

frontend/components/Domain/Recipe/RecipePrintView.vue

@@ -192,7 +192,7 @@ import { useStaticRoutes } from "~/composables/api";
 import type { Recipe, RecipeIngredient, RecipeStep } from "~/lib/api/types/recipe";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { ImagePosition, useUserPrintPreferences } from "~/composables/use-users/preferences";
-import { parseIngredientText, useNutritionLabels } from "~/composables/recipes";
+import { useIngredientTextParser, useNutritionLabels } from "~/composables/recipes";
 import { usePageState } from "~/composables/recipe-page/shared-state";
 import { useScaledAmount } from "~/composables/recipes/use-scaled-amount";
 
@@ -362,6 +362,8 @@ const hasNotes = computed(() => {
   return props.recipe.notes && props.recipe.notes.length > 0;
 });
 
+const { parseIngredientText } = useIngredientTextParser();
+
 function parseText(ingredient: RecipeIngredient) {
   return parseIngredientText(ingredient, props.scale);
 }