From 3235333873f8520c897aff650a66dd884a53ec55 Mon Sep 17 00:00:00 2001
From: Benbb96 <benbb96@gmail.com>
Date: Sun, 30 Apr 2023 03:56:42 +0200
Subject: [PATCH] Drag & drop on ticket checklist tasks edition page + Use an
 empty form in order to better generate new task row dynamically

---
 .../templates/helpdesk/checklist_form.html    | 37 +++++++++----------
 .../helpdesk/include/task_form_row.html       | 16 ++++++++
 .../templates/helpdesk/ticket_desc_table.html |  2 +-
 helpdesk/views/staff.py                       |  6 +--
 4 files changed, 37 insertions(+), 24 deletions(-)
 create mode 100644 helpdesk/templates/helpdesk/include/task_form_row.html

diff --git a/helpdesk/templates/helpdesk/checklist_form.html b/helpdesk/templates/helpdesk/checklist_form.html
index fbc9a8e7..ba45cfd9 100644
--- a/helpdesk/templates/helpdesk/checklist_form.html
+++ b/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>
-                        {{ form.id }}
-                        <td>
-                            {{ form.description }}
-                            {{ form.description.errors }}
-                        </td>
-                        <td>
-                            {{ form.position }}
-                            {{ form.position.errors }}
-                        </td>
-                        <td>
-                            {{ form.DELETE }}
-                            {{ form.DELETE.errors }}
-                        </td>
-                        </tr>
+                        {% include 'helpdesk/include/task_form_row.html' %}
                     {% 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);
-                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>`)
+                $('#tasks').append(`{% include 'helpdesk/include/task_form_row.html' with form=formset.empty_form %}`.replace(/__prefix__/g, formCount))
                 idTasksTotalForms.val(parseInt(formCount) + 1);
+                updatePosition()
             });
+
+            $('#tasks').sortable({
+                handle: '.handle',
+                onChange: updatePosition
+            })
         })
     </script>
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/include/task_form_row.html b/helpdesk/templates/helpdesk/include/task_form_row.html
new file mode 100644
index 00000000..bfe9f3da
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/helpdesk/templates/helpdesk/ticket_desc_table.html b/helpdesk/templates/helpdesk/ticket_desc_table.html
index 1c3d3cfd..8cf00829 100644
--- a/helpdesk/templates/helpdesk/ticket_desc_table.html
+++ b/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">
diff --git a/helpdesk/views/staff.py b/helpdesk/views/staff.py
index e8f3f1e5..dbc471ec 100644
--- a/helpdesk/views/staff.py
+++ b/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():