time step + step delete + sorting improvement

This commit is contained in:
vabene1111 2020-07-01 20:38:35 +02:00
parent 2c5fbc558e
commit 5d70dca039
3 changed files with 181 additions and 121 deletions

View 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),
),
]

View File

@ -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:

View File

@ -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,19 +81,40 @@
<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"> <template v-if="step.kind == 'TIME'">
<div class="row" style="margin-top: 12px">
<div class="col-md-12">
<label :for="'id_step_' + step.id + '_time'">{% trans 'Waiting time in Minutes' %}</label>
<input class="form-control" v-model="step.time" :id="'id_step_' + step.id + '_time'">
</div>
</div>
</template>
<template v-if="step.kind == 'TEXT'">
<div class="row" style="margin-top: 12px">
<div class="col-md-12">
<draggable :list="step.ingredients" group="ingredients" <draggable :list="step.ingredients" group="ingredients"
:empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)"> :empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)">
<div class="col-md-12" v-for="ingredient, index in step.ingredients" <div class="col-md-12" v-for="ingredient, index in step.ingredients"
@ -109,12 +129,15 @@
</div> </div>
<div class="flex-fill row" style="margin-left: 4px; margin-right: 4px"> <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="col-lg-2 col-md-6 small-padding"
<input class="form-control" v-model="ingredient.amount" type="number" v-if="!ingredient.is_header">
<input class="form-control" v-model="ingredient.amount"
type="number"
v-if="!ingredient.no_amount"> v-if="!ingredient.no_amount">
</div> </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">
<multiselect <multiselect
v-tabindex v-tabindex
ref="unit" ref="unit"
@ -136,7 +159,8 @@
@search-change="searchUnits"> @search-change="searchUnits">
</multiselect> </multiselect>
</div> </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">
<multiselect <multiselect
v-tabindex v-tabindex
ref="food" ref="food"
@ -225,6 +249,8 @@
: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('_')