From 9caec2dff272cb47317506d9634525f38a3419fc Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Wed, 1 Jul 2020 21:53:41 +0200
Subject: [PATCH] step sidebar sorting

---
 .../templates/forms/edit_internal_recipe.html | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/cookbook/templates/forms/edit_internal_recipe.html b/cookbook/templates/forms/edit_internal_recipe.html
index ad0a8072e..931c0247f 100644
--- a/cookbook/templates/forms/edit_internal_recipe.html
+++ b/cookbook/templates/forms/edit_internal_recipe.html
@@ -110,7 +110,8 @@
                                     </button>
 
                                     <button class="dropdown-item"
-                                            @click="moveStep(step, (step_index + 1))" v-if="step_index != (recipe.steps.length - 1)">
+                                            @click="moveStep(step, (step_index + 1))"
+                                            v-if="step_index != (recipe.steps.length - 1)">
                                         <i class="fa fa-arrow-down fa-fw"></i> {% trans 'Move Down' %}
                                     </button>
                                 </div>
@@ -327,7 +328,7 @@
 {% block content_xl_right %}
     <div class="sticky-top" style="top: 2vh">
         <div class="row">
-            <div class="col-md-8">
+            <div class="col-md-11">
                 <button type="button" @click="updateRecipe(true)"
                         class="btn btn-success btn-block shadow-none">{% trans 'Save & View' %}</button>
 
@@ -341,6 +342,27 @@
                    class="btn btn-secondary btn-block shadow-none">{% trans 'View Recipe' %}</a> <br/>
             </div>
         </div>
+        <br/>
+        <div class="row" v-if="recipe !== undefined">
+            <div class="col-md-11">
+                <i class="fas fa-sort-amount-down-alt"></i> {% trans 'Steps' %}
+                <draggable :list="recipe.steps" group="steps_sorter"
+                           :empty-insert-threshold="10" handle=".handle" @sort="sortSteps()" class="list-group">
+                    <div v-for="step, step_index in recipe.steps" class="list-group-item">
+                        <div class="d-flex justify-content-center align-items-center">
+                            <div class="handle flex-grow-0">
+                                <i class="fas fa-sort "></i>
+                            </div>
+                            <div class="flex-fill" style="padding-left: 4px">
+                                [[step.name]]
+                            </div>
+                        </div>
+
+
+                    </div>
+                </draggable>
+            </div>
+        </div>
     </div>
 {% endblock %}