filter by recipe
This commit is contained in:
smilerz
@ -193,10 +193,10 @@
|
||||
<!-- books filter -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<b-input-group class="mt-2" v-if="models">
|
||||
<b-input-group class="mt-2">
|
||||
<generic-multiselect @change="genericSelectChanged" parent_variable="search_books"
|
||||
:initial_selection="settings.search_books"
|
||||
:model="models.RECIPE_BOOK"
|
||||
:model="Models.RECIPE_BOOK"
|
||||
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
|
||||
v-bind:placeholder="$t('Books')" :limit="50"></generic-multiselect>
|
||||
<b-input-group-append>
|
||||
@ -216,7 +216,7 @@
|
||||
<!-- ratings filter -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<b-input-group class="mt-2" v-if="models">
|
||||
<b-input-group class="mt-2">
|
||||
<treeselect v-model="settings.search_ratings" :options="ratingOptions" :flat="true"
|
||||
:placeholder="$t('Ratings')" :searchable="false"
|
||||
@input="refreshData(false)"
|
||||
@ -257,13 +257,12 @@
|
||||
<div class="col col-md-12">
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 0.8rem;" >
|
||||
|
||||
<template
|
||||
v-if="settings.search_input === '' && settings.search_keywords.length === 0 && settings.search_foods.length === 0 && settings.search_books.length === 0 && this.settings.pagination_page === 1 && !random_search">
|
||||
<template v-if="!searchFiltered">
|
||||
<recipe-card v-bind:key="`mp_${m.id}`" v-for="m in meal_plans" :recipe="m.recipe"
|
||||
:meal_plan="m" :footer_text="m.meal_type_name"
|
||||
footer_icon="far fa-calendar-alt"></recipe-card>
|
||||
</template>
|
||||
<recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r"
|
||||
<recipe-card v-for="r in recipesNotInMealPlan" v-bind:key="r.id" :recipe="r"
|
||||
:footer_text="isRecentOrNew(r)[0]"
|
||||
:footer_icon="isRecentOrNew(r)[1]">
|
||||
</recipe-card>
|
||||
@ -305,11 +304,10 @@ import VueCookies from 'vue-cookies'
|
||||
Vue.use(VueCookies)
|
||||
|
||||
import {ResolveUrlMixin} from "@/utils/utils";
|
||||
import {Models} from "@/utils/models";
|
||||
import {ApiMixin} from "@/utils/utils";
|
||||
|
||||
import LoadingSpinner from "@/components/LoadingSpinner"; // is this deprecated?
|
||||
|
||||
import {ApiApiFactory} from "@/utils/openapi/api.ts";
|
||||
import RecipeCard from "@/components/RecipeCard";
|
||||
import GenericMultiselect from "@/components/GenericMultiselect";
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
@ -321,10 +319,11 @@ let SETTINGS_COOKIE_NAME = 'search_settings'
|
||||
|
||||
export default {
|
||||
name: 'RecipeSearchView',
|
||||
mixins: [ResolveUrlMixin],
|
||||
mixins: [ResolveUrlMixin, ApiMixin],
|
||||
components: {GenericMultiselect, RecipeCard, Treeselect},
|
||||
data() {
|
||||
return {
|
||||
// this.Models and this.Actions inherited from ApiMixin
|
||||
recipes: [],
|
||||
facets: [],
|
||||
meal_plans: [],
|
||||
@ -352,8 +351,7 @@ export default {
|
||||
},
|
||||
|
||||
pagination_count: 0,
|
||||
random_search: false,
|
||||
models: Models
|
||||
random_search: false
|
||||
}
|
||||
|
||||
},
|
||||
@ -367,6 +365,30 @@ export default {
|
||||
{'id': 1, 'label': '⭐ ' + this.$t("and_up") + ' (' + (this.facets.Ratings?.['1.0'] ?? 0) + ')' },
|
||||
{'id': -1, 'label': this.$t('Unrated') + ' (' + (this.facets.Ratings?.['0.0'] ?? 0 )+ ')'},
|
||||
]
|
||||
},
|
||||
searchFiltered: function () {
|
||||
if (
|
||||
this.settings?.search_input === ''
|
||||
&& this.settings?.search_keywords?.length === 0
|
||||
&& this.settings?.search_foods?.length === 0
|
||||
&& this.settings?.search_books?.length === 0
|
||||
&& this.settings?.pagination_page === 1
|
||||
&& !this.random_search
|
||||
&& this.settings?.search_ratings === undefined
|
||||
) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
recipesNotInMealPlan: function () {
|
||||
if (!this.searchFiltered){
|
||||
let mealPlans = []
|
||||
this.meal_plans.forEach(x => mealPlans.push(x.recipe.id))
|
||||
return this.recipes.filter(recipe => !mealPlans.includes(recipe.id))
|
||||
} else {
|
||||
return this.recipes
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -376,24 +398,18 @@ export default {
|
||||
}
|
||||
|
||||
let urlParams = new URLSearchParams(window.location.search);
|
||||
let apiClient = new ApiApiFactory()
|
||||
|
||||
if (urlParams.has('keyword')) {
|
||||
this.settings.search_keywords = []
|
||||
this.facets.Keywords = []
|
||||
for (let x of urlParams.getAll('keyword')) {
|
||||
let keyword = {id: x, name: 'loading'}
|
||||
this.settings.search_keywords.push(Number.parseInt(keyword.id))
|
||||
apiClient.retrieveKeyword(x).then(result => {
|
||||
this.$set(this.settings.search_keywords, this.settings.search_keywords.indexOf(keyword), result.data)
|
||||
})
|
||||
this.settings.search_keywords.push(Number.parseInt(x))
|
||||
this.facets.Keywords.push({'id':x, 'name': 'loading...'})
|
||||
}
|
||||
}
|
||||
|
||||
this.loadMealPlan()
|
||||
// this.loadRecentlyViewed()
|
||||
this.refreshData(false)
|
||||
})
|
||||
|
||||
this.$i18n.locale = window.CUSTOM_LOCALE
|
||||
},
|
||||
watch: {
|
||||
@ -410,7 +426,6 @@ export default {
|
||||
this.loadMealPlan()
|
||||
},
|
||||
'settings.recently_viewed': function () {
|
||||
// this.loadRecentlyViewed()
|
||||
this.refreshData(false)
|
||||
},
|
||||
'settings.search_input': _debounce(function () {
|
||||
@ -423,31 +438,30 @@ export default {
|
||||
}, 300),
|
||||
},
|
||||
methods: {
|
||||
// this.genericAPI inherited from ApiMixin
|
||||
refreshData: function (random) {
|
||||
this.random_search = random
|
||||
let apiClient = new ApiApiFactory()
|
||||
|
||||
apiClient.listRecipes(
|
||||
this.settings.search_input,
|
||||
this.settings.search_keywords,
|
||||
this.settings.search_foods,
|
||||
undefined,
|
||||
this.settings.search_ratings,
|
||||
this.settings.search_books.map(function (A) {
|
||||
return A["id"];
|
||||
}),
|
||||
this.settings.search_keywords_or,
|
||||
this.settings.search_foods_or,
|
||||
this.settings.search_books_or,
|
||||
|
||||
this.settings.search_internal,
|
||||
random,
|
||||
this.settings.sort_by_new,
|
||||
this.settings.pagination_page,
|
||||
this.settings.page_count,
|
||||
{query: {last_viewed: this.settings.recently_viewed}}
|
||||
).then(result => {
|
||||
|
||||
let params = {
|
||||
'query': this.settings.search_input,
|
||||
'keywords': this.settings.search_keywords,
|
||||
'foods': this.settings.search_foods,
|
||||
'ratings': this.settings.search_ratings,
|
||||
'books': this.settings.search_books.map(function (A) {
|
||||
return A["id"];
|
||||
}),
|
||||
'keywords_or': this.settings.search_keywords_or,
|
||||
'foods_or': this.settings.search_foods_or,
|
||||
'books_or': this.settings.search_books_or,
|
||||
'internal': this.settings.search_internal,
|
||||
'random': this.random_search,
|
||||
'_new': this.settings.sort_by_new,
|
||||
'page': this.settings.pagination_page,
|
||||
'pageSize': this.settings.page_count
|
||||
}
|
||||
if (!this.searchFiltered) {
|
||||
params.options = {'query':{'last_viewed': this.settings.recently_viewed}}
|
||||
}
|
||||
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params).then(result => {
|
||||
window.scrollTo(0, 0);
|
||||
this.pagination_count = result.data.count
|
||||
this.recipes = this.removeDuplicates(result.data.results, recipe => recipe.id)
|
||||
@ -463,32 +477,20 @@ export default {
|
||||
]
|
||||
},
|
||||
loadMealPlan: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
if (this.settings.show_meal_plan) {
|
||||
apiClient.listMealPlans({
|
||||
query: {
|
||||
from_date: moment().format('YYYY-MM-DD'),
|
||||
to_date: moment().add(this.settings.meal_plan_days, 'days').format('YYYY-MM-DD')
|
||||
}
|
||||
}).then(result => {
|
||||
let params = {
|
||||
'options': {'query':{
|
||||
'from_date': moment().format('YYYY-MM-DD'),
|
||||
'to_date': moment().add(this.settings.meal_plan_days, 'days').format('YYYY-MM-DD')
|
||||
}}
|
||||
}
|
||||
this.genericAPI(this.Models.MEAL_PLAN, this.Actions.LIST, params).then(result => {
|
||||
this.meal_plans = result.data
|
||||
})
|
||||
} else {
|
||||
this.meal_plans = []
|
||||
}
|
||||
},
|
||||
// DEPRECATED: intergrated into standard FTS queryset
|
||||
// loadRecentlyViewed: function () {
|
||||
// let apiClient = new ApiApiFactory()
|
||||
// if (this.settings.recently_viewed > 0) {
|
||||
// apiClient.listRecipes(undefined, undefined, undefined, undefined, undefined, undefined,
|
||||
// undefined, undefined, undefined, this.settings.sort_by_new, 1, this.settings.recently_viewed, {query: {last_viewed: this.settings.recently_viewed}}).then(result => {
|
||||
// this.last_viewed_recipes = result.data.results
|
||||
// })
|
||||
// } else {
|
||||
// this.last_viewed_recipes = []
|
||||
// }
|
||||
// },
|
||||
genericSelectChanged: function (obj) {
|
||||
this.settings[obj.var] = obj.val
|
||||
this.refreshData(false)
|
||||
@ -511,9 +513,10 @@ export default {
|
||||
return ((this.settings.search_keywords.length + this.settings.search_foods.length + this.settings.search_books.length) > 0)
|
||||
},
|
||||
normalizer(node) {
|
||||
let count = (node?.count ? ' (' + node.count + ')' : '')
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name + ' (' + node.count + ')',
|
||||
label: node.name + count,
|
||||
children: node.children,
|
||||
isDefaultExpanded: node.isDefaultExpanded
|
||||
}
|
||||
@ -528,7 +531,7 @@ export default {
|
||||
} else {
|
||||
return [undefined, undefined]
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user