implement sort order via API
This commit is contained in:
Chris Scoggins
@ -112,6 +112,9 @@
|
||||
<b-form-group v-if="ui.enable_expert" v-bind:label="$t('show_filters')" label-for="popover-show_filters" label-cols="8" class="mb-1">
|
||||
<b-form-checkbox switch v-model="ui.show_filters" id="popover-show_filters" size="sm"></b-form-checkbox>
|
||||
</b-form-group>
|
||||
<b-form-group v-if="ui.enable_expert" v-bind:label="$t('show_sortby')" label-for="popover-show_sortby" label-cols="8" class="mb-1">
|
||||
<b-form-checkbox switch v-model="ui.show_sortby" id="popover-show_sortby" size="sm"></b-form-checkbox>
|
||||
</b-form-group>
|
||||
</b-tab>
|
||||
|
||||
<b-tab :title="$t('advanced')" :title-link-class="['mx-0']">
|
||||
@ -140,6 +143,37 @@
|
||||
</div>
|
||||
</b-popover>
|
||||
|
||||
<!-- custom filters filter -->
|
||||
<div class="row" v-if="ui.show_filters || ui.show_sortby">
|
||||
<div class="col-12">
|
||||
<b-input-group class="mt-2">
|
||||
<generic-multiselect
|
||||
v-if="ui.show_filters"
|
||||
@change="genericSelectChanged"
|
||||
parent_variable="search_filter"
|
||||
:initial_selection="search.search_filter"
|
||||
:model="Models.CUSTOM_FILTER"
|
||||
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
|
||||
:placeholder="$t('Custom Filter')"
|
||||
:multiple="false"
|
||||
:limit="50"
|
||||
/>
|
||||
<multiselect
|
||||
v-if="ui.show_sortby"
|
||||
v-model="search.sort_order"
|
||||
:options="sortOptions"
|
||||
:multiple="true"
|
||||
:hide-selected="true"
|
||||
:internal-search="false"
|
||||
@input="refreshData(false)"
|
||||
label="text"
|
||||
track-by="id"
|
||||
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
|
||||
:placeholder="$t('sort_by')"
|
||||
/>
|
||||
</b-input-group>
|
||||
</div>
|
||||
</div>
|
||||
<!-- keywords filter -->
|
||||
<h6 class="mb-0" v-if="search.expert_mode && search.keywords_fields > 1">{{ $t("Keywords") }}</h6>
|
||||
<div class="row" v-if="ui.show_keywords">
|
||||
@ -429,17 +463,18 @@ import GenericMultiselect from "@/components/GenericMultiselect"
|
||||
import { Treeselect, LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect"
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
|
||||
import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
|
||||
import Multiselect from "vue-multiselect"
|
||||
|
||||
Vue.use(VueCookies)
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
let SEARCH_COOKIE_NAME = "search_settings1"
|
||||
let SEARCH_COOKIE_NAME = "search_settings2"
|
||||
let UI_COOKIE_NAME = "ui_search_settings"
|
||||
|
||||
export default {
|
||||
name: "RecipeSearchView",
|
||||
mixins: [ResolveUrlMixin, ApiMixin, ToastMixin],
|
||||
components: { GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher },
|
||||
components: { GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher, Multiselect },
|
||||
data() {
|
||||
return {
|
||||
// this.Models and this.Actions inherited from ApiMixin
|
||||
@ -474,6 +509,8 @@ export default {
|
||||
search_rating: undefined,
|
||||
search_rating_gte: true,
|
||||
search_units_or: true,
|
||||
search_filter: undefined,
|
||||
sort_order: [],
|
||||
pagination_page: 1,
|
||||
expert_mode: false,
|
||||
keywords_fields: 1,
|
||||
@ -499,11 +536,11 @@ export default {
|
||||
show_rating: true,
|
||||
show_units: false,
|
||||
show_filters: false,
|
||||
show_sortby: false,
|
||||
},
|
||||
pagination_count: 0,
|
||||
random_search: false,
|
||||
debug: false,
|
||||
custom_filters: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -565,6 +602,35 @@ export default {
|
||||
unitFields: function () {
|
||||
return !this.expertMode ? 1 : this.search.units_fields
|
||||
},
|
||||
sortOptions: function () {
|
||||
let sort_order = []
|
||||
let x = 1
|
||||
const field = [
|
||||
[this.$t("search_rank"), "score"],
|
||||
[this.$t("Name"), "name"],
|
||||
[this.$t("date_cooked"), "lastcooked"],
|
||||
[this.$t("Rating"), "rating"],
|
||||
[this.$t("times_cooked"), "favorite"],
|
||||
[this.$t("date_created"), "created_at"],
|
||||
[this.$t("date_viewed"), "lastviewed"],
|
||||
]
|
||||
field.forEach((f) => {
|
||||
sort_order.push(
|
||||
{
|
||||
id: x,
|
||||
text: `${f[0]} ↑`,
|
||||
value: f[1],
|
||||
},
|
||||
{
|
||||
id: x + 1,
|
||||
text: `${f[0]} ↓`,
|
||||
value: `-${f[1]}`,
|
||||
}
|
||||
)
|
||||
x = x + 2
|
||||
})
|
||||
return sort_order
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(function () {
|
||||
@ -572,7 +638,7 @@ export default {
|
||||
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`)
|
||||
this.search = Object.assign({}, this.search, this.$cookies.get(SEARCH_COOKIE_NAME))
|
||||
}
|
||||
let urlParams = new URLSearchParams(window.location.search)
|
||||
|
||||
@ -644,8 +710,8 @@ export default {
|
||||
this.refreshData(false)
|
||||
},
|
||||
"ui.tree_select": function () {
|
||||
if (this.ui.tree_select && (!this.facets?.Keywords || !this.facets?.Foods)) {
|
||||
this.getFacets(this.facets?.hash)
|
||||
if (this.ui.tree_select && (this.facets?.Keywords.length == 0 || this.facets?.Foods.length == 0) && this.facets?.cache_key) {
|
||||
this.getFacets(this.facets?.cache_key)
|
||||
}
|
||||
},
|
||||
"search.search_input": _debounce(function () {
|
||||
@ -656,6 +722,10 @@ export default {
|
||||
"ui.page_size": _debounce(function () {
|
||||
this.refreshData(false)
|
||||
}, 300),
|
||||
"search.search_filter": _debounce(function () {
|
||||
// TODO clear existing filters
|
||||
this.refreshData(false)
|
||||
}, 300),
|
||||
},
|
||||
methods: {
|
||||
// this.genericAPI inherited from ApiMixin
|
||||
@ -728,6 +798,8 @@ export default {
|
||||
})
|
||||
this.search.search_units = []
|
||||
this.search.search_rating = undefined
|
||||
this.search.search_filter = undefined
|
||||
this.search.sort_order = undefined
|
||||
this.search.pagination_page = 1
|
||||
this.search.keywords_fields = 1
|
||||
this.search.foods_fields = 1
|
||||
@ -792,6 +864,9 @@ export default {
|
||||
}
|
||||
},
|
||||
buildParams: function (random) {
|
||||
if (this.search.search_filter) {
|
||||
return JSON.parse(this.search.search_filter.search)
|
||||
}
|
||||
this.random_search = random
|
||||
let rating = this.search.search_rating
|
||||
if (rating !== undefined && !this.search.search_rating_gte) {
|
||||
@ -811,9 +886,13 @@ export default {
|
||||
page: this.search.pagination_page,
|
||||
pageSize: this.ui.page_size,
|
||||
}
|
||||
|
||||
let query = { sort_order: this.search.sort_order.map((x) => x.value) }
|
||||
if (this.searchFiltered()) {
|
||||
params.options = { query: { last_viewed: this.ui.recently_viewed } }
|
||||
query.last_viewed = this.ui.recently_viewed
|
||||
}
|
||||
params.options = { query: query }
|
||||
console.log(params)
|
||||
return params
|
||||
},
|
||||
searchFiltered: function (ignore_string = false) {
|
||||
@ -865,7 +944,6 @@ export default {
|
||||
this.genericAPI(this.Models.CUSTOM_FILTER, this.Actions.CREATE, params)
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
|
||||
console.log("you saved: ", filtername, this.buildParams(false), result)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
|
||||
@ -1,22 +1,25 @@
|
||||
<template>
|
||||
<div v-if="recipes !== {}">
|
||||
<div id="switcher" class="align-center">
|
||||
<i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle"
|
||||
v-b-toggle.related-recipes/>
|
||||
<i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle" v-b-toggle.related-recipes />
|
||||
</div>
|
||||
<b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000"
|
||||
@shown="updatePinnedRecipes()">
|
||||
<b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000" @shown="updatePinnedRecipes()">
|
||||
<template #default="{ hide }">
|
||||
|
||||
<div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end">
|
||||
|
||||
<h5>Planned <i class="fas fa-calendar fa-fw"></i></h5>
|
||||
|
||||
<div class="text-right">
|
||||
<template v-if="planned_recipes.length > 0">
|
||||
<div v-for="r in planned_recipes" :key="`plan${r.id}`">
|
||||
<div class="pb-1 pt-1">
|
||||
<a @click=" navRecipe(r); hide()" href="javascript:void(0);">{{ r.name }}</a>
|
||||
<a
|
||||
@click="
|
||||
navRecipe(r)
|
||||
hide()
|
||||
"
|
||||
href="javascript:void(0);"
|
||||
>{{ r.name }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -32,16 +35,20 @@
|
||||
<div v-for="r in pinned_recipes" :key="`pin${r.id}`">
|
||||
<b-row class="pb-1 pt-1">
|
||||
<b-col cols="2">
|
||||
<a href="javascript:void(0)" @click="unPinRecipe(r)"
|
||||
class="text-muted"><i class="fas fa-times"></i></a>
|
||||
<a href="javascript:void(0)" @click="unPinRecipe(r)" class="text-muted"><i class="fas fa-times"></i></a>
|
||||
</b-col>
|
||||
<b-col cols="10">
|
||||
<a @click="navRecipe(r); hide()" href="javascript:void(0);"
|
||||
class="align-self-end">{{ r.name }} </a>
|
||||
<a
|
||||
@click="
|
||||
navRecipe(r)
|
||||
hide()
|
||||
"
|
||||
href="javascript:void(0);"
|
||||
class="align-self-end"
|
||||
>{{ r.name }}
|
||||
</a>
|
||||
</b-col>
|
||||
|
||||
</b-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -49,21 +56,24 @@
|
||||
<span class="text-muted">You have no pinned recipes!</span>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="related_recipes.length > 0">
|
||||
<h5>Related <i class="fas fa-link fa-fw"></i></h5>
|
||||
<div class="text-right">
|
||||
<div v-for="r in related_recipes" :key="`related${r.id}`">
|
||||
<div class="pb-1 pt-1">
|
||||
<a @click=" navRecipe(r); hide()" href="javascript:void(0);">{{ r.name }}</a>
|
||||
<a
|
||||
@click="
|
||||
navRecipe(r)
|
||||
hide()
|
||||
"
|
||||
href="javascript:void(0);"
|
||||
>{{ r.name }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<template #footer="{ hide }">
|
||||
<div class="d-flex bg-dark text-light align-items-center px-3 py-2">
|
||||
@ -76,14 +86,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const {ApiApiFactory} = require("@/utils/openapi/api")
|
||||
import {ResolveUrlMixin} from "@/utils/utils"
|
||||
const { ApiApiFactory } = require("@/utils/openapi/api")
|
||||
import { ResolveUrlMixin } from "@/utils/utils"
|
||||
|
||||
export default {
|
||||
name: "RecipeSwitcher",
|
||||
mixins: [ResolveUrlMixin],
|
||||
props: {
|
||||
recipe: {type: Number, default: undefined},
|
||||
recipe: { type: Number, default: undefined },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -96,11 +106,10 @@ export default {
|
||||
computed: {
|
||||
is_recipe_view: function () {
|
||||
// determine if the currently open view is the recipe view to decide if links should switch to or link to a recipe
|
||||
return this.$root._vnode.tag.includes('RecipeView')
|
||||
return this.$root._vnode.tag.includes("RecipeView")
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
let promises = []
|
||||
promises.push(this.loadRelatedRecipes())
|
||||
this.loadPinnedRecipes()
|
||||
@ -112,7 +121,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
navRecipe: function (recipe) {
|
||||
|
||||
if (this.is_recipe_view) {
|
||||
this.$emit("switch", this.recipes[recipe.id])
|
||||
} else {
|
||||
@ -143,7 +151,6 @@ export default {
|
||||
this.recipes[id] = result.data
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
loadRelatedRecipes: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
@ -151,13 +158,13 @@ export default {
|
||||
// get related recipes and save them for later
|
||||
if (this.$parent.recipe) {
|
||||
this.related_recipes = [this.$parent.recipe]
|
||||
return apiClient.relatedRecipe(this.$parent.recipe.id, {query: {levels: 2, format: 'json'}}).then((result) => {
|
||||
this.related_recipes = this.related_recipes.concat(result.data)
|
||||
return apiClient.relatedRecipe(this.$parent.recipe.id, { query: { levels: 2, format: "json" } }).then((result) => {
|
||||
this.related_recipes = this.related_recipes.concat(result.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
loadPinnedRecipes: function () {
|
||||
let pinned_recipe_ids = JSON.parse(localStorage.getItem('pinned_recipes')) || []
|
||||
let pinned_recipe_ids = JSON.parse(localStorage.getItem("pinned_recipes")) || []
|
||||
this.pinned_recipes = pinned_recipe_ids
|
||||
},
|
||||
loadMealPlans: function () {
|
||||
@ -165,16 +172,16 @@ export default {
|
||||
// TODO move to utility function moment is in maintenance mode https://momentjs.com/docs/
|
||||
var tzoffset = new Date().getTimezoneOffset() * 60000 //offset in milliseconds
|
||||
let today = new Date(Date.now() - tzoffset).toISOString().split("T")[0]
|
||||
return apiClient.listMealPlans({query: {from_date: today, to_date: today,},}).then((result) => {
|
||||
return apiClient.listMealPlans({ query: { from_date: today, to_date: today } }).then((result) => {
|
||||
let promises = []
|
||||
result.data.forEach((mealplan) => {
|
||||
this.planned_recipes.push({...mealplan?.recipe, servings: mealplan?.servings})
|
||||
this.planned_recipes.push({ ...mealplan?.recipe, servings: mealplan?.servings })
|
||||
const serving_factor = (mealplan?.servings ?? mealplan?.recipe?.servings ?? 1) / (mealplan?.recipe?.servings ?? 1)
|
||||
promises.push(
|
||||
apiClient.relatedRecipe(mealplan?.recipe?.id, {query: {levels: 2}}).then((r) => {
|
||||
apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
|
||||
// scale all recipes to mealplan servings
|
||||
r.data = r.data.map((x) => {
|
||||
return {...x, factor: serving_factor}
|
||||
return { ...x, factor: serving_factor }
|
||||
})
|
||||
this.planned_recipes = [...this.planned_recipes, ...r.data]
|
||||
})
|
||||
@ -184,12 +191,12 @@ export default {
|
||||
})
|
||||
},
|
||||
unPinRecipe: function (recipe) {
|
||||
let pinnedRecipes = JSON.parse(localStorage.getItem('pinned_recipes')) || []
|
||||
let pinnedRecipes = JSON.parse(localStorage.getItem("pinned_recipes")) || []
|
||||
pinnedRecipes = pinnedRecipes.filter((r) => r.id !== recipe.id)
|
||||
console.log('pinned left', pinnedRecipes)
|
||||
console.log("pinned left", pinnedRecipes)
|
||||
this.pinned_recipes = pinnedRecipes
|
||||
localStorage.setItem('pinned_recipes', JSON.stringify(pinnedRecipes))
|
||||
}
|
||||
localStorage.setItem("pinned_recipes", JSON.stringify(pinnedRecipes))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -97,6 +97,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("shopping modal")
|
||||
this.recipe_servings = this.servings
|
||||
},
|
||||
computed: {
|
||||
|
||||
@ -100,7 +100,7 @@ export default {
|
||||
return {
|
||||
servings_value: 0,
|
||||
recipe_share_link: undefined,
|
||||
modal_id: this.recipe.id + Math.round(Math.random() * 100000),
|
||||
modal_id: undefined,
|
||||
options: {
|
||||
entryEditing: {
|
||||
date: null,
|
||||
@ -200,6 +200,7 @@ export default {
|
||||
navigator.share(shareData)
|
||||
},
|
||||
addToShopping() {
|
||||
this.modal_id = this.recipe.id + Math.round(Math.random() * 100000)
|
||||
this.$bvModal.show(`shopping_${this.modal_id}`)
|
||||
},
|
||||
},
|
||||
|
||||
@ -315,5 +315,14 @@
|
||||
"left_handed": "Left-handed mode",
|
||||
"left_handed_help": "Will optimize the UI for use with your left hand.",
|
||||
"Custom Filter": "Custom Filter",
|
||||
"shared_with": "Shared With"
|
||||
"shared_with": "Shared With",
|
||||
"sort_by": "Sort By",
|
||||
"asc": "Ascending",
|
||||
"desc": "Descending",
|
||||
"date_viewed": "Last Viewed",
|
||||
"date_cooked": "Last Cooked",
|
||||
"times_cooked": "Times Cooked",
|
||||
"date_created": "Date Created",
|
||||
"show_sortby": "Show Sort By",
|
||||
"search_rank": "Search Rank"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user