time step + step delete + sorting improvement

cookbook/migrations/0070_auto_20200701_2007.py

@@ -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),
+        ),
+    ]

cookbook/models.py

@@ -160,11 +160,13 @@ class Ingredient(models.Model):
 
 class Step(models.Model):
     TEXT = 'TEXT'
+    TIME = 'TIME'
 
     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)
     ingredients = models.ManyToManyField(Ingredient, blank=True)
+    time = models.IntegerField(default=0, blank=True)
     order = models.IntegerField(default=0)
 
     class Meta:

cookbook/templates/forms/edit_internal_recipe.html

@@ -38,7 +38,6 @@
                 <div class="col-md-12">
                     <label for="id_name"> {% trans 'Name' %}</label>
                     <input class="form-control" id="id_name" v-model="recipe.name">
-
                 </div>
             </div>
             <br/>
@@ -82,19 +81,40 @@
 
                     <div class="row">
                         <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 class="row">
-                        <div class="col-md-12">
+                        <div class="col-md-8">
                             <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'">
                         </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 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"
                                            :empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)">
                                     <div class="col-md-12" v-for="ingredient, index in step.ingredients"
@@ -109,12 +129,15 @@
                                             </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="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">
                                                 </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
                                                             v-tabindex
                                                             ref="unit"
@@ -136,7 +159,8 @@
                                                             @search-change="searchUnits">
                                                     </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">
                                                     <multiselect
                                                             v-tabindex
                                                             ref="food"
@@ -225,6 +249,8 @@
                                   :id="'id_instruction_' + step.id"></textarea>
                             </div>
                         </div>
+                    </template>
+
                     <br/>
                 </div>
             </draggable>
@@ -309,6 +335,10 @@
                     })
                 },
                 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,
                         {}).then((response) => {
                         console.log(view_after)
@@ -344,7 +374,7 @@
                 },
                 addStep: function () { //TODO see if default can be generated from options request
                     this.recipe.steps.push(
-                        {'instruction': '', ingredients: []}
+                        {'instruction': '', ingredients: [], kind: 'TEXT'}
                     )
                 },
                 sortSteps: function () {
@@ -376,6 +406,11 @@
                         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) {
                     let [tmp, step, id] = index.split('_')