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

enable/disable treeselect

Browse Source
This commit is contained in:
smilerz
2022-01-18 08:17:54 -06:00
parent b382ab9024
commit 2a13a341dd
5 changed files with 193 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cookbook/helper/recipe_search.py
View File

@ -653,7 +653,7 @@ class RecipeFacet():
if not self._request.space.demo and self._request.space.show_facet_count: if not self._request.space.demo and self._request.space.show_facet_count:
return queryset.annotate(count=Coalesce(Subquery(self._recipe_count_queryset('keywords', depth, steplen)), 0) return queryset.annotate(count=Coalesce(Subquery(self._recipe_count_queryset('keywords', depth, steplen)), 0)
).filter(depth=depth, count__gt=0 ).filter(depth=depth, count__gt=0
).values('id', 'name', 'count', 'numchild').order_by('name') ).values('id', 'name', 'count', 'numchild').order_by('name')[:200]
else: else:
return queryset.filter(depth=depth).values('id', 'name', 'numchild').order_by('name') return queryset.filter(depth=depth).values('id', 'name', 'numchild').order_by('name')
@ -664,7 +664,7 @@ class RecipeFacet():
if not self._request.space.demo and self._request.space.show_facet_count: if not self._request.space.demo and self._request.space.show_facet_count:
return queryset.annotate(count=Coalesce(Subquery(self._recipe_count_queryset('steps__ingredients__food', depth, steplen)), 0) return queryset.annotate(count=Coalesce(Subquery(self._recipe_count_queryset('steps__ingredients__food', depth, steplen)), 0)
).filter(depth__lte=depth, count__gt=0 ).filter(depth__lte=depth, count__gt=0
).values('id', 'name', 'count', 'numchild').order_by('name') ).values('id', 'name', 'count', 'numchild').order_by('name')[:200]
else: else:
return queryset.filter(depth__lte=depth).values('id', 'name', 'numchild').order_by('name') return queryset.filter(depth__lte=depth).values('id', 'name', 'numchild').order_by('name')

1
cookbook/templates/url_import.html
View File

@ -668,7 +668,6 @@
Vue.component('vue-multiselect', window.VueMultiselect.default) Vue.component('vue-multiselect', window.VueMultiselect.default)
let app = new Vue({ let app = new Vue({
components: { components: {
Multiselect: window.VueMultiselect.default Multiselect: window.VueMultiselect.default

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

@ -8,25 +8,25 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-lg-10 col-xl-8 mt-3 mb-3"> <div class="col-12 col-lg-10 col-xl-8 mt-3 mb-3">
<b-input-group> <b-input-group>
<b-input class="form-control form-control-lg form-control-borderless form-control-search" v-model="settings.search_input" v-bind:placeholder="$t('Search')"></b-input> <b-input class="form-control form-control-lg form-control-borderless form-control-search" v-model="search.search_input" v-bind:placeholder="$t('Search')"></b-input>
<b-input-group-append> <b-input-group-append>
<b-button v-b-tooltip.hover :title="$t('show_sql')" @click="showSQL()" v-if="debug"> <b-button v-b-tooltip.hover :title="$t('show_sql')" @click="showSQL()" v-if="debug && ui.sql_debug">
<i class="fas fa-bug" style="font-size: 1.5em"></i> <i class="fas fa-bug" style="font-size: 1.5em"></i>
</b-button> </b-button>
<b-button variant="light" v-b-tooltip.hover :title="$t('Random Recipes')" @click="openRandom()"> <b-button variant="light" v-b-tooltip.hover :title="$t('Random Recipes')" @click="openRandom()">
<i class="fas fa-dice-five" style="font-size: 1.5em"></i> <i class="fas fa-dice-five" style="font-size: 1.5em"></i>
</b-button> </b-button>
<b-button v-b-toggle.collapse_advanced_search v-b-tooltip.hover :title="$t('Advanced Settings')" v-bind:variant="!isAdvancedSettingsSet() ? 'primary' : 'danger'"> <b-button v-b-toggle.collapse_advanced_search v-b-tooltip.hover :title="$t('Advanced Settings')" v-bind:variant="searchFiltered(true) ? 'primary' : 'danger'">
<!-- TODO consider changing this icon to a filter --> <!-- TODO consider changing this icon to a filter -->
<i class="fas fa-caret-down" v-if="!settings.advanced_search_visible"></i> <i class="fas fa-caret-down" v-if="!ui.advanced_search_visible"></i>
<i class="fas fa-caret-up" v-if="settings.advanced_search_visible"></i> <i class="fas fa-caret-up" v-if="ui.advanced_search_visible"></i>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</div> </div>
</div> </div>
<b-collapse id="collapse_advanced_search" class="mt-2 shadow-sm" v-model="settings.advanced_search_visible"> <b-collapse id="collapse_advanced_search" class="mt-2 shadow-sm" v-model="ui.advanced_search_visible">
<div class="card"> <div class="card">
<div class="card-body p-4"> <div class="card-body p-4">
<div class="row"> <div class="row">
@ -41,12 +41,13 @@
class="btn btn-block text-uppercase" class="btn btn-block text-uppercase"
v-b-tooltip.hover v-b-tooltip.hover
:title="$t('show_only_internal')" :title="$t('show_only_internal')"
v-bind:class="{ 'btn-success': settings.search_internal, 'btn-primary': !settings.search_internal }" v-bind:class="{ 'btn-success': search.search_internal, 'btn-primary': !search.search_internal }"
@click=" @click="
settings.search_internal = !settings.search_internal search.search_internal = !search.search_internal
refreshData() refreshData()
" "
> >
<!-- TODO is this the right place to refresh data? or deep watch on this.search?? -->
{{ $t("Internal") }} {{ $t("Internal") }}
</button> </button>
</div> </div>
@ -56,33 +57,50 @@
</div> </div>
</div> </div>
<b-popover target="id_settings_button" triggers="click" placement="bottom" :title="$t('Settings')"> <b-popover target="id_settings_button" triggers="click" placement="bottom">
<div> <b-tabs content-class="mt-1" small>
<b-form-group v-bind:label="$t('Recently_Viewed')" label-for="popover-input-1" label-cols="6" class="mb-3"> <b-tab :title="$t('Settings')" active>
<b-form-input type="number" v-model="settings.recently_viewed" id="popover-input-1" size="sm"></b-form-input> <b-form-group v-bind:label="$t('Recently_Viewed')" label-for="popover-input-1" label-cols="6" class="mb-3">
</b-form-group> <b-form-input type="number" v-model="ui.recently_viewed" id="popover-input-1" size="sm"></b-form-input>
</b-form-group>
<b-form-group v-bind:label="$t('Recipes_per_page')" label-for="popover-input-page-count" label-cols="6" class="mb-3"> <b-form-group v-bind:label="$t('Recipes_per_page')" label-for="popover-input-page-count" label-cols="6" class="mb-3">
<b-form-input type="number" v-model="settings.page_count" id="popover-input-page-count" size="sm"></b-form-input> <b-form-input type="number" v-model="ui.page_size" id="popover-input-page-count" size="sm"></b-form-input>
</b-form-group> </b-form-group>
<b-form-group v-bind:label="$t('Meal_Plan')" label-for="popover-input-2" label-cols="6" class="mb-3"> <b-form-group v-bind:label="$t('Meal_Plan')" label-for="popover-input-2" label-cols="6" class="mb-3">
<b-form-checkbox switch v-model="settings.show_meal_plan" id="popover-input-2" size="sm"></b-form-checkbox> <b-form-checkbox switch v-model="ui.show_meal_plan" id="popover-input-2" size="sm"></b-form-checkbox>
</b-form-group> </b-form-group>
<b-form-group v-if="settings.show_meal_plan" v-bind:label="$t('Meal_Plan_Days')" label-for="popover-input-5" label-cols="6" class="mb-3"> <b-form-group v-if="ui.show_meal_plan" v-bind:label="$t('Meal_Plan_Days')" label-for="popover-input-5" label-cols="6" class="mb-3">
<b-form-input type="number" v-model="settings.meal_plan_days" id="popover-input-5" size="sm"></b-form-input> <b-form-input type="number" v-model="ui.meal_plan_days" id="popover-input-5" size="sm"></b-form-input>
</b-form-group> </b-form-group>
<b-form-group v-bind:label="$t('Sort_by_new')" label-for="popover-input-3" label-cols="6" class="mb-3">
<b-form-checkbox switch v-model="ui.sort_by_new" id="popover-input-3" size="sm"></b-form-checkbox>
</b-form-group>
<div class="row" style="margin-top: 1vh">
<div class="col-12">
<a :href="resolveDjangoUrl('view_settings') + '#search'">{{ $t("Search Settings") }}</a>
</div>
</div>
</b-tab>
<b-tab title="Expert Settings">
<b-form-group v-bind:label="$t('remember_search')" label-for="popover-rem-search" label-cols="6" class="mb-3">
<b-form-checkbox switch v-model="ui.remember_search" id="popover-rem-search" size="sm"></b-form-checkbox>
</b-form-group>
<b-form-group v-if="ui.remember_search" v-bind:label="$t('remember_hours')" label-for="popover-input-rem-hours" label-cols="6" class="mb-3">
<b-form-input type="number" v-model="ui.remember_hours" id="popover-rem-hours" size="sm"></b-form-input>
</b-form-group>
<b-form-group v-bind:label="$t('tree_select')" label-for="popover-input-treeselect" label-cols="6" class="mb-3">
<b-form-checkbox switch v-model="ui.tree_select" id="popover-input-treeselect" size="sm"></b-form-checkbox>
</b-form-group>
<b-form-group v-if="debug" v-bind:label="$t('sql_debug')" label-for="popover-input-sqldebug" label-cols="6" class="mb-3">
<b-form-checkbox switch v-model="ui.sql_debug" id="popover-input-sqldebug" size="sm"></b-form-checkbox>
</b-form-group>
</b-tab>
</b-tabs>
<b-form-group v-bind:label="$t('Sort_by_new')" label-for="popover-input-3" label-cols="6" class="mb-3">
<b-form-checkbox switch v-model="settings.sort_by_new" id="popover-input-3" size="sm"></b-form-checkbox>
</b-form-group>
</div>
<div class="row" style="margin-top: 1vh">
<div class="col-12">
<a :href="resolveDjangoUrl('view_settings') + '#search'">{{ $t("Search Settings") }}</a>
</div>
</div>
<div class="row" style="margin-top: 1vh"> <div class="row" style="margin-top: 1vh">
<div class="col-12" style="text-align: right"> <div class="col-12" style="text-align: right">
<b-button size="sm" variant="secondary" style="margin-right: 8px" @click="$root.$emit('bv::hide::popover')">{{ $t("Close") }} </b-button> <b-button size="sm" variant="secondary" style="margin-right: 8px" @click="$root.$emit('bv::hide::popover')">{{ $t("Close") }} </b-button>
@ -95,7 +113,8 @@
<div class="col-12"> <div class="col-12">
<b-input-group class="mt-2"> <b-input-group class="mt-2">
<treeselect <treeselect
v-model="settings.search_keywords" v-if="ui.tree_select"
v-model="search.search_keywords"
:options="facets.Keywords" :options="facets.Keywords"
:load-options="loadKeywordChildren" :load-options="loadKeywordChildren"
:multiple="true" :multiple="true"
@ -107,10 +126,20 @@
@input="refreshData(false)" @input="refreshData(false)"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
/> />
<generic-multiselect
v-if="!ui.tree_select"
@change="genericSelectChanged"
parent_variable="search_keywords"
:initial_selection="search.keywords"
:model="Models.KEYWORD"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Keywords')"
:limit="50"
></generic-multiselect>
<b-input-group-append> <b-input-group-append>
<b-input-group-text> <b-input-group-text>
<b-form-checkbox v-model="settings.search_keywords_or" name="check-button" @change="refreshData(false)" class="shadow-none" switch> <b-form-checkbox v-model="search.search_keywords_or" name="check-button" @change="refreshData(false)" class="shadow-none" switch>
<span class="text-uppercase" v-if="settings.search_keywords_or">{{ $t("or") }}</span> <span class="text-uppercase" v-if="search.search_keywords_or">{{ $t("or") }}</span>
<span class="text-uppercase" v-else>{{ $t("and") }}</span> <span class="text-uppercase" v-else>{{ $t("and") }}</span>
</b-form-checkbox> </b-form-checkbox>
</b-input-group-text> </b-input-group-text>
@ -124,7 +153,8 @@
<div class="col-12"> <div class="col-12">
<b-input-group class="mt-2"> <b-input-group class="mt-2">
<treeselect <treeselect
v-model="settings.search_foods" v-if="ui.tree_select"
v-model="search.search_foods"
:options="facets.Foods" :options="facets.Foods"
:load-options="loadFoodChildren" :load-options="loadFoodChildren"
:multiple="true" :multiple="true"
@ -136,10 +166,20 @@
@input="refreshData(false)" @input="refreshData(false)"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
/> />
<generic-multiselect
v-if="!ui.tree_select"
@change="genericSelectChanged"
parent_variable="search_foods"
:initial_selection="search.foods"
:model="Models.FOOD"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Foods')"
:limit="50"
></generic-multiselect>
<b-input-group-append> <b-input-group-append>
<b-input-group-text> <b-input-group-text>
<b-form-checkbox v-model="settings.search_foods_or" name="check-button" @change="refreshData(false)" class="shadow-none" switch> <b-form-checkbox v-model="search.search_foods_or" name="check-button" @change="refreshData(false)" class="shadow-none" switch>
<span class="text-uppercase" v-if="settings.search_foods_or">{{ $t("or") }}</span> <span class="text-uppercase" v-if="search.search_foods_or">{{ $t("or") }}</span>
<span class="text-uppercase" v-else>{{ $t("and") }}</span> <span class="text-uppercase" v-else>{{ $t("and") }}</span>
</b-form-checkbox> </b-form-checkbox>
</b-input-group-text> </b-input-group-text>
@ -155,7 +195,7 @@
<generic-multiselect <generic-multiselect
@change="genericSelectChanged" @change="genericSelectChanged"
parent_variable="search_books" parent_variable="search_books"
:initial_selection="settings.search_books" :initial_selection="search.search_books"
:model="Models.RECIPE_BOOK" :model="Models.RECIPE_BOOK"
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')" v-bind:placeholder="$t('Books')"
@ -163,8 +203,8 @@
></generic-multiselect> ></generic-multiselect>
<b-input-group-append> <b-input-group-append>
<b-input-group-text> <b-input-group-text>
<b-form-checkbox v-model="settings.search_books_or" name="check-button" @change="refreshData(false)" class="shadow-none" tyle="width: 100%" switch> <b-form-checkbox v-model="search.search_books_or" name="check-button" @change="refreshData(false)" class="shadow-none" tyle="width: 100%" switch>
<span class="text-uppercase" v-if="settings.search_books_or">{{ $t("or") }}</span> <span class="text-uppercase" v-if="search.search_books_or">{{ $t("or") }}</span>
<span class="text-uppercase" v-else>{{ $t("and") }}</span> <span class="text-uppercase" v-else>{{ $t("and") }}</span>
</b-form-checkbox> </b-form-checkbox>
</b-input-group-text> </b-input-group-text>
@ -178,7 +218,7 @@
<div class="col-12"> <div class="col-12">
<b-input-group class="mt-2"> <b-input-group class="mt-2">
<treeselect <treeselect
v-model="settings.search_ratings" v-model="search.search_ratings"
:options="ratingOptions" :options="ratingOptions"
:flat="true" :flat="true"
:placeholder="$t('Ratings')" :placeholder="$t('Ratings')"
@ -201,7 +241,7 @@
<div class="row"> <div class="row">
<div class="col col-md-12 text-right" style="margin-top: 2vh"> <div class="col col-md-12 text-right" style="margin-top: 2vh">
<span class="text-muted"> <span class="text-muted">
{{ $t("Page") }} {{ settings.pagination_page }}/{{ Math.ceil(pagination_count / settings.page_count) }} {{ $t("Page") }} {{ search.pagination_page }}/{{ Math.ceil(pagination_count / ui.page_size) }}
<a href="#" @click="resetSearch"><i class="fas fa-times-circle"></i> {{ $t("Reset") }}</a> <a href="#" @click="resetSearch"><i class="fas fa-times-circle"></i> {{ $t("Reset") }}</a>
</span> </span>
</div> </div>
@ -220,7 +260,7 @@
<div class="row" style="margin-top: 2vh" v-if="!random_search"> <div class="row" style="margin-top: 2vh" v-if="!random_search">
<div class="col col-md-12"> <div class="col col-md-12">
<b-pagination pills v-model="settings.pagination_page" :total-rows="pagination_count" :per-page="settings.page_count" @change="pageChange" align="center"> </b-pagination> <b-pagination pills v-model="search.pagination_page" :total-rows="pagination_count" :per-page="ui.page_size" @change="pageChange" align="center"> </b-pagination>
</div> </div>
</div> </div>
</div> </div>
@ -247,13 +287,14 @@ import LoadingSpinner from "@/components/LoadingSpinner" // TODO: is this deprec
import RecipeCard from "@/components/RecipeCard" import RecipeCard from "@/components/RecipeCard"
import GenericMultiselect from "@/components/GenericMultiselect" import GenericMultiselect from "@/components/GenericMultiselect"
import { Treeselect, LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect" import { Treeselect, LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect" //TODO: delete
import "@riophae/vue-treeselect/dist/vue-treeselect.css" import "@riophae/vue-treeselect/dist/vue-treeselect.css" //TODO: delete
import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher" import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
let SETTINGS_COOKIE_NAME = "search_settings" let SEARCH_COOKIE_NAME = "search_settings"
let UI_COOKIE_NAME = "_uisearch_settings"
export default { export default {
name: "RecipeSearchView", name: "RecipeSearchView",
@ -267,27 +308,30 @@ export default {
meal_plans: [], meal_plans: [],
last_viewed_recipes: [], last_viewed_recipes: [],
settings_loaded: false, search: {
settings: {
search_input: "", search_input: "",
search_internal: false, search_internal: false,
search_keywords: [], search_keywords: [],
search_foods: [], search_foods: [],
search_books: [], search_books: [],
search_ratings: undefined, search_ratings: undefined,
search_keywords_or: true, search_keywords_or: true,
search_foods_or: true, search_foods_or: true,
search_books_or: true, search_books_or: true,
pagination_page: 1,
},
ui: {
advanced_search_visible: false, advanced_search_visible: false,
show_meal_plan: true, show_meal_plan: true,
meal_plan_days: 0, meal_plan_days: 0,
recently_viewed: 5, recently_viewed: 5,
sort_by_new: true, sort_by_new: true,
pagination_page: 1, page_size: 25,
page_count: 25, remember_search: true,
remember_hours: 4,
sql_debug: false,
tree_select: false,
}, },
pagination_count: 0, pagination_count: 0,
random_search: false, random_search: false,
debug: false, debug: false,
@ -314,47 +358,35 @@ export default {
{ id: 0, label: this.$t("Unrated") + ratingCount(this.facets.Ratings?.["0.0"] ?? 0) }, { id: 0, label: this.$t("Unrated") + ratingCount(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
}
},
}, },
mounted() { mounted() {
this.$nextTick(function () { this.$nextTick(function () {
if (this.$cookies.isKey(SETTINGS_COOKIE_NAME)) { if (this.$cookies.isKey(UI_COOKIE_NAME)) {
this.settings = Object.assign({}, this.settings, this.$cookies.get(SETTINGS_COOKIE_NAME)) this.ui = Object.assign({}, this.ui, this.$cookies.get(UI_COOKIE_NAME))
}
if (this.ui.remember_search && this.$cookies.isKey(SEARCH_COOKIE_NAME)) {
this.search = Object.assign({}, this.search, this.$cookies.get(SEARCH_COOKIE_NAME), `${this.ui.remember_hours}h`)
} }
let urlParams = new URLSearchParams(window.location.search) let urlParams = new URLSearchParams(window.location.search)
if (urlParams.has("keyword")) { if (urlParams.has("keyword")) {
this.settings.search_keywords = [] this.search.search_keywords = []
this.facets.Keywords = [] this.facets.Keywords = []
for (let x of urlParams.getAll("keyword")) { for (let x of urlParams.getAll("keyword")) {
this.settings.search_keywords.push(Number.parseInt(x)) this.search.search_keywords.push(Number.parseInt(x))
this.facets.Keywords.push({ id: x, name: "loading..." }) this.facets.Keywords.push({ id: x, name: "loading..." })
} }
} }
this.facets.Foods = [] this.facets.Foods = []
for (let x of this.settings.search_foods) { for (let x of this.search.search_foods) {
this.facets.Foods.push({ id: x, name: "loading..." }) this.facets.Foods.push({ id: x, name: "loading..." })
} }
this.facets.Keywords = [] this.facets.Keywords = []
for (let x of this.settings.search_keywords) { for (let x of this.search.search_keywords) {
this.facets.Keywords.push({ id: x, name: "loading..." }) this.facets.Keywords.push({ id: x, name: "loading..." })
} }
this.facets.Books = [] this.facets.Books = []
for (let x of this.settings.search_books) { for (let x of this.search.search_books) {
this.facets.Books.push({ id: x, name: "loading..." }) this.facets.Books.push({ id: x, name: "loading..." })
} }
this.loadMealPlan() this.loadMealPlan()
@ -364,27 +396,39 @@ export default {
this.debug = localStorage.getItem("DEBUG") == "True" || false this.debug = localStorage.getItem("DEBUG") == "True" || false
}, },
watch: { watch: {
settings: { search: {
handler() { handler() {
this.$cookies.set(SETTINGS_COOKIE_NAME, this.settings, "4h") this.$cookies.set(SEARCH_COOKIE_NAME, this.search, `${this.ui.remember_hours}h`)
}, },
deep: true, deep: true,
}, },
"settings.show_meal_plan": function () { ui: {
handler() {
this.$cookies.set(UI_COOKIE_NAME, this.ui)
},
deep: true,
},
"ui.show_meal_plan": function () {
this.loadMealPlan() this.loadMealPlan()
}, },
"settings.meal_plan_days": function () { "ui.meal_plan_days": function () {
this.loadMealPlan() this.loadMealPlan()
}, },
"settings.recently_viewed": function () { "ui.recently_viewed": function () {
this.refreshData(false) this.refreshData(false)
}, },
"settings.search_input": _debounce(function () { "ui.tree_select": function () {
this.settings.pagination_page = 1 if (this.ui.tree_select && !this.facets?.Keywords && !this.facets?.Foods) {
console.log("i changed to true")
this.getFacets(this.facets?.hash)
}
},
"search.search_input": _debounce(function () {
this.search.pagination_page = 1
this.pagination_count = 0 this.pagination_count = 0
this.refreshData(false) this.refreshData(false)
}, 300), }, 300),
"settings.page_count": _debounce(function () { "ui.page_size": _debounce(function () {
this.refreshData(false) this.refreshData(false)
}, 300), }, 300),
}, },
@ -393,24 +437,24 @@ export default {
refreshData: function (random) { refreshData: function (random) {
this.random_search = random this.random_search = random
let params = { let params = {
query: this.settings.search_input, query: this.search.search_input,
keywords: this.settings.search_keywords, keywords: this.search.search_keywords,
foods: this.settings.search_foods, foods: this.search.search_foods,
rating: this.settings.search_ratings, rating: this.search.search_ratings,
books: this.settings.search_books.map(function (A) { books: this.search.search_books.map(function (A) {
return A["id"] return A["id"]
}), }),
keywordsOr: this.settings.search_keywords_or, keywordsOr: this.search.search_keywords_or,
foodsOr: this.settings.search_foods_or, foodsOr: this.search.search_foods_or,
booksOr: this.settings.search_books_or, booksOr: this.search.search_books_or,
internal: this.settings.search_internal, internal: this.search.search_internal,
random: this.random_search, random: this.random_search,
_new: this.settings.sort_by_new, _new: this.ui.sort_by_new,
page: this.settings.pagination_page, page: this.search.pagination_page,
pageSize: this.settings.page_count, pageSize: this.search.page_size,
} }
if (!this.searchFiltered) { if (!this.searchFiltered) {
params.options = { query: { last_viewed: this.settings.recently_viewed } } params.options = { query: { last_viewed: this.ui.recently_viewed } }
} }
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params) this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params)
.then((result) => { .then((result) => {
@ -418,9 +462,6 @@ export default {
this.pagination_count = result.data.count this.pagination_count = result.data.count
this.facets = result.data.facets this.facets = result.data.facets
// if (this.facets?.cache_key) {
// this.getFacets(this.facets.cache_key)
// }
this.recipes = this.removeDuplicates(result.data.results, (recipe) => recipe.id) this.recipes = this.removeDuplicates(result.data.results, (recipe) => recipe.id)
if (!this.searchFiltered) { if (!this.searchFiltered) {
// if meal plans are being shown - filter out any meal plan recipes from the recipe list // if meal plans are being shown - filter out any meal plan recipes from the recipe list
@ -442,12 +483,12 @@ export default {
return [...new Map(data.map((item) => [key(item), item])).values()] return [...new Map(data.map((item) => [key(item), item])).values()]
}, },
loadMealPlan: function () { loadMealPlan: function () {
if (this.settings.show_meal_plan) { if (this.ui.show_meal_plan) {
let params = { let params = {
options: { options: {
query: { query: {
from_date: moment().format("YYYY-MM-DD"), from_date: moment().format("YYYY-MM-DD"),
to_date: moment().add(this.settings.meal_plan_days, "days").format("YYYY-MM-DD"), to_date: moment().add(this.ui.meal_plan_days, "days").format("YYYY-MM-DD"),
}, },
}, },
} }
@ -459,26 +500,24 @@ export default {
} }
}, },
genericSelectChanged: function (obj) { genericSelectChanged: function (obj) {
this.settings[obj.var] = obj.val this.search[obj.var] = obj.val
this.refreshData(false) this.refreshData(false)
}, },
resetSearch: function () { resetSearch: function () {
this.settings.search_input = "" this.search.search_input = ""
this.settings.search_internal = false this.search.search_internal = false
this.settings.search_keywords = [] this.search.search_keywords = []
this.settings.search_foods = [] this.search.search_foods = []
this.settings.search_books = [] this.search.search_books = []
this.settings.search_ratings = undefined this.search.search_ratings = undefined
this.settings.pagination_page = 1 this.search.pagination_page = 1
this.refreshData(false) this.refreshData(false)
}, },
pageChange: function (page) { pageChange: function (page) {
this.settings.pagination_page = page this.search.pagination_page = page
this.refreshData(false) this.refreshData(false)
}, },
isAdvancedSettingsSet() {
return this.settings.search_keywords.length + this.settings.search_foods.length + this.settings.search_books.length > 0
},
normalizer(node) { normalizer(node) {
let count = node?.count ? " (" + node.count + ")" : "" let count = node?.count ? " (" + node.count + ")" : ""
return { return {
@ -500,6 +539,9 @@ export default {
} }
}, },
getFacets: function (hash, facet, id) { getFacets: function (hash, facet, id) {
if (!this.ui.tree_select) {
return
}
let params = { hash: hash } let params = { hash: hash }
if (facet) { if (facet) {
params[facet] = id params[facet] = id
@ -511,51 +553,59 @@ export default {
showSQL: function () { showSQL: function () {
// TODO refactor this so that it isn't a total copy of refreshData // TODO refactor this so that it isn't a total copy of refreshData
let params = { let params = {
query: this.settings.search_input, query: this.search.search_input,
keywords: this.settings.search_keywords, keywords: this.search.search_keywords,
foods: this.settings.search_foods, foods: this.search.search_foods,
rating: this.settings.search_ratings, rating: this.search.search_ratings,
books: this.settings.search_books.map(function (A) { books: this.search.search_books.map(function (A) {
return A["id"] return A["id"]
}), }),
keywordsOr: this.settings.search_keywords_or, keywordsOr: this.search.search_keywords_or,
foodsOr: this.settings.search_foods_or, foodsOr: this.search.search_foods_or,
booksOr: this.settings.search_books_or, booksOr: this.search.search_books_or,
internal: this.settings.search_internal, internal: this.search.search_internal,
random: this.random_search, random: this.random_search,
_new: this.settings.sort_by_new, _new: this.ui.sort_by_new,
page: this.settings.pagination_page, page: this.search.pagination_page,
pageSize: this.settings.page_count, pageSize: this.ui.page_size,
} }
if (!this.searchFiltered) { if (!this.searchFiltered) {
params.options = { query: { last_viewed: this.settings.recently_viewed, debug: true } } params.options = { query: { last_viewed: this.ui.recently_viewed, debug: true } }
} else { } else {
params.options = { query: { debug: true } } params.options = { query: { debug: true } }
} }
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params).then((result) => {}) this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params).then((result) => {})
}, },
// TODO remove
loadFoodChildren({ action, parentNode, callback }) { loadFoodChildren({ action, parentNode, callback }) {
// Typically, do the AJAX stuff here.
// Once the server has responded,
// assign children options to the parent node & call the callback.
if (action === LOAD_CHILDREN_OPTIONS) { if (action === LOAD_CHILDREN_OPTIONS) {
if (this.facets?.cache_key) { if (this.facets?.cache_key) {
this.getFacets(this.facets.cache_key, "food", parentNode.id).then(callback()) this.getFacets(this.facets.cache_key, "food", parentNode.id).then(callback())
} }
} }
}, },
// TODO remove
loadKeywordChildren({ action, parentNode, callback }) { loadKeywordChildren({ action, parentNode, callback }) {
// Typically, do the AJAX stuff here.
// Once the server has responded,
// assign children options to the parent node & call the callback.
if (action === LOAD_CHILDREN_OPTIONS) { if (action === LOAD_CHILDREN_OPTIONS) {
if (this.facets?.cache_key) { if (this.facets?.cache_key) {
this.getFacets(this.facets.cache_key, "keyword", parentNode.id).then(callback()) this.getFacets(this.facets.cache_key, "keyword", parentNode.id).then(callback())
} }
} }
}, },
searchFiltered: function (ignore_string = false) {
let filtered =
this.search?.search_keywords?.length === 0 &&
this.search?.search_foods?.length === 0 &&
this.search?.search_books?.length === 0 &&
// this.settings?.pagination_page === 1 &&
!this.random_search &&
this.search?.search_ratings === undefined
if (ignore_string) {
return filtered
} else {
return filtered && this.search?.search_input === ""
}
},
}, },
} }
</script> </script>

7
vue/src/components/GenericMultiselect.vue
View File

@ -7,7 +7,7 @@
:hide-selected="multiple" :hide-selected="multiple"
:preserve-search="true" :preserve-search="true"
:internal-search="false" :internal-search="false"
:limit="options_limit" :limit="limit"
:placeholder="lookupPlaceholder" :placeholder="lookupPlaceholder"
:label="label" :label="label"
track-by="id" track-by="id"
@ -36,7 +36,6 @@ export default {
loading: false, loading: false,
objects: [], objects: [],
selected_objects: [], selected_objects: [],
options_limit: 25,
} }
}, },
props: { props: {
@ -90,9 +89,9 @@ export default {
search: function (query) { search: function (query) {
let options = { let options = {
page: 1, page: 1,
pageSize: 10, pageSize: this.limit,
query: query, query: query,
limit: this.options_limit, limit: this.limit,
} }
this.genericAPI(this.model, this.Actions.LIST, options).then((result) => { this.genericAPI(this.model, this.Actions.LIST, options).then((result) => {
this.objects = this.sticky_options.concat(result.data?.results ?? result.data) this.objects = this.sticky_options.concat(result.data?.results ?? result.data)

6
vue/src/locales/en.json
View File

@ -283,5 +283,9 @@
"shopping_add_onhand_desc": "Mark food 'On Hand' when checked off shopping list.", "shopping_add_onhand_desc": "Mark food 'On Hand' when checked off shopping list.",
"shopping_add_onhand": "Auto On Hand", "shopping_add_onhand": "Auto On Hand",
"related_recipes": "Related Recipes", "related_recipes": "Related Recipes",
"today_recipes": "Today's Recipes" "today_recipes": "Today's Recipes",
"sql_debug": "SQL Debug",
"remember_search": "Remember Search",
"remember_hours": "Hours to Remember",
"tree_select": "Use Tree Selection"
} }