mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-08 07:38:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature/importer_to_vue

Browse Source 
# Conflicts:
#	vue/src/apps/RecipeEditView/RecipeEditView.vue
#	vue/src/utils/openapi/api.ts
This commit is contained in:
vabene1111
2022-04-22 16:41:13 +02:00
parent 57ec6a2b3d 05383a2bc3
commit 2ddb0c719a
62 changed files with 2619 additions and 1380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
vue/src/apps/IngredientEditorView/IngredientEditorView.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<div id="app">
<beta-warning></beta-warning>
<div class="row mt-2">
<div class="col col-md-6">
<generic-multiselect @change="food = $event.val; refreshList()"
:model="Models.FOOD"
:initial_single_selection="food"
:multiple="false"></generic-multiselect>
<b-button @click="show_food_delete=true" :disabled="food === null"><i class="fas fa-trash-alt"></i>
</b-button>
<b-button @click="generic_model = Models.FOOD; generic_action=Actions.MERGE" :disabled="food === null">
<i class="fas fa-compress-arrows-alt"></i>
</b-button>
<generic-modal-form :model="Models.FOOD" :action="generic_action" :show="generic_model === Models.FOOD"
:item1="food"
@finish-action="food = null; generic_action=null; generic_model=null"/>
</div>
<div class="col col-md-6">
<generic-multiselect
@change="unit = $event.val; refreshList()"
:model="Models.UNIT"
:initial_single_selection="unit"
:multiple="false"></generic-multiselect>
<b-button @click="generic_model = Models.UNIT; generic_action=Actions.DELETE" :disabled="unit === null">
<i class="fas fa-trash-alt"></i>
</b-button>
<b-button @click="generic_model = Models.UNIT; generic_action=Actions.MERGE" :disabled="unit === null">
<i class="fas fa-compress-arrows-alt"></i>
</b-button>
<generic-modal-form :model="Models.UNIT" :action="generic_action" :show="generic_model === Models.UNIT"
:item1="unit"
@finish-action="unit = null; generic_action=null; generic_model=null"/>
</div>
</div>
<div class="row mt-2">
<div class="col col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th>{{ $t('Amount') }}</th>
<th>{{ $t('Unit') }}</th>
<th>{{ $t('Food') }}</th>
<th>{{ $t('Note') }}</th>
<th>
<b-button variant="success" @click="updateIngredient()"><i class="fas fa-save"></i>
</b-button>
</th>
</tr>
</thead>
<tr v-if="loading">
<td colspan="4">
<loading-spinner></loading-spinner>
</td>
</tr>
<template v-if="!loading">
<tbody v-for="i in ingredients" v-bind:key="i.id">
<tr v-if="i.used_in_recipes.length > 0">
<td colspan="5">
<a v-for="r in i.used_in_recipes" :href="resolveDjangoUrl('view_recipe',r.id)"
v-bind:key="r.id" target="_blank" rel="noreferrer nofollow">{{ r.name }}</a>
</td>
</tr>
<tr>
<td style="width: 5vw">
<input type="number" class="form-control" v-model="i.amount"
@input="$set(i, 'changed', true)">
</td>
<td style="width: 30vw">
<generic-multiselect @change="i.unit = $event.val; $set(i, 'changed', true)"
:initial_single_selection="i.unit"
:model="Models.UNIT"
:search_on_load="false"
:allow_create="true"
:create_placeholder="$t('Create')"
:multiple="false"></generic-multiselect>
</td>
<td style="width: 30vw">
<generic-multiselect @change="i.food = $event.val; $set(i, 'changed', true)"
:initial_single_selection="i.food"
:model="Models.FOOD"
:search_on_load="false"
:allow_create="true"
:create_placeholder="$t('Create')"
:multiple="false"></generic-multiselect>
</td>
<td style="width: 30vw">
<input class="form-control" v-model="i.note" @keydown="$set(i, 'changed', true)">
</td>
<td style="width: 5vw">
<b-button :disabled="i.changed !== true"
:variant="(i.changed !== true) ? 'primary' : 'success'"
@click="updateIngredient(i)">
<i class="fas fa-save"></i>
</b-button>
<b-button variant="danger"
@click="deleteIngredient(i)">
<i class="fas fa-trash"></i>
</b-button>
</td>
</tr>
</tbody>
</template>
</table>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue"
import {BootstrapVue} from "bootstrap-vue"
import "bootstrap-vue/dist/bootstrap-vue.css"
import {ApiMixin, ResolveUrlMixin, StandardToasts} from "@/utils/utils"
import {ApiApiFactory} from "@/utils/openapi/api";
import GenericMultiselect from "@/components/GenericMultiselect";
import GenericModalForm from "@/components/Modals/GenericModalForm";
import LoadingSpinner from "@/components/LoadingSpinner";
import BetaWarning from "@/components/BetaWarning";
Vue.use(BootstrapVue)
export default {
name: "IngredientEditorView",
mixins: [ApiMixin, ResolveUrlMixin],
components: {BetaWarning, LoadingSpinner, GenericMultiselect, GenericModalForm},
data() {
return {
ingredients: [],
loading: false,
food: null,
unit: null,
generic_action: null,
generic_model: null,
show_food_delete: false,
show_unit_delete: false,
}
},
computed: {},
mounted() {
this.$i18n.locale = window.CUSTOM_LOCALE
if (window.DEFAULT_FOOD !== -1) {
this.food = {id: window.DEFAULT_FOOD}
let apiClient = new ApiApiFactory()
apiClient.retrieveFood(this.food.id).then(r => {
this.food = r.data
})
}
if (window.DEFAULT_UNIT !== -1) {
this.unit = {id: window.DEFAULT_UNIT}
let apiClient = new ApiApiFactory()
apiClient.retrieveUnit(this.unit.id).then(r => {
this.unit = r.data
})
}
this.refreshList()
},
methods: {
refreshList: function () {
if (this.food === null && this.unit === null) {
this.ingredients = []
} else {
this.loading = true
let apiClient = new ApiApiFactory()
let params = {'query': {'simple': 1}}
if (this.food !== null) {
params.query.food = this.food.id
}
if (this.unit !== null) {
params.query.unit = this.unit.id
}
apiClient.listIngredients(params).then(result => {
this.ingredients = result.data
this.loading = false
}).catch((err) => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
this.loading = false
})
}
},
updateIngredient: function (i) {
let update_list = []
if (i === undefined) {
this.ingredients.forEach(x => {
if (x.changed) {
update_list.push(x)
}
})
} else {
update_list = [i]
}
update_list.forEach(i => {
let apiClient = new ApiApiFactory()
apiClient.updateIngredient(i.id, i).then(r => {
this.$set(i, 'changed', false)
}).catch((r, e) => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
})
})
},
deleteIngredient: function (i){
if (confirm(this.$t('delete_confirmation', this.$t('Ingredient')))){
let apiClient = new ApiApiFactory()
apiClient.destroyIngredient(i.id).then(r => {
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
this.ingredients = this.ingredients.filter(li => li.id !== i.id)
}).catch(e => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
})
}
}
},
}
</script>
<style>
</style>

18
vue/src/apps/IngredientEditorView/main.js Normal file
View File

@@ -0,0 +1,18 @@
import Vue from 'vue'
import App from './IngredientEditorView.vue'
import i18n from '@/i18n'
Vue.config.productionTip = false
// TODO move this and other default stuff to centralized JS file (verify nothing breaks)
let publicPath = localStorage.STATIC_URL + 'vue/'
if (process.env.NODE_ENV === 'development') {
publicPath = 'http://localhost:8080/'
}
export default __webpack_public_path__ = publicPath // eslint-disable-line
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')

77
vue/src/apps/ModelListView/ModelListView.vue
View File

@@ -1,6 +1,7 @@
<template>
<div id="app" style="margin-bottom: 4vh" v-if="this_model">
<generic-modal-form v-if="this_model" :model="this_model" :action="this_action" :item1="this_item" :item2="this_target" :show="show_modal" @finish-action="finishAction" />
<generic-modal-form v-if="this_model" :model="this_model" :action="this_action" :item1="this_item"
:item2="this_target" :show="show_modal" @finish-action="finishAction"/>
<div class="row">
<div class="col-md-2 d-none d-md-block"></div>
@@ -17,17 +18,20 @@
<div class="col-md-9" style="margin-top: 1vh">
<h3>
<!-- <span><b-button variant="link" size="sm" class="text-dark shadow-none"><i class="fas fa-chevron-down"></i></b-button></span> -->
<model-menu />
<model-menu/>
<span>{{ $t(this.this_model.name) }}</span>
<span v-if="apiName !== 'Step' && apiName !== 'CustomFilter'">
<b-button variant="link" @click="startAction({ action: 'new' })">
<i class="fas fa-plus-circle fa-2x"></i>
</b-button> </span
><!-- TODO add proper field to model config to determine if create should be available or not -->
>
<!-- TODO add proper field to model config to determine if create should be available or not -->
</h3>
</div>
<div class="col-md-3" style="position: relative; margin-top: 1vh">
<b-form-checkbox v-model="show_split" name="check-button" v-if="paginated" class="shadow-none" style="position: relative; top: 50%; transform: translateY(-50%)" switch>
<b-form-checkbox v-model="show_split" name="check-button" v-if="paginated"
class="shadow-none"
style="position: relative; top: 50%; transform: translateY(-50%)" switch>
{{ $t("show_split_screen") }}
</b-form-checkbox>
</div>
@@ -37,19 +41,29 @@
<div class="col" :class="{ 'col-md-6': show_split }">
<!-- model isn't paginated and loads in one API call -->
<div v-if="!paginated">
<generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i" :model="this_model" @item-action="startAction($event, 'left')" @finish-action="finishAction" />
<generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i"
:model="this_model" @item-action="startAction($event, 'left')"
@finish-action="finishAction"/>
</div>
<!-- model is paginated and needs managed -->
<generic-infinite-cards v-if="paginated" :card_counts="left_counts" :scroll="show_split" @search="getItems($event, 'left')" @reset="resetList('left')">
<generic-infinite-cards v-if="paginated" :card_counts="left_counts" :scroll="show_split"
@search="getItems($event, 'left')" @reset="resetList('left')">
<template v-slot:cards>
<generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i" :model="this_model" @item-action="startAction($event, 'left')" @finish-action="finishAction" />
<generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i"
:model="this_model"
@item-action="startAction($event, 'left')"
@finish-action="finishAction"/>
</template>
</generic-infinite-cards>
</div>
<div class="col col-md-6" v-if="show_split">
<generic-infinite-cards v-if="this_model" :card_counts="right_counts" :scroll="show_split" @search="getItems($event, 'right')" @reset="resetList('right')">
<generic-infinite-cards v-if="this_model" :card_counts="right_counts" :scroll="show_split"
@search="getItems($event, 'right')" @reset="resetList('right')">
<template v-slot:cards>
<generic-horizontal-card v-for="i in items_right" v-bind:key="i.id" :item="i" :model="this_model" @item-action="startAction($event, 'right')" @finish-action="finishAction" />
<generic-horizontal-card v-for="i in items_right" v-bind:key="i.id" :item="i"
:model="this_model"
@item-action="startAction($event, 'right')"
@finish-action="finishAction"/>
</template>
</generic-infinite-cards>
</div>
@@ -62,18 +76,18 @@
<script>
import Vue from "vue"
import { BootstrapVue } from "bootstrap-vue"
import {BootstrapVue} from "bootstrap-vue"
import "bootstrap-vue/dist/bootstrap-vue.css"
import { CardMixin, ApiMixin, getConfig } from "@/utils/utils"
import { StandardToasts, ToastMixin } from "@/utils/utils"
import {CardMixin, ApiMixin, getConfig, resolveDjangoUrl} from "@/utils/utils"
import {StandardToasts, ToastMixin} from "@/utils/utils"
import GenericInfiniteCards from "@/components/GenericInfiniteCards"
import GenericHorizontalCard from "@/components/GenericHorizontalCard"
import GenericModalForm from "@/components/Modals/GenericModalForm"
import ModelMenu from "@/components/ContextMenu/ModelMenu"
import { ApiApiFactory } from "@/utils/openapi/api"
import {ApiApiFactory} from "@/utils/openapi/api"
//import StorageQuota from "@/components/StorageQuota";
Vue.use(BootstrapVue)
@@ -94,8 +108,8 @@ export default {
// this.Models and this.Actions inherited from ApiMixin
items_left: [],
items_right: [],
right_counts: { max: 9999, current: 0 },
left_counts: { max: 9999, current: 0 },
right_counts: {max: 9999, current: 0},
left_counts: {max: 9999, current: 0},
this_model: undefined,
model_menu: undefined,
this_action: undefined,
@@ -127,7 +141,7 @@ export default {
this.header_component_name = this.this_model?.list?.header_component?.name ?? undefined
this.$nextTick(() => {
if (!this.paginated) {
this.getItems({ page: 1 }, "left")
this.getItems({page: 1}, "left")
}
})
this.$i18n.locale = window.CUSTOM_LOCALE
@@ -144,7 +158,6 @@ export default {
let target = e?.target ?? undefined
this.this_item = source
this.this_target = target
switch (e.action) {
case "delete":
this.this_action = this.Actions.DELETE
@@ -159,6 +172,16 @@ export default {
this.this_action = this.Actions.UPDATE
this.show_modal = true
break
case "ingredient-editor": {
let url = resolveDjangoUrl("view_ingredient_editor")
if (this.this_model === this.Models.FOOD) {
window.location.href = url + '?food_id=' + e.source.id
}
if (this.this_model === this.Models.UNIT) {
window.location.href = url + '?unit_id=' + e.source.id
}
break
}
case "move":
if (target == null) {
this.this_item = e.source
@@ -236,7 +259,7 @@ export default {
},
getItems: function (params = {}, col) {
let column = col || "left"
params.options = { query: { extended: 1 } } // returns extended values in API response
params.options = {query: {extended: 1}} // returns extended values in API response
this.genericAPI(this.this_model, this.Actions.LIST, params)
.then((result) => {
let results = result.data?.results ?? result.data
@@ -257,7 +280,7 @@ export default {
})
},
getThis: function (id, callback) {
return this.genericAPI(this.this_model, this.Actions.FETCH, { id: id })
return this.genericAPI(this.this_model, this.Actions.FETCH, {id: id})
},
saveThis: function (item) {
if (!item?.id) {
@@ -268,7 +291,7 @@ export default {
// then place all new items at the top of the list - could sort instead
this.items_left = [result.data].concat(this.destroyCard(result?.data?.id, this.items_left))
// this creates a deep copy to make sure that columns stay independent
this.items_right = [{ ...result.data }].concat(this.destroyCard(result?.data?.id, this.items_right))
this.items_right = [{...result.data}].concat(this.destroyCard(result?.data?.id, this.items_right))
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
})
.catch((err) => {
@@ -291,10 +314,10 @@ export default {
addShopping: function (food) {
let api = new ApiApiFactory()
food.shopping = true
api.createShoppingListEntry({ food: food, amount: 1 }).then(() => {
api.createShoppingListEntry({food: food, amount: 1}).then(() => {
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
this.refreshCard(food, this.items_left)
this.refreshCard({ ...food }, this.items_right)
this.refreshCard({...food}, this.items_right)
})
},
updateThis: function (item) {
@@ -313,7 +336,7 @@ export default {
this.clearState()
return
}
this.genericAPI(this.this_model, this.Actions.MOVE, { source: source_id, target: target_id })
this.genericAPI(this.this_model, this.Actions.MOVE, {source: source_id, target: target_id})
.then((result) => {
this.moveUpdateItem(source_id, target_id)
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_MOVE)
@@ -395,8 +418,8 @@ export default {
let params = {
root: item.id,
pageSize: 200,
query: { extended: 1 },
options: { query: { extended: 1 } },
query: {extended: 1},
options: {query: {extended: 1}},
}
this.genericAPI(this.this_model, this.Actions.LIST, params)
.then((result) => {
@@ -415,7 +438,7 @@ export default {
getRecipes: function (col, item) {
let parent = {}
// TODO: make this generic
let params = { pageSize: 50, random: true }
let params = {pageSize: 50, random: true}
params[this.this_recipe_param] = item.id
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params)
.then((result) => {
@@ -434,7 +457,7 @@ export default {
refreshThis: function (id) {
this.getThis(id).then((result) => {
this.refreshCard(result.data, this.items_left)
this.refreshCard({ ...result.data }, this.items_right)
this.refreshCard({...result.data}, this.items_right)
})
},
deleteThis: function (id) {

275
vue/src/apps/RecipeEditView/RecipeEditView.vue
View File

@@ -11,7 +11,7 @@
<div class="row">
<div class="col-md-12">
<label for="id_name"> {{ $t("Name") }}</label>
<input class="form-control" id="id_name" v-model="recipe.name" />
<input class="form-control" id="id_name" v-model="recipe.name"/>
</div>
</div>
<div class="row pt-2">
@@ -19,14 +19,16 @@
<label for="id_description">
{{ $t("Description") }}
</label>
<textarea id="id_description" class="form-control" v-model="recipe.description" maxlength="512"></textarea>
<textarea id="id_description" class="form-control" v-model="recipe.description"
maxlength="512"></textarea>
</div>
</div>
<!-- Image and misc properties -->
<div class="row pt-2">
<div class="col-md-6" style="max-height: 50vh; min-height: 30vh">
<input id="id_file_upload" ref="file_upload" type="file" hidden @change="uploadImage($event.target.files[0])" />
<input id="id_file_upload" ref="file_upload" type="file" hidden
@change="uploadImage($event.target.files[0])"/>
<div
class="h-100 w-100 border border-primary rounded"
@@ -35,26 +37,31 @@
@dragover.prevent
@click="$refs.file_upload.click()"
>
<i class="far fa-image fa-10x text-primary" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)" v-if="!recipe.image"></i>
<i class="far fa-image fa-10x text-primary"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
v-if="!recipe.image"></i>
<img :src="recipe.image" id="id_image" class="img img-fluid img-responsive" style="object-fit: cover; height: 100%" v-if="recipe.image" />
<img :src="recipe.image" id="id_image" class="img img-fluid img-responsive"
style="object-fit: cover; height: 100%" v-if="recipe.image"/>
</div>
<button style="bottom: 10px; left: 30px; position: absolute" class="btn btn-danger" @click="deleteImage" v-if="recipe.image">{{ $t("Delete") }}</button>
<button style="bottom: 10px; left: 30px; position: absolute" class="btn btn-danger"
@click="deleteImage" v-if="recipe.image">{{ $t("Delete") }}
</button>
</div>
<div class="col-md-6 mt-1">
<label for="id_name"> {{ $t("Preparation") }} {{ $t("Time") }} ({{ $t("min") }})</label>
<input class="form-control" id="id_prep_time" v-model="recipe.working_time" type="number" />
<br />
<input class="form-control" id="id_prep_time" v-model="recipe.working_time" type="number"/>
<br/>
<label for="id_name"> {{ $t("Waiting") }} {{ $t("Time") }} ({{ $t("min") }})</label>
<input class="form-control" id="id_wait_time" v-model="recipe.waiting_time" type="number" />
<br />
<input class="form-control" id="id_wait_time" v-model="recipe.waiting_time" type="number"/>
<br/>
<label for="id_name"> {{ $t("Servings") }}</label>
<input class="form-control" id="id_servings" v-model="recipe.servings" type="number" />
<br />
<input class="form-control" id="id_servings" v-model="recipe.servings" type="number"/>
<br/>
<label for="id_name"> {{ $t("Servings") }} {{ $t("Text") }}</label>
<input class="form-control" id="id_servings_text" v-model="recipe.servings_text" maxlength="32" />
<br />
<input class="form-control" id="id_servings_text" v-model="recipe.servings_text" maxlength="32"/>
<br/>
<label for="id_name"> {{ $t("Keywords") }}</label>
<multiselect
v-model="recipe.keywords"
@@ -122,26 +129,31 @@
<div class="card-body" v-if="recipe.nutrition !== null">
<b-alert show>
There is currently only very basic support for tracking nutritional information. A
<a href="https://github.com/vabene1111/recipes/issues/896" target="_blank" rel="noreferrer nofollow">big update</a> is planned to improve on this in many different areas.
<a href="https://github.com/vabene1111/recipes/issues/896" target="_blank"
rel="noreferrer nofollow">big update</a> is planned to improve on this in many
different areas.
</b-alert>
<label for="id_name"> {{ $t(energy()) }}</label>
<input class="form-control" id="id_calories" v-model="recipe.nutrition.calories" />
<input class="form-control" id="id_calories" v-model="recipe.nutrition.calories"/>
<label for="id_name"> {{ $t("Carbohydrates") }}</label>
<input class="form-control" id="id_carbohydrates" v-model="recipe.nutrition.carbohydrates" />
<input class="form-control" id="id_carbohydrates"
v-model="recipe.nutrition.carbohydrates"/>
<label for="id_name"> {{ $t("Fats") }}</label>
<input class="form-control" id="id_fats" v-model="recipe.nutrition.fats" />
<input class="form-control" id="id_fats" v-model="recipe.nutrition.fats"/>
<label for="id_name"> {{ $t("Proteins") }}</label>
<input class="form-control" id="id_proteins" v-model="recipe.nutrition.proteins" />
<input class="form-control" id="id_proteins" v-model="recipe.nutrition.proteins"/>
</div>
</b-collapse>
</div>
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button squared block v-b-toggle.additional_collapse class="text-left" variant="outline-primary">{{ $t("additional_options") }}</b-button>
<b-button squared block v-b-toggle.additional_collapse class="text-left"
variant="outline-primary">{{ $t("additional_options") }}
</b-button>
</b-card-header>
<b-collapse id="additional_collapse" class="mt-2" v-model="additional_visible">
<b-form-group>
@@ -150,8 +162,12 @@
<b-input-group-text squared>
<b-form-checkbox v-model="recipe.create_food"></b-form-checkbox>
</b-input-group-text>
<b-input-group-text squared v-if="recipe.create_food"> {{ $t("Name") }}</b-input-group-text>
<b-form-input squared v-if="recipe.create_food" v-model="recipe.food_name" id="food_name"></b-form-input>
<b-input-group-text squared v-if="recipe.create_food"> {{
$t("Name")
}}
</b-input-group-text>
<b-form-input squared v-if="recipe.create_food" v-model="recipe.food_name"
id="food_name"></b-form-input>
</b-input-group-append>
<em class="small text-muted">
{{ $t("create_food_desc") }}
@@ -162,7 +178,8 @@
</div>
<!-- Steps -->
<draggable :list="recipe.steps" group="steps" :empty-insert-threshold="10" handle=".handle" @sort="sortSteps()">
<draggable :list="recipe.steps" group="steps" :empty-insert-threshold="10" handle=".handle"
@sort="sortSteps()">
<div v-for="(step, step_index) in recipe.steps" v-bind:key="step_index">
<div class="card mt-2 mb-2">
<div class="card-body pr-2 pl-2 pr-md-5 pl-md-5" :id="`id_card_step_${step_index}`">
@@ -176,26 +193,33 @@
</h4>
</div>
<div class="col-1" style="text-align: right">
<a class="btn shadow-none btn-lg" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="btn shadow-none btn-lg" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v text-muted"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<button class="dropdown-item" @click="removeStep(step)"><i class="fa fa-trash fa-fw"></i> {{ $t("Delete") }}</button>
<button class="dropdown-item" @click="removeStep(step)"><i
class="fa fa-trash fa-fw"></i> {{ $t("Delete") }}
</button>
<button type="button" class="dropdown-item" v-if="!step.show_as_header" @click="step.show_as_header = true">
<button type="button" class="dropdown-item" v-if="!step.show_as_header"
@click="step.show_as_header = true">
<i class="fas fa-eye fa-fw"></i> {{ $t("Show_as_header") }}
</button>
<button type="button" class="dropdown-item" v-if="step.show_as_header" @click="step.show_as_header = false">
<button type="button" class="dropdown-item" v-if="step.show_as_header"
@click="step.show_as_header = false">
<i class="fas fa-eye-slash fa-fw"></i> {{ $t("Hide_as_header") }}
</button>
<button class="dropdown-item" @click="moveStep(step, step_index - 1)" v-if="step_index > 0">
<button class="dropdown-item" @click="moveStep(step, step_index - 1)"
v-if="step_index > 0">
<i class="fa fa-arrow-up fa-fw"></i>
{{ $t("Move_Up") }}
</button>
<button class="dropdown-item" @click="moveStep(step, step_index + 1)" v-if="step_index !== recipe.steps.length - 1">
<button class="dropdown-item" @click="moveStep(step, step_index + 1)"
v-if="step_index !== recipe.steps.length - 1">
<i class="fa fa-arrow-down fa-fw"></i> {{ $t("Move_Down") }}
</button>
</div>
@@ -206,30 +230,36 @@
<div class="row">
<div class="col-md-12">
<label :for="'id_step_' + step.id + 'name'">{{ $t("Step_Name") }}</label>
<input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'" />
<input class="form-control" v-model="step.name"
:id="'id_step_' + step.id + 'name'"/>
</div>
</div>
<!-- step data visibility controller -->
<div class="row pt-2">
<div class="col col-md-12">
<b-button pill variant="primary" size="sm" class="ml-1" @click="step.time_visible = true" v-if="!step.time_visible">
<b-button pill variant="primary" size="sm" class="ml-1"
@click="step.time_visible = true" v-if="!step.time_visible">
<i class="fas fa-plus-circle"></i> {{ $t("Time") }}
</b-button>
<b-button pill variant="primary" size="sm" class="ml-1" @click="step.ingredients_visible = true" v-if="!step.ingredients_visible">
<b-button pill variant="primary" size="sm" class="ml-1"
@click="step.ingredients_visible = true" v-if="!step.ingredients_visible">
<i class="fas fa-plus-circle"></i> {{ $t("Ingredients") }}
</b-button>
<b-button pill variant="primary" size="sm" class="ml-1" @click="step.instruction_visible = true" v-if="!step.instruction_visible">
<b-button pill variant="primary" size="sm" class="ml-1"
@click="step.instruction_visible = true" v-if="!step.instruction_visible">
<i class="fas fa-plus-circle"></i> {{ $t("Instructions") }}
</b-button>
<b-button pill variant="primary" size="sm" class="ml-1" @click="step.step_recipe_visible = true" v-if="!step.step_recipe_visible">
<b-button pill variant="primary" size="sm" class="ml-1"
@click="step.step_recipe_visible = true" v-if="!step.step_recipe_visible">
<i class="fas fa-plus-circle"></i> {{ $t("Recipe") }}
</b-button>
<b-button pill variant="primary" size="sm" class="ml-1" @click="step.file_visible = true" v-if="!step.file_visible">
<b-button pill variant="primary" size="sm" class="ml-1"
@click="step.file_visible = true" v-if="!step.file_visible">
<i class="fas fa-plus-circle"></i> {{ $t("File") }}
</b-button>
<b-button
@@ -250,7 +280,8 @@
<div class="row pt-2" v-if="step.time_visible">
<div class="col-md-12">
<label :for="'id_step_' + step.id + '_time'">{{ $t("step_time_minutes") }}</label>
<input class="form-control" v-model="step.time" :id="'id_step_' + step.id + '_time'" />
<input class="form-control" v-model="step.time"
:id="'id_step_' + step.id + '_time'"/>
</div>
</div>
@@ -333,18 +364,23 @@
</div>
<div class="row">
<div class="col-md-12 pr-0 pl-0 pr-md-2 pl-md-2 mt-2">
<draggable :list="step.ingredients" group="ingredients" :empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)">
<div v-for="(ingredient, index) in step.ingredients" :key="ingredient.id">
<hr class="d-md-none" />
<!-- TODO improve rendering/add switch to toggle on/off -->
<div class="small text-muted" v-if="ingredient.original_text">{{ingredient.original_text}}</div>
<draggable :list="step.ingredients" group="ingredients"
:empty-insert-threshold="10" handle=".handle"
@sort="sortIngredients(step)">
<div v-for="(ingredient, index) in step.ingredients"
:key="ingredient.id">
<hr class="d-md-none"/>
<div class="d-flex">
<div class="flex-grow-0 handle align-self-start">
<button type="button" class="btn btn-lg shadow-none pr-0 pl-1 pr-md-2 pl-md-2"><i class="fas fa-arrows-alt-v"></i></button>
<button type="button"
class="btn btn-lg shadow-none pr-0 pl-1 pr-md-2 pl-md-2">
<i class="fas fa-arrows-alt-v"></i></button>
</div>
<div class="flex-fill row" style="margin-left: 4px; margin-right: 4px">
<div class="col-lg-2 col-md-6 small-padding" v-if="!ingredient.is_header">
<div class="flex-fill row"
style="margin-left: 4px; margin-right: 4px">
<div class="col-lg-2 col-md-6 small-padding"
v-if="!ingredient.is_header">
<input
class="form-control"
v-model="ingredient.amount"
@@ -355,7 +391,8 @@
/>
</div>
<div class="col-lg-2 col-md-6 small-padding" v-if="!ingredient.is_header">
<div class="col-lg-2 col-md-6 small-padding"
v-if="!ingredient.is_header">
<!-- search set to false to allow API to drive results & order -->
<multiselect
v-if="!ingredient.no_amount"
@@ -382,10 +419,14 @@
:loading="units_loading"
@search-change="searchUnits"
>
<template v-slot:noOptions>{{ $t("empty_list") }}</template>
<template v-slot:noOptions>{{
$t("empty_list")
}}
</template>
</multiselect>
</div>
<div class="col-lg-4 col-md-6 small-padding" v-if="!ingredient.is_header">
<div class="col-lg-4 col-md-6 small-padding"
v-if="!ingredient.is_header">
<!-- search set to false to allow API to drive results & order -->
<multiselect
@@ -412,10 +453,14 @@
:loading="foods_loading"
@search-change="searchFoods"
>
<template v-slot:noOptions>{{ $t("empty_list") }}</template>
<template v-slot:noOptions>{{
$t("empty_list")
}}
</template>
</multiselect>
</div>
<div class="small-padding" v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
<div class="small-padding"
v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
<input
class="form-control"
maxlength="256"
@@ -446,32 +491,43 @@
<i class="fas fa-ellipsis-v text-muted"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink2">
<button type="button" class="dropdown-item" @click="removeIngredient(step, ingredient)">
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="dropdownMenuLink2">
<button type="button" class="dropdown-item"
@click="removeIngredient(step, ingredient)">
<i class="fa fa-trash fa-fw"></i>
{{ $t("Delete") }}
</button>
<button type="button" class="dropdown-item" v-if="!ingredient.is_header" @click="ingredient.is_header = true">
<button type="button" class="dropdown-item"
v-if="!ingredient.is_header"
@click="ingredient.is_header = true">
<i class="fas fa-heading fa-fw"></i>
{{ $t("Make_Header") }}
</button>
<button type="button" class="dropdown-item" v-if="ingredient.is_header" @click="ingredient.is_header = false">
<button type="button" class="dropdown-item"
v-if="ingredient.is_header"
@click="ingredient.is_header = false">
<i class="fas fa-leaf fa-fw"></i>
{{ $t("Make_Ingredient") }}
</button>
<button type="button" class="dropdown-item" v-if="!ingredient.no_amount" @click="ingredient.no_amount = true">
<button type="button" class="dropdown-item"
v-if="!ingredient.no_amount"
@click="ingredient.no_amount = true">
<i class="fas fa-balance-scale-right fa-fw"></i>
{{ $t("Disable_Amount") }}
</button>
<button type="button" class="dropdown-item" v-if="ingredient.no_amount" @click="ingredient.no_amount = false">
<button type="button" class="dropdown-item"
v-if="ingredient.no_amount"
@click="ingredient.no_amount = false">
<i class="fas fa-balance-scale-right fa-fw"></i>
{{ $t("Enable_Amount") }}
</button>
<button type="button" class="dropdown-item" @click="copyTemplateReference(index, ingredient)">
<button type="button" class="dropdown-item"
@click="copyTemplateReference(index, ingredient)">
<i class="fas fa-code"></i>
{{ $t("Copy_template_reference") }}
</button>
@@ -483,8 +539,10 @@
</div>
</div>
<div class="row">
<div class="col-md-2 offset-md-5" style="text-align: center; margin-top: 8px">
<button class="btn btn-success btn-block" @click="addIngredient(step)"><i class="fa fa-plus"></i></button>
<div class="col-md-2 offset-md-5"
style="text-align: center; margin-top: 8px">
<button class="btn btn-success btn-block" @click="addIngredient(step)">
<i class="fa fa-plus"></i></button>
</div>
</div>
</div>
@@ -517,24 +575,39 @@
{{ $t("Add_Step") }}
</button>
<button type="button" v-b-modal:id_modal_sort class="btn btn-warning shadow-none"><i class="fas fa-sort-amount-down-alt fa-lg"></i></button>
<button type="button" v-b-modal:id_modal_sort class="btn btn-warning shadow-none"><i
class="fas fa-sort-amount-down-alt fa-lg"></i></button>
</b-button-group>
</div>
</div>
</div>
</draggable>
<br />
<br />
<br />
<br />
<br />
<br />
<div class="row" v-if="recipe.steps.length === 0">
<div class="col col-md-12 text-center">
<b-button-group>
<button type="button" @click="addStep(0)" class="btn btn-success shadow-none">
{{ $t("Add_Step") }}
</button>
</b-button-group>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<!-- bottom buttons save/close/view -->
<div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white" v-if="recipe !== undefined">
<div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white"
v-if="recipe !== undefined">
<div class="col-md-3 col-6">
<a :href="resolveDjangoUrl('delete_recipe', recipe.id)" class="btn btn-block btn-danger shadow-none">{{ $t("Delete") }}</a>
<a :href="resolveDjangoUrl('delete_recipe', recipe.id)"
class="btn btn-block btn-danger shadow-none">{{ $t("Delete") }}</a>
</div>
<div class="col-md-3 col-6">
<a :href="resolveDjangoUrl('view_recipe', recipe.id)">
@@ -542,12 +615,15 @@
</a>
</div>
<div class="col-md-3 col-6">
<button type="button" @click="updateRecipe(false)" v-b-tooltip.hover :title="`${$t('Key_Ctrl')} + S`" class="btn btn-sm btn-block btn-info shadow-none">
<button type="button" @click="updateRecipe(false)" v-b-tooltip.hover
:title="`${$t('Key_Ctrl')} + S`" class="btn btn-sm btn-block btn-info shadow-none">
{{ $t("Save") }}
</button>
</div>
<div class="col-md-3 col-6">
<button type="button" @click="updateRecipe(true)" v-b-tooltip.hover :title="`${$t('Key_Ctrl')} + ${$t('Key_Shift')} + S`" class="btn btn-sm btn-block btn-success shadow-none">
<button type="button" @click="updateRecipe(true)" v-b-tooltip.hover
:title="`${$t('Key_Ctrl')} + ${$t('Key_Shift')} + S`"
class="btn btn-sm btn-block btn-success shadow-none">
{{ $t("Save_and_View") }}
</button>
</div>
@@ -555,9 +631,11 @@
<!-- modal for sorting steps -->
<b-modal id="id_modal_sort" v-bind:title="$t('Sort')" ok-only>
<draggable :list="recipe.steps" group="step_sorter" :empty-insert-threshold="10" handle=".handle" @sort="sortSteps()" class="list-group" tag="ul">
<draggable :list="recipe.steps" group="step_sorter" :empty-insert-threshold="10" handle=".handle"
@sort="sortSteps()" class="list-group" tag="ul">
<li class="list-group-item" v-for="(step, step_index) in recipe.steps" v-bind:key="step_index">
<button type="button" class="btn btn-lg shadow-none handle"><i class="fas fa-arrows-alt-v"></i></button>
<button type="button" class="btn btn-lg shadow-none handle"><i class="fas fa-arrows-alt-v"></i>
</button>
<template v-if="step.name !== ''">{{ step.name }}</template>
<template v-else>{{ $t("Step") }} {{ step_index + 1 }}</template>
</li>
@@ -572,25 +650,34 @@
@cancel="paste_ingredients = paste_step = undefined"
@close="paste_ingredients = paste_step = undefined"
>
<b-form-textarea id="paste_ingredients" v-model="paste_ingredients" :placeholder="$t('paste_ingredients_placeholder')" rows="10"></b-form-textarea>
<b-form-textarea id="paste_ingredients" v-model="paste_ingredients"
:placeholder="$t('paste_ingredients_placeholder')" rows="10"></b-form-textarea>
</b-modal>
<!-- form to create files on the fly -->
<generic-modal-form :model="Models.USERFILE" :action="Actions.CREATE" :show="show_file_create" @finish-action="fileCreated" />
<generic-modal-form :model="Models.USERFILE" :action="Actions.CREATE" :show="show_file_create"
@finish-action="fileCreated"/>
</div>
</div>
</template>
<script>
import Vue from "vue"
import { BootstrapVue } from "bootstrap-vue"
import {BootstrapVue} from "bootstrap-vue"
import "bootstrap-vue/dist/bootstrap-vue.css"
import draggable from "vuedraggable"
import { ApiMixin, resolveDjangoUrl, ResolveUrlMixin, StandardToasts, convertEnergyToCalories, energyHeading } from "@/utils/utils"
import {
ApiMixin,
resolveDjangoUrl,
ResolveUrlMixin,
StandardToasts,
convertEnergyToCalories,
energyHeading
} from "@/utils/utils"
import Multiselect from "vue-multiselect"
import { ApiApiFactory } from "@/utils/openapi/api"
import {ApiApiFactory} from "@/utils/openapi/api"
import LoadingSpinner from "@/components/LoadingSpinner"
import VueMarkdownEditor from "@kangc/v-md-editor"
@@ -615,7 +702,7 @@ Vue.use(BootstrapVue)
export default {
name: "RecipeEditView",
mixins: [ResolveUrlMixin, ApiMixin],
components: { Multiselect, LoadingSpinner, draggable, GenericModalForm },
components: {Multiselect, LoadingSpinner, draggable, GenericModalForm},
data() {
return {
recipe_id: window.RECIPE_ID,
@@ -763,7 +850,10 @@ export default {
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
this.recipe_changed = false
if (this.create_food) {
apiFactory.createFood({ name: this.recipe.food_name, recipe: { id: this.recipe.id, name: this.recipe.name } })
apiFactory.createFood({
name: this.recipe.food_name,
recipe: {id: this.recipe.id, name: this.recipe.name}
})
}
if (view_after) {
location.href = resolveDjangoUrl("view_recipe", this.recipe_id)
@@ -852,12 +942,12 @@ export default {
this.$nextTick(() => document.getElementById(`amount_${this.recipe.steps.indexOf(step)}_${step.ingredients.length - 1}`).select())
},
removeIngredient: function (step, ingredient) {
if (confirm(this.$t("confirm_delete", { object: this.$t("Ingredient") }))) {
if (confirm(this.$t("confirm_delete", {object: this.$t("Ingredient")}))) {
step.ingredients = step.ingredients.filter((item) => item !== ingredient)
}
},
removeStep: function (step) {
if (confirm(this.$t("confirm_delete", { object: this.$t("Step") }))) {
if (confirm(this.$t("confirm_delete", {object: this.$t("Step")}))) {
this.recipe.steps = this.recipe.steps.filter((item) => item !== step)
}
},
@@ -870,7 +960,7 @@ export default {
let [tmp, step, id] = index.split("_")
let new_food = this.recipe.steps[step].ingredients[id]
new_food.food = { name: tag }
new_food.food = {name: tag}
this.foods.push(new_food.food)
this.recipe.steps[step].ingredients[id] = new_food
},
@@ -878,12 +968,12 @@ export default {
let [tmp, step, id] = index.split("_")
let new_unit = this.recipe.steps[step].ingredients[id]
new_unit.unit = { name: tag }
new_unit.unit = {name: tag}
this.units.push(new_unit.unit)
this.recipe.steps[step].ingredients[id] = new_unit
},
addKeyword: function (tag) {
let new_keyword = { label: tag, name: tag }
let new_keyword = {label: tag, name: tag}
this.recipe.keywords.push(new_keyword)
},
searchKeywords: function (query) {
@@ -906,7 +996,7 @@ export default {
this.files_loading = true
apiFactory
.listUserFiles({ query: { query: query } })
.listUserFiles({query: {query: query}})
.then((response) => {
this.files = response.data
this.files_loading = false
@@ -918,7 +1008,7 @@ export default {
},
searchRecipes: function (query) {
this.recipes_loading = true
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, { query: query })
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, {query: query})
.then((result) => {
this.recipes = result.data.results
this.recipes_loading = false
@@ -984,10 +1074,15 @@ export default {
this.show_file_create = false
},
scrollToStep: function (step_index) {
document.getElementById("id_step_" + step_index).scrollIntoView({ behavior: "smooth" })
document.getElementById("id_step_" + step_index).scrollIntoView({behavior: "smooth"})
},
addNutrition: function () {
this.recipe.nutrition = {}
this.recipe.nutrition = {
carbohydrates: 0,
fats: 0,
proteins: 0,
calories: 0,
}
},
removeNutrition: function () {
this.recipe.nutrition = null
@@ -1020,15 +1115,15 @@ export default {
this.recipe.steps[step].ingredients_visible = true
ing_list.forEach((ing) => {
if (ing.trim() !== "") {
this.genericPostAPI("api_ingredient_from_string", { text: ing }).then((result) => {
this.genericPostAPI("api_ingredient_from_string", {text: ing}).then((result) => {
let unit = null
if (result.data.unit !== "") {
unit = { name: result.data.unit }
unit = {name: result.data.unit}
}
this.recipe.steps[step].ingredients.splice(order, 0, {
amount: result.data.amount,
unit: unit,
food: { name: result.data.food },
food: {name: result.data.food},
note: result.data.note,
original_text: ing,
})

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

@@ -1,6 +1,6 @@
<template>
<div id="app" style="margin-bottom: 4vh">
<RecipeSwitcher ref="ref_recipe_switcher" />
<RecipeSwitcher ref="ref_recipe_switcher"/>
<div class="row">
<div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
<div class="row">
@@ -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_search_settings')" v-bind:variant="searchFiltered(true) ? 'danger' : 'primary'">
<b-button v-b-toggle.collapse_advanced_search v-b-tooltip.hover
:title="$t('advanced_search_settings')"
v-bind:variant="searchFiltered(true) ? 'danger' : 'primary'">
<!-- 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,99 +62,191 @@
</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 text-nowrap" small>
<b-tab :title="$t('Settings')" active :title-link-class="['mx-0']">
<b-form-group v-bind:label="$t('Recently_Viewed')" label-for="popover-input-1" label-cols="8" class="mb-1">
<b-form-input type="number" v-model="ui.recently_viewed" id="popover-input-1" size="sm" class="mt-1"></b-form-input>
<b-form-group v-bind:label="$t('Recently_Viewed')"
label-for="popover-input-1" label-cols="8" class="mb-1">
<b-form-input type="number" v-model="ui.recently_viewed"
id="popover-input-1" size="sm"
class="mt-1"></b-form-input>
</b-form-group>
<b-form-group v-bind:label="$t('Recipes_per_page')" label-for="popover-input-page-count" label-cols="8" class="mb-1">
<b-form-input type="number" v-model="ui.page_size" id="popover-input-page-count" size="sm" class="mt-1"></b-form-input>
<b-form-group v-bind:label="$t('Recipes_per_page')"
label-for="popover-input-page-count" label-cols="8"
class="mb-1">
<b-form-input type="number" v-model="ui.page_size"
id="popover-input-page-count" size="sm"
class="mt-1"></b-form-input>
</b-form-group>
<b-form-group v-bind:label="$t('Meal_Plan')" label-for="popover-input-2" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_meal_plan" id="popover-input-2" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('Meal_Plan')" label-for="popover-input-2"
label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_meal_plan"
id="popover-input-2" size="sm"
class="mt-2"></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="8" class="mb-1">
<b-form-input type="number" v-model="ui.meal_plan_days" id="popover-input-5" size="sm" class="mt-1"></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="8" class="mb-1">
<b-form-input type="number" v-model="ui.meal_plan_days"
id="popover-input-5" size="sm"
class="mt-1"></b-form-input>
</b-form-group>
<b-form-group v-bind:label="$t('Sort_by_new')" label-for="popover-input-3" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.sort_by_new" id="popover-input-3" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('Sort_by_new')"
label-for="popover-input-3" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.sort_by_new"
id="popover-input-3" size="sm"
class="mt-2"></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="$t('fields')" :title-link-class="['mx-0']">
<b-form-group v-bind:label="$t('show_keywords')" label-for="popover-show_keywords" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_keywords" id="popover-show_keywords" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('show_keywords')"
label-for="popover-show_keywords" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_keywords"
id="popover-show_keywords" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('show_foods')" label-for="popover-show_foods" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_foods" id="popover-show_foods" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('show_foods')"
label-for="popover-show_foods" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_foods"
id="popover-show_foods" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('show_books')" label-for="popover-input-show_books" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_books" id="popover-input-show_books" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('show_books')"
label-for="popover-input-show_books" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_books"
id="popover-input-show_books" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('show_rating')" label-for="popover-show_rating" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_rating" id="popover-show_rating" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('show_rating')"
label-for="popover-show_rating" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_rating"
id="popover-show_rating" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('show_units')" label-for="popover-show_units" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_units" id="popover-show_units" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('show_units')"
label-for="popover-show_units" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_units"
id="popover-show_units" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('show_filters')" label-for="popover-show_filters" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_filters" id="popover-show_filters" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('show_filters')"
label-for="popover-show_filters" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_filters"
id="popover-show_filters" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('show_sortby')" label-for="popover-show_sortby" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_sortby" id="popover-show_sortby" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('show_sortby')"
label-for="popover-show_sortby" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_sortby"
id="popover-show_sortby" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('times_cooked')" label-for="popover-show_timescooked" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_timescooked" id="popover-show_cooked" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('times_cooked')"
label-for="popover-show_timescooked" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_timescooked"
id="popover-show_cooked" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('make_now')" label-for="popover-show_makenow" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_makenow" id="popover-show_makenow" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('make_now')"
label-for="popover-show_makenow" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_makenow"
id="popover-show_makenow" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('last_cooked')" label-for="popover-show_cookedon" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_cookedon" id="popover-show_cookedon" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('last_cooked')"
label-for="popover-show_cookedon" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_cookedon"
id="popover-show_cookedon" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('last_viewed')" label-for="popover-show_viewedon" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_viewedon" id="popover-show_viewedon" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('last_viewed')"
label-for="popover-show_viewedon" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_viewedon"
id="popover-show_viewedon" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('created_on')" label-for="popover-show_createdon" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_createdon" id="popover-show_createdon" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('created_on')"
label-for="popover-show_createdon" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_createdon"
id="popover-show_createdon" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
<b-form-group v-bind:label="$t('updatedon')" label-for="popover-show_updatedon" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.show_updatedon" id="popover-show_updatedon" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('updatedon')"
label-for="popover-show_updatedon" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.show_updatedon"
id="popover-show_updatedon" size="sm"
class="mt-2"></b-form-checkbox>
</b-form-group>
</b-tab>
<b-tab :title="$t('advanced')" :title-link-class="['mx-0']">
<b-form-group v-bind:label="$t('remember_search')" label-for="popover-rem-search" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.remember_search" id="popover-rem-search" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('remember_search')"
label-for="popover-rem-search" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.remember_search"
id="popover-rem-search" size="sm"
class="mt-2"></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="8" class="mb-1">
<b-form-input type="number" v-model="ui.remember_hours" id="popover-rem-hours" size="sm" class="mt-1"></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="8"
class="mb-1">
<b-form-input type="number" v-model="ui.remember_hours"
id="popover-rem-hours" size="sm"
class="mt-1"></b-form-input>
</b-form-group>
<b-form-group v-bind:label="$t('tree_select')" label-for="popover-input-treeselect" label-cols="8" class="mb-1">
<b-form-checkbox switch v-model="ui.tree_select" id="popover-input-treeselect" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-bind:label="$t('tree_select')"
label-for="popover-input-treeselect" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.tree_select"
id="popover-input-treeselect" size="sm"
class="mt-2"></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="8" class="mb-1">
<b-form-checkbox switch v-model="ui.sql_debug" id="popover-input-sqldebug" size="sm" class="mt-2"></b-form-checkbox>
<b-form-group v-if="debug" v-bind:label="$t('sql_debug')"
label-for="popover-input-sqldebug" label-cols="8"
class="mb-1">
<b-form-checkbox switch v-model="ui.sql_debug"
id="popover-input-sqldebug" size="sm"
class="mt-2"></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>
@@ -185,18 +286,23 @@
<h6 class="mb-0" v-if="ui.expert_mode && search.keywords_fields > 1">
{{ $t("Keywords") }}
</h6>
<span class="text-sm-left text-warning" v-if="ui.expert_mode && search.keywords_fields > 1 && hasDuplicateFilter(search.search_keywords, search.keywords_fields)">{{
$t("warning_duplicate_filter")
}}</span>
<span class="text-sm-left text-warning"
v-if="ui.expert_mode && search.keywords_fields > 1 && hasDuplicateFilter(search.search_keywords, search.keywords_fields)">{{
$t("warning_duplicate_filter")
}}</span>
<div class="row" v-if="ui.show_keywords">
<div class="col-12">
<b-input-group class="mt-2" v-for="(k, a) in keywordFields" :key="a">
<template #prepend v-if="ui.expert_mode">
<b-input-group-text style="width: 3em" @click="addField('keywords', k)">
<i class="fas fa-plus-circle text-primary" v-if="k == search.keywords_fields && k < 4" />
<b-input-group-text style="width: 3em"
@click="addField('keywords', k)">
<i class="fas fa-plus-circle text-primary"
v-if="k == search.keywords_fields && k < 4"/>
</b-input-group-text>
<b-input-group-text style="width: 3em" @click="removeField('keywords', k)">
<i class="fas fa-minus-circle text-primary" v-if="k == search.keywords_fields && k > 1" />
<b-input-group-text style="width: 3em"
@click="removeField('keywords', k)">
<i class="fas fa-minus-circle text-primary"
v-if="k == search.keywords_fields && k > 1"/>
</b-input-group-text>
</template>
<treeselect
@@ -233,14 +339,20 @@
switch
style="width: 5em"
>
<span class="text-uppercase" v-if="search.search_keywords[a].operator">{{ $t("or") }}</span>
<span class="text-uppercase"
v-if="search.search_keywords[a].operator">{{
$t("or")
}}</span>
<span class="text-uppercase" v-else>{{ $t("and") }}</span>
</b-form-checkbox>
</b-input-group-text>
</b-input-group-append>
<b-input-group-append v-if="ui.expert_mode">
<b-input-group-text>
<b-form-checkbox v-model="search.search_keywords[a].not" name="check-button" @change="refreshData(false)" class="shadow-none">
<b-form-checkbox v-model="search.search_keywords[a].not"
name="check-button"
@change="refreshData(false)"
class="shadow-none">
<span class="text-uppercase">{{ $t("not") }}</span>
</b-form-checkbox>
</b-input-group-text>
@@ -253,18 +365,23 @@
<h6 class="mt-2 mb-0" v-if="ui.expert_mode && search.foods_fields > 1">
{{ $t("Foods") }}
</h6>
<span class="text-sm-left text-warning" v-if="ui.expert_mode && search.foods_fields > 1 && hasDuplicateFilter(search.search_foods, search.foods_fields)">{{
$t("warning_duplicate_filter")
}}</span>
<span class="text-sm-left text-warning"
v-if="ui.expert_mode && search.foods_fields > 1 && hasDuplicateFilter(search.search_foods, search.foods_fields)">{{
$t("warning_duplicate_filter")
}}</span>
<div class="row" v-if="ui.show_foods">
<div class="col-12">
<b-input-group class="mt-2" v-for="(f, i) in foodFields" :key="i">
<template #prepend v-if="ui.expert_mode">
<b-input-group-text style="width: 3em" @click="addField('foods', f)">
<i class="fas fa-plus-circle text-primary" v-if="f == search.foods_fields && f < 4" />
<b-input-group-text style="width: 3em"
@click="addField('foods', f)">
<i class="fas fa-plus-circle text-primary"
v-if="f == search.foods_fields && f < 4"/>
</b-input-group-text>
<b-input-group-text style="width: 3em" @click="removeField('foods', f)">
<i class="fas fa-minus-circle text-primary" v-if="f == search.foods_fields && f > 1" />
<b-input-group-text style="width: 3em"
@click="removeField('foods', f)">
<i class="fas fa-minus-circle text-primary"
v-if="f == search.foods_fields && f > 1"/>
</b-input-group-text>
</template>
<treeselect
@@ -293,15 +410,24 @@
/>
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="search.search_foods[i].operator" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 5em">
<span class="text-uppercase" v-if="search.search_foods[i].operator">{{ $t("or") }}</span>
<b-form-checkbox v-model="search.search_foods[i].operator"
name="check-button"
@change="refreshData(false)"
class="shadow-none" switch style="width: 5em">
<span class="text-uppercase"
v-if="search.search_foods[i].operator">{{
$t("or")
}}</span>
<span class="text-uppercase" v-else>{{ $t("and") }}</span>
</b-form-checkbox>
</b-input-group-text>
</b-input-group-append>
<b-input-group-append v-if="ui.expert_mode">
<b-input-group-text>
<b-form-checkbox v-model="search.search_foods[i].not" name="check-button" @change="refreshData(false)" class="shadow-none">
<b-form-checkbox v-model="search.search_foods[i].not"
name="check-button"
@change="refreshData(false)"
class="shadow-none">
<span class="text-uppercase">{{ $t("not") }}</span>
</b-form-checkbox>
</b-input-group-text>
@@ -314,18 +440,23 @@
<h6 class="mt-2 mb-0" v-if="ui.expert_mode && search.books_fields > 1">
{{ $t("Books") }}
</h6>
<span class="text-sm-left text-warning" v-if="ui.expert_mode && search.books_fields > 1 && hasDuplicateFilter(search.search_books, search.books_fields)">{{
$t("warning_duplicate_filter")
}}</span>
<span class="text-sm-left text-warning"
v-if="ui.expert_mode && search.books_fields > 1 && hasDuplicateFilter(search.search_books, search.books_fields)">{{
$t("warning_duplicate_filter")
}}</span>
<div class="row" v-if="ui.show_books">
<div class="col-12">
<b-input-group class="mt-2" v-for="(b, i) in bookFields" :key="i">
<template #prepend v-if="ui.expert_mode">
<b-input-group-text style="width: 3em" @click="addField('books', b)">
<i class="fas fa-plus-circle text-primary" v-if="b == search.books_fields && b < 4" />
<b-input-group-text style="width: 3em"
@click="addField('books', b)">
<i class="fas fa-plus-circle text-primary"
v-if="b == search.books_fields && b < 4"/>
</b-input-group-text>
<b-input-group-text style="width: 3em" @click="removeField('books', b)">
<i class="fas fa-minus-circle text-primary" v-if="b == search.books_fields && b > 1" />
<b-input-group-text style="width: 3em"
@click="removeField('books', b)">
<i class="fas fa-minus-circle text-primary"
v-if="b == search.books_fields && b > 1"/>
</b-input-group-text>
</template>
<generic-multiselect
@@ -339,15 +470,24 @@
></generic-multiselect>
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="search.search_books[i].operator" name="check-button" @change="refreshData(false)" class="shadow-none" style="width: 5em" switch>
<span class="text-uppercase" v-if="search.search_books[i].operator">{{ $t("or") }}</span>
<b-form-checkbox v-model="search.search_books[i].operator"
name="check-button"
@change="refreshData(false)"
class="shadow-none" style="width: 5em" switch>
<span class="text-uppercase"
v-if="search.search_books[i].operator">{{
$t("or")
}}</span>
<span class="text-uppercase" v-else>{{ $t("and") }}</span>
</b-form-checkbox>
</b-input-group-text>
</b-input-group-append>
<b-input-group-append v-if="ui.expert_mode">
<b-input-group-text>
<b-form-checkbox v-model="search.search_books[i].not" name="check-button" @change="refreshData(false)" class="shadow-none">
<b-form-checkbox v-model="search.search_books[i].not"
name="check-button"
@change="refreshData(false)"
class="shadow-none">
<span class="text-uppercase">{{ $t("not") }}</span>
</b-form-checkbox>
</b-input-group-text>
@@ -371,8 +511,12 @@
/>
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="search.search_rating_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 5em">
<span class="text-uppercase" v-if="search.search_rating_gte">&gt;=</span>
<b-form-checkbox v-model="search.search_rating_gte"
name="check-button"
@change="refreshData(false)"
class="shadow-none" switch style="width: 5em">
<span class="text-uppercase"
v-if="search.search_rating_gte">&gt;=</span>
<span class="text-uppercase" v-else>&lt;=</span>
</b-form-checkbox>
</b-input-group-text>
@@ -395,8 +539,13 @@
></generic-multiselect>
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="search.search_units_or" name="check-button" @change="refreshData(false)" class="shadow-none" style="width: 4em" switch>
<span class="text-uppercase" v-if="search.search_units_or">{{ $t("or") }}</span>
<b-form-checkbox v-model="search.search_units_or"
name="check-button"
@change="refreshData(false)"
class="shadow-none" style="width: 4em" switch>
<span class="text-uppercase" v-if="search.search_units_or">{{
$t("or")
}}</span>
<span class="text-uppercase" v-else>{{ $t("and") }}</span>
</b-form-checkbox>
</b-input-group-text>
@@ -406,17 +555,23 @@
</div>
<!-- special switches -->
<div class="row g-0" v-if="ui.show_timescooked || ui.show_makenow || ui.show_cookedon">
<div class="row g-0"
v-if="ui.show_timescooked || ui.show_makenow || ui.show_cookedon">
<div class="col-12">
<b-input-group class="mt-2">
<!-- times cooked -->
<b-input-group-prepend is-text v-if="ui.show_timescooked">
{{ $t("times_cooked") }}
</b-input-group-prepend>
<b-form-input id="timescooked" type="number" min="0" v-model="search.timescooked" v-if="ui.show_timescooked"></b-form-input>
<b-form-input id="timescooked" type="number" min="0"
v-model="search.timescooked"
v-if="ui.show_timescooked"></b-form-input>
<b-input-group-append v-if="ui.show_timescooked">
<b-input-group-text>
<b-form-checkbox v-model="search.timescooked_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em">
<b-form-checkbox v-model="search.timescooked_gte"
name="check-button"
@change="refreshData(false)"
class="shadow-none" switch style="width: 4em">
<span class="text-uppercase" v-if="search.timescooked_gte">&gt;=</span>
<span class="text-uppercase" v-else>&lt;=</span>
</b-form-checkbox>
@@ -435,7 +590,10 @@
@input="refreshData(false)"
/>
<b-input-group-text>
<b-form-checkbox v-model="search.cookedon_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em">
<b-form-checkbox v-model="search.cookedon_gte"
name="check-button"
@change="refreshData(false)"
class="shadow-none" switch style="width: 4em">
<span class="text-uppercase" v-if="search.cookedon_gte">&gt;=</span>
<span class="text-uppercase" v-else>&lt;=</span>
</b-form-checkbox>
@@ -455,7 +613,10 @@
@input="refreshData(false)"
/>
<b-input-group-text>
<b-form-checkbox v-model="search.createdon_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em">
<b-form-checkbox v-model="search.createdon_gte"
name="check-button"
@change="refreshData(false)"
class="shadow-none" switch style="width: 4em">
<span class="text-uppercase" v-if="search.createdon_gte">&gt;=</span>
<span class="text-uppercase" v-else>&lt;=</span>
</b-form-checkbox>
@@ -473,7 +634,10 @@
@input="refreshData(false)"
/>
<b-input-group-text>
<b-form-checkbox v-model="search.viewedon_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em">
<b-form-checkbox v-model="search.viewedon_gte"
name="check-button"
@change="refreshData(false)"
class="shadow-none" switch style="width: 4em">
<span class="text-uppercase" v-if="search.viewedon_gte">&gt;=</span>
<span class="text-uppercase" v-else>&lt;=</span>
</b-form-checkbox>
@@ -491,7 +655,10 @@
@input="refreshData(false)"
/>
<b-input-group-text>
<b-form-checkbox v-model="search.updatedon_gte" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em">
<b-form-checkbox v-model="search.updatedon_gte"
name="check-button"
@change="refreshData(false)"
class="shadow-none" switch style="width: 4em">
<span class="text-uppercase" v-if="search.updatedon_gte">&gt;=</span>
<span class="text-uppercase" v-else>&lt;=</span>
</b-form-checkbox>
@@ -500,7 +667,9 @@
<b-input-group-append v-if="ui.show_makenow">
<b-input-group-text>
{{ $t("make_now") }}
<b-form-checkbox v-model="search.makenow" name="check-button" @change="refreshData(false)" class="shadow-none" switch style="width: 4em" />
<b-form-checkbox v-model="search.makenow" name="check-button"
@change="refreshData(false)"
class="shadow-none" switch style="width: 4em"/>
</b-input-group-text>
</b-input-group-append>
</b-input-group>
@@ -510,14 +679,16 @@
<!-- Buttons -->
<div class="row justify-content-end small">
<div class="col-auto">
<b-button class="my-0" variant="link" size="sm" @click="search.explain_visible = !search.explain_visible">
<b-button class="my-0" variant="link" size="sm"
@click="search.explain_visible = !search.explain_visible">
<div v-if="!search.explain_visible">
<i class="far fa-eye"></i>
{{ $t("explain") }}
</div>
<div v-else><i class="far fa-eye-slash"></i> {{ $t("explain") }}</div>
</b-button>
<b-button class="my-0" variant="link" size="sm" @click="ui.expert_mode = !ui.expert_mode">
<b-button class="my-0" variant="link" size="sm"
@click="ui.expert_mode = !ui.expert_mode">
<div v-if="!ui.expert_mode">
<i class="fas fa-circle"></i>
{{ $t("expert_mode") }}
@@ -540,20 +711,21 @@
<!-- TODO find a way to localize this that works without explaining localization to each language translator -->
Show all recipes that are matched
<span v-if="search.search_input">
by <i>{{ search.search_input }}</i> <br />
by <i>{{ search.search_input }}</i> <br/>
</span>
<span v-else> without any search term <br /> </span>
<span v-else> without any search term <br/> </span>
<span v-if="search.search_internal"> and are <span class="text-success">internal</span> <br /></span>
<span v-if="search.search_internal"> and are <span class="text-success">internal</span> <br/></span>
<span v-for="k in search.search_keywords" v-bind:key="k.id">
<template v-if="k.items.length > 0">
and
<b v-if="k.not">don't</b>
contain
<b v-if="k.operator">any</b><b v-else>all</b> of the following <span class="text-success">keywords</span>:
<b v-if="k.operator">any</b><b
v-else>all</b> of the following <span class="text-success">keywords</span>:
<i>{{ k.items.flatMap((x) => x.name).join(", ") }}</i>
<br />
<br/>
</template>
</span>
@@ -562,9 +734,11 @@
and
<b v-if="k.not">don't</b>
contain
<b v-if="k.operator">any</b><b v-else>all</b> of the following <span class="text-success">foods</span>:
<b v-if="k.operator">any</b><b
v-else>all</b> of the following <span
class="text-success">foods</span>:
<i>{{ k.items.flatMap((x) => x.name).join(", ") }}</i>
<br />
<br/>
</template>
</span>
@@ -573,40 +747,48 @@
and
<b v-if="k.not">don't</b>
contain
<b v-if="k.operator">any</b><b v-else>all</b> of the following <span class="text-success">books</span>:
<b v-if="k.operator">any</b><b
v-else>all</b> of the following <span
class="text-success">books</span>:
<i>{{ k.items.flatMap((x) => x.name).join(", ") }}</i>
<br />
<br/>
</template>
</span>
<span v-if="search.makenow"> and you can <span class="text-success">make right now</span> (based on the on hand flag) <br /></span>
<span v-if="search.makenow"> and you can <span class="text-success">make right now</span> (based on the on hand flag) <br/></span>
<span v-if="search.search_units.length > 0">
and contain <b v-if="search.search_units_or">any</b><b v-else>all</b> of the following <span class="text-success">units</span>:
and contain <b v-if="search.search_units_or">any</b><b
v-else>all</b> of the following <span
class="text-success">units</span>:
<i>{{ search.search_units.flatMap((x) => x.name).join(", ") }}</i
><br />
><br/>
</span>
<span v-if="search.search_rating !== undefined">
and have a <span class="text-success">rating</span> <template v-if="search.search_rating_gte">greater than</template><template v-else> less than</template> or
equal to {{ search.search_rating }}<br />
and have a <span class="text-success">rating</span> <template
v-if="search.search_rating_gte">greater than</template><template
v-else> less than</template> or
equal to {{ search.search_rating }}<br/>
</span>
<span v-if="search.lastcooked !== undefined">
and have been <span class="text-success">last cooked</span> <template v-if="search.lastcooked_gte"> after</template><template v-else> before</template>
and have been <span class="text-success">last cooked</span> <template
v-if="search.lastcooked_gte"> after</template><template v-else> before</template>
<i>{{ search.lastcooked }}</i
><br />
><br/>
</span>
<span v-if="search.timescooked !== undefined">
and have <span class="text-success">been cooked</span> <template v-if="search.timescooked_gte"> at least</template><template v-else> less than</template> or
equal to<i>{{ search.timescooked }}</i> times <br />
and have <span class="text-success">been cooked</span> <template
v-if="search.timescooked_gte"> at least</template><template v-else> less than</template> or
equal to<i>{{ search.timescooked }}</i> times <br/>
</span>
<span v-if="search.sort_order.length > 0">
<span class="text-success">order</span> by
<i>{{ search.sort_order.flatMap((x) => x.text).join(", ") }}</i>
<br />
<br/>
</span>
</div>
</div>
@@ -617,33 +799,37 @@
</div>
</div>
<div v-if="recipes.length > 0">
<div class="row align-content-center">
<div class="col col-md-6" style="margin-top: 2vh">
<b-dropdown id="sortby" :text="sortByLabel" variant="link" toggle-class="text-decoration-none " class="m-0 p-0">
<div v-for="o in sortOptions" :key="o.id">
<b-dropdown-item
v-on:click="
<div class="row align-content-center">
<div class="col col-md-6" style="margin-top: 2vh">
<b-dropdown id="sortby" :text="sortByLabel" variant="link" toggle-class="text-decoration-none "
class="m-0 p-0">
<div v-for="o in sortOptions" :key="o.id">
<b-dropdown-item
v-on:click="
search.sort_order = [o]
refreshData(false)
"
>
<span>{{ o.text }}</span>
</b-dropdown-item>
</div>
</b-dropdown>
</div>
<div class="col col-md-6 text-right" style="margin-top: 2vh">
>
<span>{{ o.text }}</span>
</b-dropdown-item>
</div>
</b-dropdown>
</div>
<div class="col col-md-6 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>
</div>
</div>
<div v-if="recipes.length > 0">
<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}`"
@@ -654,14 +840,17 @@
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 class="col-md-2 d-none d-md-block"></div>
@@ -681,7 +870,9 @@
{{ $t("search_import_help_text") }}
</b-card-text>
<b-button variant="primary" :href="resolveDjangoUrl('data_import_url')"><i class="fas fa-file-import"></i> {{ $t("Import") }} </b-button>
<b-button variant="primary" :href="resolveDjangoUrl('data_import_url')"><i
class="fas fa-file-import"></i> {{ $t("Import") }}
</b-button>
</b-card>
<b-card v-bind:title="$t('Create')" class="text-center">
@@ -689,7 +880,9 @@
{{ $t("search_create_help_text") }}
</b-card-text>
<b-button variant="primary" :href="resolveDjangoUrl('new_recipe')"><i class="fas fa-plus"></i> {{ $t("Create") }} </b-button>
<b-button variant="primary" :href="resolveDjangoUrl('new_recipe')"><i
class="fas fa-plus"></i> {{ $t("Create") }}
</b-button>
</b-card>
</b-card-group>
</div>
@@ -702,17 +895,17 @@
<script>
import Vue from "vue"
import { BootstrapVue } from "bootstrap-vue"
import {BootstrapVue} from "bootstrap-vue"
import VueCookies from "vue-cookies"
import "bootstrap-vue/dist/bootstrap-vue.css"
import moment from "moment"
import _debounce from "lodash/debounce"
import Multiselect from "vue-multiselect"
import { Treeselect, LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect"
import {Treeselect, LOAD_CHILDREN_OPTIONS} from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import { ApiMixin, ResolveUrlMixin, StandardToasts, ToastMixin } from "@/utils/utils"
import {ApiMixin, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils"
import LoadingSpinner from "@/components/LoadingSpinner" // TODO: is this deprecated?
import RecipeCard from "@/components/RecipeCard"
import GenericMultiselect from "@/components/GenericMultiselect"
@@ -727,13 +920,13 @@ let UI_COOKIE_NAME = "ui_search_settings"
export default {
name: "RecipeSearchView",
mixins: [ResolveUrlMixin, ApiMixin, ToastMixin],
components: { GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher, Multiselect },
components: {GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher, Multiselect},
data() {
return {
// this.Models and this.Actions inherited from ApiMixin
recipes: [],
recipes_loading: true,
facets: { Books: [], Foods: [], Keywords: [] },
facets: {Books: [], Foods: [], Keywords: []},
meal_plans: [],
last_viewed_recipes: [],
sortMenu: false,
@@ -744,22 +937,22 @@ export default {
search_input: "",
search_internal: false,
search_keywords: [
{ items: [], operator: true, not: false },
{ items: [], operator: false, not: false },
{ items: [], operator: true, not: true },
{ items: [], operator: false, not: true },
{items: [], operator: true, not: false},
{items: [], operator: false, not: false},
{items: [], operator: true, not: true},
{items: [], operator: false, not: true},
],
search_foods: [
{ items: [], operator: true, not: false },
{ items: [], operator: false, not: false },
{ items: [], operator: true, not: true },
{ items: [], operator: false, not: true },
{items: [], operator: true, not: false},
{items: [], operator: false, not: false},
{items: [], operator: true, not: true},
{items: [], operator: false, not: true},
],
search_books: [
{ items: [], operator: true, not: false },
{ items: [], operator: false, not: false },
{ items: [], operator: true, not: true },
{ items: [], operator: false, not: true },
{items: [], operator: true, not: false},
{items: [], operator: false, not: false},
{items: [], operator: true, not: true},
{items: [], operator: false, not: true},
],
search_units: [],
search_units_or: true,
@@ -868,12 +1061,12 @@ export default {
}
return [
{ id: 5, label: "⭐⭐⭐⭐⭐" + ratingCount(this.facets.Ratings?.["5.0"] ?? 0) + label(5) },
{ id: 4, label: "⭐⭐⭐⭐ " + ratingCount(this.facets.Ratings?.["4.0"] ?? 0) + label() },
{ id: 3, label: "⭐⭐⭐ " + ratingCount(this.facets.Ratings?.["3.0"] ?? 0) + label() },
{ id: 2, label: "⭐⭐ " + ratingCount(this.facets.Ratings?.["2.0"] ?? 0) + label() },
{ id: 1, label: "⭐ " + ratingCount(this.facets.Ratings?.["1.0"] ?? 0) + label(1) },
{ id: 0, label: this.$t("Unrated") + ratingCount(this.facets.Ratings?.["0.0"] ?? 0) },
{id: 5, label: "⭐⭐⭐⭐⭐" + ratingCount(this.facets.Ratings?.["5.0"] ?? 0) + label(5)},
{id: 4, label: "⭐⭐⭐⭐ " + ratingCount(this.facets.Ratings?.["4.0"] ?? 0) + label()},
{id: 3, label: "⭐⭐⭐ " + ratingCount(this.facets.Ratings?.["3.0"] ?? 0) + label()},
{id: 2, label: "⭐⭐ " + ratingCount(this.facets.Ratings?.["2.0"] ?? 0) + label()},
{id: 1, label: "⭐ " + ratingCount(this.facets.Ratings?.["1.0"] ?? 0) + label(1)},
{id: 0, label: this.$t("Unrated") + ratingCount(this.facets.Ratings?.["0.0"] ?? 0)},
]
},
keywordFields: function () {
@@ -936,22 +1129,22 @@ export default {
this.facets.Keywords = []
for (let x of urlParams.getAll("keyword")) {
this.search.search_keywords[0].items.push(Number.parseInt(x))
this.facets.Keywords.push({ id: x, name: "loading..." })
this.facets.Keywords.push({id: x, name: "loading..."})
}
}
// TODO: figure out how to find nested items and load keyword/food children for that branch
// probably a backend change in facets to pre-load children of nested items
for (let x of this.search.search_foods.map((x) => x.items).flat()) {
this.facets.Foods.push({ id: x, name: "loading..." })
this.facets.Foods.push({id: x, name: "loading..."})
}
for (let x of this.search.search_keywords.map((x) => x.items).flat()) {
this.facets.Keywords.push({ id: x, name: "loading..." })
this.facets.Keywords.push({id: x, name: "loading..."})
}
for (let x of this.search.search_books.map((x) => x.items).flat()) {
this.facets.Books.push({ id: x, name: "loading..." })
this.facets.Books.push({id: x, name: "loading..."})
}
this.loadMealPlan()
@@ -1001,13 +1194,13 @@ export default {
"ui.expert_mode": function (newVal, oldVal) {
if (!newVal) {
this.search.search_keywords = this.search.search_keywords.map((x) => {
return { ...x, not: false }
return {...x, not: false}
})
this.search.search_foods = this.search.search_foods.map((x) => {
return { ...x, not: false }
return {...x, not: false}
})
this.search.search_books = this.search.search_books.map((x) => {
return { ...x, not: false }
return {...x, not: false}
})
}
},
@@ -1077,13 +1270,13 @@ export default {
},
resetSearch: function (filter = undefined) {
this.search.search_keywords = this.search.search_keywords.map((x) => {
return { ...x, items: [] }
return {...x, items: []}
})
this.search.search_foods = this.search.search_foods.map((x) => {
return { ...x, items: [] }
return {...x, items: []}
})
this.search.search_books = this.search.search_books.map((x) => {
return { ...x, items: [] }
return {...x, items: []}
})
this.search.search_input = filter?.query ?? ""
this.search.search_internal = filter?.internal ?? false
@@ -1138,12 +1331,12 @@ export default {
if (!this.ui.tree_select) {
return
}
let params = { hash: hash }
let params = {hash: hash}
if (facet) {
params[facet] = id
}
return this.genericGetAPI("api_get_facets", params).then((response) => {
this.facets = { ...this.facets, ...response.data.facets }
this.facets = {...this.facets, ...response.data.facets}
})
},
showSQL: function () {
@@ -1154,14 +1347,14 @@ export default {
})
},
// TODO refactor to combine with load KeywordChildren
loadFoodChildren({ action, parentNode, callback }) {
loadFoodChildren({action, parentNode, callback}) {
if (action === LOAD_CHILDREN_OPTIONS) {
if (this.facets?.cache_key) {
this.getFacets(this.facets.cache_key, "food", parentNode.id).then(callback())
}
}
},
loadKeywordChildren({ action, parentNode, callback }) {
loadKeywordChildren({action, parentNode, callback}) {
if (action === LOAD_CHILDREN_OPTIONS) {
if (this.facets?.cache_key) {
this.getFacets(this.facets.cache_key, "keyword", parentNode.id).then(callback())
@@ -1172,7 +1365,7 @@ export default {
return
},
buildParams: function (random) {
let params = { options: { query: {} }, page: this.search.pagination_page, pageSize: this.ui.page_size }
let params = {options: {query: {}}, page: this.search.pagination_page, pageSize: this.ui.page_size}
if (this.search.search_filter) {
params.options.query.filter = this.search.search_filter.id
return params
@@ -1293,7 +1486,7 @@ export default {
;["page", "pageSize"].forEach((key) => {
delete search[key]
})
search = { ...search, ...search.options.query }
search = {...search, ...search.options.query}
console.log("after concat", search)
let params = {
name: filtername,

1
vue/src/apps/ShoppingListView/ShoppingListView.vue
View File

@@ -440,7 +440,6 @@
:initial_selection="settings.shopping_share"
label="username"
:multiple="true"
:allow_create="false"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
:placeholder="$t('User')"
/>