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>