Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 07:39:41 +02:00
Code Issues Releases Activity

feat: server side search (#2112) (#2117)

Browse source 
* feat: server side search API (#2112)

* refactor repository_recipes filter building

* add food filter to recipe repository page_all

* fix query type annotations

* working search

* add tests and make sure title matches are ordered correctly

* remove instruction matching again

* fix formatting and small issues

* fix another linting error

* make search test no rely on actual words

* fix failing postgres compiled query

* revise incorrectly ordered migration

* automatically extract latest migration version

* test migration orderes

* run type generators

* new search function

* wip: new search page

* sortable field options

* fix virtual scroll issue

* fix search casing bug

* finalize search filters/sorts

* remove old composable

* fix type errors

---------

Co-authored-by: Sören <fleshgolem@gmx.net>
This commit is contained in:
Hayden 2023-02-11 21:26:10 -09:00 • committed by GitHub
parent fc105dcebc
commit 71f8c1066a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 1057 additions and 822 deletions
Download patch file Download diff file Expand all files Collapse all files

40
frontend/components/Domain/Recipe/RecipeDialogSearch.vue
View file

@ -35,7 +35,7 @@
</v-card-actions>
<RecipeCardMobile
v-for="(recipe, index) in results.slice(0, 10)"
v-for="(recipe, index) in searchResults"
:key="index"
:tabindex="index"
class="ma-1 arrow-nav"
@ -55,9 +55,10 @@
<script lang="ts">
import { defineComponent, toRefs, reactive, ref, watch, useRoute } from "@nuxtjs/composition-api";
import { watchDebounced } from "@vueuse/shared";
import RecipeCardMobile from "./RecipeCardMobile.vue";
import { useRecipes, allRecipes, useRecipeSearch } from "~/composables/recipes";
import { RecipeSummary } from "~/lib/api/types/recipe";
import { useUserApi } from "~/composables/api";
const SELECTED_EVENT = "selected";
export default defineComponent({
components: {
@ -65,12 +66,10 @@ export default defineComponent({
},
setup(_, context) {
const { refreshRecipes } = useRecipes(true, false, true);
const state = reactive({
loading: false,
selectedIndex: -1,
searchResults: [],
searchResults: [] as RecipeSummary[],
});
// ===========================================================================
@ -78,14 +77,11 @@ export default defineComponent({
const dialog = ref(false);
// Reset or Grab Recipes on Change
watch(dialog, async (val) => {
watch(dialog, (val) => {
if (!val) {
search.value = "";
state.selectedIndex = -1;
} else if (allRecipes.value && allRecipes.value.length <= 0) {
state.loading = true;
await refreshRecipes();
state.loading = false;
state.searchResults = [];
}
});
@ -140,13 +136,33 @@ export default defineComponent({
dialog.value = true;
}
function close() {
dialog.value = false;
}
// ===========================================================================
// Basic Search
const api = useUserApi();
const search = ref("")
watchDebounced(search, async (val) => {
console.log(val)
if (val) {
state.loading = true;
// @ts-expect-error - inferred type is wrong
const { data, error } = await api.recipes.search({ search: val as string, page: 1, perPage: 10 });
if (error || !data) {
console.error(error);
state.searchResults = [];
} else {
state.searchResults = data.items;
}
state.loading = false;
}
}, { debounce: 500, maxWait: 1000 });
const { search, results } = useRecipeSearch(allRecipes);
// ===========================================================================
// Select Handler
@ -155,7 +171,7 @@ export default defineComponent({
context.emit(SELECTED_EVENT, recipe);
}
return { allRecipes, refreshRecipes, ...toRefs(state), dialog, open, close, handleSelect, search, results };
return { ...toRefs(state), dialog, open, close, handleSelect, search, };
},
});
</script>