several search related improvements

This commit is contained in:
vabene1111
2021-07-07 17:45:05 +02:00
parent b42e6ac0f6
commit da57e656eb
13 changed files with 104 additions and 43 deletions

View File

@ -10,6 +10,9 @@
<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-group-append>
<b-button class="shadow-none btn btn-light" @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-bind:class="{'btn-primary': !isAdvancedSettingsSet(), 'btn-danger': isAdvancedSettingsSet()}"
class="shadow-none btn"><i
@ -73,6 +76,21 @@
></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="settings.page_count"
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"
@ -85,6 +103,19 @@
size="sm"
></b-form-checkbox>
</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="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" style="text-align: right">
@ -173,7 +204,7 @@
<div class="row">
<div class="col col-md-12 text-right" style="margin-top: 2vh">
<span class="text-muted">
{{ $t('Page') }} {{ settings.pagination_page }}/{{ pagination_count }} <a href="#" @click="resetSearch"><i
{{ $t('Page') }} {{ settings.pagination_page }}/{{ Math.ceil(pagination_count/settings.page_count) }} <a href="#" @click="resetSearch"><i
class="fas fa-times-circle"></i> {{ $t('Reset') }}</a>
</span>
</div>
@ -181,10 +212,10 @@
<div class="row">
<div class="col col-md-12">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 0.8rem;" >
<template
v-if="settings.search_input === '' && settings.search_keywords.length === 0 && settings.search_foods.length === 0 && settings.search_books.length === 0">
v-if="settings.search_input === '' && settings.search_keywords.length === 0 && settings.search_foods.length === 0 && settings.search_books.length === 0 && this.settings.pagination_page === 1 && !random_search">
<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>
@ -198,12 +229,12 @@
</div>
</div>
<div class="row" style="margin-top: 2vh">
<div class="row" style="margin-top: 2vh" v-if="!random_search">
<div class="col col-md-12">
<b-pagination pills
v-model="settings.pagination_page"
:total-rows="pagination_count"
per-page="25"
:per-page="settings.page_count"
@change="pageChange"
align="center">
@ -269,11 +300,13 @@ export default {
advanced_search_visible: false,
show_meal_plan: true,
recently_viewed: 5,
sort_by_new: true,
pagination_page: 1,
page_count: 25,
},
pagination_count: 0,
random_search: false,
}
},
@ -333,9 +366,13 @@ export default {
'settings.search_input': _debounce(function () {
this.refreshData(false)
}, 300),
'settings.page_count': _debounce(function () {
this.refreshData(false)
}, 300),
},
methods: {
refreshData: function (page_load) {
refreshData: function (random) {
this.random_search = random
let apiClient = new ApiApiFactory()
apiClient.listRecipes(
this.settings.search_input,
@ -353,14 +390,19 @@ export default {
this.settings.search_books_or,
this.settings.search_internal,
undefined,
random,
this.settings.sort_by_new,
this.settings.pagination_page,
this.settings.page_count
).then(result => {
window.scrollTo(0, 0);
this.pagination_count = result.data.count
this.recipes = result.data.results
})
},
openRandom: function () {
this.refreshData(true)
},
loadMealPlan: function () {
let apiClient = new ApiApiFactory()
@ -383,7 +425,7 @@ export default {
let apiClient = new ApiApiFactory()
if (this.settings.recently_viewed > 0) {
apiClient.listRecipes(undefined, undefined, undefined, undefined, undefined, undefined,
undefined, undefined, undefined, undefined, undefined, {query: {last_viewed: this.settings.recently_viewed}}).then(result => {
undefined, undefined, undefined, this.settings.sort_by_new, 1, this.settings.recently_viewed, {query: {last_viewed: this.settings.recently_viewed}}).then(result => {
this.last_viewed_recipes = result.data.results
})
} else {
@ -405,7 +447,7 @@ export default {
},
pageChange: function (page) {
this.settings.pagination_page = page
this.refreshData()
this.refreshData(false)
},
isAdvancedSettingsSet() {
return ((this.settings.search_keywords.length + this.settings.search_foods.length + this.settings.search_books.length) > 0)

View File

@ -21,6 +21,8 @@
"Add_to_Shopping": "Add to Shopping",
"Add_to_Plan": "Add to Plan",
"Step_start_time": "Step start time",
"Sort_by_new": "Sort by new",
"Recipes_per_page": "Recipes per Page",
"Meal_Plan": "Meal Plan",
"Select_Book": "Select Book",

View File

@ -3942,12 +3942,13 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
* @param {string} [booksOr] If recipe should be in all (AND) or any (OR) any of the provided books.
* @param {string} [internal] true or false. If only internal recipes should be returned or not.
* @param {string} [random] true or false. returns the results in randomized order.
* @param {string} [_new] true or false. returns new results first in search results
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
listRecipes: async (query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, page?: number, pageSize?: number, options: any = {}): Promise<RequestArgs> => {
listRecipes: async (query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, _new?: string, page?: number, pageSize?: number, options: any = {}): Promise<RequestArgs> => {
const localVarPath = `/api/recipe/`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
@ -3996,6 +3997,10 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
localVarQueryParameter['random'] = random;
}
if (_new !== undefined) {
localVarQueryParameter['new'] = _new;
}
if (page !== undefined) {
localVarQueryParameter['page'] = page;
}
@ -7577,13 +7582,14 @@ export const ApiApiFp = function(configuration?: Configuration) {
* @param {string} [booksOr] If recipe should be in all (AND) or any (OR) any of the provided books.
* @param {string} [internal] true or false. If only internal recipes should be returned or not.
* @param {string} [random] true or false. returns the results in randomized order.
* @param {string} [_new] true or false. returns new results first in search results
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async listRecipes(query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, page?: number, pageSize?: number, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<InlineResponse200>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.listRecipes(query, keywords, foods, books, keywordsOr, foodsOr, booksOr, internal, random, page, pageSize, options);
async listRecipes(query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, _new?: string, page?: number, pageSize?: number, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<InlineResponse200>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.listRecipes(query, keywords, foods, books, keywordsOr, foodsOr, booksOr, internal, random, _new, page, pageSize, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
@ -9002,13 +9008,14 @@ export const ApiApiFactory = function (configuration?: Configuration, basePath?:
* @param {string} [booksOr] If recipe should be in all (AND) or any (OR) any of the provided books.
* @param {string} [internal] true or false. If only internal recipes should be returned or not.
* @param {string} [random] true or false. returns the results in randomized order.
* @param {string} [_new] true or false. returns new results first in search results
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
listRecipes(query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, page?: number, pageSize?: number, options?: any): AxiosPromise<InlineResponse200> {
return localVarFp.listRecipes(query, keywords, foods, books, keywordsOr, foodsOr, booksOr, internal, random, page, pageSize, options).then((request) => request(axios, basePath));
listRecipes(query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, _new?: string, page?: number, pageSize?: number, options?: any): AxiosPromise<InlineResponse200> {
return localVarFp.listRecipes(query, keywords, foods, books, keywordsOr, foodsOr, booksOr, internal, random, _new, page, pageSize, options).then((request) => request(axios, basePath));
},
/**
*
@ -10455,14 +10462,15 @@ export class ApiApi extends BaseAPI {
* @param {string} [booksOr] If recipe should be in all (AND) or any (OR) any of the provided books.
* @param {string} [internal] true or false. If only internal recipes should be returned or not.
* @param {string} [random] true or false. returns the results in randomized order.
* @param {string} [_new] true or false. returns new results first in search results
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof ApiApi
*/
public listRecipes(query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, page?: number, pageSize?: number, options?: any) {
return ApiApiFp(this.configuration).listRecipes(query, keywords, foods, books, keywordsOr, foodsOr, booksOr, internal, random, page, pageSize, options).then((request) => request(this.axios, this.basePath));
public listRecipes(query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, _new?: string, page?: number, pageSize?: number, options?: any) {
return ApiApiFp(this.configuration).listRecipes(query, keywords, foods, books, keywordsOr, foodsOr, booksOr, internal, random, _new, page, pageSize, options).then((request) => request(this.axios, this.basePath));
}
/**