github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 14:33:33 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 20

advanced search apge

Browse source
This commit is contained in:
hay-kot 2021-04-03 16:42:13 -08:00
commit 7a6b490e51
4 changed files with 85 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/Recipe/MobileRecipeCard.vue
View file

@ -7,7 +7,7 @@
>
<v-list-item>
<v-list-item-avatar rounded size="125" class="mt-0 ml-n4">
<v-img :src="getImage(image)"> </v-img>
<v-img :src="getImage(slug)"> </v-img>
</v-list-item-avatar>
<v-list-item-content class="align-self-start">
<v-list-item-title>

4
frontend/src/components/UI/Search/SearchBar.vue
View file

@ -27,7 +27,7 @@
@click="navOnClick ? null : selected(item.item.slug, item.item.name)"
>
<v-list-item-avatar>
<v-img :src="getImage(item.item.image)"></v-img>
<v-img :src="getImage(item.item.slug)"></v-img>
</v-list-item-avatar>
<v-list-item-content
@click="
@ -136,7 +136,7 @@ export default {
this.fuseResults = this.result;
}
},
searchSlug() {
this.selected(this.searchSlug);
},

64
frontend/src/pages/SearchPage/FilterSelector.vue
View file

@ -1,24 +1,40 @@
<template>
<v-btn-toggle
dense
v-model="selected"
tile
color="primary accent-3"
@change="emitChange"
group
>
<v-btn value="include">
Include
</v-btn>
<v-toolbar dense flat>
<v-btn-toggle
dense
v-model="selected"
tile
color="primary accent-3"
@change="emitMulti"
group
mandatory
>
<v-btn :value="false">
Include
</v-btn>
<v-btn value="exclude">
Exclude
</v-btn>
<v-btn value="any">
Any
</v-btn>
</v-btn-toggle>
<v-btn :value="true">
Exclude
</v-btn>
</v-btn-toggle>
<v-spacer></v-spacer>
<v-btn-toggle
dense
v-model="match"
tile
color="primary accent-3"
@change="emitMulti"
group
mandatory
>
<v-btn :value="false">
And
</v-btn>
<v-btn :value="true">
Or
</v-btn>
</v-btn-toggle>
</v-toolbar>
</template>
<script>
@ -30,13 +46,21 @@ export default {
},
data() {
return {
selected: "include",
selected: false,
match: false,
};
},
methods: {
emitChange() {
this.$emit("input", this.selected);
},
emitMulti() {
const updateData = {
exclude: this.selected,
matchAny: this.match,
};
this.$emit("update", updateData);
},
},
};
</script>

87
frontend/src/pages/SearchPage/index.vue
View file

@ -26,8 +26,8 @@
<v-row dense class="mt-0 flex-row align-center justify-space-around">
<v-col>
<h3 class="pl-2 headline mt-0">Category Filter</h3>
<FilterSelector v-model="catFilterType" class="mb-1" />
<h3 class="pl-2 text-center headline">Category Filter</h3>
<FilterSelector class="mb-1" @update="updateCatParams" />
<CategorySelector
:solo="true"
:dense="false"
@ -36,8 +36,8 @@
/>
</v-col>
<v-col>
<h3 class="pl-2 headline">Tag Filter</h3>
<FilterSelector v-model="tagFilterType" class="mb-1" />
<h3 class="pl-2 text-center headline">Tag Filter</h3>
<FilterSelector class="mb-1" @update="updateTagParams" />
<TagSelector
:solo="true"
:dense="false"
@ -78,9 +78,6 @@ import CategorySelector from "@/components/FormHelpers/CategorySelector";
import TagSelector from "@/components/FormHelpers/TagSelector";
import FilterSelector from "./FilterSelector.vue";
const INCLUDE = "include";
const EXCLUDE = "exclude";
const ANY = "any";
export default {
components: {
RecipeCard,
@ -94,9 +91,15 @@ export default {
searchString: "",
maxResults: 21,
searchResults: [],
catFilterType: "include",
catFilter: {
exclude: false,
matchAny: false,
},
tagFilter: {
exclude: false,
matchAny: false,
},
includeCategories: [],
tagFilterType: "include",
includeTags: [],
options: {
shouldSort: true,
@ -116,8 +119,18 @@ export default {
},
filteredRecipes() {
return this.allRecipes.filter(recipe => {
const includesTags = this.checkTags(recipe.tags);
const includesCats = this.checkCategories(recipe.recipeCategory);
const includesTags = this.check(
this.includeTags,
recipe.tags,
this.tagFilter.matchAny,
this.tagFilter.exclude
);
const includesCats = this.check(
this.includeCategories,
recipe.recipeCategory,
this.catFilter.matchAny,
this.catFilter.exclude
);
return [includesTags, includesCats].every(x => x === true);
});
},
@ -136,50 +149,26 @@ export default {
},
},
methods: {
checkIncludes(filterBy, recipeList) {
check(filterBy, recipeList, matchAny, exclude) {
let isMatch = true;
if (filterBy.length === 0) return isMatch;
if (recipeList) {
return filterBy.every(t => recipeList.includes(t));
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;
},
checkExcludes(filterBy, recipeList) {
if (recipeList) {
return filterBy.every(t => !recipeList.includes(t));
} else;
return false;
updateTagParams(params) {
this.tagFilter = params;
},
checkAny(filterBy, recipeList) {
if (filterBy.length === 0) return true;
if (recipeList) {
return filterBy.some(t => recipeList.includes(t));
} else;
return false;
},
checkTags(recipeTags) {
if (this.tagFilterType === INCLUDE) {
return this.checkIncludes(this.includeTags, recipeTags);
}
if (this.tagFilterType === EXCLUDE) {
return this.checkExcludes(this.includeTags, recipeTags);
}
if (this.tagFilterType === ANY) {
return this.checkAny(this.includeTags, recipeTags);
}
},
checkCategories(recipeCategories) {
if (this.catFilterType === INCLUDE) {
return this.checkIncludes(this.includeCategories, recipeCategories);
}
if (this.catFilterType === EXCLUDE) {
return this.checkExcludes(this.includeCategories, recipeCategories);
}
if (this.catFilterType === ANY) {
return this.checkAny(this.includeCategories, recipeCategories);
}
updateCatParams(params) {
this.catFilter = params;
},
},
};