Task Reordering

#1. To Make TodoList Sortable by Using sortable.js NPM package.

To achieve TodoList Sortable perform the below instruction

https://www.npmjs.com/package/sortablejswww.npmjs.com

1. Include the npm package(via cdn) in task_list.html

   <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

2. Include a script to perform the Sortable TodoList

   <script>
       var taskList = document.getElementById("tasklist");
   
       let sortable = Sortable.create(taskList, {
           handle: '.handle',
           ghostClass: 'dropArea',
           chosenClass: 'selectedTask',
       });
   </script>

#2 To make sortable TodoList permanent.

1. Setting unique key for each task using HTML attribute called data-position="{{task.pk}}"

2. Define a hidden form to get the unique keys as input to perform task list to reordering in permanent.

   <!-- Hidden form. To collect the unique keys of the tasks list -->
   <form style="display: none;" id="reorderForm" method="post" action="{% url 'task-reorder' %}">
       {% csrf_token %}
       <input type="hidden" id="positionInput" name="position">
   </form>

3. To write a script to collect the actual unique keys of the tasks list:

   var reorderForm = document.getElementById("reorderForm");
   var positionInput = document.getElementById("positionInput");
   
   function reordering() {
           const rows = document.getElementsByClassName("task-wrapper");
           let pos = [];
           for (let row of rows) {
               pos.push(row.dataset.position);
           }
           console.log(pos.join(","))
           positionInput.value = pos.join(',');
           reorderForm.submit();
       }
       let result = document.getElementsByClassName("task-wrapper");
       document.ondrop = reordering

For every drag and drop of task list, above function is invoked.

From the function, after collecting unique keys from the current todolist and store it in pos list variable.

1. Getting collected unique keys using input tag

   <!-- Hidden form. To get collected unique keys -->
   <form style="display: none;" id="reorderForm" method="post" action="{% url 'task-reorder' %}">
       {% csrf_token %}
       <input type="hidden" id="positionInput" name="position">
   </form>

2. We cannot process the above form data in django so we have to create forms.py file

   todo/forms.py

   from django import forms
   
   # Reordering Form and View
   
   class PositionForm(forms.Form):
       position = forms.CharField()
   

3. Now write a django view to process the reordering operation

   from django.shortcuts import redirect
   from django.db import transaction
   from .forms import PositionForm

   class TaskReorder(View):
       def post(self, request):
           form = PositionForm(request.POST)
   
           if form.is_valid():
               positionList = form.cleaned_data["position"].split(',')
   
               with transaction.atomic():
                   self.request.user.set_task_order(positionList)
   
           return redirect(reverse_lazy('tasks'))

4. Mapping the task-reordering url

   path('task-reorder/', TaskReorder.as_view(), name='task-reorder'),