implemented interruption of fetch requests if task is clicked in kanban

frontend/src/routes/project/Kanban.svelte

@@ -22,6 +22,8 @@
     let tasks        = $state({});
     let users        = {};
     let columns      = $derived(project.allowed_states?Object.keys(project.allowed_states).length+1:1);
+    const controller = new AbortController();
+    const signal = controller.signal;
 
     $effect(() => updateUrl(filter_input));
 
@@ -91,15 +93,20 @@
     }
 
     async function load(){
-        await loadProject();
-        await loadTasks({project_id:+id,parent_task_id:0});
-        ready = true;
-        loadTags();
+        try {
+            await loadProject();
+            await loadTasks({project_id:+id,parent_task_id:0});
+            ready = true;
+            loadTags();
+        } catch (ignored) {}
     }
 
     async function loadProject(){
         const url  = api(`project/${id}`);
-        const resp = await fetch(url,{credentials:'include'});
+        const resp = await fetch(url,{
+            credentials:'include',
+            signal: signal
+        });
         if (resp.ok){
             project = await resp.json();
             for (var uid of Object.keys(project.members)){
@@ -114,12 +121,17 @@
     }
 
     async function loadTag(task){
-        const url  = api(`tags/task/${task.id}`);
-        const resp = await fetch(url,{credentials:'include'});
-        if (resp.ok) {
-            const tags = await resp.json();
-            if (tags.length) task.tags = tags.sort();
-        }
+        try {
+            const url  = api(`tags/task/${task.id}`);
+            const resp = await fetch(url,{
+                credentials:'include',
+                signal: signal
+            });
+            if (resp.ok) {
+                const tags = await resp.json();
+                if (tags.length) task.tags = tags.sort();
+            }
+        } catch (ignored) {}
     }
 
     function loadTags(){
@@ -138,7 +150,8 @@
         selector.show_closed = true;
         selector.no_index    = true;
         var resp = await fetch(url,{
-            credentials : 'include',
+            credentials :'include',
+            signal      : signal,
             method      : 'POST',
             body        : JSON.stringify(selector)
         });
@@ -172,6 +185,11 @@
         highlight = {user:user_id,state:state};
     }
 
+    function openTask(task_id){
+        controller.abort();
+        router.navigate(`/task/${task_id}/view`)
+    }
+
     onMount(load);
 </script>
 
@@ -201,12 +219,12 @@
                 {#if stateList[state]}
                 {#each Object.values(stateList[state]).sort((a,b) => a.name.localeCompare(b.name)) as task}
     {#if !filter || task.name.toLowerCase().includes(filter) || (task.tags && task.tags.filter(tag => tag.toLowerCase().includes(filter)).length)}
-                    <Card onclick={() => router.navigate(`/task/${task.id}/view`)} ondragstart={ev => dragged=task} {task} />
+                    <Card onclick={e => openTask(task.id)} ondragstart={ev => dragged=task} {task} />
     {/if}
                 {/each}
                 {/if}
                 <div class="add_task">
-                    <LineEditor value={t('add_task')} editable={true} onSet={(name) => create(name,uid,state)}/>
+                    <LineEditor value={t('add_object',{object:t('task')})} editable={true} onSet={(name) => create(name,uid,state)}/>
                 </div>
             </div>
         {/each}

frontend/src/routes/task/View.svelte

@@ -46,7 +46,6 @@
     function updateOn(id){
         task = null;
         loadTask();
-        console.log(router);
     }
 
     function addChild(){