added persistent search settings and tweaked view

This commit is contained in:
vabene1111
2021-04-26 18:00:54 +02:00
parent dc27f39393
commit 5ee718b578
18 changed files with 605 additions and 28 deletions

View File

@ -17,14 +17,14 @@
v-bind:placeholder="$t('Search')"></b-input>
<b-input-group-append>
<b-button v-b-toggle.collapse_advanced_search variant="primary" class="shadow-none"><i
class="fas fa-caret-down" v-if="!advanced_search_visible"></i><i class="fas fa-caret-up"
v-if="advanced_search_visible"></i>
class="fas fa-caret-down" v-if="!settings.advanced_search_visible"></i><i class="fas fa-caret-up"
v-if="settings.advanced_search_visible"></i>
</b-button>
</b-input-group-append>
</b-input-group>
<b-collapse id="collapse_advanced_search" class="mt-2" v-model="advanced_search_visible">
<b-collapse id="collapse_advanced_search" class="mt-2" v-model="settings.advanced_search_visible">
<div class="card">
<div class="card-body">
<div class="row">
@ -66,9 +66,10 @@
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="search_keywords_or" name="check-button" @change="refreshData"
<b-form-checkbox v-model="settings.search_keywords_or" name="check-button"
@change="refreshData"
class="shadow-none" switch>
<span class="text-uppercase" v-if="search_keywords_or">{{ $t('or') }}</span>
<span class="text-uppercase" v-if="settings.search_keywords_or">{{ $t('or') }}</span>
<span class="text-uppercase" v-else>{{ $t('and') }}</span>
</b-form-checkbox>
</b-input-group-text>
@ -88,9 +89,10 @@
v-bind:placeholder="$t('Ingredients')"></generic-multiselect>
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="search_foods_or" name="check-button" @change="refreshData"
<b-form-checkbox v-model="settings.search_foods_or" name="check-button"
@change="refreshData"
class="shadow-none" switch>
<span class="text-uppercase" v-if="search_foods_or">{{ $t('or') }}</span>
<span class="text-uppercase" v-if="settings.search_foods_or">{{ $t('or') }}</span>
<span class="text-uppercase" v-else>{{ $t('and') }}</span>
</b-form-checkbox>
</b-input-group-text>
@ -112,9 +114,10 @@
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="search_books_or" name="check-button" @change="refreshData"
<b-form-checkbox v-model="settings.search_books_or" name="check-button"
@change="refreshData"
class="shadow-none" tyle="width: 100%" switch>
<span class="text-uppercase" v-if="search_books_or">{{ $t('or') }}</span>
<span class="text-uppercase" v-if="settings.search_books_or">{{ $t('or') }}</span>
<span class="text-uppercase" v-else>{{ $t('and') }}</span>
</b-form-checkbox>
</b-input-group-text>
@ -141,12 +144,14 @@
<template
v-if="search_input === '' && search_keywords.length === 0 && search_foods.length === 0 && search_books.length === 0">
<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>
:meal_plan="m" :footer_text="m.meal_type_name"
footer_icon="far fa-calendar-alt"></recipe-card>
<recipe-card v-for="r in last_viewed_recipes" v-bind:key="`rv_${r.id}`" :recipe="r" v-bind:footer_text="$t('Recently_Viewed')" footer_icon="fas fa-eye"></recipe-card>
<recipe-card v-for="r in last_viewed_recipes" v-bind:key="`rv_${r.id}`" :recipe="r"
v-bind:footer_text="$t('Recently_Viewed')" footer_icon="fas fa-eye"></recipe-card>
</template>
<recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r" ></recipe-card>
<recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r"></recipe-card>
</div>
</div>
</div>
@ -182,6 +187,10 @@ import {BootstrapVue} from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import moment from 'moment'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
import {ResolveUrlMixin} from "@/utils/utils";
import LoadingSpinner from "@/components/LoadingSpinner";
@ -208,11 +217,12 @@ export default {
search_foods: [],
search_books: [],
search_keywords_or: true,
search_foods_or: true,
search_books_or: true,
advanced_search_visible: true,
settings: {
search_keywords_or: true,
search_foods_or: true,
search_books_or: true,
advanced_search_visible: false,
},
pagination_count: 0,
pagination_page: 1,
@ -220,10 +230,24 @@ export default {
},
mounted() {
if (this.$cookies.isKey('search_settings')) {
console.log('loaded cookie settings')
this.settings = this.$cookies.get("search_settings")
}
this.refreshData()
this.loadSpecialData()
},
watch: {
settings: {
handler(val) {
console.log('saved cookie settings', val)
this.$cookies.set("search_settings", this.settings, -1)
},
deep: true
}
},
methods: {
refreshData: function () {
let apiClient = new ApiApiFactory()
@ -241,9 +265,9 @@ export default {
return A["id"];
}),
keywords_or: this.search_keywords_or,
foods_or: this.search_foods_or,
books_or: this.search_books_or,
keywords_or: this.settings.search_keywords_or,
foods_or: this.settings.search_foods_or,
books_or: this.settings.search_books_or,
internal: this.search_internal,
page: this.pagination_page,

View File

@ -23,6 +23,7 @@
<template v-if="recipe !== null">
{{ recipe.description }}
<keywords :recipe="recipe" style="margin-top: 4px"></keywords>
<b-badge pill variant="info" v-if="!recipe.internal">{{ $t('External') }}</b-badge>
</template>
<template v-else>{{ meal_plan.note }}</template>
</b-card-text>

View File

@ -3,14 +3,12 @@
"all_fields_optional": "All fields are optional and can be left empty.",
"convert_internal": "Convert to internal recipe",
"show_only_internal": "Show only internal recipes",
"Log_Recipe_Cooking": "Log Recipe Cooking",
"External_Recipe_Image": "External Recipe Image",
"Add_to_Book": "Add to Book",
"Add_to_Shopping": "Add to Shopping",
"Add_to_Plan": "Add to Plan",
"Step_start_time": "Step start time",
"Select_Book": "Select Book",
"Recipe_Image": "Recipe Image",
"Import_finished": "Import finished",
@ -20,7 +18,6 @@
"Url_Import": "Url Import",
"Reset_Search": "Reset Search",
"Recently_Viewed": "Recently Viewed",
"Keywords": "Keywords",
"Books": "Books",
"Proteins": "Proteins",
@ -39,6 +36,7 @@
"Servings": "Servings",
"Waiting": "Waiting",
"Preparation": "Preparation",
"External": "External",
"Edit": "Edit",
"Open": "Open",
"Save": "Save",