cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

persistent search settings

Browse Source
This commit is contained in:
vabene1111 2021-05-30 20:40:46 +02:00
parent 6d065cb939
commit 9982cae7c3
2 changed files with 27 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cookbook/static/vue/js/recipe_search_view.js
View File

File diff suppressed because one or more lines are too long

56
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@ -13,7 +13,7 @@
<b-input-group class="mt-3"> <b-input-group class="mt-3">
<b-input class="form-control" v-model="search_input" v-bind:placeholder="$t('Search')"></b-input> <b-input class="form-control" v-model="settings.search_input" v-bind:placeholder="$t('Search')"></b-input>
<b-input-group-append> <b-input-group-append>
<b-button v-b-toggle.collapse_advanced_search variant="primary" class="shadow-none"><i <b-button v-b-toggle.collapse_advanced_search variant="primary" class="shadow-none"><i
class="fas fa-caret-down" v-if="!settings.advanced_search_visible"></i><i class="fas fa-caret-up" class="fas fa-caret-down" v-if="!settings.advanced_search_visible"></i><i class="fas fa-caret-up"
@ -42,7 +42,7 @@
</button> </button>
</div> </div>
<div class="col-md-2" style="position: relative; margin-top: 1vh"> <div class="col-md-2" style="position: relative; margin-top: 1vh">
<b-form-checkbox v-model="search_internal" name="check-button" @change="refreshData" <b-form-checkbox v-model="settings.search_internal" name="check-button" @change="refreshData"
class="shadow-none" class="shadow-none"
style="position:relative;top: 50%; transform: translateY(-50%);" switch> style="position:relative;top: 50%; transform: translateY(-50%);" switch>
{{ $t('show_only_internal') }} {{ $t('show_only_internal') }}
@ -103,7 +103,7 @@
<div class="col-12"> <div class="col-12">
<b-input-group style="margin-top: 1vh"> <b-input-group style="margin-top: 1vh">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_keywords" <generic-multiselect @change="genericSelectChanged" parent_variable="search_keywords"
:initial_selection="search_keywords" :initial_selection="settings.search_keywords"
search_function="listKeywords" label="label" search_function="listKeywords" label="label"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Keywords')"></generic-multiselect> v-bind:placeholder="$t('Keywords')"></generic-multiselect>
@ -125,7 +125,7 @@
<div class="col-12"> <div class="col-12">
<b-input-group style="margin-top: 1vh"> <b-input-group style="margin-top: 1vh">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_foods" <generic-multiselect @change="genericSelectChanged" parent_variable="search_foods"
:initial_selection="search_foods" :initial_selection="settings.search_foods"
search_function="listFoods" label="name" search_function="listFoods" label="name"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Ingredients')"></generic-multiselect> v-bind:placeholder="$t('Ingredients')"></generic-multiselect>
@ -147,7 +147,7 @@
<div class="col-12"> <div class="col-12">
<b-input-group style="margin-top: 1vh"> <b-input-group style="margin-top: 1vh">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_books" <generic-multiselect @change="genericSelectChanged" parent_variable="search_books"
:initial_selection="search_books" :initial_selection="settings.search_books"
search_function="listRecipeBooks" label="name" search_function="listRecipeBooks" label="name"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Books')"></generic-multiselect> v-bind:placeholder="$t('Books')"></generic-multiselect>
@ -179,7 +179,7 @@
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;"> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
<template <template
v-if="search_input === '' && search_keywords.length === 0 && search_foods.length === 0 && search_books.length === 0"> v-if="settings.search_input === '' && settings.search_keywords.length === 0 && settings.search_foods.length === 0 && settings.search_books.length === 0">
<recipe-card v-bind:key="`mp_${m.id}`" v-for="m in meal_plans" :recipe="m.recipe" <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" :meal_plan="m" :footer_text="m.meal_type_name"
footer_icon="far fa-calendar-alt"></recipe-card> footer_icon="far fa-calendar-alt"></recipe-card>
@ -249,13 +249,13 @@ export default {
meal_plans: [], meal_plans: [],
last_viewed_recipes: [], last_viewed_recipes: [],
search_input: '',
search_internal: false,
search_keywords: [],
search_foods: [],
search_books: [],
settings: { settings: {
search_input: '',
search_internal: false,
search_keywords: [],
search_foods: [],
search_books: [],
search_keywords_or: true, search_keywords_or: true,
search_foods_or: true, search_foods_or: true,
search_books_or: true, search_books_or: true,
@ -272,16 +272,13 @@ export default {
mounted() { mounted() {
this.$nextTick(function () { this.$nextTick(function () {
if (this.$cookies.isKey('search_settings')) { if (this.$cookies.isKey('search_settings')) {
console.log('loaded cookie settings', this.$cookies.get("search_settings"))
this.settings = this.$cookies.get("search_settings") this.settings = this.$cookies.get("search_settings")
} }
this.loadMealPlan() this.loadMealPlan()
this.loadRecentlyViewed() this.loadRecentlyViewed()
this.refreshData()
}) })
this.refreshData()
this.$i18n.locale = window.CUSTOM_LOCALE this.$i18n.locale = window.CUSTOM_LOCALE
}, },
watch: { watch: {
@ -297,30 +294,29 @@ export default {
'settings.recently_viewed': function () { 'settings.recently_viewed': function () {
this.loadRecentlyViewed() this.loadRecentlyViewed()
}, },
search_input: _debounce(function () { 'settings.search_input': _debounce(function () {
this.refreshData() this.refreshData()
}, 300), }, 300),
}, },
methods: { methods: {
refreshData: function () { refreshData: function () {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient.listRecipes( apiClient.listRecipes(
this.search_input, this.settings.search_input,
this.search_keywords.map(function (A) { this.settings.search_keywords.map(function (A) {
return A["id"]; return A["id"];
}), }),
this.search_foods.map(function (A) { this.settings.search_foods.map(function (A) {
return A["id"]; return A["id"];
}), }),
this.search_books.map(function (A) { this.settings.search_books.map(function (A) {
return A["id"]; return A["id"];
}), }),
this.settings.search_keywords_or, this.settings.search_keywords_or,
this.settings.search_foods_or, this.settings.search_foods_or,
this.settings.search_books_or, this.settings.search_books_or,
this.search_internal, this.settings.search_internal,
undefined, undefined,
this.pagination_page, this.pagination_page,
).then(result => { ).then(result => {
@ -350,7 +346,7 @@ export default {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
if (this.settings.recently_viewed > 0) { if (this.settings.recently_viewed > 0) {
apiClient.listRecipes(undefined, undefined, undefined, undefined, undefined, undefined, apiClient.listRecipes(undefined, undefined, undefined, undefined, undefined, undefined,
undefined, undefined,undefined, undefined,undefined,{query: {last_viewed: this.settings.recently_viewed}}).then(result => { undefined, undefined, undefined, undefined, undefined, {query: {last_viewed: this.settings.recently_viewed}}).then(result => {
this.last_viewed_recipes = result.data.results this.last_viewed_recipes = result.data.results
}) })
} else { } else {
@ -358,15 +354,15 @@ export default {
} }
}, },
genericSelectChanged: function (obj) { genericSelectChanged: function (obj) {
this[obj.var] = obj.val this.settings[obj.var] = obj.val
this.refreshData() this.refreshData()
}, },
resetSearch: function () { resetSearch: function () {
this.search_input = '' this.settings.search_input = ''
this.search_internal = false this.settings.search_internal = false
this.search_keywords = [] this.settings.search_keywords = []
this.search_foods = [] this.settings.search_foods = []
this.search_books = [] this.settings.search_books = []
this.refreshData() this.refreshData()
}, },
pageChange: function (page) { pageChange: function (page) {