added Sortable js for state definitions list

admin/templates/states_panel.html

@@ -17,22 +17,37 @@
   <div class="col">
     <h4>{% trans "State Definitions" %}</h4>
     {% if state_definitions %}
-      <ul id="sortable" class="list-group mb-4">
+      <p>{% trans "Move state definitions to reorder" %}</p>
-        {% for state_definition in state_definitions %}
+      <table class="table table-hover table-mb-4">
-          <li class="list-group-item d-flex justify-content-between align-items-center" data-id="{{ state_definition.id }}">
+        <thead>
-            <div class="d-flex align-items-center">
+          <tr>
-              <span class="me-4 display-7">{{ state_definition.order }}</span>
+            <th scope="col">{% trans "Order" %}</th>
-              <div>
+            <th scope="col">{% trans "State" %}</th>
-                <strong>  {{ state_definition.state }}</strong>  <br>
+            <th scope="col"></th>
-              </div>
+          </tr>
-            </div>
+        </thead>
-            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteStateModal{{ state_definition.id }}">
+        <tbody id="sortable_list">
-              {% trans "Delete" %}
+          {% for state_definition in state_definitions %}
-            </button>
+            <tr data-id="{{ state_definition.id }}">
-          </li>
+              <td class="order-number">{{ state_definition.order }}</td>
-        {% endfor %}
+              <td>{{ state_definition.state }}</td>
-      </ul>
+              <td class="text-end">
-    {% else %}
+                <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteStateModal{{ state_definition.id }}">
+                  {% trans "Delete" %}
+                </button>
+              </td> 
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+      <form id="orderingForm" method="post">
+        {% csrf_token %}
+        <input type="hidden" id="orderingInput" name="ordering">
+         <button id="saveOrderBtn" class="btn btn-outline-primary mt-5 float-start" style="display: none;">{% trans "Save" %}</button>
+      </form>
+
+
+    {% else %}  
       <div class="alert alert-primary text-center mt-5" role="alert">
         {% trans "No states found on current organization" %}
       </div>
@@ -69,7 +84,6 @@
 </div>
 
 <!-- delete state definition Modal -->
-{% if state_definitions %}
 {% for state_definition in state_definitions %}
 <div class="modal fade" id="deleteStateModal{{ state_definition.id }}" tabindex="-1" aria-labelledby="deleteStateModalLabel{{ state_definition.id }}" aria-hidden="true">
   <div class="modal-dialog">
@@ -98,6 +112,32 @@
   </div>
 </div>
 {% endfor %}
-{% endif %}
+
+
+<script>
+  //following https://dev.to/nemecek_f/django-how-to-let-user-re-order-sort-table-of-content-with-drag-and-drop-3nlp
+  const saveOrderingButton = document.getElementById('saveOrdering');
+  const orderingForm = document.getElementById('orderingForm');
+  const formInput = orderingForm.querySelector('#orderingInput');
+
+  const sortable = new Sortable(document.getElementById('sortable_list'), {
+      animation: 150,
+      onEnd: function (/**Event*/evt) {
+        document.getElementById('saveOrderBtn').style.display = 'block';
+      }
+    });
+
+ function saveOrdering() {
+    const rows = document.getElementById("groups").querySelectorAll('tr');
+    let ids = [];
+    for (let row of rows) {
+        ids.push(row.dataset.lookup);
+    }
+    formInput.value = ids.join(',');
+    orderingForm.submit();
+ }
+ 
+</script>
+
 
 {% endblock %}

dashboard/templates/base.html

@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
     <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <link href="{% static "/css/bootstrap.min.css" %}" rel="stylesheet">
+    <script src="{% static 'js/Sortable.min.js' %}"></script>
 
     <style>
       .bd-placeholder-img {