basics
This commit is contained in:
vabene1111
parent
8d24ae9008
commit
3ea96d4102
@ -177,8 +177,8 @@ admin.site.register(Keyword, KeywordAdmin)
|
||||
|
||||
|
||||
class StepAdmin(admin.ModelAdmin):
|
||||
list_display = ('name', 'type', 'order')
|
||||
search_fields = ('name', 'type')
|
||||
list_display = ('name', 'order',)
|
||||
search_fields = ('name',)
|
||||
|
||||
|
||||
admin.site.register(Step, StepAdmin)
|
||||
|
||||
17
cookbook/migrations/0165_remove_step_type.py
Normal file
17
cookbook/migrations/0165_remove_step_type.py
Normal file
@ -0,0 +1,17 @@
|
||||
# Generated by Django 3.2.11 on 2022-01-18 19:19
|
||||
|
||||
from django.db import migrations
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('cookbook', '0164_space_show_facet_count'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.RemoveField(
|
||||
model_name='step',
|
||||
name='type',
|
||||
),
|
||||
]
|
||||
@ -576,17 +576,7 @@ class Ingredient(ExportModelOperationsMixin('ingredient'), models.Model, Permiss
|
||||
|
||||
|
||||
class Step(ExportModelOperationsMixin('step'), models.Model, PermissionModelMixin):
|
||||
TEXT = 'TEXT'
|
||||
TIME = 'TIME'
|
||||
FILE = 'FILE'
|
||||
RECIPE = 'RECIPE'
|
||||
|
||||
name = models.CharField(max_length=128, default='', blank=True)
|
||||
type = models.CharField(
|
||||
choices=((TEXT, _('Text')), (TIME, _('Time')), (FILE, _('File')), (RECIPE, _('Recipe')),),
|
||||
default=TEXT,
|
||||
max_length=16
|
||||
)
|
||||
instruction = models.TextField(blank=True)
|
||||
ingredients = models.ManyToManyField(Ingredient, blank=True)
|
||||
time = models.IntegerField(default=0, blank=True)
|
||||
|
||||
@ -481,7 +481,7 @@ class StepSerializer(WritableNestedModelSerializer, ExtendedRecipeMixin):
|
||||
class Meta:
|
||||
model = Step
|
||||
fields = (
|
||||
'id', 'name', 'type', 'instruction', 'ingredients', 'ingredients_markdown',
|
||||
'id', 'name', 'instruction', 'ingredients', 'ingredients_markdown',
|
||||
'ingredients_vue', 'time', 'order', 'show_as_header', 'file', 'step_recipe', 'step_recipe_data', 'numrecipe'
|
||||
)
|
||||
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3>{{ $t("Edit_Recipe") }}</h3>
|
||||
<h3><i class="fas fa-edit"></i> <span v-if="recipe !== undefined">{{ recipe.name }}</span></h3>
|
||||
|
||||
<loading-spinner :size="25" v-if="!recipe"></loading-spinner>
|
||||
|
||||
<div v-if="recipe !== undefined">
|
||||
|
||||
<!-- Title and description -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label for="id_name"> {{ $t("Name") }}</label>
|
||||
@ -21,6 +23,7 @@
|
||||
</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
|
||||
@ -83,80 +86,81 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="recipe !== undefined">
|
||||
<div class="row pt-2">
|
||||
<div class="col-md-12">
|
||||
<div class="card border-grey">
|
||||
<div class="card-header" style="display: table">
|
||||
<div class="row">
|
||||
<div class="col-md-9 d-table">
|
||||
<h5 class="d-table-cell align-middle">{{ $t("Nutrition") }}</h5>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<button
|
||||
type="button"
|
||||
@click="addNutrition()"
|
||||
v-if="recipe.nutrition === null"
|
||||
v-b-tooltip.hover
|
||||
v-bind:title="$t('Add_nutrition_recipe')"
|
||||
class="btn btn-sm btn-success shadow-none float-right"
|
||||
>
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="removeNutrition()"
|
||||
v-if="recipe.nutrition !== null"
|
||||
v-b-tooltip.hover
|
||||
v-bind:title="$t('Remove_nutrition_recipe')"
|
||||
class="btn btn-sm btn-danger shadow-none float-right"
|
||||
>
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Nutrition -->
|
||||
<div class="row pt-2">
|
||||
<div class="col-md-12">
|
||||
<div class="card border-grey">
|
||||
<div class="card-header" style="display: table">
|
||||
<div class="row">
|
||||
<div class="col-md-9 d-table">
|
||||
<h5 class="d-table-cell align-middle">{{ $t("Nutrition") }}</h5>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<button
|
||||
type="button"
|
||||
@click="addNutrition()"
|
||||
v-if="recipe.nutrition === null"
|
||||
v-b-tooltip.hover
|
||||
v-bind:title="$t('Add_nutrition_recipe')"
|
||||
class="btn btn-sm btn-success shadow-none float-right"
|
||||
>
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="removeNutrition()"
|
||||
v-if="recipe.nutrition !== null"
|
||||
v-b-tooltip.hover
|
||||
v-bind:title="$t('Remove_nutrition_recipe')"
|
||||
class="btn btn-sm btn-danger shadow-none float-right"
|
||||
>
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-collapse id="id_nutrition_collapse" class="mt-2" v-model="nutrition_visible">
|
||||
<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.
|
||||
</b-alert>
|
||||
|
||||
<label for="id_name"> {{ $t(energy()) }}</label>
|
||||
|
||||
<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"/>
|
||||
|
||||
<label for="id_name"> {{ $t("Fats") }}</label>
|
||||
<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"/>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
|
||||
<b-collapse id="id_nutrition_collapse" class="mt-2" v-model="nutrition_visible">
|
||||
<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.
|
||||
</b-alert>
|
||||
|
||||
<label for="id_name"> {{ $t(energy()) }}</label>
|
||||
|
||||
<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"/>
|
||||
|
||||
<label for="id_name"> {{ $t("Fats") }}</label>
|
||||
<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"/>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Steps -->
|
||||
<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" :id="`id_card_step_${step_index}`">
|
||||
|
||||
<!-- step card header -->
|
||||
<div class="row">
|
||||
<div class="col-11">
|
||||
<h4 class="handle" :id="'id_step_' + step_index">
|
||||
<i class="fas fa-paragraph" v-if="step.type === 'TEXT'"></i>
|
||||
<i class="fas fa-clock" v-if="step.type === 'TIME'"></i>
|
||||
<i class="fas fa-paragraph"></i>
|
||||
<template v-if="step.name !== ''">{{ step.name }}</template>
|
||||
<template v-else>{{ $t("Step") }} {{ step_index + 1 }}</template>
|
||||
</h4>
|
||||
@ -194,31 +198,55 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- step name input -->
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<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'"/>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="id_type"> {{ $t("Step_Type") }}</label>
|
||||
<select class="form-control" id="id_type" v-model="step.type">
|
||||
<option value="TEXT">{{ $t("Text") }}</option>
|
||||
<option value="TIME">{{ $t("Time") }}</option>
|
||||
<option value="FILE">{{ $t("File") }}</option>
|
||||
<option value="RECIPE">{{ $t("Recipe") }}</option>
|
||||
</select>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<i class="fas fa-plus-circle"></i> {{ $t("File") }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top: 12px">
|
||||
<div class="col-md-3">
|
||||
<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'"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9" v-if="step.type === 'FILE'">
|
||||
<div class="row pt-2" v-if="step.file_visible">
|
||||
<div class="col-md-12">
|
||||
<label :for="'id_step_' + step.id + '_file'">{{ $t("File") }}</label>
|
||||
<multiselect
|
||||
ref="file"
|
||||
@ -238,9 +266,15 @@
|
||||
@search-change="searchFiles"
|
||||
>
|
||||
</multiselect>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9" v-if="step.type === 'RECIPE'">
|
||||
<button>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pt-2" v-if="step.step_recipe_visible">
|
||||
<div class="col-md-12">
|
||||
<label :for="'id_step_' + step.id + '_recipe'">{{ $t("Recipe") }}</label>
|
||||
<multiselect
|
||||
ref="step_recipe"
|
||||
@ -264,107 +298,106 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="step.type === 'TEXT'">
|
||||
<div class="row" style="margin-top: 12px">
|
||||
<div class="col-md-12">
|
||||
<div class="jumbotron" style="padding: 16px">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4>{{ $t("Ingredients") }}</h4>
|
||||
</div>
|
||||
<div class="row pt-2" v-if="step.ingredients_visible">
|
||||
<div class="col-md-12">
|
||||
<div class="jumbotron" style="padding: 16px">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4>{{ $t("Ingredients") }}</h4>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12" style="margin-top: 8px">
|
||||
<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"><i
|
||||
class="fas fa-arrows-alt-v"></i></button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12" style="margin-top: 8px">
|
||||
<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"><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">
|
||||
<input
|
||||
class="form-control"
|
||||
v-model="ingredient.amount"
|
||||
type="number"
|
||||
step="any"
|
||||
v-if="!ingredient.no_amount"
|
||||
:id="`amount_${step_index}_${index}`"
|
||||
/>
|
||||
</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">
|
||||
<input
|
||||
class="form-control"
|
||||
v-model="ingredient.amount"
|
||||
type="number"
|
||||
step="any"
|
||||
v-if="!ingredient.no_amount"
|
||||
:id="`amount_${step_index}_${index}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
ref="unit"
|
||||
v-model="ingredient.unit"
|
||||
:options="units"
|
||||
:close-on-select="true"
|
||||
:clear-on-select="true"
|
||||
:allow-empty="true"
|
||||
:preserve-search="true"
|
||||
:internal-search="false"
|
||||
:limit="options_limit"
|
||||
placeholder="Select Unit"
|
||||
tag-placeholder="Create"
|
||||
select-label="Select"
|
||||
:taggable="true"
|
||||
@tag="addUnitType"
|
||||
:id="`unit_${step_index}_${index}`"
|
||||
label="name"
|
||||
track-by="name"
|
||||
:multiple="false"
|
||||
:loading="units_loading"
|
||||
@search-change="searchUnits"
|
||||
>
|
||||
</multiselect>
|
||||
</div>
|
||||
<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
|
||||
ref="food"
|
||||
v-model="ingredient.food"
|
||||
:options="foods"
|
||||
:close-on-select="true"
|
||||
:clear-on-select="true"
|
||||
:allow-empty="true"
|
||||
:preserve-search="true"
|
||||
:internal-search="false"
|
||||
:limit="options_limit"
|
||||
placeholder="Select Food"
|
||||
tag-placeholder="Create"
|
||||
select-label="Select"
|
||||
:taggable="true"
|
||||
@tag="addFoodType"
|
||||
:id="`ingredient_${step_index}_${index}`"
|
||||
label="name"
|
||||
track-by="name"
|
||||
:multiple="false"
|
||||
:loading="foods_loading"
|
||||
@search-change="searchFoods"
|
||||
>
|
||||
</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 }">
|
||||
<input
|
||||
class="form-control"
|
||||
maxlength="256"
|
||||
v-model="ingredient.note"
|
||||
v-bind:placeholder="$t('Note')"
|
||||
v-on:keydown.tab="
|
||||
<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"
|
||||
ref="unit"
|
||||
v-model="ingredient.unit"
|
||||
:options="units"
|
||||
:close-on-select="true"
|
||||
:clear-on-select="true"
|
||||
:allow-empty="true"
|
||||
:preserve-search="true"
|
||||
:internal-search="false"
|
||||
:limit="options_limit"
|
||||
placeholder="Select Unit"
|
||||
tag-placeholder="Create"
|
||||
select-label="Select"
|
||||
:taggable="true"
|
||||
@tag="addUnitType"
|
||||
:id="`unit_${step_index}_${index}`"
|
||||
label="name"
|
||||
track-by="name"
|
||||
:multiple="false"
|
||||
:loading="units_loading"
|
||||
@search-change="searchUnits"
|
||||
>
|
||||
</multiselect>
|
||||
</div>
|
||||
<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
|
||||
ref="food"
|
||||
v-model="ingredient.food"
|
||||
:options="foods"
|
||||
:close-on-select="true"
|
||||
:clear-on-select="true"
|
||||
:allow-empty="true"
|
||||
:preserve-search="true"
|
||||
:internal-search="false"
|
||||
:limit="options_limit"
|
||||
placeholder="Select Food"
|
||||
tag-placeholder="Create"
|
||||
select-label="Select"
|
||||
:taggable="true"
|
||||
@tag="addFoodType"
|
||||
:id="`ingredient_${step_index}_${index}`"
|
||||
label="name"
|
||||
track-by="name"
|
||||
:multiple="false"
|
||||
:loading="foods_loading"
|
||||
@search-change="searchFoods"
|
||||
>
|
||||
</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 }">
|
||||
<input
|
||||
class="form-control"
|
||||
maxlength="256"
|
||||
v-model="ingredient.note"
|
||||
v-bind:placeholder="$t('Note')"
|
||||
v-on:keydown.tab="
|
||||
(event) => {
|
||||
if (step.ingredients.indexOf(ingredient) === step.ingredients.length - 1) {
|
||||
event.preventDefault()
|
||||
@ -372,79 +405,79 @@
|
||||
}
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-0 small-padding">
|
||||
<a class="btn shadow-none btn-lg" href="#"
|
||||
role="button" id="dropdownMenuLink2"
|
||||
data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i class="fas fa-ellipsis-v text-muted"></i>
|
||||
</a>
|
||||
<div class="flex-grow-0 small-padding">
|
||||
<a class="btn shadow-none btn-lg" href="#"
|
||||
role="button" id="dropdownMenuLink2"
|
||||
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="dropdownMenuLink2">
|
||||
<button type="button" class="dropdown-item"
|
||||
@click="removeIngredient(step, ingredient)">
|
||||
<i class="fa fa-trash fa-fw"></i>
|
||||
{{ $t("Delete") }}
|
||||
</button>
|
||||
<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">
|
||||
<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 = 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">
|
||||
<i class="fas fa-leaf fa-fw"></i>
|
||||
{{ $t("Make_Ingredient") }}
|
||||
</button>
|
||||
<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">
|
||||
<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 = 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">
|
||||
<i class="fas fa-balance-scale-right fa-fw"></i>
|
||||
{{ $t("Enable_Amount") }}
|
||||
</button>
|
||||
<button type="button" class="dropdown-item"
|
||||
@click="copyTemplateReference(index, ingredient)">
|
||||
<i class="fas fa-code"></i>
|
||||
{{ $t("Copy_template_reference") }}
|
||||
</button>
|
||||
</div>
|
||||
<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)">
|
||||
<i class="fas fa-code"></i>
|
||||
{{ $t("Copy_template_reference") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="row pt-2" v-if="step.instruction_visible">
|
||||
<div class="col-md-12">
|
||||
<label :for="'id_instruction_' + step.id">{{ $t("Instructions") }}</label>
|
||||
<v-md-editor
|
||||
@ -483,6 +516,7 @@
|
||||
<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="col-md-3 col-6">
|
||||
@ -509,7 +543,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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">
|
||||
@ -521,6 +555,8 @@
|
||||
</li>
|
||||
</draggable>
|
||||
</b-modal>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -646,19 +682,26 @@ export default {
|
||||
loadRecipe: function () {
|
||||
let apiFactory = new ApiApiFactory()
|
||||
|
||||
apiFactory
|
||||
.retrieveRecipe(this.recipe_id)
|
||||
.then((response) => {
|
||||
this.recipe = response.data
|
||||
this.loading = false
|
||||
apiFactory.retrieveRecipe(this.recipe_id).then((response) => {
|
||||
this.recipe = response.data
|
||||
this.loading = false
|
||||
|
||||
//TODO workaround function until view is properly refactored, loads name of selected sub recipe so the input can find its label
|
||||
this.recipe.steps.forEach((s) => {
|
||||
if (s.step_recipe != null) {
|
||||
this.recipes.push(s.step_recipe_data)
|
||||
}
|
||||
})
|
||||
// set default visibility style for each component of the step
|
||||
this.recipe.steps.forEach((s) => {
|
||||
this.$set(s, 'time_visible', (s.time !== 0))
|
||||
this.$set(s, 'ingredients_visible', (s.ingredients.length > 0))
|
||||
this.$set(s, 'instruction_visible', (s.instruction !== ''))
|
||||
this.$set(s, 'step_recipe_visible', (s.step_recipe !== null))
|
||||
this.$set(s, 'file_visible', (s.file !== null))
|
||||
})
|
||||
|
||||
//TODO workaround function until view is properly refactored, loads name of selected sub recipe so the input can find its label
|
||||
this.recipe.steps.forEach((s) => {
|
||||
if (s.step_recipe != null) {
|
||||
this.recipes.push(s.step_recipe_data)
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading = false
|
||||
console.log(err)
|
||||
@ -735,7 +778,16 @@ export default {
|
||||
},
|
||||
addStep: function (step_index) {
|
||||
//TODO see if default can be generated from options request
|
||||
let empty_step = {instruction: "", ingredients: [], type: "TEXT", show_as_header: true}
|
||||
let empty_step = {
|
||||
instruction: "",
|
||||
ingredients: [],
|
||||
show_as_header: true,
|
||||
time_visible: false,
|
||||
ingredients_visible: true,
|
||||
instruction_visible: true,
|
||||
step_recipe_visible: false,
|
||||
file_visible: false
|
||||
}
|
||||
if (step_index !== undefined) {
|
||||
console.log('adding at index', step_index)
|
||||
this.recipe.steps.splice(step_index + 1, 0, empty_step)
|
||||
|
||||
@ -1,126 +1,119 @@
|
||||
<template>
|
||||
<div>
|
||||
<hr />
|
||||
|
||||
<template v-if="step.type === 'TEXT' || step.type === 'RECIPE'">
|
||||
<div class="row" v-if="recipe.steps.length > 1">
|
||||
<div class="col col-md-8">
|
||||
<h5 class="text-primary">
|
||||
<template v-if="step.name">{{ step.name }}</template>
|
||||
<template v-else>{{ $t("Step") }} {{ index + 1 }}</template>
|
||||
<small style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fas fa-user-clock"></i> {{ step.time }} {{ $t("min") }} </small>
|
||||
<small v-if="start_time !== ''" class="d-print-none">
|
||||
<b-link :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#">
|
||||
{{ moment(start_time).add(step.time_offset, "minutes").format("HH:mm") }}
|
||||
</b-link>
|
||||
</small>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="col col-md-4" style="text-align: right">
|
||||
<b-button
|
||||
@click="details_visible = !details_visible"
|
||||
style="border: none; background: none"
|
||||
class="shadow-none d-print-none"
|
||||
:class="{ 'text-primary': details_visible, 'text-success': !details_visible }"
|
||||
>
|
||||
<i class="far fa-check-circle"></i>
|
||||
</b-button>
|
||||
</div>
|
||||
<hr/>
|
||||
<!-- Step header (only shown if more than one step -->
|
||||
<div class="row mb-1" v-if="recipe.steps.length > 1">
|
||||
<div class="col col-md-8">
|
||||
<h5 class="text-primary">
|
||||
<template v-if="step.name">{{ step.name }}</template>
|
||||
<template v-else>{{ $t("Step") }} {{ index + 1 }}</template>
|
||||
<small style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i
|
||||
class="fas fa-user-clock"></i> {{ step.time }} {{ $t("min") }} </small>
|
||||
<small v-if="start_time !== ''" class="d-print-none">
|
||||
<b-link :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#">
|
||||
{{ moment(start_time).add(step.time_offset, "minutes").format("HH:mm") }}
|
||||
</b-link>
|
||||
</small>
|
||||
</h5>
|
||||
</div>
|
||||
</template>
|
||||
<div class="col col-md-4 text-right">
|
||||
<b-button
|
||||
@click="details_visible = !details_visible"
|
||||
style="border: none; background: none"
|
||||
class="shadow-none d-print-none"
|
||||
:class="{ 'text-primary': details_visible, 'text-success': !details_visible }"
|
||||
>
|
||||
<i class="far fa-check-circle"></i>
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="step.type === 'TEXT'">
|
||||
<b-collapse id="collapse-1" v-model="details_visible">
|
||||
<div class="row">
|
||||
<div class="col col-md-4" >
|
||||
<table class="table table-sm" v-if="step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)">
|
||||
<ingredients-card :steps="[step]" :ingredient_factor="ingredient_factor" @checked-state-changed="$emit('checked-state-changed', $event)" />
|
||||
</table>
|
||||
</div>
|
||||
<div class="col" :class="{ 'col-md-8': recipe.steps.length > 1, 'col-md-12': recipe.steps.length <= 1 }">
|
||||
<compile-component :code="step.ingredients_markdown" :ingredient_factor="ingredient_factor"></compile-component>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</template>
|
||||
<b-collapse id="collapse-1" v-model="details_visible">
|
||||
|
||||
<template v-if="step.type === 'TIME' || step.type === 'FILE'">
|
||||
<div class="row">
|
||||
<div class="col-md-8 offset-md-2" style="text-align: center">
|
||||
<h4 class="text-primary">
|
||||
<template v-if="step.name">{{ step.name }}</template>
|
||||
<template v-else>{{ $t("Step") }} {{ index + 1 }}</template>
|
||||
</h4>
|
||||
<span style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fa fa-stopwatch"></i> {{ step.time }} {{ $t("min") }}</span>
|
||||
<b-link class="d-print-none" :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#" v-if="start_time !== ''">
|
||||
{{ moment(start_time).add(step.time_offset, "minutes").format("HH:mm") }}
|
||||
</b-link>
|
||||
<!-- ingredients table -->
|
||||
<div class="col col-md-4">
|
||||
<table class="table table-sm"
|
||||
v-if="step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)">
|
||||
<ingredients-card :steps="[step]" :ingredient_factor="ingredient_factor"
|
||||
@checked-state-changed="$emit('checked-state-changed', $event)"/>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2" style="text-align: right">
|
||||
<b-button
|
||||
@click="details_visible = !details_visible"
|
||||
style="border: none; background: none"
|
||||
class="shadow-none d-print-none"
|
||||
:class="{ 'text-primary': details_visible, 'text-success': !details_visible }"
|
||||
>
|
||||
<i class="far fa-check-circle"></i>
|
||||
</b-button>
|
||||
<div class="col"
|
||||
:class="{ 'col-md-8': recipe.steps.length > 1, 'col-md-12': recipe.steps.length <= 1 }">
|
||||
<!-- step text -->
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<compile-component :code="step.ingredients_markdown"
|
||||
:ingredient_factor="ingredient_factor"></compile-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File (preview if image, download else) -->
|
||||
<div class="row" v-if="step.file !== null">
|
||||
<div class="col col-md-12">
|
||||
<template>
|
||||
<div
|
||||
v-if="step.file.file.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')">
|
||||
<b-img :src="step.file.file" fluid-grow></b-img>
|
||||
</div>
|
||||
<div v-else>
|
||||
<a :href="step.file.file" target="_blank"
|
||||
rel="noreferrer nofollow">{{ $t("Download") }}
|
||||
{{ $t("File") }}</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<b-collapse id="collapse-1" v-model="details_visible">
|
||||
<div class="row" v-if="step.instruction !== ''">
|
||||
<div class="col col-md-12" style="text-align: center">
|
||||
<compile-component :code="step.ingredients_markdown" :ingredient_factor="ingredient_factor"></compile-component>
|
||||
<!-- Sub recipe (always full width own row) -->
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<div class="card" v-if="step.step_recipe_data !== null">
|
||||
<b-collapse id="collapse-1" v-model="details_visible">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<a :href="resolveDjangoUrl('view_recipe', step.step_recipe_data.id)">{{
|
||||
step.step_recipe_data.name
|
||||
}}</a>
|
||||
</h2>
|
||||
<div v-for="(sub_step, index) in step.step_recipe_data.steps"
|
||||
v-bind:key="`substep_${sub_step.id}`">
|
||||
<step-component
|
||||
:recipe="step.step_recipe_data"
|
||||
:step="sub_step"
|
||||
:ingredient_factor="ingredient_factor"
|
||||
:index="index"
|
||||
:start_time="start_time"
|
||||
:force_ingredients="true"
|
||||
></step-component>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</template>
|
||||
|
||||
<div class="row" style="text-align: center">
|
||||
<div class="col col-md-12">
|
||||
<template v-if="step.file !== null">
|
||||
<div v-if="step.file.file.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')">
|
||||
<img :src="step.file.file" style="max-width: 50vw; max-height: 50vh" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<a :href="step.file.file" target="_blank" rel="noreferrer nofollow">{{ $t("Download") }} {{ $t("File") }}</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" v-if="step.type === 'RECIPE' && step.step_recipe_data !== null">
|
||||
<b-collapse id="collapse-1" v-model="details_visible">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<a :href="resolveDjangoUrl('view_recipe', step.step_recipe_data.id)">{{ step.step_recipe_data.name }}</a>
|
||||
</h2>
|
||||
<div v-for="(sub_step, index) in step.step_recipe_data.steps" v-bind:key="`substep_${sub_step.id}`">
|
||||
<step-component
|
||||
:recipe="step.step_recipe_data"
|
||||
:step="sub_step"
|
||||
:ingredient_factor="ingredient_factor"
|
||||
:index="index"
|
||||
:start_time="start_time"
|
||||
:force_ingredients="true"
|
||||
></step-component>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
||||
<!-- Time popover (not rendered) -->
|
||||
<div v-if="start_time !== ''">
|
||||
<b-popover :target="`id_reactive_popover_${step.id}`" triggers="click" placement="bottom" :ref="`id_reactive_popover_${step.id}`" :title="$t('Step start time')">
|
||||
<b-popover :target="`id_reactive_popover_${step.id}`" triggers="click" placement="bottom"
|
||||
:ref="`id_reactive_popover_${step.id}`" :title="$t('Step start time')">
|
||||
<div>
|
||||
<b-form-group label="Time" label-for="popover-input-1" label-cols="3" class="mb-1">
|
||||
<b-form-input type="datetime-local" id="popover-input-1" v-model.datetime-local="set_time_input" size="sm"></b-form-input>
|
||||
<b-form-input type="datetime-local" id="popover-input-1" v-model.datetime-local="set_time_input"
|
||||
size="sm"></b-form-input>
|
||||
</b-form-group>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 1vh">
|
||||
<div class="col-12" style="text-align: right">
|
||||
<b-button @click="closePopover" size="sm" variant="secondary" style="margin-right: 8px">{{ $t("Cancel") }}</b-button>
|
||||
<b-button @click="closePopover" size="sm" variant="secondary" style="margin-right: 8px">
|
||||
{{ $t("Cancel") }}
|
||||
</b-button>
|
||||
<b-button @click="updateTime" size="sm" variant="primary">{{ $t("Ok") }}</b-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -130,22 +123,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { calculateAmount } from "@/utils/utils"
|
||||
import {calculateAmount} from "@/utils/utils"
|
||||
|
||||
import { GettextMixin } from "@/utils/utils"
|
||||
import {GettextMixin} from "@/utils/utils"
|
||||
|
||||
import CompileComponent from "@/components/CompileComponent"
|
||||
import IngredientsCard from "@/components/IngredientsCard"
|
||||
import Vue from "vue"
|
||||
import moment from "moment"
|
||||
import { ResolveUrlMixin } from "@/utils/utils"
|
||||
import {ResolveUrlMixin} from "@/utils/utils"
|
||||
|
||||
Vue.prototype.moment = moment
|
||||
|
||||
export default {
|
||||
name: "StepComponent",
|
||||
mixins: [GettextMixin, ResolveUrlMixin],
|
||||
components: { CompileComponent, IngredientsCard },
|
||||
components: {CompileComponent, IngredientsCard},
|
||||
props: {
|
||||
step: Object,
|
||||
ingredient_factor: Number,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user