mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-03 21:37:49 -05:00
Squashed commit of the following:
commita30a27c755Author: vabene1111 <vabene1234@googlemail.com> Date: Fri Jan 21 17:49:27 2022 +0100 added keyword clicking to recipe view and fixed deleted keyword showing in search when passed via parameter commitf274f31e80Author: vabene1111 <vabene1234@googlemail.com> Date: Fri Jan 21 16:56:47 2022 +0100 fixed unit search on importer page commit20adcc0e83Author: vabene1111 <vabene1234@googlemail.com> Date: Fri Jan 21 16:44:03 2022 +0100 fixed v2 autosync flickering Merge branch 'develop' into add-recipe
This commit is contained in:
Chris Scoggins
@@ -908,27 +908,21 @@
|
||||
// })
|
||||
},
|
||||
searchUnits: function (query) {
|
||||
let apiFactory = new ApiApiFactory()
|
||||
|
||||
this.units_loading = true
|
||||
apiFactory
|
||||
.listUnits(query, 1, this.options_limit)
|
||||
.then((response) => {
|
||||
this.units = response.data.results
|
||||
|
||||
if (this.recipe !== undefined) {
|
||||
for (let s of this.recipe.steps) {
|
||||
for (let i of s.ingredients) {
|
||||
if (i.unit !== null && i.unit.id === undefined) {
|
||||
this.units.push(i.unit)
|
||||
}
|
||||
this.$http.get("{% url 'dal_unit' %}" + '?q=' + query).then((response) => {
|
||||
this.units = response.data.results;
|
||||
if (this.recipe_data !== undefined) {
|
||||
for (let x of Array.from(this.recipe_data.recipeIngredient)) {
|
||||
if (x.unit !== null && x.unit.text !== '') {
|
||||
this.units = this.units.filter(item => item.text !== x.unit.text)
|
||||
this.units.push(x.unit)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.units_loading = false
|
||||
})
|
||||
.catch((err) => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
this.makeToast(gettext('Error'), gettext('There was an error loading a resource!') + err.bodyText, 'danger')
|
||||
})
|
||||
},
|
||||
searchIngredients: function (query) {
|
||||
|
||||
@@ -8,15 +8,21 @@
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-10 col-xl-8 mt-3 mb-3">
|
||||
<b-input-group>
|
||||
<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
|
||||
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-button v-b-tooltip.hover :title="$t('show_sql')" @click="showSQL()" v-if="debug && ui.sql_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>
|
||||
</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>
|
||||
</b-button>
|
||||
<b-button v-b-toggle.collapse_advanced_search v-b-tooltip.hover :title="$t('Advanced Settings')" v-bind:variant="!searchFiltered(true) ? '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 -->
|
||||
<i class="fas fa-caret-down" v-if="!search.advanced_search_visible"></i>
|
||||
<i class="fas fa-caret-up" v-if="search.advanced_search_visible"></i>
|
||||
@@ -26,15 +32,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-collapse id="collapse_advanced_search" class="mt-2 shadow-sm" v-model="search.advanced_search_visible">
|
||||
<b-collapse id="collapse_advanced_search" class="mt-2 shadow-sm"
|
||||
v-model="search.advanced_search_visible">
|
||||
<div class="card">
|
||||
<div class="card-body p-4">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<a class="btn btn-primary btn-block text-uppercase" :href="resolveDjangoUrl('new_recipe')">{{ $t("New_Recipe") }}</a>
|
||||
<a class="btn btn-primary btn-block text-uppercase"
|
||||
:href="resolveDjangoUrl('new_recipe')">{{ $t("New_Recipe") }}</a>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<a class="btn btn-primary btn-block text-uppercase" :href="resolveDjangoUrl('data_import_url')">{{ $t("Import") }}</a>
|
||||
<a class="btn btn-primary btn-block text-uppercase"
|
||||
:href="resolveDjangoUrl('data_import_url')">{{ $t("Import") }}</a>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<button
|
||||
@@ -53,57 +62,92 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<button id="id_settings_button" class="btn btn-primary btn-block text-uppercase"><i class="fas fa-cog fa-lg m-1"></i></button>
|
||||
<button id="id_settings_button"
|
||||
class="btn btn-primary btn-block text-uppercase"><i
|
||||
class="fas fa-cog fa-lg m-1"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-popover target="id_settings_button" triggers="click" placement="bottom">
|
||||
<b-tabs content-class="mt-1" small>
|
||||
<b-tab :title="$t('Settings')" active>
|
||||
<b-form-group v-bind:label="$t('Recently_Viewed')" label-for="popover-input-1" label-cols="6" class="mb-3">
|
||||
<b-form-input type="number" v-model="ui.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-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-input type="number" v-model="ui.page_size" id="popover-input-page-count" size="sm"></b-form-input>
|
||||
<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="ui.page_size"
|
||||
id="popover-input-page-count"
|
||||
size="sm"></b-form-input>
|
||||
</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-checkbox switch v-model="ui.show_meal_plan" id="popover-input-2" size="sm"></b-form-checkbox>
|
||||
<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="ui.show_meal_plan"
|
||||
id="popover-input-2" size="sm"></b-form-checkbox>
|
||||
</b-form-group>
|
||||
|
||||
<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="ui.meal_plan_days" id="popover-input-5" size="sm"></b-form-input>
|
||||
<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="ui.meal_plan_days"
|
||||
id="popover-input-5" size="sm"></b-form-input>
|
||||
</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 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>
|
||||
<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 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 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 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 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>
|
||||
|
||||
<div class="row" style="margin-top: 1vh">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</b-popover>
|
||||
@@ -138,8 +182,12 @@
|
||||
></generic-multiselect>
|
||||
<b-input-group-append>
|
||||
<b-input-group-text>
|
||||
<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="search.search_keywords_or">{{ $t("or") }}</span>
|
||||
<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="search.search_keywords_or">{{ $t("or") }}</span>
|
||||
<span class="text-uppercase" v-else>{{ $t("and") }}</span>
|
||||
</b-form-checkbox>
|
||||
</b-input-group-text>
|
||||
@@ -178,8 +226,13 @@
|
||||
></generic-multiselect>
|
||||
<b-input-group-append>
|
||||
<b-input-group-text>
|
||||
<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="search.search_foods_or">{{ $t("or") }}</span>
|
||||
<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="search.search_foods_or">{{
|
||||
$t("or")
|
||||
}}</span>
|
||||
<span class="text-uppercase" v-else>{{ $t("and") }}</span>
|
||||
</b-form-checkbox>
|
||||
</b-input-group-text>
|
||||
@@ -203,8 +256,13 @@
|
||||
></generic-multiselect>
|
||||
<b-input-group-append>
|
||||
<b-input-group-text>
|
||||
<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="search.search_books_or">{{ $t("or") }}</span>
|
||||
<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="search.search_books_or">{{
|
||||
$t("or")
|
||||
}}</span>
|
||||
<span class="text-uppercase" v-else>{{ $t("and") }}</span>
|
||||
</b-form-checkbox>
|
||||
</b-input-group-text>
|
||||
@@ -241,7 +299,9 @@
|
||||
<div class="row">
|
||||
<div class="col col-md-12 text-right" style="margin-top: 2vh">
|
||||
<span class="text-muted">
|
||||
{{ $t("Page") }} {{ search.pagination_page }}/{{ Math.ceil(pagination_count / ui.page_size) }}
|
||||
{{ $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>
|
||||
</span>
|
||||
</div>
|
||||
@@ -249,18 +309,24 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 0.8rem">
|
||||
<div
|
||||
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 0.8rem">
|
||||
<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>
|
||||
<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" :footer_text="isRecentOrNew(r)[0]" :footer_icon="isRecentOrNew(r)[1]"> </recipe-card>
|
||||
<recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r"
|
||||
:footer_text="isRecentOrNew(r)[0]"
|
||||
:footer_icon="isRecentOrNew(r)[1]"></recipe-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top: 2vh" v-if="!random_search">
|
||||
<div class="col col-md-12">
|
||||
<b-pagination pills v-model="search.pagination_page" :total-rows="pagination_count" :per-page="ui.page_size" @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>
|
||||
@@ -369,26 +435,44 @@ export default {
|
||||
}
|
||||
let urlParams = new URLSearchParams(window.location.search)
|
||||
|
||||
|
||||
if (urlParams.has("keyword")) {
|
||||
this.search.search_keywords = []
|
||||
this.facets.Keywords = []
|
||||
for (let x of urlParams.getAll("keyword")) {
|
||||
this.search.search_keywords.push(Number.parseInt(x))
|
||||
this.facets.Keywords.push({ id: x, name: "loading..." })
|
||||
let initial_keyword = {id: Number.parseInt(x), name: "loading..."}
|
||||
this.search.search_keywords.push(initial_keyword)
|
||||
|
||||
this.genericAPI(this.Models.KEYWORD, this.Actions.FETCH, {id: initial_keyword.id}).then((response) => {
|
||||
let kw_index = this.search.search_keywords.findIndex((k => k.id === initial_keyword.id))
|
||||
this.$set(this.search.search_keywords, kw_index, response.data)
|
||||
this.$set(this.facets.Keywords, kw_index, response.data)
|
||||
}).catch((err) => {
|
||||
if (err.response.status === 404) {
|
||||
let kw_index = this.search.search_keywords.findIndex((k => k.id === initial_keyword.id))
|
||||
this.search.search_keywords.splice(kw_index, 1)
|
||||
this.facets.Keywords.splice(kw_index, 1)
|
||||
this.refreshData(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.facets.Foods = []
|
||||
for (let x of this.search.search_foods) {
|
||||
this.facets.Foods.push({id: x, name: "loading..."})
|
||||
}
|
||||
|
||||
this.facets.Keywords = []
|
||||
for (let x of this.search.search_keywords) {
|
||||
this.facets.Keywords.push({id: x, name: "loading..."})
|
||||
}
|
||||
|
||||
this.facets.Books = []
|
||||
for (let x of this.search.search_books) {
|
||||
this.facets.Books.push({id: x, name: "loading..."})
|
||||
}
|
||||
|
||||
this.loadMealPlan()
|
||||
this.refreshData(false)
|
||||
})
|
||||
@@ -532,7 +616,8 @@ export default {
|
||||
},
|
||||
showSQL: function () {
|
||||
let params = this.buildParams()
|
||||
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params).then((result) => {})
|
||||
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params).then((result) => {
|
||||
})
|
||||
},
|
||||
// TODO refactor to combine with load KeywordChildren
|
||||
loadFoodChildren({action, parentNode, callback}) {
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
<template>
|
||||
<div v-if="recipe.keywords.length > 0">
|
||||
<span :key="k.id" v-for="k in recipe.keywords" class="pl-1">
|
||||
<b-badge pill variant="light" class="font-weight-normal">{{k.label}}</b-badge>
|
||||
<a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`"><b-badge pill variant="light"
|
||||
class="font-weight-normal">{{ k.label }}</b-badge></a>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {ResolveUrlMixin} from "@/utils/utils";
|
||||
|
||||
export default {
|
||||
name: 'KeywordsComponent',
|
||||
mixins: [ResolveUrlMixin],
|
||||
props: {
|
||||
recipe: Object,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user