working on drag an drop of tasks. this is tricky.

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/task/ListTask.svelte

@@ -2,13 +2,18 @@
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
+    import { dragged }       from './dragndrop.svelte.js';
     import { api }           from '../../urls.svelte.js';
     import { t }             from '../../translations.svelte.js';
 
     import TaskList          from './TaskList.svelte';
     import LineEditor        from '../../Components/LineEditor.svelte';
 
-    let { estimated_time, show_closed, task } = $props();
+    let {
+        estimated_time,
+        show_closed,
+        task
+    } = $props();
     let children = $state(null);
     let deleted  = $state(false);
     let error    = $state(null);
@@ -34,6 +39,40 @@
         }
     }
 
+    function drag(ev,task){
+        ev.stopPropagation();
+        task.new_parent = false;
+        dragged.element = task;
+    }
+
+    function dragend(ev,task){
+        ev.stopPropagation();
+        setTimeout(() => {
+        if (dragged.moved){
+            console.log("removing",ev.target);
+            ev.target.remove();
+        }
+        },500);
+    }
+
+    async function dropAt(ev,target){
+        ev.stopPropagation();
+        if (dragged.element.id == target.id) return;
+        const  url = api(`task/${dragged.element.id}`);
+        const resp = await fetch(url,{
+            credentials : 'include',
+            method      : 'PATCH',
+            body        : JSON.stringify({ parent_task_id : target.id})
+        });
+        if (resp.ok) {
+            dragged.moved = true;
+            children[dragged.element.id]=dragged.element;
+        } else {
+            error = await resp.text();
+        }
+        return false;
+    }
+
     async function loadChildren(){
         const url  = api('task/list');
         const data = {
@@ -80,14 +119,13 @@
 
     if (task.estimated_time){
         estimated_time.sum += task.estimated_time;
-        console.log(estimated_time)
     }
 
     onMount(loadChildren);
 </script>
 
 {#if !deleted}
-<li class="task {task.status.name.toLowerCase()}">
+<li draggable="true" ondrop={ev => dropAt(ev, task)} ondragover={e => e.preventDefault()} ondragend={e => dragend(e,task)} ondragstart={e => drag(e,task)} class="task {task.status.name.toLowerCase()}">
     <LineEditor bind:value={task.name} onclick={openTask} editable={true} onSet={setName} type="a" />
     {#if task.estimated_time}
     <span class="estimated_time">({+task.estimated_time}&nbsp;h)</span>

frontend/src/routes/task/TaskList.svelte

@@ -5,6 +5,7 @@
     let { estimated_time, show_closed, tasks } = $props();
 
     let sortedTasks = $derived.by(() => Object.values(tasks).sort((a, b) => a.name.localeCompare(b.name)));
+
 </script>
 
 <ul>

frontend/src/routes/task/dragndrop.svelte.js

@@ -0,0 +1 @@
+export const dragged = $state({element:null,moved:false});