feat(frontend): ✨ food filter and add back search dialog (#794)

* return ingredients and foods on summary

* filter on foods

* update search page to TS and comp-api

* add additional search fields

* feat(frontend): ✨ add back search dialog

* update docs

* formatting

* update sidebar - remove dropdown

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/composables/recipes/index.ts

@@ -5,3 +5,4 @@ export { useUnits } from "./use-recipe-units";
 export { useRecipes, recentRecipes, allRecipes, useLazyRecipes, useSorter } from "./use-recipes";
 export { useTags, useCategories, allCategories, allTags } from "./use-tags-categories";
 export { parseIngredientText } from "./use-recipe-ingredients";
+export { useRecipeSearch } from "./use-recipe-search";

frontend/composables/recipes/use-recipe-search.ts

@@ -0,0 +1,46 @@
+import { computed, reactive, ref, Ref } from "@nuxtjs/composition-api";
+import Fuse from "fuse.js";
+import { Recipe } from "~/types/api-types/recipe";
+
+export const useRecipeSearch = (recipes: Ref<Recipe[] | null>) => {
+  const localState = reactive({
+    options: {
+      shouldSort: true,
+      threshold: 0.6,
+      location: 0,
+      distance: 100,
+      findAllMatches: true,
+      maxPatternLength: 32,
+      minMatchCharLength: 2,
+      keys: ["name", "description", "recipeIngredient.note", "recipeIngredient.food.name"],
+    },
+  });
+
+  const search = ref("");
+
+  const fuse = computed(() => {
+    return new Fuse(recipes.value || [], localState.options);
+  });
+
+  const fuzzyRecipes = computed(() => {
+    if (search.value.trim() === "") {
+      return recipes.value;
+    }
+    const result = fuse.value.search(search.value.trim());
+    return result.map((x) => x.item);
+  });
+
+  const results = computed(() => {
+    if (!fuzzyRecipes.value) {
+      return [];
+    }
+
+    if (fuzzyRecipes.value.length > 0 && search.value.length != null && search.value.length >= 1) {
+      return fuzzyRecipes.value;
+    } else {
+      return recipes.value;
+    }
+  });
+
+  return { results, search };
+};

frontend/composables/use-router.ts

@@ -24,16 +24,14 @@ export function useRouteQuery<T extends string | string[]>(name: string, default
 
   return computed<any>({
     get() {
-      console.log("Getter");
       const data = route.value.query[name];
       if (data == null) return defaultValue ?? null;
       return data;
     },
     set(v) {
       nextTick(() => {
-        console.log("Setter");
         // @ts-ignore
-        router.value.replace({ query: { ...route.value.query, [name]: v } });
+        router.replace({ query: { ...route.value.query, [name]: v } });
       });
     },
   });