small fixes
This commit is contained in:
vabene1111
@ -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,16 +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" />
|
||||
<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"
|
||||
@ -353,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"
|
||||
@ -380,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
|
||||
@ -410,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"
|
||||
@ -444,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>
|
||||
@ -481,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>
|
||||
@ -515,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)">
|
||||
@ -540,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>
|
||||
@ -553,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>
|
||||
@ -570,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"
|
||||
@ -613,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,
|
||||
@ -761,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)
|
||||
@ -850,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)
|
||||
}
|
||||
},
|
||||
@ -868,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
|
||||
},
|
||||
@ -876,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) {
|
||||
@ -904,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
|
||||
@ -916,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
|
||||
@ -982,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
|
||||
@ -1018,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,
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user