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/pages/search.vue

@@ -1,76 +1,128 @@
 <template>
-  <v-container>
-    <v-row dense>
-      <v-col>
-        <v-text-field
-          v-model="searchString"
-          outlined
-          color="primary accent-3"
-          :placeholder="$t('search.search-placeholder')"
-          :append-icon="$globals.icons.search"
-        >
-        </v-text-field>
-      </v-col>
-      <v-col cols="12" md="2" sm="12">
-        <v-text-field v-model="maxResults" class="mt-0 pt-0" :label="$t('search.max-results')" type="number" outlined />
-      </v-col>
-    </v-row>
+  <v-container fluid>
+    <v-container fluid class="pa-0">
+      <v-row dense>
+        <v-col>
+          <v-text-field
+            v-model="searchString"
+            outlined
+            autofocus
+            color="primary accent-3"
+            :placeholder="$t('search.search-placeholder')"
+            :prepend-inner-icon="$globals.icons.search"
+            clearable
+          >
+          </v-text-field>
+        </v-col>
+        <v-col cols="12" md="2" sm="12">
+          <v-text-field
+            v-model="maxResults"
+            class="mt-0 pt-0"
+            :label="$t('search.max-results')"
+            type="number"
+            outlined
+          />
+        </v-col>
+      </v-row>
 
-    <ToggleState>
-      <template #activator="{ state, toggle }">
-        <v-switch :value="state" color="info" class="ma-0 pa-0" label="Advanced" @input="toggle" @click="toggle">
-          Advanced
-        </v-switch>
-      </template>
-      <template #default="{ state }">
-        <v-expand-transition>
-          <v-row v-show="state" dense class="my-0 dense flex-row align-center justify-space-around">
-            <v-col>
-              <h3 class="pl-2 text-center headline">
-                {{ $t("category.category-filter") }}
-              </h3>
-              <RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
-              <RecipeCategoryTagSelector
-                v-model="includeCategories"
-                :solo="true"
-                :dense="false"
-                :return-object="false"
-              />
-            </v-col>
-            <v-col>
-              <h3 class="pl-2 text-center headline">
-                {{ $t("search.tag-filter") }}
-              </h3>
-              <RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
-              <RecipeCategoryTagSelector
-                v-model="includeTags"
-                :solo="true"
-                :dense="false"
-                :return-object="false"
-                :tag-selector="true"
-              />
-            </v-col>
-          </v-row>
-        </v-expand-transition>
-      </template>
-    </ToggleState>
-
-    <RecipeCardSection
-      class="mt-n5"
-      :title-icon="$globals.icons.magnify"
-      :recipes="showRecipes.slice(0, maxResults)"
-      @sort="assignFuzzy"
-    />
+      <ToggleState>
+        <template #activator="{ state, toggle }">
+          <v-switch :value="state" color="info" class="ma-0 pa-0" label="Advanced" @input="toggle" @click="toggle">
+            Advanced
+          </v-switch>
+        </template>
+        <template #default="{ state }">
+          <v-expand-transition>
+            <v-row v-show="state" dense class="my-0 dense flex-row align-center justify-space-around">
+              <v-col>
+                <h3 class="pl-2 text-center headline">
+                  {{ $t("category.category-filter") }}
+                </h3>
+                <RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
+                <RecipeCategoryTagSelector
+                  v-model="includeCategories"
+                  :solo="true"
+                  :dense="false"
+                  :return-object="false"
+                />
+              </v-col>
+              <v-col>
+                <h3 class="pl-2 text-center headline">
+                  {{ $t("search.tag-filter") }}
+                </h3>
+                <RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
+                <RecipeCategoryTagSelector
+                  v-model="includeTags"
+                  :solo="true"
+                  :dense="false"
+                  :return-object="false"
+                  :tag-selector="true"
+                />
+              </v-col>
+              <v-col>
+                <h3 class="pl-2 text-center headline">Food Filter</h3>
+                <RecipeSearchFilterSelector class="mb-1" @update="updateFoodParams" />
+                <v-autocomplete
+                  v-model="includeFoods"
+                  hide-details
+                  chips
+                  deletable-chips
+                  solo
+                  multiple
+                  :items="foods || []"
+                  item-text="name"
+                  class="mx-1 py-0 mb-8"
+                  :prepend-inner-icon="$globals.icons.foods"
+                  label="Choose Food"
+                >
+                  <template #selection="data">
+                    <v-chip
+                      :key="data.index"
+                      class="ma-1"
+                      :input-value="data.selected"
+                      close
+                      label
+                      color="accent"
+                      dark
+                      @click:close="includeFoods.splice(data.index, 1)"
+                    >
+                      {{ data.item.name || data.item }}
+                    </v-chip>
+                  </template>
+                </v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-expand-transition>
+        </template>
+      </ToggleState>
+    </v-container>
+    <v-container>
+      <RecipeCardSection
+        class="mt-n5"
+        :title-icon="$globals.icons.magnify"
+        :recipes="showRecipes.slice(0, maxResults)"
+        @sort="assignFuzzy"
+      />
+    </v-container>
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
 import Fuse from "fuse.js";
-import { defineComponent } from "@nuxtjs/composition-api";
+import { defineComponent, toRefs, computed } from "@nuxtjs/composition-api";
+import { reactive } from "vue-demi";
 import RecipeSearchFilterSelector from "~/components/Domain/Recipe/RecipeSearchFilterSelector.vue";
 import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
-import { useRecipes, allRecipes } from "~/composables/recipes";
+import { useRecipes, allRecipes, useFoods } from "~/composables/recipes";
+import { RecipeSummary } from "~/types/api-types/recipe";
+import { Tag } from "~/api/class-interfaces/tags";
+import { useRouteQuery } from "~/composables/use-router";
+
+interface GenericFilter {
+  exclude: boolean;
+  matchAny: boolean;
+}
 
 export default defineComponent({
   components: {
@@ -81,23 +133,36 @@ export default defineComponent({
   setup() {
     const { assignSorted } = useRecipes(true);
 
-    return { assignSorted, allRecipes };
-  },
-  data() {
-    return {
+    // ================================================================
+    // Global State
+
+    const state = reactive({
       maxResults: 21,
-      searchResults: [],
+
+      // Filters
+      includeCategories: [] as string[],
       catFilter: {
         exclude: false,
         matchAny: false,
-      },
+      } as GenericFilter,
+
+      includeTags: [] as string[],
       tagFilter: {
         exclude: false,
         matchAny: false,
-      },
-      sortedResults: [],
-      includeCategories: [],
-      includeTags: [],
+      } as GenericFilter,
+
+      includeFoods: [] as string[],
+      foodFilter: {
+        exclude: false,
+        matchAny: false,
+      } as GenericFilter,
+
+      // Recipes Holders
+      searchResults: [] as RecipeSummary[],
+      sortedResults: [] as RecipeSummary[],
+
+      // Search Options
       options: {
         shouldSort: true,
         threshold: 0.6,
@@ -106,67 +171,74 @@ export default defineComponent({
         findAllMatches: true,
         maxPatternLength: 32,
         minMatchCharLength: 2,
-        keys: ["name", "description"],
+        keys: ["name", "description", "recipeIngredient.note", "recipeIngredient.food.name"],
       },
-    };
-  },
-  head() {
-    return {
-      title: this.$t("search.search"),
-    };
-  },
-  computed: {
-    searchString: {
-      set(q) {
-        this.$router.replace({ query: { ...this.$route.query, q } });
-      },
-      get() {
-        return this.$route.query.q || "";
-      },
-    },
-    filteredRecipes() {
-      return this.allRecipes.filter((recipe) => {
-        const includesTags = this.check(
-          this.includeTags,
-          recipe.tags.map((x) => x.name),
-          this.tagFilter.matchAny,
-          this.tagFilter.exclude
+    });
+
+    // ================================================================
+    // Search Functions
+
+    const searchString = useRouteQuery("q", "");
+
+    const filteredRecipes = computed(() => {
+      if (!allRecipes.value) {
+        return [];
+      }
+      // TODO: Fix Type Declarations for RecipeSummary
+      return allRecipes.value.filter((recipe: RecipeSummary) => {
+        const includesTags = check(
+          state.includeTags,
+
+          // @ts-ignore
+          recipe.tags.map((x: Tag) => x.name),
+          state.tagFilter.matchAny,
+          state.tagFilter.exclude
         );
-        const includesCats = this.check(
-          this.includeCategories,
+        const includesCats = check(
+          state.includeCategories,
+
+          // @ts-ignore
+
           recipe.recipeCategory.map((x) => x.name),
-          this.catFilter.matchAny,
-          this.catFilter.exclude
+          state.catFilter.matchAny,
+          state.catFilter.exclude
         );
-        return [includesTags, includesCats].every((x) => x === true);
+        const includesFoods = check(
+          state.includeFoods,
+
+          // @ts-ignore
+          recipe.recipeIngredient.map((x) => x?.food?.name || ""),
+          state.foodFilter.matchAny,
+          state.foodFilter.exclude
+        );
+        return [includesTags, includesCats, includesFoods].every((x) => x === true);
       });
-    },
-    fuse() {
-      return new Fuse(this.filteredRecipes, this.options);
-    },
-    fuzzyRecipes() {
-      if (this.searchString.trim() === "") {
-        return this.filteredRecipes;
+    });
+
+    const fuse = computed(() => {
+      return new Fuse(filteredRecipes.value, state.options);
+    });
+
+    const fuzzyRecipes = computed(() => {
+      if (searchString.value.trim() === "") {
+        return filteredRecipes.value;
       }
-      const result = this.fuse.search(this.searchString.trim());
+      const result = fuse.value.search(searchString.value.trim());
       return result.map((x) => x.item);
-    },
-    isSearching() {
-      return this.searchString && this.searchString.length > 0;
-    },
-    showRecipes() {
-      if (this.sortedResults.length > 0) {
-        return this.sortedResults;
+    });
+
+    const showRecipes = computed(() => {
+      if (state.sortedResults.length > 0) {
+        return state.sortedResults;
       } else {
-        return this.fuzzyRecipes;
+        return fuzzyRecipes.value;
       }
-    },
-  },
-  methods: {
-    assignFuzzy(val) {
-      this.sortedResults = val;
-    },
-    check(filterBy, recipeList, matchAny, exclude) {
+    });
+
+    // ================================================================
+    // Utility Functions
+
+    function check(filterBy: string[], recipeList: string[], matchAny: boolean, exclude: boolean) {
       let isMatch = true;
       if (filterBy.length === 0) return isMatch;
 
@@ -179,14 +251,41 @@ export default defineComponent({
         return exclude ? !isMatch : isMatch;
       } else;
       return false;
-    },
+    }
 
-    updateTagParams(params) {
-      this.tagFilter = params;
-    },
-    updateCatParams(params) {
-      this.catFilter = params;
-    },
+    function assignFuzzy(val: RecipeSummary[]) {
+      state.sortedResults = val;
+    }
+    function updateTagParams(params: GenericFilter) {
+      state.tagFilter = params;
+    }
+    function updateCatParams(params: GenericFilter) {
+      state.catFilter = params;
+    }
+    function updateFoodParams(params: GenericFilter) {
+      state.foodFilter = params;
+    }
+
+    const { foods } = useFoods();
+
+    return {
+      ...toRefs(state),
+      allRecipes,
+      assignFuzzy,
+      assignSorted,
+      check,
+      foods,
+      searchString,
+      showRecipes,
+      updateCatParams,
+      updateFoodParams,
+      updateTagParams,
+    };
+  },
+  head() {
+    return {
+      title: this.$t("search.search") as string,
+    };
   },
 });
 </script>