time step + step delete + sorting improvement
This commit is contained in:
vabene1111
parent
2c5fbc558e
commit
5d70dca039
23
cookbook/migrations/0070_auto_20200701_2007.py
Normal file
23
cookbook/migrations/0070_auto_20200701_2007.py
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
# Generated by Django 3.0.7 on 2020-07-01 18:07
|
||||||
|
|
||||||
|
from django.db import migrations, models
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('cookbook', '0069_auto_20200629_2134'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
migrations.AddField(
|
||||||
|
model_name='step',
|
||||||
|
name='time',
|
||||||
|
field=models.IntegerField(blank=True, default=0),
|
||||||
|
),
|
||||||
|
migrations.AlterField(
|
||||||
|
model_name='step',
|
||||||
|
name='kind',
|
||||||
|
field=models.CharField(choices=[('TEXT', 'Text'), ('TIME', 'Time')], default='TEXT', max_length=16),
|
||||||
|
),
|
||||||
|
]
|
||||||
@ -160,11 +160,13 @@ class Ingredient(models.Model):
|
|||||||
|
|
||||||
class Step(models.Model):
|
class Step(models.Model):
|
||||||
TEXT = 'TEXT'
|
TEXT = 'TEXT'
|
||||||
|
TIME = 'TIME'
|
||||||
|
|
||||||
name = models.CharField(max_length=128, default='', blank=True)
|
name = models.CharField(max_length=128, default='', blank=True)
|
||||||
kind = models.CharField(choices=((TEXT, _('Text')),), default=TEXT, max_length=16)
|
kind = models.CharField(choices=((TEXT, _('Text')), (TIME, _('Time')),), default=TEXT, max_length=16)
|
||||||
instruction = models.TextField(blank=True)
|
instruction = models.TextField(blank=True)
|
||||||
ingredients = models.ManyToManyField(Ingredient, blank=True)
|
ingredients = models.ManyToManyField(Ingredient, blank=True)
|
||||||
|
time = models.IntegerField(default=0, blank=True)
|
||||||
order = models.IntegerField(default=0)
|
order = models.IntegerField(default=0)
|
||||||
|
|
||||||
class Meta:
|
class Meta:
|
||||||
|
|||||||
@ -38,7 +38,6 @@
|
|||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<label for="id_name"> {% trans 'Name' %}</label>
|
<label for="id_name"> {% trans '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>
|
</div>
|
||||||
<br/>
|
<br/>
|
||||||
@ -82,149 +81,176 @@
|
|||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<h3><i class="fas fa-arrows-alt-v handle"></i> {% trans 'Step' %} [[step_index+1]]</h3>
|
<h4><i class="fas fa-arrows-alt-v handle"></i> {% trans 'Step' %} [[step_index+1]]
|
||||||
|
<button class="btn btn-outline-dark shadow-none" @click="removeStep(step)"><i
|
||||||
|
class="fa fa-trash fa-fw"></i></button>
|
||||||
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-8">
|
||||||
<label :for="'id_step_' + step.id + 'name'">{% trans 'Step Name' %}</label>
|
<label :for="'id_step_' + step.id + 'name'">{% trans '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>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<label for="id_type"> {% trans 'Type' %}</label>
|
||||||
|
<select class="form-control" id="id_type" v-model="step.kind">
|
||||||
|
<option value="TEXT">{% trans 'Text' %}</option>
|
||||||
|
<option value="TIME">{% trans 'Time' %}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12" style="margin-top: 12px">
|
|
||||||
<draggable :list="step.ingredients" group="ingredients"
|
|
||||||
:empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)">
|
|
||||||
<div class="col-md-12" v-for="ingredient, index in step.ingredients"
|
|
||||||
:key="ingredient.id"
|
|
||||||
style="margin-top: 8px">
|
|
||||||
|
|
||||||
<hr class="d-md-none"/>
|
<template v-if="step.kind == 'TIME'">
|
||||||
<div class="d-flex">
|
<div class="row" style="margin-top: 12px">
|
||||||
<div class="flex-grow-0 handle align-self-start">
|
<div class="col-md-12">
|
||||||
<button type="button" class="btn btn-lg shadow-none"><i
|
<label :for="'id_step_' + step.id + '_time'">{% trans 'Waiting time in Minutes' %}</label>
|
||||||
class="fas fa-arrows-alt-v "></i></button>
|
<input class="form-control" v-model="step.time" :id="'id_step_' + step.id + '_time'">
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<div class="flex-fill row" style="margin-left: 4px; margin-right: 4px">
|
<template v-if="step.kind == 'TEXT'">
|
||||||
<div class="col-lg-2 col-md-6 small-padding" v-if="!ingredient.is_header">
|
<div class="row" style="margin-top: 12px">
|
||||||
<input class="form-control" v-model="ingredient.amount" type="number"
|
<div class="col-md-12">
|
||||||
v-if="!ingredient.no_amount">
|
<draggable :list="step.ingredients" group="ingredients"
|
||||||
|
:empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)">
|
||||||
|
<div class="col-md-12" v-for="ingredient, index in step.ingredients"
|
||||||
|
:key="ingredient.id"
|
||||||
|
style="margin-top: 8px">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<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">
|
||||||
<multiselect
|
<div class="col-lg-2 col-md-6 small-padding"
|
||||||
v-tabindex
|
v-if="!ingredient.is_header">
|
||||||
ref="unit"
|
<input class="form-control" v-model="ingredient.amount"
|
||||||
v-model="ingredient.unit"
|
type="number"
|
||||||
:options="units"
|
v-if="!ingredient.no_amount">
|
||||||
:close-on-select="true"
|
</div>
|
||||||
:clear-on-select="true"
|
|
||||||
:allow-empty="true"
|
|
||||||
:preserve-search="true"
|
|
||||||
placeholder="{% trans 'Select Unit' %}"
|
|
||||||
tag-placeholder="{% trans '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">
|
|
||||||
<multiselect
|
|
||||||
v-tabindex
|
|
||||||
ref="food"
|
|
||||||
v-model="ingredient.food"
|
|
||||||
:options="foods"
|
|
||||||
:close-on-select="true"
|
|
||||||
:clear-on-select="true"
|
|
||||||
:allow-empty="true"
|
|
||||||
:preserve-search="true"
|
|
||||||
placeholder="{% trans 'Select Food' %}"
|
|
||||||
tag-placeholder="{% trans '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" v-model="ingredient.note"
|
|
||||||
placeholder="{% trans 'Note' %}">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-grow-0 small-padding">
|
<div class="col-lg-2 col-md-6 small-padding"
|
||||||
<a class="btn shadow-none btn-lg" href="#" role="button"
|
v-if="!ingredient.is_header">
|
||||||
id="dropdownMenuLink"
|
<multiselect
|
||||||
data-toggle="dropdown" aria-haspopup="true"
|
v-tabindex
|
||||||
aria-expanded="false">
|
ref="unit"
|
||||||
<i class="fas fa-ellipsis-v text-muted"></i>
|
v-model="ingredient.unit"
|
||||||
</a>
|
:options="units"
|
||||||
|
:close-on-select="true"
|
||||||
<div class="dropdown-menu dropdown-menu-right"
|
:clear-on-select="true"
|
||||||
aria-labelledby="dropdownMenuLink">
|
:allow-empty="true"
|
||||||
<button type="button" class="dropdown-item"
|
:preserve-search="true"
|
||||||
@click="removeIngredient(step, ingredient)"><i
|
placeholder="{% trans 'Select Unit' %}"
|
||||||
class="fa fa-trash fa-fw"></i> {% trans 'Delete Ingredient' %}
|
tag-placeholder="{% trans 'Select' %}"
|
||||||
</button>
|
:taggable="true"
|
||||||
|
@tag="addUnitType"
|
||||||
<button type="button" class="dropdown-item"
|
:id="`unit_${step_index}_${index}`"
|
||||||
v-if="!ingredient.is_header "
|
label="name"
|
||||||
@click="ingredient.is_header = true"><i
|
track-by="name"
|
||||||
class="fas fa-heading fa-fw"></i> {% trans 'Make Header' %}
|
:multiple="false"
|
||||||
</button>
|
:loading="units_loading"
|
||||||
|
@search-change="searchUnits">
|
||||||
<button type="button" class="dropdown-item"
|
</multiselect>
|
||||||
v-if="ingredient.is_header "
|
</div>
|
||||||
@click="ingredient.is_header = false"><i
|
<div class="col-lg-4 col-md-6 small-padding"
|
||||||
class="fas fa-leaf fa-fw"></i> {% trans 'Make Ingredient' %}
|
v-if="!ingredient.is_header">
|
||||||
</button>
|
<multiselect
|
||||||
|
v-tabindex
|
||||||
<button type="button" class="dropdown-item"
|
ref="food"
|
||||||
v-if="!ingredient.no_amount "
|
v-model="ingredient.food"
|
||||||
@click="ingredient.no_amount = true"><i
|
:options="foods"
|
||||||
class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Disable Amount' %}
|
:close-on-select="true"
|
||||||
</button>
|
:clear-on-select="true"
|
||||||
|
:allow-empty="true"
|
||||||
<button type="button" class="dropdown-item"
|
:preserve-search="true"
|
||||||
v-if="ingredient.no_amount "
|
placeholder="{% trans 'Select Food' %}"
|
||||||
@click="ingredient.no_amount = false"><i
|
tag-placeholder="{% trans 'Select' %}"
|
||||||
class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Enable Amount' %}
|
:taggable="true"
|
||||||
</button>
|
@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" v-model="ingredient.note"
|
||||||
|
placeholder="{% trans 'Note' %}">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-grow-0 small-padding">
|
||||||
|
<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 type="button" class="dropdown-item"
|
||||||
|
@click="removeIngredient(step, ingredient)"><i
|
||||||
|
class="fa fa-trash fa-fw"></i> {% trans 'Delete Ingredient' %}
|
||||||
|
</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> {% trans '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> {% trans '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> {% trans '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> {% trans 'Enable Amount' %}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</draggable>
|
||||||
</draggable>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12" style="text-align: center; margin-top: 8px; margin-bottom: 8px">
|
<div class="col-md-12" style="text-align: center; margin-top: 8px; margin-bottom: 8px">
|
||||||
<button class="btn btn-success" @click="addIngredient(step)"><i class="fa fa-plus"></i>
|
<button class="btn btn-success" @click="addIngredient(step)"><i class="fa fa-plus"></i>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<textarea class="form-control" rows="8" v-model="step.instruction"
|
<textarea class="form-control" rows="8" v-model="step.instruction"
|
||||||
:id="'id_instruction_' + step.id"></textarea>
|
:id="'id_instruction_' + step.id"></textarea>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
</div>
|
</div>
|
||||||
</draggable>
|
</draggable>
|
||||||
@ -309,6 +335,10 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
updateRecipe: function (view_after) {
|
updateRecipe: function (view_after) {
|
||||||
|
this.sortSteps()
|
||||||
|
for (let s of this.recipe.steps) {
|
||||||
|
this.sortIngredients(s)
|
||||||
|
}
|
||||||
this.$http.put("{% url 'api:recipe-detail' recipe.pk %}", this.recipe,
|
this.$http.put("{% url 'api:recipe-detail' recipe.pk %}", this.recipe,
|
||||||
{}).then((response) => {
|
{}).then((response) => {
|
||||||
console.log(view_after)
|
console.log(view_after)
|
||||||
@ -344,7 +374,7 @@
|
|||||||
},
|
},
|
||||||
addStep: function () { //TODO see if default can be generated from options request
|
addStep: function () { //TODO see if default can be generated from options request
|
||||||
this.recipe.steps.push(
|
this.recipe.steps.push(
|
||||||
{'instruction': '', ingredients: []}
|
{'instruction': '', ingredients: [], kind: 'TEXT'}
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
sortSteps: function () {
|
sortSteps: function () {
|
||||||
@ -376,6 +406,11 @@
|
|||||||
step.ingredients = step.ingredients.filter(item => item !== ingredient)
|
step.ingredients = step.ingredients.filter(item => item !== ingredient)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
removeStep: function (step) {
|
||||||
|
if (confirm('{% trans 'Are you sure that you want to delete this step?' %}')) {
|
||||||
|
this.recipe.steps = this.recipe.steps.filter(item => item !== step)
|
||||||
|
}
|
||||||
|
},
|
||||||
addFoodType: function (tag, index) {
|
addFoodType: function (tag, index) {
|
||||||
let [tmp, step, id] = index.split('_')
|
let [tmp, step, id] = index.split('_')
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user