several search related improvements
This commit is contained in:
@ -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)
|
||||
|
@ -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",
|
||||
|
@ -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));
|
||||
}
|
||||
|
||||
/**
|
||||
|
Reference in New Issue
Block a user