Fix form using json

tad/routers/tasks.py

@@ -20,9 +20,19 @@ async def test():
     return [{"username": "Rick"}, {"username": "Morty"}]
 
 
-# TODO this is an ugly work-around, we need a JSON object instead
 @router.post("/move", response_class=HTMLResponse)
-async def move_task(
+async def move_task(request: Request):
+    json = await request.json()
+    print(json)
+    task = tasks_service.move_task(
+        int(json["taskId"]), int(json["statusId"]), json["previousSiblingId"], json["nextSiblingId"]
+    )
+    return templates.TemplateResponse(request=request, name="task.jinja", context={"task": task})
+
+
+# TODO this is an ugly work-around, we need a JSON object instead
+@router.post("/move-form", response_class=HTMLResponse)
+async def move_task_form(
     request: Request,
     taskId: Annotated[int, Form()],
     statusId: Annotated[int, Form()],

tad/services/tasks_service.py

@@ -42,6 +42,7 @@ def _get_task_by_id(self, task_id: int) -> Task:
         return next(task for task in self._tasks if task.id == task_id)
 
     def _get_status_by_id(self, status_id: int) -> Status:
+        print(status_id)
         return next(status for status in self._statuses if status.id == status_id)
 
     def get_statuses(self) -> []:
@@ -78,14 +79,14 @@ def move_task(self, task_id, status_id, previous_sibling_id, next_sibling_id) ->
         if not previous_sibling_id and not next_sibling_id:
             task.sort_order = 10
         elif previous_sibling_id and next_sibling_id:
-            previous_task = self.get_task(previous_sibling_id)
-            next_task = self.get_task(next_sibling_id)
+            previous_task = self.get_task(int(previous_sibling_id))
+            next_task = self.get_task(int(next_sibling_id))
             new_sort_order = previous_task.sort_order + ((next_task.sort_order - previous_task.sort_order) / 2)
             task.sort_order = new_sort_order
         elif previous_sibling_id and not next_sibling_id:
-            previous_task = self.get_task(previous_sibling_id)
+            previous_task = self.get_task(int(previous_sibling_id))
             task.sort_order = previous_task.sort_order + 10
         elif not previous_sibling_id and next_sibling_id:
-            next_task = self.get_task(next_sibling_id)
+            next_task = self.get_task(int(next_sibling_id))
             task.sort_order = next_task.sort_order / 2
         return task

tad/site/static/js/tad.js

@@ -8,25 +8,33 @@ window.onload = function () {
       animation: 150,
       onEnd: function (evt) {
         console.log(evt);
+        let previousSiblingId = evt.item.previousElementSibling ? evt.item.previousElementSibling.getAttribute("data-id") : "";
+        let nextSiblingId = evt.item.nextElementSibling ? evt.item.nextElementSibling.getAttribute("data-id") : "";
         let data = {
           "taskId": evt.item.getAttribute("data-id"),
           "statusId": evt.to.getAttribute("data-id"),
+          "previousSiblingId": previousSiblingId,
+          "nextSiblingId": nextSiblingId
         }
-        if (evt.item.previousElementSibling) {
-          data["previousSiblingId"] = evt.item.previousElementSibling.getAttribute("data-id");
-        }
-        if (evt.item.nextElementSibling) {
-          data["nextSiblingId"] = evt.item.nextElementSibling.getAttribute("data-id");
-        }
+
         console.log(JSON.stringify(data));
 
         let headers = {
           'Content-Type': 'application/json'
         };
         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);
+        console.log(form)
+        htmx.trigger("#cardMovedForm", "cardmoved");
+
         // TODO: this must be a JSON post, but I can not get it to work with HTMX...
         // https://htmx.org/api/#ajax
-        htmx.ajax('POST', "/tasks/move", {values: data, target: targetId, swap: 'outerHTML'})
+        //htmx.ajax('POST', "/tasks/move", {values: JSON.stringify({ data: data }), headers: headers, target: targetId, swap: 'outerHTML'})
       }
     });
   }

tad/site/templates/default_layout.jinja

@@ -52,10 +52,11 @@
     </nav>
 </header>
 <div class="container" >
-    <form id="cardMovedForm" hx-post="/cards/move" hx-ext="json-enc" hx-trigger="cardmoved" hx-target="#board" class="">
-        <input id="fromList" type="hidden" name="from" value="board">
-        <input id="toList" type="hidden" name="to" value="board">
-        <input id="movedCard" type="hidden" name="movedCard" value="">
+    <form id="cardMovedForm" hx-post="/tasks/move" hx-ext="json-enc" hx-trigger="cardmoved" hx-swap="outerHTML" hx-target="#board" class="">
+        <input type="hidden" name="taskId" value="">
+        <input type="hidden" name="statusId" value="">
+        <input type="hidden" name="previousSiblingId" value="">
+        <input type="hidden" name="nextSiblingId" value="">
     </form>
     <h1 class="margin-bottom--large">Project X</h1>
     <div class="section group">