Drag & drop on ticket checklist tasks edition page + Use an empty form in order to better generate new task row dynamically

helpdesk/templates/helpdesk/checklist_form.html

@@ -45,28 +45,14 @@
                 <table class="table">
                     <thead>
                     <tr>
+                        <th class="text-right">{% trans "Position" %}</th>
                         <th>{% trans "Description" %}</th>
-                        <th>{% trans "Position" %}</th>
                         <th class="text-center">{% trans "Delete?" %}</th>
                     </tr>
                     </thead>
                     <tbody id="tasks">
                     {% for form in formset %}
-                        <tr>
+                        {% include 'helpdesk/include/task_form_row.html' %}
-                        {{ form.id }}
-                        <td>
-                            {{ form.description }}
-                            {{ form.description.errors }}
-                        </td>
-                        <td>
-                            {{ form.position }}
-                            {{ form.position.errors }}
-                        </td>
-                        <td>
-                            {{ form.DELETE }}
-                            {{ form.DELETE.errors }}
-                        </td>
-                        </tr>
                     {% endfor %}
                     </tbody>
                 </table>
@@ -90,17 +76,28 @@
 {% endblock %}
 
 {% block helpdesk_js %}
+    <script src="https://unpkg.com/sortablejs-make/Sortable.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
     <script>
+        const updatePosition = () => {
+            $('#tasks tr').each((index, taskRow) => {
+                $(taskRow).find('input[id$=position]').val(index + 1)
+            })
+        }
+
         $(() => {
             const idTasksTotalForms = $('#id_tasks-TOTAL_FORMS')
             $('#addRow').on('click', function() {
                 const formCount = idTasksTotalForms.val()
-                const description = '{{ formset.empty_form.description|escapejs }}'.replace(/__prefix__/g, formCount);
+                $('#tasks').append(`{% include 'helpdesk/include/task_form_row.html' with form=formset.empty_form %}`.replace(/__prefix__/g, formCount))
-                const position = '{{ formset.empty_form.position|escapejs }}'.replace(/__prefix__/g, formCount);
-                const delete_checkbox = '{{ formset.empty_form.DELETE|escapejs }}'.replace(/__prefix__/g, formCount);
-                $('#tasks').append(`<tr><td>${description}</td><td>${position}</td><td>${delete_checkbox}</td></tr>`)
                 idTasksTotalForms.val(parseInt(formCount) + 1);
+                updatePosition()
             });
+
+            $('#tasks').sortable({
+                handle: '.handle',
+                onChange: updatePosition
+            })
         })
     </script>
 {% endblock %}

helpdesk/templates/helpdesk/include/task_form_row.html

@@ -0,0 +1,16 @@
+<tr>
+    {{ form.id }}
+    <td title="Drag & Drop" class="text-right handle">
+        <i class="fas fa-grip-vertical"></i>
+        {{ form.position }}
+        {{ form.position.errors }}
+    </td>
+    <td>
+        {{ form.description }}
+        {{ form.description.errors }}
+    </td>
+    <td>
+        {{ form.DELETE }}
+        {{ form.DELETE.errors }}
+    </td>
+</tr>

helpdesk/templates/helpdesk/ticket_desc_table.html

@@ -175,7 +175,7 @@
                         <th class="table-active">{% trans "Checklists" %}</th>
                         <td colspan="3">
                             <div class="container-fluid">
-                                <div class="row">
+                                <div class="row align-items-baseline">
                                     {% for checklist in ticket.checklists.all %}
                                         <div class="col-sm-4 col-xs-12">
                                             <div class="card mb-4">

helpdesk/views/staff.py

@@ -20,7 +20,7 @@ from django.core.exceptions import PermissionDenied, ValidationError
 from django.core.handlers.wsgi import WSGIRequest
 from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
 from django.db.models import Q
-from django.forms import inlineformset_factory, TextInput, NumberInput
+from django.forms import inlineformset_factory, TextInput, HiddenInput
 from django.http import Http404, HttpResponse, HttpResponseRedirect, JsonResponse
 from django.shortcuts import get_object_or_404, redirect, render
 from django.urls import reverse, reverse_lazy
@@ -454,11 +454,11 @@ def edit_ticket_checklist(request, ticket_id, checklist_id):
         formset=FormControlDeleteFormSet,
         fields=['description', 'position'],
         widgets={
+            'position': HiddenInput(),
             'description': TextInput(attrs={'class': 'form-control'}),
-            'position': NumberInput(attrs={'class': 'form-control'}),
         },
         can_delete=True,
-        extra=1
+        extra=0
     )
     formset = TaskFormSet(request.POST or None, instance=checklist)
     if form.is_valid() and formset.is_valid():