_.

atlas/templates/atlas/casecollection_form.html

@@ -32,9 +32,9 @@
             {{ form.as_table }}
         </table>
         <h3>Cases:</h3>
-        Add cases here. These can only be added once created (they can also be added to cases on creation).
+        Add cases here. These can only be added once created (they can also be added to cases on creation). Click and drag to change order.
         <input type="button" value="Add More Cases" id="add_more_case">
-        <div id="case_formset">
+        <div id="case_formset" class="sortable">
             {% for form in case_formset %}
                 <ul class="no-error case-formset">
                     {{form.non_field_errors}}
@@ -43,6 +43,7 @@
                 </ul>
             {% endfor %}
         </div>
+        <button id="case-order-button" title="click and drag to update case order">Update case order</button>
         {{ case_formset.management_form }}
         <input type="submit" class="submit-button" value="Submit" name="submit">
     </form>
@@ -51,4 +52,19 @@
             {{ case_formset.empty_form.as_ul }}
         </ul>
     </div>
+    <script>
+$(document).ready(() => {
+    sortable('.sortable');
+
+    $("#case-order-button").click(() => {
+       let cases = $("#case_formset ul");
+       cases.each((n, el) => {
+           input_el = $(el).find("input[name$='sort_order']");
+           console.log(input_el);
+           input_el.val(n+1);
+       })
+    })
+})
+    </script>
+
 {% endblock %}