mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 21:45:25 +02:00
* 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
GitHub
parent
fc105dcebc
commit
71f8c1066a
36 changed files with 1057 additions and 822 deletions
|
|
@ -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>
|
||||
|
|
|
|||
105
frontend/components/Domain/SearchFilter.vue
Normal file
105
frontend/components/Domain/SearchFilter.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-menu v-model="state.menu" offset-y bottom nudge-bottom="3" :close-on-content-click="false">
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-badge :value="selected.length > 0" small overlap color="primary" :content="selected.length">
|
||||
<v-btn small color="accent" dark v-bind="attrs" v-on="on">
|
||||
<slot></slot>
|
||||
</v-btn>
|
||||
</v-badge>
|
||||
</template>
|
||||
<v-card width="400">
|
||||
<v-card-text>
|
||||
<v-text-field v-model="state.search" class="mb-2" hide-details dense label="Search" clearable />
|
||||
<v-switch
|
||||
v-if="requireAll != undefined"
|
||||
v-model="requireAllValue"
|
||||
dense
|
||||
small
|
||||
:label="`${requireAll ? $tc('search.has-all') : $tc('search.has-any')}`"
|
||||
>
|
||||
</v-switch>
|
||||
<v-card v-if="filtered.length > 0" flat outlined>
|
||||
<v-virtual-scroll :items="filtered" height="300" item-height="51">
|
||||
<template #default="{ item }">
|
||||
<v-list-item :key="item.id" dense :value="item">
|
||||
<v-list-item-action>
|
||||
<v-checkbox v-model="selected" :value="item"></v-checkbox>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title> {{ item.name }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</v-card>
|
||||
<div v-else>
|
||||
<v-alert type="info" text> No results found </v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, computed } from "@nuxtjs/composition-api";
|
||||
|
||||
export interface SelectableItem {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
items: {
|
||||
type: Array as () => SelectableItem[],
|
||||
required: true,
|
||||
},
|
||||
value: {
|
||||
type: Array as () => any[],
|
||||
required: true,
|
||||
},
|
||||
requireAll: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const state = reactive({
|
||||
search: "",
|
||||
menu: false,
|
||||
});
|
||||
|
||||
const requireAllValue = computed({
|
||||
get: () => props.requireAll,
|
||||
set: (value) => {
|
||||
context.emit("update:requireAll", value);
|
||||
},
|
||||
});
|
||||
|
||||
const selected = computed({
|
||||
get: () => props.value as SelectableItem[],
|
||||
set: (value) => {
|
||||
context.emit("input", value);
|
||||
},
|
||||
});
|
||||
|
||||
const filtered = computed(() => {
|
||||
if (!state.search) {
|
||||
return props.items;
|
||||
}
|
||||
|
||||
return props.items.filter((item) => item.name.toLowerCase().includes(state.search.toLowerCase()));
|
||||
});
|
||||
|
||||
return {
|
||||
requireAllValue,
|
||||
state,
|
||||
selected,
|
||||
filtered,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -56,9 +56,8 @@ import { defineComponent, computed, ref, useContext } from "@nuxtjs/composition-
|
|||
import ShoppingListItemEditor from "./ShoppingListItemEditor.vue";
|
||||
import MultiPurposeLabel from "./MultiPurposeLabel.vue";
|
||||
import { ShoppingListItemOut } from "~/lib/api/types/group";
|
||||
import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
|
||||
import { MultiPurposeLabelOut, MultiPurposeLabelSummary } from "~/lib/api/types/labels";
|
||||
import { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
|
||||
import { MultiPurposeLabelSummary } from "~/lib/api/types/user";
|
||||
|
||||
interface actions {
|
||||
text: string;
|
||||
|
|
|
|||
|
|
@ -176,20 +176,19 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
// V-Model Support
|
||||
const drawer = computed({
|
||||
// V-Model Support
|
||||
const drawer = computed({
|
||||
get: () => {
|
||||
return props.value;
|
||||
},
|
||||
set: (val) => {
|
||||
if(window.innerWidth < 760 && state.hasOpenedBefore === false){
|
||||
state.hasOpenedBefore = true;
|
||||
val = false
|
||||
context.emit("input", val);
|
||||
}
|
||||
else{
|
||||
context.emit("input", val);
|
||||
}
|
||||
if (window.innerWidth < 760 && state.hasOpenedBefore === false) {
|
||||
state.hasOpenedBefore = true;
|
||||
val = false;
|
||||
context.emit("input", val);
|
||||
} else {
|
||||
context.emit("input", val);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,5 @@ export { useFraction } from "./use-fraction";
|
|||
export { useRecipe } from "./use-recipe";
|
||||
export { useRecipes, recentRecipes, allRecipes, useLazyRecipes } from "./use-recipes";
|
||||
export { parseIngredientText } from "./use-recipe-ingredients";
|
||||
export { useRecipeSearch } from "./use-recipe-search";
|
||||
export { useTools } from "./use-recipe-tools";
|
||||
export { useRecipeMeta } from "./use-recipe-meta";
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
import { computed, reactive, ref, Ref } from "@nuxtjs/composition-api";
|
||||
import Fuse from "fuse.js";
|
||||
import { Recipe } from "~/lib/api/types/recipe";
|
||||
|
||||
export const useRecipeSearch = (recipes: Ref<Recipe[] | null>) => {
|
||||
const localState = reactive({
|
||||
options: {
|
||||
ignoreLocation: true,
|
||||
shouldSort: true,
|
||||
threshold: 0.6,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
findAllMatches: true,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 2,
|
||||
ignoreFieldNorm: true,
|
||||
keys: [{ name: "name", weight: 1.3 }, { name: "description", weight: 1.2 }, "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 };
|
||||
};
|
||||
|
|
@ -3,12 +3,12 @@ export const LOCALES = [
|
|||
{
|
||||
name: "繁體中文 (Chinese traditional)",
|
||||
value: "zh-TW",
|
||||
progress: 68,
|
||||
progress: 50,
|
||||
},
|
||||
{
|
||||
name: "简体中文 (Chinese simplified)",
|
||||
value: "zh-CN",
|
||||
progress: 56,
|
||||
progress: 41,
|
||||
},
|
||||
{
|
||||
name: "Tiếng Việt (Vietnamese)",
|
||||
|
|
@ -18,72 +18,72 @@ export const LOCALES = [
|
|||
{
|
||||
name: "Українська (Ukrainian)",
|
||||
value: "uk-UA",
|
||||
progress: 99,
|
||||
progress: 88,
|
||||
},
|
||||
{
|
||||
name: "Türkçe (Turkish)",
|
||||
value: "tr-TR",
|
||||
progress: 47,
|
||||
progress: 41,
|
||||
},
|
||||
{
|
||||
name: "Svenska (Swedish)",
|
||||
value: "sv-SE",
|
||||
progress: 91,
|
||||
progress: 66,
|
||||
},
|
||||
{
|
||||
name: "српски (Serbian)",
|
||||
value: "sr-SP",
|
||||
progress: 11,
|
||||
progress: 8,
|
||||
},
|
||||
{
|
||||
name: "Slovenian",
|
||||
value: "sl-SI",
|
||||
progress: 94,
|
||||
progress: 73,
|
||||
},
|
||||
{
|
||||
name: "Slovak",
|
||||
value: "sk-SK",
|
||||
progress: 85,
|
||||
progress: 78,
|
||||
},
|
||||
{
|
||||
name: "Pусский (Russian)",
|
||||
value: "ru-RU",
|
||||
progress: 57,
|
||||
progress: 49,
|
||||
},
|
||||
{
|
||||
name: "Română (Romanian)",
|
||||
value: "ro-RO",
|
||||
progress: 3,
|
||||
progress: 7,
|
||||
},
|
||||
{
|
||||
name: "Português (Portuguese)",
|
||||
value: "pt-PT",
|
||||
progress: 9,
|
||||
progress: 27,
|
||||
},
|
||||
{
|
||||
name: "Português do Brasil (Brazilian Portuguese)",
|
||||
value: "pt-BR",
|
||||
progress: 40,
|
||||
progress: 31,
|
||||
},
|
||||
{
|
||||
name: "Polski (Polish)",
|
||||
value: "pl-PL",
|
||||
progress: 89,
|
||||
progress: 69,
|
||||
},
|
||||
{
|
||||
name: "Norsk (Norwegian)",
|
||||
value: "no-NO",
|
||||
progress: 87,
|
||||
progress: 73,
|
||||
},
|
||||
{
|
||||
name: "Nederlands (Dutch)",
|
||||
value: "nl-NL",
|
||||
progress: 97,
|
||||
progress: 81,
|
||||
},
|
||||
{
|
||||
name: "Lithuanian",
|
||||
value: "lt-LT",
|
||||
progress: 64,
|
||||
progress: 65,
|
||||
},
|
||||
{
|
||||
name: "한국어 (Korean)",
|
||||
|
|
@ -98,37 +98,37 @@ export const LOCALES = [
|
|||
{
|
||||
name: "Italiano (Italian)",
|
||||
value: "it-IT",
|
||||
progress: 82,
|
||||
progress: 81,
|
||||
},
|
||||
{
|
||||
name: "Magyar (Hungarian)",
|
||||
value: "hu-HU",
|
||||
progress: 77,
|
||||
progress: 60,
|
||||
},
|
||||
{
|
||||
name: "עברית (Hebrew)",
|
||||
value: "he-IL",
|
||||
progress: 33,
|
||||
progress: 24,
|
||||
},
|
||||
{
|
||||
name: "Français (French)",
|
||||
value: "fr-FR",
|
||||
progress: 99,
|
||||
progress: 100,
|
||||
},
|
||||
{
|
||||
name: "French, Canada",
|
||||
value: "fr-CA",
|
||||
progress: 84,
|
||||
progress: 61,
|
||||
},
|
||||
{
|
||||
name: "Suomi (Finnish)",
|
||||
value: "fi-FI",
|
||||
progress: 22,
|
||||
progress: 45,
|
||||
},
|
||||
{
|
||||
name: "Español (Spanish)",
|
||||
value: "es-ES",
|
||||
progress: 94,
|
||||
progress: 70,
|
||||
},
|
||||
{
|
||||
name: "American English",
|
||||
|
|
@ -138,12 +138,12 @@ export const LOCALES = [
|
|||
{
|
||||
name: "British English",
|
||||
value: "en-GB",
|
||||
progress: 31,
|
||||
progress: 23,
|
||||
},
|
||||
{
|
||||
name: "Ελληνικά (Greek)",
|
||||
value: "el-GR",
|
||||
progress: 70,
|
||||
progress: 51,
|
||||
},
|
||||
{
|
||||
name: "Deutsch (German)",
|
||||
|
|
@ -153,31 +153,31 @@ export const LOCALES = [
|
|||
{
|
||||
name: "Dansk (Danish)",
|
||||
value: "da-DK",
|
||||
progress: 99,
|
||||
progress: 76,
|
||||
},
|
||||
{
|
||||
name: "Čeština (Czech)",
|
||||
value: "cs-CZ",
|
||||
progress: 89,
|
||||
progress: 75,
|
||||
},
|
||||
{
|
||||
name: "Català (Catalan)",
|
||||
value: "ca-ES",
|
||||
progress: 95,
|
||||
progress: 69,
|
||||
},
|
||||
{
|
||||
name: "Bulgarian",
|
||||
value: "bg-BG",
|
||||
progress: 0,
|
||||
progress: 25,
|
||||
},
|
||||
{
|
||||
name: "العربية (Arabic)",
|
||||
value: "ar-SA",
|
||||
progress: 24,
|
||||
progress: 18,
|
||||
},
|
||||
{
|
||||
name: "Afrikaans (Afrikaans)",
|
||||
value: "af-ZA",
|
||||
progress: 9,
|
||||
progress: 6,
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -474,6 +474,8 @@
|
|||
"include": "Include",
|
||||
"max-results": "Max Results",
|
||||
"or": "Or",
|
||||
"has-any": "Has Any",
|
||||
"has-all": "Has All",
|
||||
"results": "Results",
|
||||
"search": "Search",
|
||||
"search-mealie": "Search Mealie (press /)",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
const parts = {
|
||||
host: "http://localhost.com",
|
||||
prefix: "/api",
|
||||
prefix: "",
|
||||
};
|
||||
|
||||
export function overrideParts(host: string, prefix: string) {
|
||||
|
|
|
|||
|
|
@ -4,21 +4,21 @@ import { route } from ".";
|
|||
describe("UrlBuilder", () => {
|
||||
it("basic query parameter", () => {
|
||||
const result = route("/test", { a: "b" });
|
||||
expect(result).toBe("/api/test?a=b");
|
||||
expect(result).toBe("/test?a=b");
|
||||
});
|
||||
|
||||
it("multiple query parameters", () => {
|
||||
const result = route("/test", { a: "b", c: "d" });
|
||||
expect(result).toBe("/api/test?a=b&c=d");
|
||||
expect(result).toBe("/test?a=b&c=d");
|
||||
});
|
||||
|
||||
it("no query parameters", () => {
|
||||
const result = route("/test");
|
||||
expect(result).toBe("/api/test");
|
||||
expect(result).toBe("/test");
|
||||
});
|
||||
|
||||
it("list-like query parameters", () => {
|
||||
const result = route("/test", { a: ["b", "c"] });
|
||||
expect(result).toBe("/api/test?a=b&a=c");
|
||||
expect(result).toBe("/test?a=b&a=c");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -98,7 +98,6 @@ export interface RecipeSummary {
|
|||
tools?: RecipeTool[];
|
||||
rating?: number;
|
||||
orgURL?: string;
|
||||
recipeIngredient?: RecipeIngredient[];
|
||||
dateAdded?: string;
|
||||
dateUpdated?: string;
|
||||
createdAt?: string;
|
||||
|
|
@ -121,65 +120,6 @@ export interface RecipeTool {
|
|||
slug: string;
|
||||
onHand?: boolean;
|
||||
}
|
||||
export interface RecipeIngredient {
|
||||
title?: string;
|
||||
note?: string;
|
||||
unit?: IngredientUnit | CreateIngredientUnit;
|
||||
food?: IngredientFood | CreateIngredientFood;
|
||||
disableAmount?: boolean;
|
||||
quantity?: number;
|
||||
originalText?: string;
|
||||
referenceId?: string;
|
||||
}
|
||||
export interface IngredientUnit {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
fraction?: boolean;
|
||||
abbreviation?: string;
|
||||
useAbbreviation?: boolean;
|
||||
id: string;
|
||||
createdAt?: string;
|
||||
updateAt?: string;
|
||||
}
|
||||
export interface CreateIngredientUnit {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
fraction?: boolean;
|
||||
abbreviation?: string;
|
||||
useAbbreviation?: boolean;
|
||||
}
|
||||
export interface IngredientFood {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
labelId?: string;
|
||||
id: string;
|
||||
label?: MultiPurposeLabelSummary;
|
||||
createdAt?: string;
|
||||
updateAt?: string;
|
||||
}
|
||||
export interface MultiPurposeLabelSummary {
|
||||
name: string;
|
||||
color?: string;
|
||||
groupId: string;
|
||||
id: string;
|
||||
}
|
||||
export interface CreateIngredientFood {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
labelId?: string;
|
||||
}
|
||||
export interface CustomPageImport {
|
||||
name: string;
|
||||
status: boolean;
|
||||
|
|
|
|||
|
|
@ -83,7 +83,6 @@ export interface RecipeSummary {
|
|||
tools?: RecipeTool[];
|
||||
rating?: number;
|
||||
orgURL?: string;
|
||||
recipeIngredient?: RecipeIngredient[];
|
||||
dateAdded?: string;
|
||||
dateUpdated?: string;
|
||||
createdAt?: string;
|
||||
|
|
@ -100,65 +99,6 @@ export interface RecipeTag {
|
|||
name: string;
|
||||
slug: string;
|
||||
}
|
||||
export interface RecipeIngredient {
|
||||
title?: string;
|
||||
note?: string;
|
||||
unit?: IngredientUnit | CreateIngredientUnit;
|
||||
food?: IngredientFood | CreateIngredientFood;
|
||||
disableAmount?: boolean;
|
||||
quantity?: number;
|
||||
originalText?: string;
|
||||
referenceId?: string;
|
||||
}
|
||||
export interface IngredientUnit {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
fraction?: boolean;
|
||||
abbreviation?: string;
|
||||
useAbbreviation?: boolean;
|
||||
id: string;
|
||||
createdAt?: string;
|
||||
updateAt?: string;
|
||||
}
|
||||
export interface CreateIngredientUnit {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
fraction?: boolean;
|
||||
abbreviation?: string;
|
||||
useAbbreviation?: boolean;
|
||||
}
|
||||
export interface IngredientFood {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
labelId?: string;
|
||||
id: string;
|
||||
label?: MultiPurposeLabelSummary;
|
||||
createdAt?: string;
|
||||
updateAt?: string;
|
||||
}
|
||||
export interface MultiPurposeLabelSummary {
|
||||
name: string;
|
||||
color?: string;
|
||||
groupId: string;
|
||||
id: string;
|
||||
}
|
||||
export interface CreateIngredientFood {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
labelId?: string;
|
||||
}
|
||||
export interface SaveCookBook {
|
||||
name: string;
|
||||
description?: string;
|
||||
|
|
|
|||
|
|
@ -436,7 +436,6 @@ export interface RecipeSummary {
|
|||
tools?: RecipeTool[];
|
||||
rating?: number;
|
||||
orgURL?: string;
|
||||
recipeIngredient?: RecipeIngredient[];
|
||||
dateAdded?: string;
|
||||
dateUpdated?: string;
|
||||
createdAt?: string;
|
||||
|
|
@ -459,34 +458,6 @@ export interface RecipeTool {
|
|||
slug: string;
|
||||
onHand?: boolean;
|
||||
}
|
||||
export interface RecipeIngredient {
|
||||
title?: string;
|
||||
note?: string;
|
||||
unit?: IngredientUnit | CreateIngredientUnit;
|
||||
food?: IngredientFood | CreateIngredientFood;
|
||||
disableAmount?: boolean;
|
||||
quantity?: number;
|
||||
originalText?: string;
|
||||
referenceId?: string;
|
||||
}
|
||||
export interface CreateIngredientUnit {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
fraction?: boolean;
|
||||
abbreviation?: string;
|
||||
useAbbreviation?: boolean;
|
||||
}
|
||||
export interface CreateIngredientFood {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
labelId?: string;
|
||||
}
|
||||
export interface ShoppingListRemoveRecipeParams {
|
||||
recipeDecrementQuantity?: number;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@ export interface ReadPlanEntry {
|
|||
recipeId?: string;
|
||||
id: number;
|
||||
groupId: string;
|
||||
userId?: string;
|
||||
recipe?: RecipeSummary;
|
||||
}
|
||||
export interface RecipeSummary {
|
||||
|
|
@ -113,7 +114,6 @@ export interface RecipeSummary {
|
|||
tools?: RecipeTool[];
|
||||
rating?: number;
|
||||
orgURL?: string;
|
||||
recipeIngredient?: RecipeIngredient[];
|
||||
dateAdded?: string;
|
||||
dateUpdated?: string;
|
||||
createdAt?: string;
|
||||
|
|
@ -136,65 +136,6 @@ export interface RecipeTool {
|
|||
slug: string;
|
||||
onHand?: boolean;
|
||||
}
|
||||
export interface RecipeIngredient {
|
||||
title?: string;
|
||||
note?: string;
|
||||
unit?: IngredientUnit | CreateIngredientUnit;
|
||||
food?: IngredientFood | CreateIngredientFood;
|
||||
disableAmount?: boolean;
|
||||
quantity?: number;
|
||||
originalText?: string;
|
||||
referenceId?: string;
|
||||
}
|
||||
export interface IngredientUnit {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
fraction?: boolean;
|
||||
abbreviation?: string;
|
||||
useAbbreviation?: boolean;
|
||||
id: string;
|
||||
createdAt?: string;
|
||||
updateAt?: string;
|
||||
}
|
||||
export interface CreateIngredientUnit {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
fraction?: boolean;
|
||||
abbreviation?: string;
|
||||
useAbbreviation?: boolean;
|
||||
}
|
||||
export interface IngredientFood {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
labelId?: string;
|
||||
id: string;
|
||||
label?: MultiPurposeLabelSummary;
|
||||
createdAt?: string;
|
||||
updateAt?: string;
|
||||
}
|
||||
export interface MultiPurposeLabelSummary {
|
||||
name: string;
|
||||
color?: string;
|
||||
groupId: string;
|
||||
id: string;
|
||||
}
|
||||
export interface CreateIngredientFood {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
labelId?: string;
|
||||
}
|
||||
export interface SavePlanEntry {
|
||||
date: string;
|
||||
entryType?: PlanEntryType & string;
|
||||
|
|
@ -202,6 +143,7 @@ export interface SavePlanEntry {
|
|||
text?: string;
|
||||
recipeId?: string;
|
||||
groupId: string;
|
||||
userId?: string;
|
||||
}
|
||||
export interface ShoppingListIn {
|
||||
name: string;
|
||||
|
|
@ -222,4 +164,5 @@ export interface UpdatePlanEntry {
|
|||
recipeId?: string;
|
||||
id: number;
|
||||
groupId: string;
|
||||
userId?: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
|
||||
export type ExportTypes = "json";
|
||||
export type RegisteredParser = "nlp" | "brute";
|
||||
export type OrderDirection = "asc" | "desc";
|
||||
export type TimelineEventType = "system" | "info" | "comment";
|
||||
|
||||
export interface AssignCategories {
|
||||
|
|
@ -206,12 +205,12 @@ export interface Recipe {
|
|||
tools?: RecipeTool[];
|
||||
rating?: number;
|
||||
orgURL?: string;
|
||||
recipeIngredient?: RecipeIngredient[];
|
||||
dateAdded?: string;
|
||||
dateUpdated?: string;
|
||||
createdAt?: string;
|
||||
updateAt?: string;
|
||||
lastMade?: string;
|
||||
recipeIngredient?: RecipeIngredient[];
|
||||
recipeInstructions?: RecipeStep[];
|
||||
nutrition?: Nutrition;
|
||||
settings?: RecipeSettings;
|
||||
|
|
@ -282,7 +281,6 @@ export interface RecipeSummary {
|
|||
tools?: RecipeTool[];
|
||||
rating?: number;
|
||||
orgURL?: string;
|
||||
recipeIngredient?: RecipeIngredient[];
|
||||
dateAdded?: string;
|
||||
dateUpdated?: string;
|
||||
createdAt?: string;
|
||||
|
|
@ -305,14 +303,6 @@ export interface RecipeCommentUpdate {
|
|||
export interface RecipeDuplicate {
|
||||
name?: string;
|
||||
}
|
||||
export interface RecipePaginationQuery {
|
||||
page?: number;
|
||||
perPage?: number;
|
||||
orderBy?: string;
|
||||
orderDirection?: OrderDirection & string;
|
||||
queryFilter?: string;
|
||||
loadFood?: boolean;
|
||||
}
|
||||
export interface RecipeShareToken {
|
||||
recipeId: string;
|
||||
expiresAt?: string;
|
||||
|
|
@ -456,10 +446,3 @@ export interface UnitFoodBase {
|
|||
export interface UpdateImageResponse {
|
||||
image: string;
|
||||
}
|
||||
export interface PaginationQuery {
|
||||
page?: number;
|
||||
perPage?: number;
|
||||
orderBy?: string;
|
||||
orderDirection?: OrderDirection & string;
|
||||
queryFilter?: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -188,7 +188,6 @@ export interface RecipeSummary {
|
|||
tools?: RecipeTool[];
|
||||
rating?: number;
|
||||
orgURL?: string;
|
||||
recipeIngredient?: RecipeIngredient[];
|
||||
dateAdded?: string;
|
||||
dateUpdated?: string;
|
||||
createdAt?: string;
|
||||
|
|
@ -211,65 +210,6 @@ export interface RecipeTool {
|
|||
slug: string;
|
||||
onHand?: boolean;
|
||||
}
|
||||
export interface RecipeIngredient {
|
||||
title?: string;
|
||||
note?: string;
|
||||
unit?: IngredientUnit | CreateIngredientUnit;
|
||||
food?: IngredientFood | CreateIngredientFood;
|
||||
disableAmount?: boolean;
|
||||
quantity?: number;
|
||||
originalText?: string;
|
||||
referenceId?: string;
|
||||
}
|
||||
export interface IngredientUnit {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
fraction?: boolean;
|
||||
abbreviation?: string;
|
||||
useAbbreviation?: boolean;
|
||||
id: string;
|
||||
createdAt?: string;
|
||||
updateAt?: string;
|
||||
}
|
||||
export interface CreateIngredientUnit {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
fraction?: boolean;
|
||||
abbreviation?: string;
|
||||
useAbbreviation?: boolean;
|
||||
}
|
||||
export interface IngredientFood {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
labelId?: string;
|
||||
id: string;
|
||||
label?: MultiPurposeLabelSummary;
|
||||
createdAt?: string;
|
||||
updateAt?: string;
|
||||
}
|
||||
export interface MultiPurposeLabelSummary {
|
||||
name: string;
|
||||
color?: string;
|
||||
groupId: string;
|
||||
id: string;
|
||||
}
|
||||
export interface CreateIngredientFood {
|
||||
name: string;
|
||||
description?: string;
|
||||
extras?: {
|
||||
[k: string]: unknown;
|
||||
};
|
||||
labelId?: string;
|
||||
}
|
||||
export interface UserIn {
|
||||
username?: string;
|
||||
fullName?: string;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { BaseCRUDAPI } from "../../base/base-clients";
|
||||
import { route } from "../../base";
|
||||
import { CommentsApi } from "./recipe-comments";
|
||||
import { RecipeShareApi } from "./recipe-share";
|
||||
|
||||
import {
|
||||
Recipe,
|
||||
CreateRecipe,
|
||||
|
|
@ -52,6 +52,33 @@ const routes = {
|
|||
recipesSlugTimelineEventId: (slug: string, id: string) => `${prefix}/recipes/${slug}/timeline/events/${id}`,
|
||||
};
|
||||
|
||||
export type RecipeSearchQuery ={
|
||||
search: string;
|
||||
orderDirection? : "asc" | "desc";
|
||||
groupId?: string;
|
||||
|
||||
queryFilter?: string;
|
||||
|
||||
cookbook?: string;
|
||||
|
||||
categories?: string[];
|
||||
requireAllCategories?: boolean;
|
||||
|
||||
tags?: string[];
|
||||
requireAllTags?: boolean;
|
||||
|
||||
tools?: string[];
|
||||
requireAllTools?: boolean;
|
||||
|
||||
foods?: string[];
|
||||
requireAllFoods?: boolean;
|
||||
|
||||
page: number;
|
||||
perPage: number;
|
||||
orderBy?: string;
|
||||
}
|
||||
|
||||
|
||||
export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
|
||||
baseRoute: string = routes.recipesBase;
|
||||
itemRoute = routes.recipesRecipeSlug;
|
||||
|
|
@ -66,6 +93,10 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
|
|||
this.share = new RecipeShareApi(requests);
|
||||
}
|
||||
|
||||
async search(rsq : RecipeSearchQuery) {
|
||||
return await this.requests.get<PaginationData<Recipe>>(route(routes.recipesBase, rsq));
|
||||
}
|
||||
|
||||
async getAllByCategory(categories: string[]) {
|
||||
return await this.requests.get<Recipe[]>(routes.recipesCategory, {
|
||||
categories,
|
||||
|
|
|
|||
|
|
@ -94,11 +94,11 @@ import {
|
|||
IngredientFood,
|
||||
IngredientUnit,
|
||||
ParsedIngredient,
|
||||
RecipeIngredient,
|
||||
} from "~/lib/api/types/recipe";
|
||||
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useRecipe } from "~/composables/recipes";
|
||||
import { RecipeIngredient } from "~/lib/api/types/admin";
|
||||
import { useFoodData, useFoodStore, useUnitStore } from "~/composables/store";
|
||||
import { Parser } from "~/lib/api/user/recipes/recipe";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,309 +1,449 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<v-container fluid class="pa-0">
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
<v-container fluid class="pa-0">
|
||||
<div class="search-container py-8">
|
||||
<form class="search-box" @submit.prevent="search">
|
||||
<div class="d-flex justify-center my-2">
|
||||
<v-text-field
|
||||
v-model="searchString"
|
||||
v-model="state.search"
|
||||
outlined
|
||||
autofocus
|
||||
color="primary accent-3"
|
||||
:placeholder="$t('search.search-placeholder')"
|
||||
:prepend-inner-icon="$globals.icons.search"
|
||||
hide-details
|
||||
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
|
||||
color="primary"
|
||||
:placeholder="$tc('search.search-placeholder')"
|
||||
:prepend-inner-icon="$globals.icons.search"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<div class="search-row">
|
||||
<!-- Sort Options -->
|
||||
<v-menu offset-y nudge-bottom="3">
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn small color="accent" :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on">
|
||||
<v-icon :left="!$vuetify.breakpoint.xsOnly">
|
||||
{{ state.orderDirection === "asc" ? $globals.icons.sortAscending : $globals.icons.sortDescending }}
|
||||
</v-icon>
|
||||
{{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-list>
|
||||
<v-list-item @click="toggleOrderDirection()">
|
||||
<v-icon left>
|
||||
{{ $globals.icons.sort }}
|
||||
</v-icon>
|
||||
<v-list-item-title>
|
||||
{{ state.orderDirection === "asc" ? "Sort Descending" : "Sort Ascending" }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
v-for="v in sortable"
|
||||
:key="v.name"
|
||||
:input-value="state.orderBy === v.value"
|
||||
@click="state.orderBy = v.value"
|
||||
>
|
||||
<v-icon left>
|
||||
{{ v.icon }}
|
||||
</v-icon>
|
||||
<v-list-item-title>{{ v.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
|
||||
<div>
|
||||
<v-switch
|
||||
v-model="advanced"
|
||||
color="info"
|
||||
class="ma-0 pa-0"
|
||||
:label="$t('search.advanced')"
|
||||
@input="advanced = !advanced"
|
||||
@click="advanced = !advanced"
|
||||
/>
|
||||
<v-expand-transition>
|
||||
<v-row v-show="advanced" dense class="my-0 dense flex-row align-center justify-space-around">
|
||||
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
|
||||
<RecipeOrganizerSelector
|
||||
v-model="includeCategories"
|
||||
:input-attrs="{
|
||||
solo: true,
|
||||
hideDetails: true,
|
||||
dense: false,
|
||||
}"
|
||||
:show-add="false"
|
||||
:return-object="false"
|
||||
selector-type="categories"
|
||||
/>
|
||||
<RecipeSearchFilterSelector class="mb-1" @update="updateCatParams" />
|
||||
</v-col>
|
||||
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
|
||||
<RecipeOrganizerSelector
|
||||
v-model="includeTags"
|
||||
:input-attrs="{
|
||||
solo: true,
|
||||
hideDetails: true,
|
||||
dense: false,
|
||||
}"
|
||||
:show-add="false"
|
||||
:return-object="false"
|
||||
selector-type="tags"
|
||||
/>
|
||||
<RecipeSearchFilterSelector class="mb-1" @update="updateTagParams" />
|
||||
</v-col>
|
||||
<v-col cols="12" class="d-flex flex-wrap flex-md-nowrap justify-center" style="gap: 0.8rem">
|
||||
<v-autocomplete
|
||||
v-model="includeFoods"
|
||||
chips
|
||||
hide-details
|
||||
deletable-chips
|
||||
solo
|
||||
multiple
|
||||
:items="foods || []"
|
||||
item-text="name"
|
||||
:prepend-inner-icon="$globals.icons.foods"
|
||||
:label="$t('general.foods')"
|
||||
>
|
||||
<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>
|
||||
<RecipeSearchFilterSelector class="mb-1" @update="updateFoodParams" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expand-transition>
|
||||
</div>
|
||||
</v-container>
|
||||
<v-container class="px-0 mt-6">
|
||||
<!-- Category Filter -->
|
||||
<SearchFilter
|
||||
v-if="categories"
|
||||
v-model="selectedCategories"
|
||||
:require-all.sync="state.requireAllCategories"
|
||||
:items="categories"
|
||||
>
|
||||
<v-icon left>
|
||||
{{ $globals.icons.tags }}
|
||||
</v-icon>
|
||||
{{ $t("category.categories") }}
|
||||
</SearchFilter>
|
||||
|
||||
<!-- Tag Filter -->
|
||||
<SearchFilter v-if="tags" v-model="selectedTags" :require-all.sync="state.requireAllTags" :items="tags">
|
||||
<v-icon left>
|
||||
{{ $globals.icons.tags }}
|
||||
</v-icon>
|
||||
{{ $t("tag.tags") }}
|
||||
</SearchFilter>
|
||||
|
||||
<!-- Tool Filter -->
|
||||
<SearchFilter v-if="tools" v-model="selectedTools" :require-all.sync="state.requireAllTools" :items="tools">
|
||||
<v-icon left>
|
||||
{{ $globals.icons.tools }}
|
||||
</v-icon>
|
||||
{{ $t("tool.tools") }}
|
||||
</SearchFilter>
|
||||
|
||||
<!-- Food Filter -->
|
||||
<SearchFilter v-if="foods" v-model="selectedFoods" :require-all.sync="state.requireAllFoods" :items="foods">
|
||||
<v-icon left>
|
||||
{{ $globals.icons.foods }}
|
||||
</v-icon>
|
||||
{{ $t("general.foods") }}
|
||||
</SearchFilter>
|
||||
|
||||
<!-- Settings -->
|
||||
<v-menu offset-y bottom left nudge-bottom="3" :close-on-content-click="false">
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn class="ml-auto" small color="accent" dark v-bind="attrs" v-on="on">
|
||||
<v-icon small>
|
||||
{{ $globals.icons.cog }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
v-model="state.maxResults"
|
||||
class="mt-0 pt-0"
|
||||
:label="$tc('search.max-results')"
|
||||
type="number"
|
||||
outlined
|
||||
dense
|
||||
/>
|
||||
<v-btn block color="primary" @click="reset">
|
||||
{{ $tc("general.reset") }}
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</div>
|
||||
<div class="search-button-container">
|
||||
<v-btn :loading="state.loading" x-large color="primary" type="submit" block>
|
||||
<v-icon left>
|
||||
{{ $globals.icons.search }}
|
||||
</v-icon>
|
||||
{{ $tc("search.search") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<v-container class="mt-6 px-md-6">
|
||||
<RecipeCardSection
|
||||
class="mt-n5"
|
||||
:icon="$globals.icons.search"
|
||||
:title="$tc('search.results')"
|
||||
:recipes="showRecipes.slice(0, maxResults)"
|
||||
@sort="assignFuzzy"
|
||||
:recipes="state.results"
|
||||
/>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Fuse from "fuse.js";
|
||||
import { defineComponent, toRefs, computed, reactive } from "@nuxtjs/composition-api";
|
||||
import RecipeSearchFilterSelector from "~/components/Domain/Recipe/RecipeSearchFilterSelector.vue";
|
||||
import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
|
||||
import { ref, defineComponent, useRouter, onMounted, useContext } from "@nuxtjs/composition-api";
|
||||
import SearchFilter from "~/components/Domain/SearchFilter.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
|
||||
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
|
||||
import { useRecipes, allRecipes } from "~/composables/recipes";
|
||||
import { RecipeSummary } from "~/lib/api/types/recipe";
|
||||
import { useRouteQuery } from "~/composables/use-router";
|
||||
import { RecipeTag } from "~/lib/api/types/user";
|
||||
import { useFoodStore } from "~/composables/store";
|
||||
|
||||
interface GenericFilter {
|
||||
exclude: boolean;
|
||||
matchAny: boolean;
|
||||
}
|
||||
import { IngredientFood, RecipeCategory, RecipeSummary, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
|
||||
import { NoUndefinedField } from "~/lib/api/types/non-generated";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
RecipeOrganizerSelector,
|
||||
RecipeSearchFilterSelector,
|
||||
RecipeCardSection,
|
||||
},
|
||||
components: { SearchFilter, RecipeCardSection },
|
||||
setup() {
|
||||
const { assignSorted } = useRecipes(true, true, true);
|
||||
const router = useRouter();
|
||||
const api = useUserApi();
|
||||
const { $globals, i18n } = useContext();
|
||||
|
||||
// ================================================================
|
||||
// Advanced Toggle
|
||||
|
||||
const advancedQp = useRouteQuery("advanced");
|
||||
const advanced = computed({
|
||||
get: () => advancedQp.value === "true",
|
||||
set: (val) => {
|
||||
advancedQp.value = val ? "true" : "false";
|
||||
},
|
||||
});
|
||||
|
||||
// ================================================================
|
||||
// Global State
|
||||
|
||||
const state = reactive({
|
||||
const state = ref({
|
||||
loading: false,
|
||||
search: "",
|
||||
orderBy: "created_at",
|
||||
orderDirection: "desc" as "asc" | "desc",
|
||||
maxResults: 21,
|
||||
results: [] as RecipeSummary[],
|
||||
|
||||
// Filters
|
||||
includeCategories: [] as string[],
|
||||
catFilter: {
|
||||
exclude: false,
|
||||
matchAny: false,
|
||||
} as GenericFilter,
|
||||
|
||||
includeTags: [] as string[],
|
||||
tagFilter: {
|
||||
exclude: false,
|
||||
matchAny: false,
|
||||
} as GenericFilter,
|
||||
|
||||
includeFoods: [] as string[],
|
||||
foodFilter: {
|
||||
exclude: false,
|
||||
matchAny: false,
|
||||
} as GenericFilter,
|
||||
|
||||
// Recipes Holders
|
||||
searchResults: [] as RecipeSummary[],
|
||||
sortedResults: [] as RecipeSummary[],
|
||||
|
||||
// Search Options
|
||||
options: {
|
||||
ignoreLocation: true,
|
||||
shouldSort: true,
|
||||
threshold: 0.6,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
findAllMatches: true,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 2,
|
||||
ignoreFieldNorm: true,
|
||||
keys: [{ name: "name", weight: 1.3 }, { name: "description", weight: 1.2 }, "recipeIngredient.note", "recipeIngredient.food.name"],
|
||||
},
|
||||
// and/or
|
||||
requireAllCategories: false,
|
||||
requireAllTags: false,
|
||||
requireAllTools: false,
|
||||
requireAllFoods: false,
|
||||
});
|
||||
|
||||
// ================================================================
|
||||
// Search Functions
|
||||
const categories = useCategoryStore();
|
||||
const selectedCategories = ref<NoUndefinedField<RecipeCategory>[]>([]);
|
||||
|
||||
const searchString = useRouteQuery("q", "");
|
||||
const foods = useFoodStore();
|
||||
const selectedFoods = ref<IngredientFood[]>([]);
|
||||
|
||||
const filteredRecipes = computed(() => {
|
||||
if (!allRecipes.value) {
|
||||
return [];
|
||||
const tags = useTagStore();
|
||||
const selectedTags = ref<NoUndefinedField<RecipeTag>[]>([]);
|
||||
|
||||
const tools = useToolStore();
|
||||
const selectedTools = ref<NoUndefinedField<RecipeTool>[]>([]);
|
||||
|
||||
function reset() {
|
||||
state.value.search = "";
|
||||
state.value.maxResults = 21;
|
||||
state.value.orderBy = "created_at";
|
||||
state.value.orderDirection = "desc";
|
||||
state.value.requireAllCategories = false;
|
||||
state.value.requireAllTags = false;
|
||||
state.value.requireAllTools = false;
|
||||
state.value.requireAllFoods = false;
|
||||
selectedCategories.value = [];
|
||||
selectedFoods.value = [];
|
||||
selectedTags.value = [];
|
||||
selectedTools.value = [];
|
||||
|
||||
router.push({
|
||||
query: {},
|
||||
});
|
||||
|
||||
search();
|
||||
}
|
||||
|
||||
function toggleOrderDirection() {
|
||||
state.value.orderDirection = state.value.orderDirection === "asc" ? "desc" : "asc";
|
||||
}
|
||||
|
||||
function toIDArray(array: { id: string }[]) {
|
||||
return array.map((item) => item.id);
|
||||
}
|
||||
|
||||
async function search() {
|
||||
state.value.loading = true;
|
||||
await router.push({
|
||||
query: {
|
||||
categories: toIDArray(selectedCategories.value),
|
||||
foods: toIDArray(selectedFoods.value),
|
||||
tags: toIDArray(selectedTags.value),
|
||||
tools: toIDArray(selectedTools.value),
|
||||
|
||||
// Only add the query param if it's or not default
|
||||
...{
|
||||
search: state.value.search === "" ? undefined : state.value.search,
|
||||
maxResults: state.value.maxResults === 21 ? undefined : state.value.maxResults.toString(),
|
||||
orderBy: state.value.orderBy === "createdAt" ? undefined : state.value.orderBy,
|
||||
orderDirection: state.value.orderDirection === "desc" ? undefined : state.value.orderDirection,
|
||||
requireAllCategories: state.value.requireAllCategories ? "true" : undefined,
|
||||
requireAllTags: state.value.requireAllTags ? "true" : undefined,
|
||||
requireAllTools: state.value.requireAllTools ? "true" : undefined,
|
||||
requireAllFoods: state.value.requireAllFoods ? "true" : undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const { data, error } = await api.recipes.search({
|
||||
search: state.value.search,
|
||||
page: 1,
|
||||
orderBy: state.value.orderBy,
|
||||
orderDirection: state.value.orderDirection,
|
||||
perPage: state.value.maxResults,
|
||||
categories: toIDArray(selectedCategories.value),
|
||||
foods: toIDArray(selectedFoods.value),
|
||||
tags: toIDArray(selectedTags.value),
|
||||
tools: toIDArray(selectedTools.value),
|
||||
|
||||
requireAllCategories: state.value.requireAllCategories,
|
||||
requireAllTags: state.value.requireAllTags,
|
||||
requireAllTools: state.value.requireAllTools,
|
||||
requireAllFoods: state.value.requireAllFoods,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
state.value.loading = false;
|
||||
state.value.results = [];
|
||||
return;
|
||||
}
|
||||
// TODO: Fix Type Declarations for RecipeSummary
|
||||
return allRecipes.value.filter((recipe: RecipeSummary) => {
|
||||
const includesTags = check(
|
||||
state.includeTags,
|
||||
|
||||
// @ts-ignore See above
|
||||
recipe.tags.map((x: RecipeTag) => x.name),
|
||||
state.tagFilter.matchAny,
|
||||
state.tagFilter.exclude
|
||||
);
|
||||
const includesCats = check(
|
||||
state.includeCategories,
|
||||
if (data) {
|
||||
state.value.results = data.items;
|
||||
}
|
||||
|
||||
// @ts-ignore See above
|
||||
recipe.recipeCategory.map((x) => x.name),
|
||||
state.catFilter.matchAny,
|
||||
state.catFilter.exclude
|
||||
);
|
||||
const includesFoods = check(
|
||||
state.includeFoods,
|
||||
state.value.loading = false;
|
||||
}
|
||||
|
||||
// @ts-ignore See above
|
||||
recipe.recipeIngredient.map((x) => x?.food?.name || ""),
|
||||
state.foodFilter.matchAny,
|
||||
state.foodFilter.exclude
|
||||
function waitUntilAndExecute(
|
||||
condition: () => boolean,
|
||||
callback: () => void,
|
||||
opts = { timeout: 2000, interval: 500 }
|
||||
): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const state = {
|
||||
timeout: undefined as number | undefined,
|
||||
interval: undefined as number | undefined,
|
||||
};
|
||||
|
||||
const check = () => {
|
||||
if (condition()) {
|
||||
clearInterval(state.interval);
|
||||
clearTimeout(state.timeout);
|
||||
callback();
|
||||
resolve();
|
||||
}
|
||||
};
|
||||
|
||||
// For some reason these were returning NodeJS.Timeout
|
||||
state.interval = setInterval(check, opts.interval) as unknown as number;
|
||||
state.timeout = setTimeout(() => {
|
||||
clearInterval(state.interval);
|
||||
reject(new Error("Timeout"));
|
||||
}, opts.timeout) as unknown as number;
|
||||
});
|
||||
}
|
||||
|
||||
const sortable = [
|
||||
{
|
||||
icon: $globals.icons.orderAlphabeticalAscending,
|
||||
name: i18n.tc("general.sort-alphabetically"),
|
||||
value: "name",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.newBox,
|
||||
name: i18n.tc("general.created"),
|
||||
value: "created_at",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.chefHat,
|
||||
name: i18n.tc("general.last-made"),
|
||||
value: "time",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.star,
|
||||
name: i18n.tc("general.rating"),
|
||||
value: "rating",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.update,
|
||||
name: i18n.tc("general.updated"),
|
||||
value: "updated_at",
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
// Hydrate Search
|
||||
// wait for stores to be hydrated
|
||||
|
||||
// read query params
|
||||
const query = router.currentRoute.query;
|
||||
|
||||
if (query.search) {
|
||||
state.value.search = query.search as string;
|
||||
}
|
||||
|
||||
if (query.maxResults) {
|
||||
state.value.maxResults = parseInt(query.maxResults as string);
|
||||
}
|
||||
|
||||
if (query.orderBy) {
|
||||
state.value.orderBy = query.orderBy as string;
|
||||
}
|
||||
|
||||
if (query.orderDirection) {
|
||||
state.value.orderDirection = query.orderDirection as "asc" | "desc";
|
||||
}
|
||||
|
||||
const promises: Promise<void>[] = [];
|
||||
|
||||
if (query.categories) {
|
||||
promises.push(
|
||||
waitUntilAndExecute(
|
||||
() => categories.items.value.length > 0,
|
||||
() => {
|
||||
const result = categories.items.value.filter((item) =>
|
||||
(query.categories as string[]).includes(item.id as string)
|
||||
);
|
||||
|
||||
selectedCategories.value = result as NoUndefinedField<RecipeCategory>[];
|
||||
}
|
||||
)
|
||||
);
|
||||
return [includesTags, includesCats, includesFoods].every((x) => x === true);
|
||||
}
|
||||
|
||||
if (query.foods) {
|
||||
promises.push(
|
||||
waitUntilAndExecute(
|
||||
() => {
|
||||
if (foods.foods.value) {
|
||||
return foods.foods.value.length > 0;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
() => {
|
||||
const result = foods.foods.value?.filter((item) => (query.foods as string[]).includes(item.id));
|
||||
selectedFoods.value = result ?? [];
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (query.tags) {
|
||||
promises.push(
|
||||
waitUntilAndExecute(
|
||||
() => tags.items.value.length > 0,
|
||||
() => {
|
||||
const result = tags.items.value.filter((item) => (query.tags as string[]).includes(item.id as string));
|
||||
selectedTags.value = result as NoUndefinedField<RecipeTag>[];
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (query.tools) {
|
||||
promises.push(
|
||||
waitUntilAndExecute(
|
||||
() => tools.items.value.length > 0,
|
||||
() => {
|
||||
const result = tools.items.value.filter((item) => (query.tools as string[]).includes(item.id));
|
||||
selectedTools.value = result as NoUndefinedField<RecipeTool>[];
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Promise.allSettled(promises).then(() => {
|
||||
search();
|
||||
});
|
||||
});
|
||||
|
||||
const fuse = computed(() => {
|
||||
return new Fuse(filteredRecipes.value, state.options);
|
||||
});
|
||||
|
||||
const fuzzyRecipes = computed(() => {
|
||||
if (searchString.value.trim() === "") {
|
||||
return filteredRecipes.value;
|
||||
}
|
||||
const result = fuse.value.search(searchString.value.trim() as string);
|
||||
return result.map((x) => x.item);
|
||||
});
|
||||
|
||||
const showRecipes = computed(() => {
|
||||
if (state.sortedResults.length > 0) {
|
||||
return state.sortedResults;
|
||||
} else {
|
||||
return fuzzyRecipes.value;
|
||||
}
|
||||
});
|
||||
|
||||
// ================================================================
|
||||
// Utility Functions
|
||||
|
||||
function check(filterBy: string[], recipeList: string[], matchAny: boolean, exclude: boolean) {
|
||||
let isMatch = true;
|
||||
if (filterBy.length === 0) return isMatch;
|
||||
|
||||
if (recipeList) {
|
||||
if (matchAny) {
|
||||
isMatch = filterBy.some((t) => recipeList.includes(t)); // Checks if some items are a match
|
||||
} else {
|
||||
isMatch = filterBy.every((t) => recipeList.includes(t)); // Checks if every items is a match
|
||||
}
|
||||
return exclude ? !isMatch : isMatch;
|
||||
} else;
|
||||
return false;
|
||||
}
|
||||
|
||||
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 } = useFoodStore();
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
allRecipes,
|
||||
assignFuzzy,
|
||||
assignSorted,
|
||||
check,
|
||||
foods,
|
||||
searchString,
|
||||
showRecipes,
|
||||
updateCatParams,
|
||||
updateFoodParams,
|
||||
updateTagParams,
|
||||
advanced,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("search.search") as string,
|
||||
search,
|
||||
reset,
|
||||
state,
|
||||
categories: categories.items as unknown as NoUndefinedField<RecipeCategory>[],
|
||||
tags: tags.items as unknown as NoUndefinedField<RecipeTag>[],
|
||||
foods: foods.foods,
|
||||
tools: tools.items as unknown as NoUndefinedField<RecipeTool>[],
|
||||
|
||||
sortable,
|
||||
toggleOrderDirection,
|
||||
|
||||
selectedCategories,
|
||||
selectedFoods,
|
||||
selectedTags,
|
||||
selectedTools,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="css">
|
||||
.search-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.65rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 950px;
|
||||
}
|
||||
|
||||
.search-button-container {
|
||||
margin: 3rem auto 0 auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue