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

search ui improvements and filter

Browse Source
This commit is contained in:
vabene1111
2021-04-18 02:55:50 +02:00
parent 880db58d38
commit f78f7dfc14
8 changed files with 74 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,40 +29,82 @@
<div class="card-body">
<div class="row">
<div class="col-md-4">
<a class="card-link" :href="resolveDjangoUrl('new_recipe')">new Recipe</a>
<a class="btn btn-primary" :href="resolveDjangoUrl('new_recipe')">new Recipe</a>
</div>
<div class="col-md-4">
<a class="card-link" :href="resolveDjangoUrl('data_import_url')">URL Import</a>
<a class="btn btn-primary" :href="resolveDjangoUrl('data_import_url')">URL Import</a>
</div>
<div class="col-md-4">
<a class="card-link" href="#">Rest Search</a>
<a class="btn btn-primary" href="#">Rest Search</a>
</div>
<div class="col-md-4">
<input type="checkbox" v-model="search_internal" @change="refreshData"> Internal only
<b-form-checkbox v-model="search_internal" name="check-button" @change="refreshData"
class="shadow-none" switch>
{{ $t('show_only_internal') }}
</b-form-checkbox>
</div>
</div>
<div class="row">
<div class="col-md-12">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_keywords"
style="margin-top: 1vh"
search_function="listKeywords" label="label"
v-bind:placeholder="$t('Keywords')"></generic-multiselect>
<input type="checkbox" v-model="search_keywords_or" @change="genericSelectChanged">
<div class="col-12">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_foods"
style="margin-top: 1vh"
search_function="listFoods" label="name"
v-bind:placeholder="$t('Ingredients')"></generic-multiselect>
<input type="checkbox" v-model="search_foods_or" @change="genericSelectChanged">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_books"
style="margin-top: 1vh"
search_function="listRecipeBooks" label="name"
v-bind:placeholder="$t('Books')"></generic-multiselect>
<input type="checkbox" v-model="search_books_or" @change="genericSelectChanged">
<b-input-group style="margin-top: 1vh">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_keywords"
search_function="listKeywords" label="label" style="width: 90%"
v-bind:placeholder="$t('Keywords')"></generic-multiselect>
<b-input-group-append is-text style="width: 10%">
<b-form-checkbox v-model="search_keywords_or" name="check-button" @change="refreshData"
class="shadow-none" style="width: 100%" switch>
<template v-if="search_keywords_or">{{ $t('OR') }}</template>
<template v-else>{{ $t('AND') }}</template>
</b-form-checkbox>
</b-input-group-append>
</b-input-group>
</div>
</div>
<div class="row">
<div class="col-12">
<b-input-group style="margin-top: 1vh">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_foods"
search_function="listFoods" label="name" style="width: 90%"
v-bind:placeholder="$t('Ingredients')"></generic-multiselect>
<b-input-group-append is-text style="width: 10%">
<b-form-checkbox v-model="search_foods_or" name="check-button" @change="refreshData"
class="shadow-none" tyle="width: 100%" switch>
{{ $t('OR') }}
</b-form-checkbox>
</b-input-group-append>
</b-input-group>
</div>
</div>
<div class="row">
<div class="col-12">
<b-input-group style="margin-top: 1vh">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_books"
search_function="listRecipeBooks" label="name" style="width: 90%"
v-bind:placeholder="$t('Books')"></generic-multiselect>
<b-input-group-append is-text style="width: 10%">
<b-form-checkbox v-model="search_books_or" name="check-button" @change="refreshData"
class="shadow-none" tyle="width: 100%" switch>
{{ $t('OR') }}
</b-form-checkbox>
</b-input-group-append>
</b-input-group>
</div>
</div>
</div>
</div>
</b-collapse>

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

@ -2,7 +2,7 @@
<multiselect
v-model="selected_objects"
:options="objects"
:close-on-select="false"
:close-on-select="true"
:clear-on-select="true"
:hide-selected="true"
:preserve-search="true"

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

@ -2,6 +2,7 @@
"import_running": "Import running, please wait!",
"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",
@ -41,5 +42,7 @@
"Search": "Search",
"Import": "Import",
"Print": "Print",
"OR": "OR",
"AND": "AND",
"Information": "Information"
}