step ordering

This commit is contained in:
vabene1111
2020-06-29 20:45:30 +02:00
parent 577af85d38
commit e2508cbc6f

View File

@@ -76,11 +76,13 @@
</div> </div>
</div> </div>
<draggable :list="recipe.steps" group="steps"
:empty-insert-threshold="10" handle=".handle" @sort="sortSteps()">
<div v-for="step, step_index in recipe.steps" style="margin-top: 1vh"> <div v-for="step, step_index in recipe.steps" style="margin-top: 1vh">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h3>{% trans 'Step' %} [[step_index+1]]</h3> <h3><i class="fas fa-arrows-alt-v handle"></i> {% trans 'Step' %} [[step_index+1]]</h3>
</div> </div>
</div> </div>
@@ -95,8 +97,9 @@
<div class="row"> <div class="row">
<div class="col-md-12" style="margin-top: 12px"> <div class="col-md-12" style="margin-top: 12px">
<draggable :list="step.ingredients" group="ingredients" <draggable :list="step.ingredients" group="ingredients"
:empty-insert-threshold="10" handle=".handle" @sort="sortStep(step)"> :empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)">
<div class="col-md-12" v-for="ingredient, index in step.ingredients" :key="ingredient.id" <div class="col-md-12" v-for="ingredient, index in step.ingredients"
:key="ingredient.id"
style="margin-top: 8px"> style="margin-top: 8px">
<hr class="d-md-none"/> <hr class="d-md-none"/>
@@ -174,7 +177,8 @@
<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> <button class="btn btn-success" @click="addIngredient(step)"><i class="fa fa-plus"></i>
</button>
</div> </div>
</div> </div>
@@ -186,7 +190,7 @@
</div> </div>
<br/> <br/>
</div> </div>
</draggable>
<button type="button" @click="updateRecipe(true)" <button type="button" @click="updateRecipe(true)"
class="btn btn-success shadow-none">{% trans 'Save & View' %}</button> class="btn btn-success shadow-none">{% trans 'Save & View' %}</button>
<button type="button" @click="updateRecipe(false)" <button type="button" @click="updateRecipe(false)"
@@ -306,7 +310,12 @@
{'instruction': '', ingredients: []} {'instruction': '', ingredients: []}
) )
}, },
sortStep: function (step) { sortSteps: function () {
this.recipe.steps.forEach(function (element, index) {
element.order = index
});
},
sortIngredients: function (step) {
step.ingredients.forEach(function (element, index) { step.ingredients.forEach(function (element, index) {
element.order = index element.order = index
}); });
@@ -321,7 +330,7 @@
'note': '', 'note': '',
'order': 0, 'order': 0,
}) })
this.sortStep(step) this.sortIngredients(step)
}, },
removeIngredient: function (step, ingredient) { removeIngredient: function (step, ingredient) {
if (confirm('{% trans 'Are you sure that you want to delete this ingredient?' %}')) { if (confirm('{% trans 'Are you sure that you want to delete this ingredient?' %}')) {