Fix for duplicating task cards on drag

MinBZK · Jul 11, 2024 · 0faa762 · 0faa762
1 parent 88db620
commit 0faa762
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 24 deletions.
diff --git a/tad/site/static/js/tad.js b/tad/site/static/js/tad.js
@@ -1,21 +1,29 @@
 window.onload = function () {
 
+  // TODO (robbert): we need (better) event handling and displaying of server errors
+  document.body.addEventListener('htmx:sendError', function(evt) {
+    document.getElementById("errorContainer").innerHTML = "<h1>Placeholder: Error while connecting to server</h1";
+  });
+
   const columns = document.getElementsByClassName("progress_cards_container");
   for (let i = 0; i < columns.length; i++) {
     new Sortable(columns[i], { //NOSONAR
       group: 'shared', // set both lists to same group
       animation: 150,
       onEnd: function (evt) {
-        let previousSiblingId = evt.item.previousElementSibling ? evt.item.previousElementSibling.getAttribute("data-id") : "-1";
-        let nextSiblingId = evt.item.nextElementSibling ? evt.item.nextElementSibling.getAttribute("data-id") : "-1";
-        let targetId = "#" + evt.item.getAttribute("id");
-        let form = document.getElementById("cardMovedForm");
-        document.getElementsByName("taskId")[0].value = evt.item.getAttribute("data-id");
-        document.getElementsByName("statusId")[0].value = evt.to.getAttribute("data-id");
-        document.getElementsByName("previousSiblingId")[0].value = previousSiblingId;
-        document.getElementsByName("nextSiblingId")[0].value = nextSiblingId;
-        form.setAttribute("hx-target", targetId);
-        htmx.trigger("#cardMovedForm", "cardmoved");
+        if (evt.oldIndex !== evt.newIndex || evt.from !== evt.to) {
+          let previousSiblingId = evt.item.previousElementSibling ? evt.item.previousElementSibling.getAttribute("data-id") : "-1";
+          let nextSiblingId = evt.item.nextElementSibling ? evt.item.nextElementSibling.getAttribute("data-id") : "-1";
+          let targetId = "#" + evt.item.getAttribute("data-target-id");
+          let toStatusId = evt.to.getAttribute("data-id");
+          let form = document.getElementById("cardMovedForm");
+          document.getElementsByName("taskId")[0].value = evt.item.getAttribute("data-id");
+          document.getElementsByName("statusId")[0].value = toStatusId;
+          document.getElementsByName("previousSiblingId")[0].value = previousSiblingId;
+          document.getElementsByName("nextSiblingId")[0].value = nextSiblingId;
+          form.setAttribute("hx-target", targetId);
+          htmx.trigger("#cardMovedForm", "cardmoved");
+        }
       }
     });
   }

diff --git a/tad/site/templates/macros/render.html.jinja b/tad/site/templates/macros/render.html.jinja
@@ -1,14 +1,28 @@
-{% macro render_task_card(task) -%}
-    {% include "task.html.jinja" %}
-{%- endmacro -%}
-
 {% macro column(status, translations, tasks_service) -%}
     <div class="col span_1_of_4">
         <h3 class="text-center-horizontal margin-bottom--small">{{ translations[status.name] }}</h3>
         <div class="progress_cards_container sortable" data-id="{{ status.id }}" id="column-{{ status.id }}">
             {% for task in tasks_service.get_tasks(status.id) %}
-                {{ render_task_card(task) }}
+                {{ render_task_card_full(task) }}
             {% endfor %}
         </div>
     </div>
 {% endmacro -%}
+
+{% macro render_task_card_full(task) -%}
+<div class="progress_card_container" data-target-id="card-content-{{ task.id }}" id="card-container-{{ task.id }}" data-id="{{ task.id }}">
+    {{ render_task_card_content(task) }}
+</div>
+{% endmacro %}
+
+{% macro render_task_card_content(task) -%}
+<div id="card-content-{{ task.id }}" data-id="{{ task.id }}">
+    <h4 class="margin-bottom--extra-small">{{ task.title }}</h4>
+    <div>{{ task.description }}</div>
+    {% if task.user_id %}
+        <div class="progress_card_assignees_container">
+            <img class="progress_card_assignees_image" src="/static/images/img_avatar.png" alt="Assigned to Avatar"/>
+        </div>
+    {% endif %}
+</div>
+{% endmacro %}
diff --git a/tad/site/templates/task.html.jinja b/tad/site/templates/task.html.jinja
@@ -1,9 +1,2 @@
-<div class="progress_card_container" id="card-{{ task.id }}" data-id="{{ task.id }}">
-    <h4 class="margin-bottom--extra-small">{{ task.title }}</h4>
-    <div>{{ task.description }}</div>
-    {% if task.user_id %}
-        <div class="progress_card_assignees_container">
-            <img class="progress_card_assignees_image" src="/static/images/img_avatar.png" alt="Assigned to Avatar"/>
-        </div>
-    {% endif %}
-</div>
+{% import 'macros/render.html.jinja' as render %}
+{{ render.render_task_card_content(task) }}